[환경구성] CRA를 이용한 React 환경구성

---

💬 들어가며

이제는 공부하고 정리했던 자료를 확인할 때, 노션, 한글파일보다 블로그에 먼저 들어온다. 

 

오랜만에 환경구성부터 해볼려고하니 헷갈리는게 생각보다 있어 조금씩 정리해보려 한다!!

 

 

 

CRA 설치

CRA는 설치하고 사용하기 굉장히 편리하다. 

 

npx create-react-app 프로젝트이름

을 적으면 현재 폴더 아래에 프로젝트 CRA 프로젝트 파일이 생긴다. 

 

그럼 이런식의 폴더와 파일들이 구성된 것을 확인 할 수 있다. 

 

오늘은 많은 작업을 하지 않고 필요한 화면만 구성할 것이다. 

 

 

이전에 해봤던 것 처럼 react-router를 이용하여 page들을 관리할 생각이다. 

 

src 파일 정리

그러기 위해선 먼저 필요없는 파일들을 지워볼 예정이다. 

 

App.css , App.js, index.css, index.js

등의 파일들을 제외하고 모두 지웠다. 

 

구조는 index.js 에서 app.js를 호출하는 형식으로 되어있다. 

 

 

초기에 리액트 아이콘이 돌아가는 화면이 나오게 설정되어있는데, 필요없으니까 모두 지우고

 

react-router를 설치하여  필요한 페이지들을 빨리 구성해보자. 

 

npm install react-router-dom

 

을 이용하면 금방 설치가 되고 세팅은 개인자유다.

 

 

추가적인 세팅 (화면구성)

설치를 하는동안 코드가 단정한 것을 좋아하기때문에 프리티어 와 eslint를 설치해 주었다. 

 

오랜만에 환경구성을 하다보니 생각보다 막히는 부분이 있었지만; 역시 모두 나의잘못이었다. 

 

 

어찌되었든 모든 페이지가 연결되는것을 확인하고 마무리 했다!

 

---

하얀 background 에 연결된 화면 모습