본문 바로가기

개발기술/프론트엔드

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

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

 

'개발기술 > 프론트엔드' 카테고리의 다른 글

자바스크립트 문법  (0) 2025.04.07
웹 브라우저 API  (0) 2025.02.26
백엔드 개발자와 프론트 엔드 이해도  (0) 2025.02.12
Java, Javascript, Python 비교  (1) 2025.01.14
톰캣 설치를 통한 JSP 사용법  (0) 2024.07.01