실무에서 서버/클라이언트 컴포넌트를 구분하는 방법

안녕하세요 이정환입니다.맞습니다. 조금만 프로젝트가 복잡해져도 클라이언트 컴포넌트의 밑에 서버 컴포넌트가 배치되어야 하는 순간이 분명 존재하게 되죠구체적인 문제 상황이 딱 떠오르지는 않아서 뾰족한 답변을 드리기는 어렵겠지만, 보통 이런 경우 기본적으로는 클라이언트 컴포넌트를 최대한 작은 부분으로 유지합니다. 예를 들어 버튼 딱 하나만 클라이언트 컴포넌트로 전환하는 식 입니다. 요 내용은 강의의 뒷 부분인 서버 액션 챕터에서 구체적으로 다룹니다.

타입스크립트 vite 로 설정할때 어떻게 해야되나요??

안녕하세요 이정환입니다. AI 인턴의 답변이 정확하네요! 중요한 핵심 부분을 발췌해 드리겠습니다.tsconfig.app.json은 주로 클라이언트 사이드, 즉 브라우저에서 실행되는 코드를 대상으로 합니다. 여기에서는 React 및 DOM 관련 라이브러리를 포함하는 경우가 많습니다.tsconfig.node.json은 Node.js에서 실행되는 서버 사이드 코드나 빌드 도구 설정 파일에 대해 사용됩니다. 이에 따라, Vite와 같은 도구의 설정 파일(vite.config.ts)에는 tsconfig.node.json의 설정이 적용됩니다.결론적으로 src 폴더 내부에 존재하는 클라이언트 사이드에서만 동작할 코드(컴포넌트, 유틸 함수 등)을 위한 규칙은 tsconfig.app.json에 작성하시는걸 권장드립니다

node js 21.6.2 버전 tsx 질문

안녕하세요 이정환입니다.tsx는 ts-node와 완전히 다른 별개의 도구입니다. 따라서 ts-node의 설정 유무가 동작에 영향을 미치지 않습니다 😃

index page에서 이미 모든 SSG 경로 생성

안녕하세요 이정환입니다.아 넵 정확히 맞습니다. 프리페칭때문에 이런 현상이 발생하게 됩니다 😃프리페칭 기능 역시 HTTP Request로 Next.js 서버에게 특정 페이지를 요청하는 동작입니다. 따라서 프리페칭 기능이 동작하게 되면 빌드 타임에 생성해 두지 않았던 SSG 페이지들도 일제히 생성됩니다.

1회독 정주행 후...

안녕하세요 이정환입니다.유혁스쿨님의 의견에 동의합니다. 결국 누구든 무언가를 직접 만들어봐야 배운 내용을 완벽히 체득할 수 있게 되는 것 같아요그러니 개인적으로 타입스크립트를 활용한 프로젝트를 진행하시는 걸 추천드립니다. 한입 리액트 강의의 감정 일기장을 타입스크립트 기반으로 마이그레이션 해도 좋고, 아니면 기존 자바스크립트 베이스로 작성해두셨던 프로젝트를 타입스크립트 기반으로 마이그레이션 해 보시는 것도 좋습니다. 그것도 아니라면, 아예 새로운 프로젝트를 간단하게라도 시작해보시면 어떨까요?PS. 타입스크립트 + 리액트를 활용한 강의도 현재 제작중에 있답니다 😃

서버 액션의 적절한 사용

안녕하세요 이정환입니다.우선 이 질문에 대해 Next.js 팀에서 권장하는 사항은 다음과 같습니다."외부 서비스에서도 요청이 가능해야 하는 경우 라우트 핸들러로, 그렇지 않은 경우 서버 액션으로 처리하라"다만 서버 액션의 경우 아직 실무에 도입된 사례가 많지 않고, 또 React Query의 useQueries 에서 병렬로 처리되지 않는 등의 앞으로 해결해 나가야 할 실질적인 문제들이 조금 남아 있는 것 같습니다. 쉽게 말해 한마디로 아직은 조금 불안정하다고 볼 수 있을 것 같네요이에 개인 프로젝트, 사이드 프로젝트 정도를 진행하고 계시다면 적극적으로 사용하셔도 무방할 것으로 보이나 상업용, 현업에서 장기적으로 지원되어야 할 프로젝트라면 개인적으로는 서버 액션 보다는 별도의 백엔드 서비스를 통해 문제를 해결하시는 걸 추천드립니다.

클래스 관련 질문 드립니다

안녕하세요 이정환입니다.이 문제는 질문자님께서 실습 파일을 현재 "TS" 파일로 만드셔서 그렇습니다. 해당 챕터에서는 자바스크립트의 클래스를 소개하기 위해 "JS" 파일을 만들어 실습하고 있으니 파일의 확장명을 TS -> JS로 바꿔 타입 검사가 이루어지지 않도록 하시면 문제가 해결됩니다.

book 페이지 스트리밍 적용

안녕하세요 이정환입니다.네네 맞습니다. loading.tsx나 Suspense를 이용해 런타임(빌드 타임 이후에) 새롭게 생성되는 페이지에 한해 스트리밍을 설정할 수 있습니다

enum 선언에 대한 질문

안녕하세요 이정환입니다.enum을 꼭 사용해야 하는 상황이라면 저는 되도록 const enum을 사용하는 편입니다. 이유는 강의에서도 말씀드린 것처럼 최적화와 밀접한 관련이 있기 때문이죠다만, enum의 크기가 작고 내부적으로 많이 사용되지 않거나, 외부 라이브러리와 호환이 필요한 경우라면 굳이 const enum을 강박적으로 사용하지는 않습니다 ... 일부 트랜스파일러에서 const enum을 제대로 해석하지 못하는 문제가 있는걸로 알고 있어서 굳이 굳이 설정을 막 바꿔가면서 이를 사용하기보다는 그냥 enum을 사용하거나 혹은 as const를 사용하는 편 입니다.

gpt에게 물어보니 client컴포넌트는 서버에서 실행되지 않고 hydrate할 공간이라고 예약만 한다고 하네요??

안녕하세요 이정환입니다.그렇지 않습니다. 만약 실제로 그렇다면 서버측에서는 클라이언트 컴포넌트를 실행할 수 없으니 서버측에서 완성된 HTML 페이지를 생성하는 사전 렌더링 기능 자체가 동작하지 않겠죠아마 이 설명은 Next.js 앱 라우터 상의 이야기가 아니라 React.js에서 서버 컴포넌트만 사용했을 때의 이야기에 해당 되는 것 같습니다.아래는 Next.js 공식 문서에 서술되어 있는 클라이언트 컴포넌트의 동작 방식입니다. 드래그 한 부분을 읽어보시면 클라이언트 컴포넌트와 RSC Payload는 HTML을 사전 렌더링 하기 위해 사용된다(실행된다) 라고 나와 있네요(사진)GTP의 답변은 항상 교차 검증이 필요합니다. 아무래도 최근에 업데이트 된 기능이다보니 환각 현상이 일어나는 것 같습니다. 저도 강의와 도서를 제작할 때에 가끔 물어보곤 했는데 페이지 라우터와 혼동하는 개념도 많고, 이상한 대답을 내놓는 경우가 많더군요 ㅋㅋ