🥞 오늘 한 일

• 최종 프로젝트
  • 내가 쓴 공구 및 공구템 작성, 수정 안내 문구 변경된 디자인 적용
  • 기본 체크박스를 디자인 된 이미지로 변경
  • 공구 종료 신청 버튼 스켈레톤으로 변경
  • 모바일 반응형 작업
    • input rounded되는 현상 해결
    • 상세 페이지 인기 공구템 슬라이드 적용
    • 기타 디테일한 수정 사항 적용
  • 튜터님 피드백 적용
    • 남은 럭키박스 갯수 count로 가져오기
    • 결제 폼 페이지 모든 input useInputChange로 변경
    • 결제 storeId, channelKey env 파일로 변경
    • redirectUrl 재설정
• 기술면접 연습
• 최종 주간 발제

기술면접 연습

useEffect의 실행 순서를 컴포넌트 라이프 사이클에 관련지어 설명해주세요.

우선 컴포넌트 라이프 사이클은 create-mount-update-unmount로 진행이 됩니다. 이 때 useEffect는 컴포넌트가 실제 돔에 렌더링되는 mount 때 실행됩니다. update 때는 컴포넌트에 변화가 생겼을 때를 뜻하는데 useEffect의 의존성 배열을 사용하여 특정 값이 변경될 때마다 내부의 작업을 실행하도록 할 수 있고, unmount는 컴포넌트가 실제 돔에서 사라지는 순간으로, useEffect 내의 클린업 함수를 실행합니다.

리액트의 리스트 렌더링에서 key는 왜 넣어줄까요? 그리고 key 값이 유니크해야 하는 이유는 뭘까요?

key 를 넣어주는 이유는 가상 돔에서 어떤 요소가 어디에 있고, 어떻게 순서가 바뀌었는지 등의 순서와 변화를 제대로 감지할 수 있기 때문입니다. 때문에 동일한 key값을 갖게되면 각 요소를 제대로 식별할 수 없기 때문에 유니크한 id를 할당해야 합니다.

리액트의 개발 서버에서는 useEffect가 2번 실행되는 모습이 관찰되는데요. 그 이유가 무엇일까요?

개발 서버에서는 배포 서버와 달리, 리액트의 strictMode 때문에 두 번 실행됩니다. 이 모드를 켜게 되면 useEffect를 마운트, 언마운트, 마운트를 하는 과정을 거치게 되는데, 이 때 언마운트 시 클린업 함수가 잘 작동하는지 여부를 확인하기 위해 사용할 수 있습니다. 배포 시에는 자연스럽게 마운트-언마운트 사이클로 진행이 됩니다.

🍴 돌아보기

(거의) 마지막 주차가 시작되었다... 뭔가 더욱 바빠야할 것 같은데 그렇지 않아서 오히려 불안하다. 그렇다고 해야할 게 없는 건 아니고, 그냥 뭔가 좀 이게 맞나 싶다. 그만큼 열심히 달려왔다는 거겠지. 괜한 불안감을 갖기보다는 당장 눈 앞에 주어진 것부터 빠르게 처리를 해보자.

🍳 내일 목표

• 최종 프로젝트
  • 기술적 의사결정 제작
  • 게시물 수정 시 editor에 기존 content 들어가도록 수정