[7주차] 어찌저찌 해내는 날의 연속.

6/13
 오늘은 react props, usestate 등 전에 배운 것들을 이용해 상품페이지를 하나 만드는 것과 react icons 플러그인, json 파일 정보들을 각각 넣어서 탭 만들기, filter 문, 콜백함수 에 대해 배웠다.
 컴포넌트가 중첩될수록 점점 어려워졌다. map 문으로 json 데이터들을 돌려 각각 맞는 데이터들을 넣어주고 filter 문으로 조건을 달아 거른 데이터만 반복하도록 만들어줬는데 map 문과 filter 문의 정확한 차이를 알 수 없어 어려웠다. 각 li 에 데이터 정보를 넣어줄 때 중괄호 밖에 미리 표시해둔 불러온 컴포넌트를 지우지 않아서 흰화면이 떴다. 그런데 얼마 전 sns 페이지를 만들 때 흰화면 에러를 아직도 해결하지 못한 것이 생각나서 돌아가 살펴봤지만 해결되지 않았다. 강사님 깃허브에 올라와 있는 코드를 복사 붙여넣기 해도 해결이 되지 않아서 결국 강사님의 sns 홈페이지 폴더를 다운로드 받아서 학습했다. 도대체 왜 되지 않았던 것일까? 강사님의 코드를 복사 붙여넣기 했는데도 되지 않았던 것은 아마 파일 이름 오타이거나 리액트 자체의 문제가 아닐까 추측해본다.
 콜백함수는 나의 논리력 부족 탓인지 잘 이해가 되지 않는다. 강사님이 다 만든 걸 보면 어떻게 작동되는지 이해가 되지만 막상 실제로 적용해보려고 하면 뇌가 굳어서 잘 움직이지 않는 것 같다. 앞으로 콜백함수를 많이 사용할 것 같은데 걱정이다.
 어제 배민 js 를 만들 때 다음 페이지로 넘어가면 이미지를 아래에서 위로 올라오게 하는 걸 afterload 메서드를 이용해서 구현하려고 했는데 이미지가 큰건지 자꾸 스크롤바가 생기는 문제가 있었다. 그래서 오늘 윤하님한테 물어봤는데 풀페이지 섹션 안에 overflow:hidden 을 주고 섹션에 width:100vw, height:100vh 를 주면 스크롤바가 생기지 않는다고 해서 그렇게 해봤더니 잘 작동이 되었다.
 그리고 header 가 마지막 섹션으로 가면 서서히 없어지도록 해주고 싶어서 display:none 을 해주고 afterload 메서드를 이용해 마지막 섹션으로 가면 display:block 을 줬는데 그냥 없어지기만 하고 서서히 없어지는 건 되지 않았다. 이것도 오늘 윤하님한테 물어봤더니 opacity:0 으로 주면 된다고 해서 opacity 와 transition 을 같이 줬더니 제대로 작동했다.
하지만 다시 다른 섹션으로 올라가면 나오지 않아서 onleave 메서드를 이용해 opacity 와 transition 을 줬는데 갑자기 섹션 1의 background 가 엄청나게 길어지면서 나머지 섹션이 가려졌다. 끝까지 해결을 하지 못하다가 방금 혹시나 싶어서 onleave 메서드 if 문 안 스타일 준 것에 끝에 세미콜론을 붙였더니 잘 작동했다. 고민을 많이 했는데 세미콜론을 붙이지 않아서 그랬다니 좀 허무했다. 앞으로 이런 실수는 안하도록 노력해야 겠다.

6/14
 배민 js 에 오른쪽 점을 누르면 이동하게 하는 걸 manubar 라고 줬는데 스크립트에 navigation 으로 주면 백그라운드 이미지로 점을 넣는 방법이 나오지 않아서 강사님과 함께 만들었던 풀페이지를 다시 봤더니 menu 와 anchor 메서드로 만들 수 있는 것 같았다. 만들었던 마크업을 복사 붙여넣기하고 내가 원하는 것에 맞도록 수정했더니 제대로 작동했다. 하지만 클릭하면 점에 동그라미 치는 것에서 또 막혀 구글링을 해봐도 답이 나오지 않아서 강사님과 만든 풀페이지를 다시 보니 class: active 를 붙여놨던 게 보였다. 그걸 개발자 검사를 켜서 봤더니 클릭될 때마다 바뀌고 active 로 작동되는 것이었다. 다시 풀페이지 active 를 구글링해보니 active 라는 class 가 풀페이지에 기본적으로 작동되도록 스크립트 설정이 되어 있었다. 그래서 active 클래스에 css를 설정했더니 잘 작동이 되었다.
 지금까지 배운 리액트 복습을 했다. state 에 대한 강의를 봤는데 리액트에는 state 라는 hook 뿐만 아니라 여러가지 hook 이 있는 걸 알 수 있었는데 오랜만에 휴식을 즐기느라 다른 hook 은 보지 못했다. 주말에 한번 봐야겠다.

6/15
 오늘은 promise, fetch 함수, async await 문법, axios 라이브러리, useEffect 에 대해 배웠다.
 아무래도 fetch 함수가 한눈에 보기가 쉬워서 제일 쉬워보인다. 하나씩 검색해보면서 다른 건 이해했는데 useEffect 는 너무 어려웠다. 강의를 봐도 강사님과 했던 코드는 이해하지 못했다. 집에 와서 다시 복습을 했는데도 response => response.data 의 response 는 무슨 뜻인지, useEffect 안의 함수를 쓴 이유가 계속 데이터를 불러들이지 않고 첫 랜더링 때만 부르고 싶어서 그런건지 잘 모르겠다. 아무래도 강사님과 자주 써보면서 익숙해져야 할 것 같다.
배민 js 를 만들 때 첫 섹션에서 새로고침될 때마다 서서히 나타나게 하는 걸 하고 싶어서 애니메이션으로 줬었는데 배민을 참고해보니 처음부터 opacity : 0 을 주고 애니메이션으로 0% 때는 opacity : 0, 100% 때는 opacity : 1 로 되어있었다. 그래서 나도 그렇게 줬는데 그게 문제였던건지 나중에 마지막 섹션에서 헤더가 없어지고 다시 다른 섹션으로 올라가면 나타나도록 하는 게 되지 않았다. onleave 에 줬다가, afterload 에 줬다가, classlist.add 로 줬다가 별 난리를 쳐봐도 되지 않아서 강사님께 여쭤봤더니 afterRender 를 주면 구조가 생성된 직후 바로 함수가 실행된다고 이 메서드를 써보라고 하셔서 애니메이션 줬던 것과 opacity : 0 을 따로 클래스로 빼서 classlist.add 를 해줬더니 첫화면에 나타나는 건 제대로 작동이 됐다. 하지만 아직도 마지막 섹션에서 없어지고 올라가면 다시 나타나는 건 구현이 되지 않았는데 윤주님의 도움으로 off 라는 클래스를 add 하면 마지막 섹션에서 없어지고, on 을 하면 다시 나타나게 되었다. 근데 z-index : -1; opacity : 0; 에 transition : all 1s 을 줬는데도 서서히 되는게 작동이 되지 않았다. 스터디 모임이 시작되어 고치지 못하고 넘어갔다.
 스터디 모임 때 다른 분들이 한걸 봤는데 지영님은 본문 섹션에 이미지가 움직이는 걸 공동 클래스로 주고 다르게 움직이는 건 다른 클래스로 줘서 간단하게 작동되도록 한 걸 봤다. 나는 작동만 되라 하는 마음으로 해서 그런지 코드가 엄청나게 길어졌는데 지영님이 한 걸 보니 나의 긴 코드가 너무나 부끄러워졌고 자극을 많이 받았다.
 그리고 배민은 다른 섹션으로 갔다가 새로고침을 하면 첫번째 섹션으로 돌아왔는데 나는 그렇게 되지 않아서 다른 분들께 물어보니 예진님이 스와이프로 하면 줄 수 있다며 알려주셨는데 나중에 스와이프로도 만들어봐야 겠다는 생각이 들었다.

6/16
라우팅이라는 걸 배웠다.
 라우팅은 한 페이지 안에서 페이지 이동을 하는 기능인데 이제 이런 기능을 배우니 진짜 한 홈페이지를 만들 수 있는 프론트엔드 개발자가 된다는 것이 실감이 났다. 라우터를 깔고 교육을 받던 중 계속 무한 로딩이 떠서 구글링을 해봤더니 버전을 낮춰야 한다고 해서 낮췄다. 그런데 아무래도 잘 되지 않아 강사님께 여쭤봤더니 낮추면 지금까지 작성한 코드와 버전이 맞지 않아 작동이 되지 않을 거라고 하셔서 다른 방법을 찾기 위해 구글링을 해봤다. 그랬더니 package.json 파일의 react-router-dom 이 곳의 버전을 임의로 변경한 후 재설치해봤더니 제대로 작동했다. 아마 버전 반영이 잘 되지 않았던 것 같다.
집에 와서 라우팅에 대해 학습했다. link 태그는 react 의 a 태그라고 하는데 예전에 a 태그를 사용하면 warning 이 떴던 이유가 이거였나 생각이 들었다. useParams, useLocation, useSearchParams, useNavigate 등 다양한 기능들도 있었는데 주말에 천천히 강의와 함께 한번 봐야겠다.

6/17
버튼 누르면 하나씩 이동하는 탭 만들기, useRef 에 대해 배웠고 상세페이지 만들기 과제를 받았다..
 오늘은 하루종일 swiper 라이브러리처럼 버튼을 누르면 하나씩 이동하는 탭을 react 로 구현하는 작업을 했는데 오전에 위로 올라가는 걸 할 땐 나름 따라갔는데 오후에 옆으로 슬라이드하듯 이동하는 건 따라가질 못했다. marginleft 를 줘서 왜 앞으로 가게 해주는건지, 부드럽게 이동시키기 위해 탭을 하나 더 추가해주는 이유가 뭔지 이해하지 못했다. 주말에 쉴 때 다시 복습을 해야할 것 같다. 

6/19
코딩애플 react 강의를 보며 지금까지 강사님과 함께 배운 것 이해하고 복습, 17일자 탭 만들기 이해 및 복습

 

 

배달의 민족 클론코딩 결과물

01234567