[React] CRA 로 초기세팅 하기

녕녕·2023년 1월 26일

React

React🍰

목록 보기

3/4

리액트로 프로젝트를 두번 진행했다. 모두 다른 팀원이 셋팅을 해줘서 어떻게 초기 셋팅을 하는지 궁금했다. 또 폴더 구조는 어떻게 하는 것이 좋을지 알고 싶어 정리해봤다.

0. git repository

eun0leee/react-cra-setting 링크

1. CRA 기본 패키지 설치

cd Desktop
C:\Users\user\Desktop> npx create-react-app react-cra-setting
cd react-cra-setting
npm run start

2. 파일 기본 설정 변경

2.1 public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- 파비콘 변경 -->
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Web site created using create-react-app" />
    <!-- 타이틀 변경 -->
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

2.2 src

app.js, index.js 빼고 파일 모두 삭제
app.js

function App() {
  return <div className="App"></div>;
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode> //strict mode 없애려면 삭제
    <App />
  </React.StrictMode>
);

3. 폴더 구조

아래에서 필요한대로 수정해서 쓰기

📦public
 ┣ 📂data
 ┣ 📂images
 ┣ 📜favicon.ico
 ┣ 📜index.html
 ┣ 📜manifest.json
 ┗ 📜robots.txt

data : mock data 관리
images : index.html내부에서 직접 사용하여 컴파일 단계에서 필요하지 않은 image 파일

📦src
 ┣ 📂components
 ┃ ┗ 📂Header
 ┃ ┃ ┣ 📂assets
 ┃ ┃ ┗ 📜Header.jsx
 ┣ 📂hooks
 ┣ 📂pages
 ┃ ┣ 📂Main
 ┃ ┃ ┣ 📂assets
 ┃ ┃ ┗ 📜Main.jsx
 ┃ ┗ 📂Search
 ┃ ┃ ┗ 📜Search.jsx
 ┣ 📂apis
 ┣ 📂styles
 ┣ 📂utils
 ┣ 📜App.js
 ┗ 📜index.js

components : 공통 컴포넌트
hooks : 커스텀 훅
pages : 라우팅이 적용되는 페이지 컴포넌트
- assets : 컴포넌트 내부에서 사용하는 이미지 및 기타 파일
apis : api 관련 모듈 파일
styles
- sass 사용 : reset.scss(css 초기화) common.scss(공통 css 속성 정의)
- styled component 사용 : GlobalStyle.js(css 초기화) theme.js(공통 css 속성 정의)
utils : 공통 함수

4. 추가 라이브러리 및 패키지 설치

npm install react-router-dom --save
npm install node-sass --save
npm install --save styled-components

// prettier, eslint 연동
npm install -D prettier eslint-config-prettier eslint-plugin-prettier

npm install axios
npm install dotenv
npm install typescript

5. root 경로

.env, .prettierrc 파일 생성
다양한 설정파일이 존재할 경우 다음과 같은 순서로 설정 적용
settings.json → .editorconfig → .prettierrc

// .prettierrc
// 팀원들과 상의해서 아래에서 필요한 것만 골라 쓰기

{
  "arrowParens": "avoid", // 화살표 함수 괄호 사용 방식
  "bracketSpacing": false, // 객체 리터럴에서 괄호에 공백 삽입 여부 
  "endOfLine": "auto", // EoF 방식, OS별로 처리 방식이 다름 
  "htmlWhitespaceSensitivity": "css", // HTML 공백 감도 설정
  "jsxBracketSameLine": false, // JSX의 마지막 `>`를 다음 줄로 내릴지 여부 
  "jsxSingleQuote": false, // JSX에 singe 쿼테이션 사용 여부
  "printWidth": 80, //  줄 바꿈 할 폭 길이
  "proseWrap": "preserve", // markdown 텍스트의 줄바꿈 방식 (v1.8.2)
  "quoteProps": "as-needed" // 객체 속성에 쿼테이션 적용 방식
  "semi": true, // 세미콜론 사용 여부
  "singleQuote": true, // single 쿼테이션 사용 여부
  "tabWidth": 2, // 탭 너비 
  "trailingComma": "all", // 여러 줄을 사용할 때, 후행 콤마 사용 방식
  "useTabs": false, // 탭 사용 여부
  "vueIndentScriptAndStyle": true, // Vue 파일의 script와 style 태그의 들여쓰기 여부 (v1.19.0)
  "parser": '', // 사용할 parser를 지정, 자동으로 지정됨
  "filepath": '', // parser를 유추할 수 있는 파일을 지정
  "rangeStart": 0, // 포맷팅을 부분 적용할 파일의 시작 라인 지정
  "rangeEnd": Infinity, // 포맷팅 부분 적용할 파일의 끝 라인 지정,
  "requirePragma": false, // 파일 상단에 미리 정의된 주석을 작성하고 Pragma로 포맷팅 사용 여부 지정 (v1.8.0)
  "insertPragma": false, // 미리 정의된 @format marker의 사용 여부 (v1.8.0)
  "overrides": [ 
    {
      "files": "*.json",
      "options": {
        "printWidth": 200
      }
    }
  ], // 특정 파일별로 옵션을 다르게 지정함, ESLint 방식 사용
}