React (2) - Node.js & npm

류창선·2023년 9월 1일
0

front-end

목록 보기
6/39
post-thumbnail

Node.js

  • JavaScript가 브라우저가 아닌 외부 환경에서 동작하는 JavaScript 실행 환경
  • 설치 시 오랜 기간 지원이 가능한 버전인 LTS(Long Term Support) 버전이 안정적

npm

  • npm(node package manager)는 개발 시 필요한 패키지를 관리할 수 있는 도구
// npm 설치 관련 명령어
npm install 패키지명     // 패키지 다운로드
npm update 패키지명      // 패키지 업데이트
npm uninstall 패키지명   // 패키지 삭제

CRA

  • React는 UI 기능만 제공하므로 여러 초기환경을 세팅하는 것에 어려움이 있음
  • 따라서 React 프로젝트를 시작하기 위해 필요한 개발 환경을 세팅해주는 도구가 필요함
  • CRA(Create-React-App)은 하나의 명령어로 React 개발 환경을 구축할 수 있음
// 1. 프로젝트 폴더로 접급
cd 폴더명

// 2. CRA 설치
npx create-react-app 프로젝트명

// 3. 로컬 서버 오픈 후 정상 구축 확인
npm start

CRA 세팅 관련

  • node_modules: npm으로 다운받은 패키지들의 실제 소스 코드가 모여 있는 폴더
  • .gitignore: 용량 및 보안 등의 문제로 Github에 올리지 않을 파일을 추가하는 파일(Git 추적 무시)
  • package.json: 설치한 라이브러리와 패키지 종류와 버전 정보 등이 담긴 파일
  • public/index.html: 오직 하나만 존재하는 html 파일(SPA)로 root라는 id를 가진 div 태그 내부에 소스 코드를 동적으로 넣어 화면을 렌더링
  • src/index.js: React의 시작이 되는 파일
profile
Front-End Developer

0개의 댓글