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

1. NVM (Node Version Management)

• 한 컴퓨터에서 여러 버전의 Node.js를 사용 가능하게 해주는 버전 관리 도구
  • Node.js는 글로벌 설치가 기본이나 프로젝트마다 요구하는 버전이 다를 수 있음. 프로젝트마다 다른 Node 버전을 요구할 때 필수 도구입니다.

 

2.Node.js

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

역할:

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

3. 패키지 매니저

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

4. Next.js

•  

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

 

 

• 정의: 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.js 배포요소

 

It compiles the project for production. The main output is:

Folder	FileDescription
.next/	⚙️ The compiled app — this is the most important build output
public/	🌐 Your static files (not modified during build, just copied over at runtime)
package.json	Needed to run the app (contains start script and dependencies)
yarn.lock	ensures consistency across environments by locking exact dependency versions