초기세팅하기

1.node설치하기 (npm도 함께 설치된다)

::Node.js

Node.js 는 자바스크립트가 브라우저 밖에서도 동작하게 하는 환경을 의미한다.

리액트 어플리케이션은 웹 브라우저 에서 실행되는 코드이므로 Node.js와 직접적인 연관은 없지만,

프로젝트를 개발하는 데 필요한 주요 도구들(ex.바벨, 웹팩)이 Node.js 기반이기 때문에 반드시 설치해야 한다.

Node.js를 설치하면 npm(node package manager) 이 자동으로 설치 되는데 npm을 사용하기 위해서는

node.js가 설치되어 있어야 한다. 터미널에서 아래 명령어를 실행 함으로써 node.js 버전을 확인할 수 있다.

노드 버전이 정상적으로 확인되면 설치도 정상적으로 이루어진 것이다.

$ node- v

node.js 설치하는 방법

node.js 홈페이지에 들어가서 LTS버전을 다운로드 받는다. 최신버전은 오류가 많을 수 있다. 설치완료후 node-v 로 버전을 확인할 수 있다.

::npm

node 기반의 패키지를 사용하려면 npm이라는 패키지 도구가 필요하다. npm을 통해 다양한 패키지를 설치하 고

관리를 할 수 있다. 마찬가지로 npm 버전을 아래 명령어를 통해 정상적으로 이루어졌는지 확인해볼 수 있다.

$ npm-v

2.CRA설치

:: CRA

리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 도구 (toolchain)

리액트는 UI 만 제공한다. 그러므로 전반적인 시스템을 직접 구축할 수 있으나

반대로 신경쓸 것이 많기 때문에 처음 시작하는 단계에서는 직접 개발 환경을 구축하기 어려울 수 있다.

이러한 문제를 해결하기 위해 CRA를 만들었다.

CRA는 리액트로 웹 어플리케이션을 만들기 위한 환경을 제공한다. CRA를 이용하면 하나의 명령어로 리액트 개발 환경을 구축할 수 있다

CRA는 바벨과 웹팩 과 같이 다양한 패키지가 포함되어 있으며 기존 기능을 개선하거나 새로운 기능을 추가했을 때 패키지 버전만 올리면 된다.

npx create-react-app 프로젝트명

• CRA의 기본폴더

  • node.modules
  • pakage.json
  • gitignore
  • index.html
  • index.js
  • app.js

2-1 CRA :: node.modules, package.json, gitignore

1.node.modules

• CRA를 구성하는 모든 패키지 소스 코드가 존재하는 폴더

2.package.json

• CRA 기본 패키지 외 추가로 설치된 라이브러리/패키지정보가 기록되는 파일
• 모든 프로젝트마다 package.json 하나씩 존재한다.
  -"dependencies"
  -리액트를 사용하기 위한 모든 패키지 리스트와 버전확이니 가능하며 실제 코드는 node.modules 폴더에 존재한다
• "script"
  -run : 프로젝트를 개발모드 실행을 위한 명령어
  -build : 프로젝트 배포모드 실행을 위한 명령어. 서비스 상용화
  

3. .gitignore

-.gitignore 파일에 github에 올리고 싶지 않은 폴더와 파일을 작성할 수 있다.

2-2 CRA :: index.html, index.js, App.js

1) public - index.html

-div id="root"

2) src -index.js

-React의 시작

ReactDom.render( <App />, document.getElementById('root'))

-ReactDom.render 함수의 인자는 두 개
-첫번째 인자 는 화면에 보여주고 싶은 컴포넌트
-두번째 인자 는 화면에 보여주고 싶은 컴포넌트 위치 단 이름은 함부로 수정하면 안된다.

3) src - App.js

-현재 화면에 보여지고 있는 초기 컴포넌트

필요에 따라 아래의 라이브러리를 설치할 수 있다!

3. React Router 설치

npm install react-router-dom --save

4. Sass 설치

npm install node -sass --save

5. eslintcache파일를 .gitignore에 추가한다

---

github과 연동하기

git add.
git commit- m "커밋메세지작성"
git remote add origin http:// 해당 repo 주소입력
git push origin main (연동된 레퍼지토리로 push)

---

ESlint-prettier 초기세팅

cra에 기본적으로 eslint가 세팅되어있다
프로젝트 root에 .eslintrc.json 라는 이름의 파일을 추가하고 아래 내용을 추가한다

{
"extends": "react-app"
}