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)
- 서버에 필요한 파일 복사 (package.json, yarn.lock, .next/, public/ 등)
- 서버에 올라가서 yarn install
- 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 |