프론트엔드 환경설정 및 배포

JavaScript 실행 환경 구축

1. Node.js 버전 고정

왜 필요한가?

• JS 문법, async 처리, ES modules 등은 Node.js 버전에 따라 다르게 작동할 수 있어.
• 팀 프로젝트에서 모두 같은 버전으로 작업하지 않으면, 한 사람은 잘 돌아가고 다른 사람은 에러나는 상황이 생김 😵

어떻게 고정하나?

nvm (Node Version Manager 사용)

• 한 컴퓨터에서 여러 버전의 Node.js를 사용 가능하게 해주는 버전 관리를 하는 쉘 스크립트 도구
  • 프로젝트 내 .nvmrc 파일에 node 버전을 기재해둠

# .nvmrc 파일
18.18.2

• nvm은 동적으로 변경적용되는 버전관리 도구이기때문에 쉘 스크립트 프로그램이다. 쉘스크립트의 특성상 전역 프로그램이 아니므로 쉘 설정파일에  nvm 명령어를 인식하도록 환경설정이 필요함

brew install nvm

 

shell 프로파일에 nvm 환경변수를 설정하고 script를 실행하는 설정파일을 생성

출처 : https://formulae.brew.sh/formula/nvm

Add the following to your shell profile e.g. ~/.profile or ~/.zshrc:
    export NVM_DIR="$HOME/.nvm"
    [ -s "$HOMEBREW_PREFIX/opt/nvm/nvm.sh" ] && \. "$HOMEBREW_PREFIX/opt/nvm/nvm.sh" # This loads nvm
    [ -s "$HOMEBREW_PREFIX/opt/nvm/etc/bash_completion.d/nvm" ] && \. "$HOMEBREW_PREFIX/opt/nvm/etc/bash_completion.d/nvm" # This loads nvm bash_completion

nvm use         # → .nvmrc 읽고 해당 버전으로 전환
nvm install     # → .nvmrc 기준으로 node 설치 + 전환

 

2. yarn install로 의존성 설치

 

node가 설치하고나면 Node.js 16.10 이상부터 기본 내장된 패키지 매니저 래퍼(corepack) 기능을 활성화하여야 yarn을 사용가능합니다. 

corepack enable    # Yarn/Pnpm 사용 가능하게 설정

yarn install

 

왜 필요한가?

• package.json에는 어떤 라이브러리(예: next, react, axios 등)를 쓸지 정의되어 있음.
• 하지만 코드만 복사해온 상태에서는 node_modules/가 비어 있어서 실행이 안 됨
• 그래서 yarn install로 라이브러리를 실제로 받아야 코드가 정상 작동해.

yarn install

 

JavaScript 실행 환경 소개

Node.js

• 정의: JavaScript 런타임 환경 (브라우저가 아닌 환경에서 JS 실행 가능하게 해줌)

역할:

• yarn, npm 같은 패키지 매니저 실행
• yarn dev, yarn build 같은 스크립트 실행
• 프론트 빌드(예: yarn build)와 dev 서버 실행(예: yarn dev)을 가능하게 함.
• 관리 방법: nvm 사용해서 버전 컨트롤 (.nvmrc로 특정 버전을 명시하여  사용 선언됨)

Node.js 패키지 매니저

• 정의: 외부 라이브러리 설치/관리 도구
• 종류:
  • npm: Node.js 설치 시 자동 포함
  • yarn: Facebook이 만든 대체 도구.
    
    • 라이브러리 버전 고정 (yarn.lock)
    • 병렬 다운로드로 빠른 속도
    • workspaces, plug'n'play 등 고급 기능

Next.js

•  웹서버, 프론트, 빌드 기능을 모두 내장하고 있는 프레임워크입니다. 즉,  풀스택 프레임워크예요.
• 일반적으로 아래 3가지가 나뉘어져있는데 이것을 모두 합친 도구
  • React → 프론트엔드 (브라우저 전용)
  • Express → 백엔드 서버
  • Webpack → 빌드 도구

구분	역할	Next.js에서 구현되는 방식
프론트엔드 (브라우저 전용)	사용자 화면 UI, React 컴포넌트 렌더링	pages/*.tsx, components/*.tsx, app/*/page.tsx
백엔드 (서버 전용)	데이터 가공, API 응답, 서버 사이드 렌더링 (SSR), 정적 페이지 생성 (SSG)	getServerSideProps, getStaticProps, pages/api/*.ts

• 정의: React 위에 구축된 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 클라이언트 사이드 렌더링(CSR) 등 다양한 렌더링 전략을 지원
• 핵심 기능:
  • pages/: 파일 기반 라우팅
  • app/: 새로운 App Router 구조 (Next.js 13 이상)
  • getStaticProps, getServerSideProps로 SSR/SSG 구현
  • API Route 지원 (pages/api/*.ts)
  • Image Optimization, Routing, SEO에 유리한 구조

명령어동작	내용
yarn dev / npm run dev	Next.js 개발 서버 실행 (localhost:3000)
yarn build + yarn start	정적/서버 페이지 모두 포함한 프로덕션 서버 실행

프론트엔드 배포 

next start에 필요한 최소 파일

항목	역할
.next/	Next.js 빌드 결과물 (pages, routes, assets 등)
package.json	"이 라이브러리들이 필요하다" 목록만 적음,   프로젝트 설정 (scripts, dependencies 등)
yarn.lock	"필요한 라이브러리 정확한 버전은 이거다" 잠가놓음, 정확한 라이브러리 버전 기록
public/ (필수 아님, 있으면 사용)	정적 파일 (ex: 이미지, favicon)
node modules	node 가 동작하기 위해 필요한 외부의존성, yarn install을 해서 다운받거나 다운받은 결과물을 배포받아야함

Next JS 서버 배포 순서 (Best Practice)

1. 서버에 필요한 파일 복사 (package.json, yarn.lock, .next/, public/ 등)
2. 서버에 올라가서 yarn install
3. yarn start