React에 대해 알기 전에 Node.js에 대해서 알아보자!
Node.js
자바스크립트를 브라우저가 아닌 환경에서 실행할 수 있게 해주는 실행 프로그램
자바스크립트를 사용하기 위해 만들어진 것
JavaScript언어는 웹 브라우저 프로그램 안에서만 동작을 한다.
즉, 웹 브라우저(크롬, 사파리, 익스플로러, 파이어폭스 등)가 없으면 사용할 수 없는 프로그램이다.
그런데!!
⭐️Node.js를 설치하게 되면 터미널프로그램(윈도우의 cmd, 맥의 terminal 등)에서 Node.js를 입력하여 브라우저 없이 바로 실행할 수 있다.
React를 사용하기 위해서 Node.js가 반드시 필요한 것은 아니지만,
Node.js가 React를 사용하기 더 쉽게 해주는 도구들을 내장하고 있는 오픈소스이기 때문에 React를 검색하면 항상 Node.js가 따라오는것이다!
Node.js를 설치하는 경우 NPM이 같이 설치되며, NPM를 통해 React 개발에 필요한 다양한 모듈을 다운 받아 사용할 수 있다.
NPM(Node Package Manager)
노드 자바스크립트로 만든 기능들을 관리해주는 사이트(npmjs.com)
다른사람들이 이미 만들어논 기능을 다운로드 받아서 사용할 수 있게 해준다.
🔈 여기부터는 컴퓨터에 node.js가 설치되어 있어야 합니다.
→ 노드는 크롬에 node.js를 검색해 LTS버전으로 설치합니다.
(신버전은 버그가 있을 수 있어 LTS 버전을 설치합니다.)
- node.js 설치
크롬에서 node.js를 검색해서 LTS버전으로 설치하기
(LTS는 Long Term Support로 오랜시간 지원 받아와서 안정적인 버전이라는 뜻)
1. 바탕화면에 **"codecamp_O기_이름"** 폴더 만들기
2. **"codecamp_O기_이름"** 폴더에 **"class"** 라는 이름의 **Next.js** 프로젝트 설치하기
=> Next.js를 설치하면 **React.js**는 자동으로 함께 설치됩니다.
3. **"class"** 폴더에 **Emotion** 설치하기
4. **"class"** 폴더에 **Apollo-Client, Graphql** 설치하기
5. **"class"** 폴더에 **Ant-Design** 설치하기
6. **"class"** 폴더에 **Material-UI** 설치하기
7. **"class"** 폴더에 **Axios** 설치하기React다운로드를 받으려면 node.js + npm 이 설치되어 있어야 함!
npm이 너무 느려서 빠르게 다운로드 받을 수 있는 것을 fb이 만들게 됨 = yarn
