Node.JS 설치하기

CRA : Create React App 사용하기

PROJECT_NAME 부분에 생성하고자 하는 이름을 입력하시면 됩니다.

영어 소문자와 숫자만 사용 가능합니다.

npx create-react-app PROJECT_NAME

• NPX : NPM의 확장된 버전
  • NPM의 경우, 최초 실행 시 로컬에 패키지를 저장해두고, 이후에 다시 활용함
  • CRA와 같은 실행 빈도는 낮지만 버전업이 잦은 패키지의 경우, 업데이트가 필수
  • NPX는 매 실행 시 자동으로 최신버전을 받아와서 구동하는 방식

React.JS 프로젝트 구조

• node_modules : Node 패키지가 저장됨
• public : SPA 구현을 위한 기본 동적 Web 파일이 저장됨
• src : React.JS 소스코드가 저장됨
• package.json : Node를 통해 설치하는 패키지의 목록, 컴파일 설정 등의 정의됨

SPA : Single Page Application

• public 디렉토리의 index.html 파일 단일을 기반으로 JS 코드가 동작하며 화면을 렌더링
• HTML 파일을 직접 조작하거나 새로 렌더링 하는것이 아닌, 컴파일된 JS 코드에 따라 동작하고 통신하고 화면을 렌더링함

Node 개발에서 자주 활용하는 라이브러리

• babel : ES6 혹은 그 이후의 버전에서 추가된 최신 JS 문법을, 구버전 JS만을 지원하는 인터프리터에서 구동할 수 있도록 컴파일 과정에서 변환해줌
• webpack : 하나, 혹은 여러개의 파일로 나뉘어 개발된 JS 프로젝트를 컴파일 과정에서 하나로 합치거나 잘개 쪼개줌. 단순히 합치지 않고 청크, 캐시, 스플릿 개념을 도입해 사용자가 웹 페이지를 호출할 때 불필요한 로딩과 지연이 일어나지 않도록 함.