미루고 미뤘던 CRA로 react 환경 구성하는 방법을 설명하려한다! 😃 너무 간단하고 쉬워서 중간에 개념과 같이 설명할 예정! (리액트를 다루는 기술을 정리한 내용은... 천천히 올리는거로....)
Node.js & npm
Node.js
react를 알아보는 시간에 node.js란 단어는 뜬금없이 들리겠지만, react를 구성하는데 있어 꼭 필요한 환경이다. 자바스크립트가 브라우저 밖에서도 동작하게하며,(= 탈웹이라고도 부른다.) 프로젝트 개발 환경을 구축하는 도구인 CRA, Babel, Webpack들이 node.js로 가능하다!
npm
npm은 Node Package Manager의 축약어로서 node.js를 깔면 기본적으로 같이 설치되는것이다. node 기반의 패키지를 사용하려면 npm은 필수이다. 이 둘의 관계는 node.js가 스마트폰이라면 npm은 앱스토어/구글스토어 같은 어플리케이션을 다운 받을 수 있는 중간다리라고 생각하면된다.
Node.js 설치
node.js는 자신에게 맞는 환경을 사용해서 다운받고, LTS와 현재 버전이 있는데 LTS는 안정화된 버전 /현재 버전은 불안정하지만 기능이 많이 추가되는 환경이다.(현재 버전을 받아도 상관은 없다.) 👇 아래의 주소를 클릭해서 다운받자
https://nodejs.org/ko/download/
예전에 설치한 나로서는 하나 하나 캡처 할 수 없기에 말로 대략적으로 설명하고 넘어간다.(그냥 next하고 install하면 끝이다.)
환경 구성 방법
다음으로는 node.js를 설치 한 후 본격적으로 설치하는 방법을 글로 표현하였다!
-
mac(window 방법도 가능하다.)
👉 만든 폴더를 iterm에 드래그 앤 드랍한다 👉 엔터를 누른다 👉npx create-react-app .를 입력한다 👉 완성한다. 👉 마지막에 'Happy hacking!'하면 완성!(iterm에서 나온다.) 👉code .으로 vscode로 들어가거나 vscode에서 폴더를 끌어온다. -
window
👉 vscode를 킨다. 👉 만든 폴더를 연다 👉 터미널을 킨다 👉npx create-react-app .를 입력한다 👉 완성한다. 👉 마지막에 'Happy hacking!'하면 완성!(터미널에서 나온다.)
공통적으로 npm start를 하여 브라우저가 뜨면 리액트 로고가 돌아가는걸 감상하면 된다(👏 역시 난 천재야라고 생각해도 된다.)
CRA??
CRA란 create-reactp-app의 줄임말으로서 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 명령어이다. 리액트는 단순이 UI 기능만 제공해서 개발자가 직접 구축해야하는 것들이 많은데, 초보자가 CRA없이 구현한다면 뭐가 뭔지 몰라서 포기 할것이다.(= 이것이 실제 겪어본 경험..🙄) 그래서 처음 배울때 CRA를 추천한다고 한다.
CRA로 만든 폴더!
우선 눈 여겨 볼것이 node_modules, package.json, .gitignore 이 세가지가 있는데, 다음과 같이 설명하겠다.
-
node_modules
CRA를 구성하는 모든 패키지 소스 코드가 존재하는 폴더이다. -
package.json
만들고 있는 어플리케이션에 대한 정보가 기록 된 파일이다.
CRA 외 추가로 설치된 라이브러리/패키지 정보가 이 파일에 기록된다! -
.gitignore
github에 올라가지 않아도 되는 폴더와 파일을 작성한다.
.gitingnore에 node.modules가 포함 되는것을 볼 수 있는데, node_modules의 정보는 package.json이 가지고있기 때문에 제외해도 된다. 만약 다른 사용자가 이용하려면 npm install로 받으면 해당 프로젝트의 node_modules이 다운받아진다.
간단한 개념과 함께 node.js를 다운 받는 법과 환경 구성을 설명해봤는데, 생각보다 간단해서 초보도 도전해 볼만한것같다! 🤔
