React 프로젝트를 시작하기 전에 여러가지 기초 설정을 진행합니다.
📘 node.js
node.js란?
- 쓰레드 기반 동기방식
- 단일쓰레드 이벤트 루프 기반 비동기방식
- V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임
--> 웹 브라우저 환경이 아닌 곳에서도 자바스크립트를 사용하여 연산 가능
react 프로젝트를 만들때는 node가 꼭 필요합니다. 무조건 적으로 필요한 것은 아니지만, 위에 node를 설명한 것처럼 node는 react를 사용할 때 더 쉽게 해주는 도구들을 내장하고 있는 오픈 소스이자, JavaScript runtime environment이기 때문입니다.
node를 설치하게 되면 NPM(node package manager)를 통하여 여러 모듈을 손쉽게 설치하고 사용할 수 있게 됩니다.
💻 설치 방법
- window 설치방법
- https://nodejs.org/ko/
- 버전 확인 (cmd창)
$ node -v로 버전 확인- macOS
- (cmd)
$ curl -o- https:raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash- 버전 확인
$ nvm --version
- 만약 버전이 나타나지 않는다면,
$ vim ~/.bash_profile이라는 명령어를 실행해주시고,
cmd창을 껏다가 다시 켜보신 후 잘 설치가 되었다면,
nvm install --lts명령어를 입력 후 설치를 진행하시면 됩니다.
⭐️ TIP ⭐️
- 홈페이지에서 설치 시 최신 버전과 안정성, 신뢰성 버전이 있는데, 여기선 안정성, 신뢰성 버전을 다운하여 적용해야 합니다.
- 프로젝트가 이미 진행된 상태에서 환경설정 시 해당 프로젝트와 맞는 node 버전을 설치하여, 프로젝트를 진행하여야 합니다.
(node 버전이 맞지 않을 시에, 코드 오류 등 다양한 오류가 발생할 여지가 큽니다)
📘 Yarn
저는 대부분 npm보다는 yarn이라는 패키지 매니저를 사용합니다. npm과 그 역할은 같으나, 다음과 같은 장점이 있습니다.
yarn을 사용하면 cashing을 이용하기 때문에 패키지 설치가 더 빠릅니다. 또한, 패키지를 순서대로 설치하는 npm과 달리 패키지를 병렬로 설치하므로 설치 속도가 빠릅니다.
💻 설치 방법
npm을 통하여 설치할 수 있습니다.
$ npm install --global yarn
설치 확인 방법
$ yarn --version
⭐️ TIP ⭐️
제가 처음 경험한 프로젝트에선 초기 프로젝트 설정 과정에서 npm만 설치하여 기동하는 경우 기동이 안되는 경우가 더러 있었습니다. 만약 npm 설치 후 프로젝트가 잘 기동하지 않는다면, npm 설치 이후에 yarn도 같이 설치해보는 것이 좋습니다.
📘 Visual Studio Code
다음은 에디터 설치를 진행하도록 하겠습니다. 전 주로 vscode를 사용하여 vscode 설치 방법만 담았지만, 에디터 같은 경우 본인이 원하는 것을 사용해도 무방합니다.
💻 에디터 종류
- vs code (visual studio code)
- IntelliJ
- PyCharm (대부분 파이썬 기반 개발을 할 때 사용)
- Atom
- Brackets
- sublime text
vscode 설치 링크
https://code.visualstudio.com/
📘 prettier & ESLint
다음은 개발을 하는데 있어서 사용하기 편한 vscode 확장 프로그램을 설치하려고 합니다.
안써도 무방하지만, 사용하면 편하기 때문에 사용을 권장합니다.
ESLint 란?
javascript 문법 및 코드를 검사하는 도구
prettier
코드 스타일을 자동으로 정리해주는 도구
(말 그대로 이쁘게 정렬해주는 도구 => 문법 검사 X)
💻 설치 방법
vscode 에서 왼쪽 Extensions를 누르고 검색창에 설치할 프로그램 검색 후 설치 진행!
