logo

기타 디렉토리

public, 관례적 디렉토리

120 조회

0 추천

815 단어

5분 예상

2025. 01. 13. 게시

2025. 02. 27. 수정

luasenvy 작성

CC BY-NC-SA 4.0

Public 디렉토리

public
├── byncsa.svg
├── favicon.ico
├── fonts
│   └── pretendard
│       └── PretendardVariable.woff2
├── hero.webp
└── logo.webp

public 디렉토리는 nextjs에서 사전 정의된 디렉토리로 정적 파일들을 서비스할 수 있는 기능을 제공한다. 파일들을 위치시키고 서버가 시작되면 루트/에서 바로 접근할 수 있다. /favicon.ico로 접근하면 public에 있는 정적 파일이 응답된다.

자연스럽게 페이지 라우트와 겹치는 경우를 예상해볼 수 있다. 특별한 경우가 아니라면 정적파일은 모두 확장자가 있기 때문에 쉽게 겹치는 경우가 생기지 않는다. 그러나 동적 라우팅을 사용한다면 원치 않은 응답을 받 을 수 있기 때문에 주의 해야한다.

import Image from "next/image";
import LogoImage from "@/public/logo.webp";

export default ImageTest() {
  return (
    <Image src={LogoImage} className="w-6 h-6 rounded" alt="logo" />
  )
}

import 구문을 통하여 정적파일을 불러오고 tsx 내에서 사용할 수도 있다. 다만, 타입을 확장자에 맞게 선정의 해야할 수도 있다. nextjs는 이미지를 모듈로 불러오고 사용할 수 있는 방법을 내장기능으로 제공하고 있으며 next/image 모듈로 쉽게 활용할 수 있다.

로컬 폰트

import localFont from "next/font/local";

const pretendard = localFont({
  src: [
    {
      path: "../../public/fonts/pretendard/PretendardVariable.woff2",
    },
  ],
  display: "swap",
  weight: "45 920",
  variable: "--font-pretendard",
});

export default async function RootLayout({ children }: React.PropsWithChildren) {
  return (
    <html lang="ko">
      <body className={pretendard.className}>
        {children}
      </body>
    </html>
  );
}

public 디렉토리에 폰트 파일을 위치시키고 next/font/local 모듈을 활용하면 폰트를 self-hosted 할 수 있다.

관례적 디렉토리

.
├── app
├── components
├── hooks
├── lib
├── node_modules
├── public
└── styles
  • components: React 컴포넌트
  • hooks: React 훅
  • lib: 프로젝트 라이브러리
  • styles: CSS 스타일

세가지 디렉토리 app, node_modules, public를 제외하고 모두 nextjs와는 상관이 없는 디렉토리이다. 관리를 위하여 관례적으로 사용되는 디렉토리 명칭들이다. 아무리 특별한 경우라 하더라도 lib 내부에서 분류하여 관리할 수 있기 때문에 아직까지는 프로젝트를 진행하면서 이 경우를 넘어서는 경우가 없었다.

UI 프로젝트의 특성상 타입 선언이 강력하게 지원되어야 하는 경우는 흔치 않았다. 그렇기 때문에 타입 스크립트 프로젝트에서 자주 사용되는 types 디렉토리도 굳이 배치시킬 필요가 없었다.

컴포넌트가 제공해야하는 Props들은 컴포넌트와 함께 배치시켜 관리에 용이하게 하는 것이 좋고, API에서 사용할 타입선언은 높은 확률로 클라이언트런타임에서도 재활용되어야 하므로 types를 별도 관리하기보다는 zod와 같은 인기있는 라이브러리를 활용하는 것이 더 탄탄한 프로그램을 만들 수 있었다. 이럴경우에는 보통 types가 아니라 lib 내부에 배치하여 실행이 가능한 코드로 관리하는 것이 직관적이다.