[React]개발 환경 초기 셋팅

개발 환경 초기 셋팅은 자주 경험 해보지 못할 것 같아 정리하였다

초기 셋팅을 잘 해야 하는 이유는 여러명의 팀원이 작업을 한 후 작업물을 합쳤을 때 작업 환경이 다르게 설정되어 있을 경우 레이아웃이 깨지는 것을 방지하기도 하고, 자주 사용하는 코드를 같이 공유하여 사용 할 수도 있기 때문에
개발 초기 셋팅에 따라서 일이 꼬이는 것을 방지하거나, 여러번 작업해야 되는 것을 간단히 할 수 있는 것이다.

개발 환경 초기 셋팅

• 원하는 위치에 디렉토리 생성
• 터미널 실행
• cd 경로 입력하여 생성한 디렉토리로 이동(ex)cd /user/chosh/project/projectName)

CRA 초기 셋팅

1. CRA 설치
   npx create-react-app project-name

2. React Router 설치(라우터 기능을 사용하기 위해 설치)
   npx install react-router-dom --save
   --save 는 package.json에 저장 하기 위해서 작성

3. sass 설치
   npm install node-sass --save

4. .eslintcache 파일 .gitignore에 추가
   .eslintcache 파일은 깃에서 관리할 필요가 없어서 추가

CRA 폴더 및 파일 구성

1. pages 폴더
   페이지별로 폴더를 생성
   컴포넌트를 만들어야 되면 이 페이지 하위에 생성 해서 관리하는게 나중에 찾아가기 편함

2. components 폴더 생성
   공용 컴포넌트 폴더로 사용(ex)Header, Nav, footer 등등)

3. styles 폴더
   reset.scss 폴더 생성
   여러명이 작업 후 나중에 합쳤을때 서로 설정이 달라 레이아웃이 깨지는것을 방지

   리셋 파일에 아래의 내용 넣어서 추가

     html, body, div, span, applet, object, iframe,
       h1, h2, h3, h4, h5, h6, p, blockquote, pre,
       a, abbr, acronym, address, big, cite, code,
       del, dfn, em, img, ins, kbd, q, s, samp,
       small, strike, strong, sub, sup, tt, var,
         b, u, i, center,
           dl, dt, dd, ol, ul, li,
           fieldset, form, label, legend,
           table, caption, tbody, tfoot, thead, tr, th, td,
           article, aside, canvas, details, embed, 
           figure, figcaption, footer, header, hgroup, 
           menu, nav, output, ruby, section, summary,
           time, mark, audio, video {
             margin: 0;
             padding: 0;
             border: 0;
             font-size: 100%;
             font: inherit;
             vertical-align: baseline;
           }
     /* HTML5 display-role reset for older browsers */
     article, aside, details, figcaption, figure, 
       footer, header, hgroup, menu, nav, section {
         display: block;
       }
     body {
       line-height: 1;
     }
     ol, ul {
       list-style: none;
     }
     blockquote, q {
       quotes: none;
     }
     blockquote:before, blockquote:after,
       q:before, q:after {
         content: '';
         content: none;
       }
     table {
       border-collapse: collapse;
       border-spacing: 0;
     }

   출처 : http://meyerweb.com/eric/tools/css/reset/

   common.scss 파일 생성
   공통으로 자주쓰는 스타일 생성
   폰트에 대한 클래스를 지정, 가운데 정렬 설정 들어가있는 클래스 지정 등등

4. Routes.js 파일 생성
   페이지에 대한 경로를 따로 설정해서 서로 테스트 해볼 수 있게 설정

5. assets/images 폴더 생성
   백그라운드 이미지로 사용할 이미지는 src/assets/images 안에서 관리해서 scss 파일이 접근 할 수 있도록 관리

6. eslint 파일 생성
   eslint에 대한 설정을 적용

   {
   "extends": ["react-app", "prettier"],
   "plugins": ["prettier"],
   "rules": {
     "prettier/prettier": ["error", { "endOfLine": "auto" }]
   }
   }

7. .prettierrc 파일 생성
   prettier 에 대한 설정을 적용

     {
   "tabWidth": 2,
   "endOfLine": "lf",
   "arrowParens": "avoid",
   "singleQuote": true
   }

8. settings.json
   탭 사이즈, 자동저장 등등 설정을 해주는 파일
   프로젝트 폴더 하위에 바로 .vscode 폴더를 만들어 주고 그 하위에 settings.json 파일을 생성

   {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.tabSize": 2,
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true
     },
     "javascript.format.enable": false,
     "eslint.alwaysShowStatus": true,
     "files.autoSave": "onFocusChange"
   }

public 폴더

1. data 폴더
   mock data 등을 생성해서 관리 할 수 있도록 폴더만 일단 생성
   필요한 mock data는 json 파일로 생성해서 사용
2. images 폴더
   불러오기만 하면 되는 이미지들을 여기서 관리

git에 올리기

1. git repo 생성
2. git push