[Django] 초급 React + Django 간단한 익명 블로그 만들기 2

 

Node.js 설치, React Project 생성, Node.js의 Runtime에서 React Project 구동

 

 

 

Node.js

• Node.js를 설치하는 이유는 Javascript의 런타임 구동하기 위해서 입니다.
• V8(자바스크립트 엔진)으로 빌드된 이벤트 기반 자바스크립트 런타임이다.
• Node.js는 반응형 웹 React뿐 아니라 Vue, Angular 등 에서 활발하게 진행된다.

V8

• 웹 브라우저를 만드는데 기반을 제공하는 오픈 소스 자바스크립트 엔진
• 구글 크롬 브라우저와 안드로이드 브라우저에 탑재되어 있다.
• V8은 자바스크립트를 바이트코드로 컴파일하고 실행하는 방식을 사용한다.

 

 

우선 VSCode에서 터미널을 볼 수 있도록 하겠습니다.

 

 

 

VSCode 하단에 창이 생깁니다. 우측의 zsh을 사용합니다. bash로 바꿔도 되는데 색상구분이 없어서 다시 zsh로 바꿨습니다.

 

 

 

우선적으로 Node.js를 설치하여 줍니다.

5분정도 걸리는것 같습니다.

 

 

 

설치가 끝난 경우 node -v 명령어, 옵션을 사용하여 버전을 확인해봅니다.

저의 경우 17.0.1 버전이 받아졌습니다!

 

 

 

우선적으로 vs_workspace라는 워크스페이스를 만들어줍니다. 이곳에서 리액트 프로젝트를 생성할 것입니다.

 

 

 

npx create-react-app [프로젝트 이름] 명령어, 옵션을 사용하여 프로젝트를 생성해줍니다.

맥OS 기준으로 path는 /Users/{계정이름}/vs_workspace/anonymous_blog

윈도우 기준으로 path는 /Home/{계정이름}/vs_workspace/anonymous_blog

 

 

react project 생성이 완료되면 해피해킹이라고 출력되네요! 해피해킹키보드 쓰는 개발자로써 괜히 기분이 좋습니다

 

 

이렇게하여 Node.js 설치 완료하였고 React 프로젝트 생성 완료되었습니다!

 

 

 

workspace : vs_workspace

project : anonymous_blog

 

 

프로젝트 폴더로 이동하여 슥 훑어봅니다

.git이 자동으로 생성되었습니다.

 

 

node_modules

• 프로젝트가 의존하는 외부 모듈 캐시
• npm install [package명, 주소]

 

package.json

• 앱에 필요한 최소 버전을 기록, 특정 패키지의 버전을 업데이트하면 변경 사항이 여기에 반영되지 않습니다.
• 현재 프로젝트의 루트 디렉터리에다가 저장하며, 애플리케이션 종속성 및 기타 정보를 정의한다.

 

 

package-lock.json

• 다시 설치할 수 있도록 설치된 각 패키지의 정확한 버전을 기록합니다. 향후 설치에서는 동일한 종속성 트리를 구축할 수 있습니다.
• npm을 사용하여 node_modules 트리나 package.json 파일이 수정되면 자동으로 수정됩니다.

 

 

npm start : start 패키지, scripts 개체의 속성에 지정된 미리 정의된 명령을 실행합니다.

 

 

package.json의 "scripts"가 정의되어있지 않으면 "start"를 직접 참조한다고 합니다.

 

 

이렇게하여Node.js 설치, React Project 생성, Node.js의 Runtime에서 React Project 구동하였습니다.