작업환경 설정하기
제 맥북에는 설정이 다 되어있어 CRA만 하면 됐지만, 혹시 따라 진행하실 분들이 있을까 해서
작업환경설정 순서는 책 내용 보면서 정리했고, 관련해서 설명은 되어있지 않앗지만 간단한 내용도 함께 정리해두었습니다.
1. Node.js , npm , nvm 설치
프로젝트를 개발하는데 필요한 주요 도구들이 Node.js를 사용하기 때문에 설치.
Node.js를 설치하면 npm이 같이 설치되고 이로 패키지를 설치하고 설치한 패키지의 버전을 관리 할 수 있다.
또한 node의 version을 관리 할수 있는 nvm을 설치해준다.
Nods.js
Node.js는 Chrome V8 JavaScript 엔진으로 빌드 된 JavaScript 런타임( 프로그래밍 언어가 구동되는 환경)이다.
- Node.js는 V8이라는 JavaScript 엔진 위에서 동작하는 자바스크립트 런타임(환경)이다.
- Node.js는 서버사이트 스크립트 언어가 아니다. 프로그램(환경)이다.
- Node.js는 웹서버와 같이 확장성 있는 네트워크 프로그램을 제작하기 위해 만들어졌다.
Node.js 설치 > https://nodejs.org/ko/download/
npm ( Node Package Manager )
node.js에서 사용하는 모듈들을 패키지로 만들어 npm을 통하여 설치하고 관리가 가능
- NodeJS로 만들어진 모듈을 웹에서 다운로드 받아 설치하고 관리하는 기능
- NodeJS 모듈의 버전을 관리하고 호환성을 관리하는 기능 , 또한 이 모듈이 사용하고있는 다른 모듈의 의존성또한 자동으로 해결해준다.
nvm ( Node Version Manager )
이전 버전의 node를 사용해야하는 프로젝트가 있을 시 유용하다.
- 컴퓨터에 다양한 버전의 Node.js 를 설치할 수 있게 해줌
- use 커맨드를 이용해 사용할 Node 버전으로 간단하게 스위칭할수 있게 해줌.
nvm 설치
// nvm 설치
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
// nvm 설치후 설치확인 , 버전확인
$ nvm --version
2. yarn 설치 ( 패키지 매니저 )
보통 npm을 많이 사용하던데 이 책에서는 yarn을 설치해서 사용한다.
1. Homebrew 설치
설치 링크 > https://brew.sh/
2. yarn 설치
$ brew update
$ brew intall yarn
// yarn 폴더를 기본 저장 위치로 설정
$ yarn config set prefix ~/.yarn
// 자신의 OS에 맞게 PATH 환경변수에 추가 ( mac의 경우 아래처럼 추가 )
$ echo 'export PATH="$(yarn global bin):$PATH"' >> ~/bash_profile
yarn
yarn은 페이스북에서 만든 자바스크립트 패키지 매니저
- npm의 단점을 느꼈기에 이를 향상시키기 위해 만들어진 매니저 툴
-여러 패키지를 설치할 때, 병렬로 설치하므로 퍼포먼스와 속도가 증가 한다고 함
3. 에디터 설치 ( VS코드 )
설치 링크 > https://code.visualstudio.com/
4. Git 설치
위의 순서에 따라 Homebrew를 설치했다는 전제에 Homebrew로 설치합니다.
// git 설치
$ brew install git
// git 설치후 설치확인 , 버전확인
$ git --version
git
git은 파일 변화를 시간에 따라 기록했다가 나중에 특정 시점의 버전을 다시 꺼내올 수 있는 버전 관리 시스템이다
- 분산 버전관리 시스템 (DVCS)
- 각 클라이언트들이 모두 서버의 백업본을 가진다.
- 서버가 죽거나 오프라인 상태에서도 버전 관리를 할 수 있고, 대부분의 버전 관리가 로컬에서 이루어지므로 속도도 빠르다.
✔️ 참고
리액트를 다루는 기술 - 김민준
https://book.naver.com/bookdb/book_detail.nhn?bid=15372757
https://hanamon.kr/nodejs-%EA%B0%9C%EB%85%90-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0/
https://waspro.tistory.com/621
https://gonna-be.tistory.com/31
https://heekangpark.github.io/git/vcs
'REACT' 카테고리의 다른 글
[ REACT ] reset css 하는 방법 + npm으로 설치 (0) | 2022.01.02 |
---|---|
[ REACT ] CRA로 프로젝트 생성하기 ( Create React App ) (0) | 2021.12.31 |
[ REACT ] 리액트 이해, 렌더링과 Virtual DOM (0) | 2021.12.27 |
[Meterial-UI] DatePiker Api 모아놓은 곳 (0) | 2020.09.03 |
[ react 모달 종료 제어 ] cannot read property 'contains' of undefined (0) | 2020.08.29 |