5.4 버튼 새로정렬됨

안녕하세요 이정환입니다.음.. 아마 html이나 body 태그의 display 속성 또는 정렬 옵션의 차이로 인해 이런 결과가 나온것 같아 보입니다. 물론 자세한건 전체 코드를 다 확인 해 봐야겠지만요 ㅠㅠ 혹시 리액트 앱을 초기화 하시는 과정에서 글로벌 CSS를 완벽히 초기화 해 주셨을까요? 정 궁금하신게 아니라면 우선 해당 내용은 크게 중요한 내용이 아니기 때문에 그대로 이어서 실습 진행하셔도 됩니다. 만약 이유를 알고 싶으시다면 전체 프로젝트의 코드를 깃헙 등을 통해 링크로 전달해주시면 살펴보겠습니다.

모달 구현 후 북 상세 클릭 시 뒤 화면 스크롤이 하단으로 내려갑니다.

안녕하세요 이정환입니다.오잉..? 이런 일이 .. 찾아보니 운영체제나 브라우저의 버전에 따라 스크롤 동작 차이가 있어 요런 이슈가 발생할 수 있다고 합니다.이 문제를 해결하시려면 Modal 컴포넌트에서 모달이 열릴때 body 태그의 overflow 스타일을 "hidden으로 설정해 스크롤되지 않도록 잠가주시고, 모달이 닫힐 때 다시 overflow 스타일을 ""으로 초기화 해 주시면 됩니다!

App Router의 네비게이팅 관련 질문 드립니다.

안녕하세요 이정환입니다.프리페칭은 하나의 페이지에 대해 최초 1회만 발생하게 됩니다. 즉 동일한 페이지를 두번 이상 프리페칭하지 않습니다. 인덱스 페이지에서 바로 이동가능한 페이지가 아닐 경우 인덱스 페이지에 접속했을 때에는 프리페칭이 이루어지지 않습니다. 해당 페이지는 해당 페이지에 접근하는 링크가 렌더링 되어 있는 페이지(또는 router.prefetch가 동작할때)에서 프리페칭 됩니다.초기 접속시 전달받는 JS Bundle은 초기 접속한 페이지의 컴포넌트만 포함한 JS Bundle입니다. 강의에서 말씀드렸듯 Next.js는 JS Bundle의 용량을 조절하기 위해 페이지별로 자바스크립트 코드를 분리해 번들 형태로 저장합니다. 그리고 초기 접속 요청이 들어왔을 때에는 현재 접속 요청이 들어온 페이지의 번들만 보냅니다. 초기 접속 완료 이후 다른 페이지로 이동할 때에 자바스크립트 번들을 받아오는게 아니라 프리페칭으로 초기 접속이 완료된 이후 다른 페이지로 이동하기 전에 번들을 받아옵니다.

컨텍스트와 프로퍼티 선택 기준

안녕하세요 이정환입니다.우선 프로퍼티란 리액트 컴포넌트의 "Props"를 말씀하시는게 맞겠죠? 그렇다고 생각하고 답변드리자면회사마다 그리고 팀마다 조금씩은 다르겠지만, 보통은 Props를 통해 데이터를 주고 받을거라 예상하고 컴포넌트를 설계하다가 설계 과정에서 너무나도 복잡한 데이터 전달이 발생하게 될 것 같다고 예상되면 그때 Context나 기타 상태관리 라이브러리를 도입하게 됩니다. 그리고 이미 Context나 기타 상태관리 라이브러리가 프로젝트에 도입되어 있는 상황이라면 새로운 기능을 추가할 때 기존에 추가되어있는 Context나 상태관리 라이브러리를 통해 관리할 것인지 먼저 고려하는 과정이 추가될 수도 있겠습니다.

revalidateTag 사용 시 ReviewDetail 리렌더링

안녕하세요 이정환입니다."5.1) 풀라우트 캐시 1" 챕터의 13분 경에서 말씀드렸듯이 페이지를 구성하는 데이터 캐시들 중 하나의 캐시라도 무효화 되면 페이지 또한 다시 생성됩니다. 추가로 페이지가 재 생성된다고 하여 해당 페이지 내의 모든 데이터 캐시가 무효화되는 것은 아닙니다. 앞선 강의에서 말씀드렸듯 데이터 캐시와 풀라우트 캐시는 별도로 동작하기 때문에 데이터 캐시를 그대로 둔 채로 (즉 캐싱된 데이터를 사용하는 방식으로) 페이지만 새롭게 생성하게 됩니다.