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가 에러를 핸들링 하는 화면을 확인할 수 있습니다.(사진)