바닥부터 프론트엔드 배포하기

Next.js 프레임워크를 기반으로 프로젝트를 설정한 후 Vercel에 배포하는 과정까지의 여정을 담았습니다. 프로젝트에 이 파일이 왜 존재하고 왜 이런 패키지가 설치되는지 궁금한 사람에게 도움이 됐으면 좋겠습니다. 🙌🙌🙌

개발 환경

• MacOS, Windows, 또는 Linux
• Node.js 14.17
• Yarn 1.22
• Git 2.31

GitHub

GitHub 계정에 로그인하고 새 프로젝트를 생성합니다.

Git

> git init
> git remote add origin https://github.com/아이디/프로젝트-이름.git
> git branch -M main

현재 프로젝트에 Git을 활성화하고 커밋(변경사항)을 push(업로드)하는 곳을 GitHub로 설정합니다.

.gitignore

https://www.toptal.com/developers/gitignore/api/node

프로젝트 파일 중 GitHub에 업로드하지 않을 파일과 폴더를 설정합니다. 일반적으로 GitHub로 push할 때 어디서나 간단하게 설치할 수 있고 용량이 매우 큰 라이브러리 파일이 들어 있는 node_modules 폴더는 제외해줍니다.

.gitattribute

# Auto detect text files and perform LF normalization
* text=auto

JavaScript 프로젝트

> yarn init --yes

Yarn을 통해 package.json 파일을 생성합니다.

package.json (선택)

{
  "description": "프로젝트-설명",
  "repository": "https://github.com/아이디/프로젝트-이름.git",
  "private": false,
  "engines": {
    "node": ">=14.15.4"
  },
  "browserslist": [
    "defaults",
    "not IE 11",
    "maintained node versions"
  ]
}

package.json 파일에 위 항목을 추가해줍니다.

Next.js

> yarn add next react react-dom

Yarn을 통해 Next.js와 React.js를 설치합니다.

package.json

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

package.json 파일에 위 항목을 추가해줍니다.

next.config.js

module.exports = {
  poweredByHeader: process.env.NODE_ENV === 'development',
  reactStrictMode: process.env.NODE_ENV === 'development',
}

프로젝트 루트 폴더에 next.config.js 파일을 생성하고, 개발 환경에서만 활성화해줄 옵션을 선택합니다.

• poweredByHeader: HTTP 응답 헤더에 x-powered-by 필드를 포함합니다.
• reactStrictMode: React의 엄격한 경고를 활성화합니다.

PWA (선택)

> yarn add next-pwa

PWA를 활성화하려면 설치합니다.

next.config.js

/* eslint-disable @typescript-eslint/no-var-requires */
const withPWA = require('next-pwa')

module.exports = withPWA({
  poweredByHeader: process.env.NODE_ENV === 'development',
  pwa: {
    dest: 'public',
    disable: process.env.NODE_ENV === 'development',
  },
  reactStrictMode: process.env.NODE_ENV === 'development',
})

기존 Next.js 설정 JSON 객체를 withPWA로 감싸줍니다.

manifest.json

{
  "name": "앱-긴-이름",
  "short_name": "앱-짧은-이름",
  "theme_color": "#ff9a88",
  "background_color": "#fcfcfc",
  "display": "fullscreen",
  "orientation": "portrait",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "이미지-이름-maskable.webp",
      "sizes": "144x144",
      "type": "image/webp",
      "purpose": "maskable"
    },
    {
      "src": "이미지-이름-maskable.webp",
      "sizes": "192x192",
      "type": "image/webp",
      "purpose": "maskable"
    },
    {
      "src": "이미지-이름.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

manifest.json 파일로 PWA 설정만 해주면 자동으로 PWA가 활성화됩니다.

• theme_color: HEX color 형태로 입력해주면 일부 기기의 앱 상태바 색이 해당 색으로 설정됩니다.
• background_color: HEX color 형태로 입력해주면 일부 기기의 스플래시 이미지의 배경색이 해당 색으로 설정됩니다.

TypeScript

> yarn add typescript @types/react @types/react-dom --dev

TypeScript를 설치합니다.

> yarn tsc --init

TypeScript를 설치한 후 TypeScript 컴파일러를 통해 컴파일러 설정 파일인 tsconfig.json을 생성할 수 있습니다.

tsconfig.json (선택)

{
  "downlevelIteration": true,
  "baseUrl": "./"
}

• downlevelIteration: ...(스프레드 연산자)를 사용하려면 활성화합니다.
• baseUrl: JS 모듈을 해당 경로를 기준으로 절대 경로로 불러오려면 설정합니다.

ESLint, Prettier (선택)

> yarn add eslint prettier --dev

ESLint, Prettier를 설치합니다.

> yarn add @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-prettier eslint-config-next --dev

한 프로젝트에서 ESLint와 Prettier, TypeScript, Next.js를 같이 사용하기 위해 설치합니다.

> yarn add eslint-config-standard eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-node eslint-plugin-promise eslint-plugin-react eslint-plugin-react-hooks --dev

기타 필요한 ESLint 설정을 추가적으로 설치합니다. 위 설정 외에도 개인적인 선호에 따라 다른 설정을 더 추가하거나 제외할 수 있습니다. plugin 이름이 붙은 패키지는 ESLint에 추가적인 규칙을 정의해주고, config 이름이 붙은 패키지는 여러 plugin에서 추가한 규칙의 프리셋입니다.

.eslint.json

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript",
    "plugin:node/recommended",
    "plugin:promise/recommended",
    "standard",
    "next",
    "next/core-web-vitals",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:@typescript-eslint/recommended",
    // Rules related with Prettier MUST be at the last of the array
    "plugin:prettier/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "root": true,
  "rules": {}
}

프로젝트 폴더

public

Next.js는 루트 디렉토리에 있는 public 폴더를 통해 이미지와 같은 정적 파일을 호스팅할 수 있습니다. public 폴더 안의 파일은 / 에서 시작하는 URL을 통해 파일을 참조할 수 있습니다.

예를 들어 public/me.png 경로에 이미지 파일을 추가하면 /me.png URL로 이미지 파일에 접근할 수 있습니다.

src/pages

// src/pages/index.tsx

function HomePage() {
  return <div>Welcome to Next.js!</div>
}

export default HomePage

위 경로에 파일을 생성해줍니다.

Git

> git add .
> git commit -m "Initial commit"
> git push -u origin main

지금까지의 프로젝트 변경 사항으로 하나의 커밋을 생성하고, 이를 GitHub에 업로드합니다.

Vercel

https://vercel.com/

GitHub 계정으로 로그인하고 New Project 버튼을 통해 자신의 GitHub 프로젝트를 불러옵니다. 그리고 Deploy 버튼을 클릭하면 배포 끝!