본문 바로가기

REACT

[ REACT ] 작업환경 설정, 설치하기 (node.js | npm | nvm 간단정리)

728x90
반응형

작업환경 설정하기

제 맥북에는 설정이 다 되어있어 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/

 

다운로드 | Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

 

   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/

 

Homebrew

The Missing Package Manager for macOS (or Linux).

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/

 

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

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://velog.io/@mayinjanuary/NVM-%EC%9D%B4%EB%9E%80-%EB%85%B8%EB%93%9CNode.js-%EB%B2%84%EC%A0%84-%EA%B4%80%EB%A6%AC%ED%95%98%EB%8A%94-%EB%B2%95

https://gonna-be.tistory.com/31

https://heekangpark.github.io/git/vcs

 

 

728x90
반응형