⭐React 프로젝트 초기설정⭐

✍🏻나를위해 정리하는 글 💖은별천사 is love💖

1. CRA 설치

npx create-react-app (폴더명)

2. Router 설치

npm install react-router-dom --save

3. Sass 설치 (선택)

npm install sass --save

4. Styled-component + reset 설치 (선택)

npm install --save styled-components styled-reset

5. polyfill 설치 (Cross-browsing issue)

npm install react-app-polyfill

6. Eslint + Prettier 한번에 깔기

npm install -D prettier eslint-config-prettier eslint-plugin-prettier

7. Mac용 .eslinttrc 작성

{
    "extends": ["react-app", "plugin:prettier/recommended"],
    "rules": {
      "no-var": "warn", // var 금지
      "no-multiple-empty-lines": "warn", // 여러 줄 공백 금지
      "no-console": ["warn", { "allow": ["warn", "error"] }], // console.log() 금지
      "eqeqeq": "warn", // 일치 연산자 사용 필수
      "dot-notation": "warn", // 가능하다면 dot notation 사용
      "no-unused-vars": "warn", // 사용하지 않는 변수 금지
      "react/destructuring-assignment": "warn", // state, prop 등에 구조분해 할당 적용
      "react/jsx-pascal-case": "warn", // 컴포넌트 이름은 PascalCase로
      "react/no-direct-mutation-state": "warn", // state 직접 수정 금지
      "react/jsx-no-useless-fragment": "warn", // 불필요한 fragment 금지
      "react/no-unused-state": "warn", // 사용되지 않는 state
      "react/jsx-key": "warn", // 반복문으로 생성하는 요소에 key 강제
      "react/self-closing-comp": "warn", // 셀프 클로징 태그 가능하면 적용
      "react/jsx-curly-brace-presence": "warn", // jsx 내 불필요한 중괄호 금지
      "prettier/prettier": [
        "error",
        {
          "endOfLine": "auto"
        }
      ]
    }
  }

8. Window용 .eslintrc 작성

{
  "extends": ["react-app", "plugin:prettier/recommended"],
  "rules": {
    "no-var": "warn", // var 금지
    "no-multiple-empty-lines": "warn", // 여러 줄 공백 금지
    "no-console": ["warn", { "allow": ["warn", "error"] }], // console.log() 금지
    "eqeqeq": "warn", // 일치 연산자 사용 필수
    "dot-notation": "warn", // 가능하다면 dot notation 사용
    "no-unused-vars": "warn", // 사용하지 않는 변수 금지
    "react/destructuring-assignment": "warn", // state, prop 등에 구조분해 할당 적용
    "react/jsx-pascal-case": "warn", // 컴포넌트 이름은 PascalCase로
    "react/no-direct-mutation-state": "warn", // state 직접 수정 금지
    "react/jsx-no-useless-fragment": "warn", // 불필요한 fragment 금지
    "react/no-unused-state": "warn", // 사용되지 않는 state
    "react/jsx-key": "warn", // 반복문으로 생성하는 요소에 key 강제
    "react/self-closing-comp": "warn", // 셀프 클로징 태그 가능하면 적용
    "react/jsx-curly-brace-presence": "warn", // jsx 내 불필요한 중괄호 금지
    "prettier/prettier": [
      "error",
      {
        "endOfLine": "auto"
      }
    ]
  }
}

9. .prettierrc 작성

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

10. .gitignore에 추가

.eslintcache

11. index.js

import 'react-app-polyfill/stable';
import React from 'react';
import ReactDOM from 'react-dom';
import GlobalStyle from './Styles/globalStyle';
import theme from './Styles/theme';
import { ThemeProvider } from 'styled-components';
import Routes from './Routes';

ReactDOM.render(
  <>
    <GlobalStyle />
    <ThemeProvider theme={theme}>
      <Routes />
    </ThemeProvider>
  </>,
  document.getElementById('root')
);

12. Routes.js

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import 컴포넌트명 from './Page/컴포넌트명';

function Routes() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={() => <컴포넌트명 />} />
      </Switch>
    </Router>
  );
}

export default Routes;

13. Styles 폴더 > globalStyle.js

import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset';

const GlobalStyle = createGlobalStyle`
${reset}
*{
  position: relative;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;
}

body{
  font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Nanum Gothic', 'Malgun Gothic', sans-serif;
  box-sizing: border-box;
  position: relative;
}

button:hover{
  cursor: pointer;
}
`;

export default GlobalStyle;

14. Styles 폴더 > theme.js (edit)

const theme = {
  background: '#FFFEFC',
  white: '#FFFFFF',
  vermilion: '#ff7425',
  orange: '#FF9900',
  opacityOrange: 'rgba(242,153,74,0.5)',
  yellow: '#FFD66C',
  grey: 'rgba(196,196,196,0.3)',
  middleGrey: 'rgba(65,65,65,0.4)',
  deepGrey: '#828282',
  lightOrange: 'rgba(255,195,170,0.3)',
  fontColor: '#2D2B2B',
  fontTitle: "'Alata', sans-serif;",
};

export default theme;

15. git repository 연결

git add . 
git commit -m "(커밋 메시지)"

// Push an existing repository from the command line
git remote add origin (깃헙주소) 
git remote -v 
git push origin main

---