Next.js error.tsx, FC의 특징, 그리고 Yarn으로의 전환

 

1. Next.js error.tsx에서 "use client" 필수임.

• 문제: Next.js에서 error.tsx가 비어 있어도 "use client"를 명시하지 않으면 yarn dev 실행 시 에러 발생.
• 이유:
  • error.tsx는 기본적으로 서버 컴포넌트(Server Component)로 동작.
  • 하지만 클라이언트에서 렌더링해야 하는 특정 작업(예: 상태 관리나 브라우저 API 사용)이 포함될 가능성이 있는 파일은 클라이언트 컴포넌트(Client Component)로 선언 필요.
  • 빈 파일일지라도 Next.js는 명시적 선언을 요구함으로써 코드 의도를 명확히 하고, 클라이언트-서버 간 동작을 혼동하지 않도록 방지.
• 해결 방법: error.tsx 파일 상단에 "use client" 추가.

"use client";

export default function Error() {
  return <div>에러발생</div>;
}

---

2. 검색하여 여러 코드들을 찾아보다가 FC(FunctionComponent)에 대해 더 알아보기

• 정의: React.FC 또는 FunctionComponent는 React의 함수형 컴포넌트를 타입스크립트로 정의할 때 사용되는 타입.
• 특징:
  • 기본적으로 children 프로퍼티 포함.
  • 제네릭을 통해 props 타입 명시 가능.
  • 컴파일 단계에서 props 타입 검증 가능.
• 장점:
  • children 자동 포함으로 코드 간결.
  • props 타입 정의를 통해 타입 안전성 강화.
• 단점 및 주의사항:
  • defaultProps와 호환성 제한.
  • 최근 React 커뮤니티에서는 명시적으로 children을 정의하기 위해 FC 사용을 지양하는 경우 증가.

예시 코드:

import React, { FC } from "react";

interface MyProps {
  title: string;
  subtitle?: string;
}

const MyComponent: FC<MyProps> = ({ title, subtitle, children }) => (
  <div>
    <h1>{title}</h1>
    {subtitle && <h2>{subtitle}</h2>}
    {children}
  </div>
);

export default MyComponent;

• FC 대신 일반 함수 타입 사용 예시:

interface MyProps {
  title: string;
}

const MyComponent = ({ title, children }: React.PropsWithChildren<MyProps>) => (
  <div>
    <h1>{title}</h1>
    {children}
  </div>
);

• 결론: FC는 편리하지만, 명시적 코드 작성을 선호하거나 defaultProps를 사용할 경우 일반 함수 타입 사용 권장.

---

3. npx로 생성된 프로젝트에서 Yarn 전환

• 문제: npx로 프로젝트 생성 시 npm이 기본 패키지 매니저로 설정되어 package-lock.json 생성. Yarn으로 전환하려면 node_modules와 package-lock.json 삭제 후 Yarn 명령어로 다시 설정 필요.
• 이유:
  • npx는 npm CLI의 일부로, 기본적으로 npm 환경에서 동작.
  • 프로젝트 초기화 시 자동으로 npm이 사용하는 잠금 파일(package-lock.json) 생성.
  • Yarn은 자체적인 잠금 파일(yarn.lock)을 사용하며, 두 잠금 파일이 공존할 경우 충돌 가능성 있음.
• 전환 과정:
  1. 기존 npm 의존성 제거:

     rm -rf node_modules package-lock.json
     

  2. Yarn 초기화 및 의존성 재설치:

     yarn install
     

  3. Yarn 명령어로 프로젝트 관리:
     • 새 패키지 추가:

       yarn add [패키지명]
       

     • 기존 패키지 제거:

       yarn remove [패키지명]
       

===> 애초에 처음부터 yarn으로 패키지 매니저 정해서 nextjs 프로젝트 시작하길 원한다면 그냥 npx create-app 대신 yarn을 사용하면됨....

• 그러면 yarn인 상태에서 npx로만 지원되는 Shadcn 설치는???
  • Shadcn CLI는 프로젝트 내 yarn.lock, pnpm-lock.yaml 파일을 감지해 해당 패키지 매니저를 사용. 즉, yarn이 이미 패키지 매니저인 상태에서는 npx로 Shadcn 설치해도 패키지 매니저 변경안됨. npx는 그저 npm 레지스트리에서 패키지를 가져오는 명령어일뿐. 
  • 패키지 매니저 명시 옵션(참고):

    npx shadcn-cli --use-yarn
    

이번에 패키지 매니저를 변경할 때 전에 yarn 버전이 다랐던 팀원이 있었을 때 버전 충돌 때문에 고생한 적이 있어서 이번에는 yarn 버전이 모두 동일한지 다시 확인하고 패키지 매니저를 변경했다. (yarn으로 다시 설치 시)
확실히 이전에 겪었던 고난이 다음의 실수를 막아주는데 좋은 이정표가 되는 것 같다 👍👍

계속해서 이번 프로젝트를 진행하면서 겪을 트러블들을 기록하고!  기억해서!! 지금처럼 나중에 잘 꺼내 써야겠다 ㅎㅎ