[Next.js] 의 프로젝트 구성도

이전 글에서 생성한 nextjs 프로젝트는 구성도가 아래와 같이 되어 있습니다.

 

 

1. package.json, tsconfig.json

프로젝트의 전체 설정에 대한 내용이 담겨있습니다. 여기에는 프로젝트를 어떻게 실행시킬지와 어떤 dependency를 프로젝트에서 사용하고 있는지 보여줍니다. 추가적으로 package-lock.json 은 자동으로 생성됩니다. 

 

또, tsconfig 파일은 타입스크립트 파일을 임포트하거나 타입스크립트 버전, 라이브러리 등을 설정하는 파일입니다.

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

 

2. .gitignore

프로젝트를 깃명령어를 사용할 때 특정 상수 파일이나 환경변수등을 저장해두는 파일이 올라가면 외부에 내 정보가 유출될 가능성이 있습니다. 이를 방지하기 위해서 이 파일에 깃에 올라가지 않도록 작성해두면 파일이 올라가지 않습니다.

.gitignore

내부의 내용에는 프로젝트의 SSH 키체인 접속을 위한 *.pem 파일, 로그를 확인하는 log 파일, 환경변수를 작성하는 .env 파일들이 있습니다.

 

3. .eslintc.json

ESLint 는 자바스크립트 또는 타입스크립트 파일을 압축해주는 역할을 합니다. 다른 사용자가 우리의 스크립트 파일을 읽지 못하도록 방지하는 역할을 합니다. 필수는 아니지만 가급적 사용하는 것이 좋습니다. 

 

4. pages

이제부터 시작입니다. pages 에는 router를 활용하여 만든 url 페이지들을 담아주는 역할을 합니다. 해당 경로에 index.ts 파일이 있는데 바로 이 index 파일이 'localhost:3000'와 같이 URL을 입력했을 때 뜨는 루트 페이지를 의미합니다. 또 about.js 를 만들어두고 사용하면 'localhost:3000/about' 경로로 들어갔을 때 이 파일의 내용이 출력됩니다. 다들 이해가 빠르시겠지만 바로 이 디렉터리는 url을 스스로 만들어주는 역할을 합니다. 

pages 내부 구조

보시면 아시겠지만 'localhost:3000/api/~' 로 시작하는 url 들은 api 디렉터리 안에 넣어주면 됩니다. hello.ts가 있으면 '/api/hello'의 URL로 API로 호출할 수 있습니다. 즉 Express 의 역할도 합니다. 

// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type { NextApiRequest, NextApiResponse } from 'next'

type Data = {
  name: string
}

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  res.status(200).json({ name: 'John Doe' })
}

이렇게 된 경우 GET 요청으로 호출하였을 때 200 상태 코드로 json { name: 'John Doe'} 가 호출됩니다. 

 

5. public, styles

각각 resource 파일과 css 파일을 저장하는 디렉토리입니다.