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

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

revalidateTag 사용 시 ReviewDetail 리렌더링

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

섹션 12강의 Context에 대한 질문

안녕하세요 이정환입니다.네 맞습니다. useMemo 처리 이후에는 useCallback이 필요하지 않습니다. 따라서 제거하셔도 무방하나 그대로 둬도 퍼포먼스상의 큰 차이는 없기에 강의에서는 그대로 두는 쪽으로 작업을 진행했습니다.

getTime( ) 메서드 사용 질문

안녕하세요 이정환입니다.getTime 메서드는 Date 객체에 저장된 시간을 밀리세컨즈 단위로 변환하여 반환하는 메서드입니다. 그리고 우리 프로젝트에서는 날짜 정보를 State에 보관하거나 LocalStorage에 보관할 때 밀리세컨즈 단위로 보관하고 있습니다. 따라서 주로 State의 변경이 발생할 때 getTime 메서드를 활용하고 있습니다.반면 의 value 값으로 사용될 때에는 yyyy-mm-dd 형식으로 날짜 데이터를 설정해줘야 하기 때문에 이런 경우에는 getTime 메서드를 활용하고 있지는 않습니다.

protected 접근제어자 사용에 관한 질문

안녕하세요 이정환입니다.결론부터 말씀드리면 TypeScript의 private, protected 접근 제어자는 오직 컴파일 타임에만 영향을 미칩니다. 따라서 자바스크립트로 컴파일 된 이후에는 일반 인스턴스로 취급되어 어디서든 사용 가능한 상태로 변경됩니다. 게다가 자바스크립트에는 protected가 존재하지 않기 때문에 일반 인스턴스로 변환되어도 아무런 지장 없이 동작할 수 있게 됩니다.

error.tsx를 app 폴더 바로 아래에 둬도...

안녕하세요 이정환입니다.루트 레이아웃에서 발생하는 오류를 핸들링 하는 방법과 예제 보여드릴게요우선 항상 오류를 발생시킬 수 있도록, 루트 레이아웃의 Footer 컴포넌트를 다음과 같이 수정합니다.async function Footer() { const response = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book`, { cache: "no-store" } ); ... }cache 옵션을 "no-store"로 수정했습니다. 그 결과 이제 인덱스 페이지를 새로고침 할 때 마다 Footer 컴포넌트에서 데이터 페칭이 이루어져 예외가 발생하게 될 겁니다.다음으로 위 오류를 해결할 수 있는 global-error.tsx 파일을 생성하고 다음과 같이 작성합니다."use client"; export default function Error() { return ( Something went wrong! ); }공식문서를 보셨다고 했으니 이미 아시겠지만 global-error.tsx의 에러 컴포넌트에는 HTML, BODY 태그가 필수적으로 포함되어야 합니다. 루트레이아웃을 대체할 것이기 때문이죠 😃글로벌 에러 설정도 마쳤다면 우선 백엔드 서버를 가동중인 상태로 프로젝트를 빌드합니다. 에러 핸들링을 확실히 확인하시려면 개발 모드가 아닌 프로덕션 모드에서 확인하시는게 좋기 때문에 먼저 정상적으로 빌드 과정을 거치겠습니다.빌드가 완료되면 npm run start로 Next.js 앱을 프로덕션 모드로 실행합니다. 그 후 백엔드 서버를 종료하고 인덱스 페이지에 들어가보면 다음과 같이 global-error.tsx가 에러를 핸들링 하는 화면을 확인할 수 있습니다.(사진)

/book/[id]/page.tsx에서 book type은 왜 지정하지 않나요?

안녕하세요 이정환입니다.await response.json 으로 반환받은 book 변수의 타입을 왜 정의하지 않았냐는 질문이신가요? 이유는 ... 사실 제가 까먹었습니다 😢 더 견고하게 만드시려면 정의해주시는게 맞습니다.const book : BookData = await response.json()그럼에도 타입 오류가 발생하지 않는 이유는 response.json 메서드의 반환값은 항상 any 타입으로 추론 되기 때문입니다.

PageRouter 프로젝트 생성

안녕하세요 이정환입니다.혹시 Next.js 앱이 onebite-next/section02 폴더에 들어있지 않은가요?그렇다면 cd section02로 해당 폴더로 이동하신 다음 npm run dev 스크립트를 실행하셔야 합니다.

9.4) 최적화 후 배포시 빌드시 /book/bookId 의 프리렌더링 에러가 발생하는거 같아요

안녕하세요 김동환님 이정환입니다.우선 프로젝트중 발생한 오류는 전체 코드를 통해 확인해봐야 정확한 원인을 알 수 있습니다.이에 정확한 원인을 찾고 싶으시다면 깃허브링크를 통해 전체 코드를 전달해주시면 감사하겠습니다.올려주신 사진으로만 살펴봤을 때에는 마지막 (.)book/[id]/page.tsx 에서 Props를 넘겨주는 방식이 오류를 유발 할 수 있을 것 같습니다. any 타입을 꼭 사용하지 않으셔야 한다면 다음과 같이 해결하시는게 좋을 것 같습니다.export default async function Page({ params, }: { params: Promise; }) { return ( ); }

스트리밍 SEO 질문드립니다.

안녕하세요 이정환입니다.맞습니다 스트리밍되는 컨텐츠는 초기 HTML에 포함되지 않습니다. 그러나 Vercel의 공식문서에 따르면 스트리밍은 SEO에 부정적인 영향을 미치지 않으며 인덱싱도 가능하다고 합니다.요새는 포털사이트의 크롤러들이 똑똑하게 동작하기 때문에 스트리밍되는 컨텐츠가 있다면 특정 시간 까지는 기다려주는걸로 알고 있어요 따라서 스트리밍 되는 컨텐츠라고 해서 반드시 SEO에 불리한 것은 아니라는 점 알려드립니다 😃다음은 해당 내용이 소개된 공식 문서 링크입니다.https://vercel.com/guides/does-streaming-affect-seo