TIL 30 | React CRA Setting Guidelines 정리

Moon ·2021년 7월 25일

React

목록 보기

3/11

✔️Step 1. CRA 설치

우선 원하는 디렉토리로 이동 후 CRA 프로젝트 설치한다.
npx create-react-app westagram-project
( terminal로 현재 경로 확인하고 최상단으로 위치 이동! 그렇지않으면 아무것도 없는 전체폴더에 그냥 다운 받아지게되어서 CRA적용이 되지 않는다. )
그 후, npm install / npm start

*참고로 터미널 확실하게 리셋하는 단축키는 Ctrl + c

✔️ Step 2. React Router 설치

npm install react-router-dom —save
*설치 후, package.json 통해서 react router dom이랑 노드 sass 버전 제대로 설치되었는지 확인 필요!

✔️ Step 3. Sass 설치

npm install node-sass@4.14.1 —save
(* CRA ver "4.0.3" 과 node-sass ver 6.0 이랑 호환이 안되는 이슈가 있음, 이슈 해결 전까지 node-sass ver 4.14.1 로 버전지정해서 설치해야 한다.)
react touter와 마찬가지로, package.json 통해서 react router dom이랑 노드 sass 버전 제대로 설치되었는지 확인하기!!

✔️ Step 4. .eslintcache 파일 .gitignore에 추가

git hub에 공유하고싶지 않은 폴더/파일은 gitignore에 추가하는 것 잊지말자.

✔️ Step 5. CRA폴더 및 파일 구성

index.js가 모든것의 시작점이라는 것을 기억하자.
우리가 CRA를 설치하다보니 불필요한 파일들도 생성되어 나온다.
따라서 지금부터는 우리가 프로젝트에서 쓰지 않을 필요없는 폴더/태그들은 정리하도록 한다.
하단 전체 파일 구성도를 확인하여 참고하자.

1) 전체 파일 구성도 확인

프로젝트 이름 하단엔 public과 src로 크게 나뉘어 진 것을 확인 할 수 있다.

📂 src 폴더

📂 pages 폴더

• 각자의 이름으로 된 폴더를 생성합니다.
• 그 안에 Login, Main 폴더를 생성합니다.
• Login 폴더 >>> Login.js, Login.scss
• Main 폴더 >>> Main.js, Main.scss

📂공통 components 폴더

components를 만들고 Nav와 Footer를 만들어준다.
위의 폴더는 팀원들과 같이 써야하는것이기 때문에 누구나 접근 쉽게하도록 components에 넣도록 한다.
하지만 만약 ‘나’만 쓰고자 한다면 components에 넣지 않고 pages에 나의 이름 폴더 Main에 Aside파일을 만들어주도록 한다. 이를 통해 기능적/레이아웃적으로 끊어지는 부분을 따로 만들고 분리해 주어 가독성을 높일 수 있다.
src에 styles를 만들고 common.scss와 reset.scss만들기
Common.scss는 * {
Box-sizing: border-box;}
Reset.scss는 구글에 찾아서 복/붙 하기

📂styles 폴더

• reset.scss - default css 속성 초기화 (해당사항은 googling해서 복붙하여 사용하면 된다.)
• common.scss - 함께 쓰는 공통 css 속성(ex. theme color)
Routes.js
• 팀원 당 컴포넌트 두 개(Login, Main)에 대한 경로를 따로 따로 설정해 줍니다.

// 문실's 컴포넌트
import LoginMoon from './pages/moon/Login/Login';
import MainMoon from './pages/moon/Main/Main';

// 철수's 컴포넌트
import LoginChulsoo from './pages/Chulsoo /Login/Login';
import MainChulsoo from './pages/Chulsoo /Main/Main';

// import 한 컴포넌트에 대한 경로를 각각 설정해줍니다.
<Route exact path='/login-moon' component={LoginMoon} />
<Route exact path='/main-moon' component={MainMoon} />
<Route exact path='/login-chulsoo' component={LoginChulsoo} />
<Route exact path='/main-chulsoo' component={MainChulsoo } />

assets/images 폴더

다음과 같이 css 에서 background-image 속성을 사용해서 이미지를 삽입하는 경우가 있다.

```jsx
.feedImage {
  background-image: url('/images/feedImage.jpg'); // 에러! url은 public 폴더에 접근하는 게 불가능!
}
```

css 에서는 public 폴더에 접근하는 것이 불가능 하므로, 위와 같은 경우엔 이미지 파일들을 `src/assets/images` 디렉토리에서 관리해야 한다.

```jsx
.feedImage {
  background-image: url('/src/assets/images/feedImage.jpg');
}
```