node.js 와 npm

macOS에서는 Node.js를 여러 버전으로 설치하여 관리해 주는 nvm 도구를 권장한다. 추후 Node.js 버전을 업데이트하거나 프로젝트별로 버전이 다른 Node.js를 사용해야 할 때, 이 도구가 가장 용이하기 때문이다.

터미널을 열고 다음 명령어를 입력하세요.

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash

그다음에는 터미널을 재시작하고, 다음 명령어를 입력하여 nvm을 잘 설치했는지 확인하세요.

$ nvm --version
0.33.11

터미널을 재시작해도 버전이 나타나지 않는다면, vim 명령어를 입력하여 ~/.bash_profile 파일에 다음 스크립트를 추가해야 합니다.

$ vim ~/.bash_profile
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

nvm을 잘 설치했다면 다음 명령어를 입력하여 Node.js LTS 버전을 설치하세요.

$ nvm install --lts

$ node -v
v10.14.1

yarn 설치

npm 경유로 설치

시스템에 설치할 때 Node.js와 함께 제공되는 npm 패키지 매니저를 통해 Yarn을 설치하는 것이 좋습니다.

npm 설치 후 다음 작업을 수행하여 Yarn 설치 및 업그레이드를 수행할 수 있습니다.

npm install --global yarn
yarn --version

에디터 설치 (VS Code)

https://code.visualstudio.com/Download

확장 프로그램 설치

1. ESLint: 자바스크립트 문법 및 코드 스타일을 검사해 주는 도구입니다.

2. Reactjs Code Snippets: 리액트 컴포넌트 및 라이프사이클 함수를 작성할 때 단축 단어를 사용하여 간편하게 코드를 자동으로 생성해 낼 수 있는 코드 스니펫 모음입니다. 검색했을 때 유사한 결과가 여러 개 나올 수 있는데 제작자가 charalampos karypidis인 것을 설치하세요.

3. Prettier-Code formatter: 코드 스타일을 자동으로 정리해 주는 도구입니다.

4. Korean Language Pack for Visual Studio Code : VS Code 언어 한국어로 설정하기. VS Code에서 F1을 누른 후 “Configure Display Language”를 입력한다.

create-react-app으로 프로젝트 생성

create-react-app은 리액트 프로젝트를 생성할 때 필요한 웹팩, 바벨의 설치 및 설정 과정을 생략하고 바로 간편하게 프로젝트 작업 환경을 구축해 주는 도구이다. 나중에 설정을 커스터마이징해야 하면 자유롭게 설정을 변경할 수도 있다.

이 도구를 사용하는 방법은 매우 간단하다. 터미널을 열고, 프로젝트를 만들고 싶은 디렉터리에서 다음 명령어를 실행하세요.

$ yarn create react-app hello-react

리액트 프로젝트를 만들 때는 이렇게 yarn create react-app <프로젝트 이름> 명령어를 사용한다. 프로젝트 이름은 자유롭게 정하면 된다.텍스트