React 초기 세팅

1. node.js 설치

node.js를 설치하면 npm도 함께 설치된다.

2. CRA 설치

npx create-react-app (폴더명) 쳐서 cra 설치

• typescript case :
  npx create-react-app my-app --template typescript

3. react-router-dom 설치

npm install react-router-dom --save 라우터 설치

4. sass 설치

npm install sass --save 로 sass (scss) 설치

npm start가 안될땐?

터미널에 npx react-scripts start 입력 후
완료되면 npm start 안될 시 npm i 타이핑

ESLint & Prettier 설치

1. ESLint 설치

코드 문법 검사 및 코드 포맷팅을 수행하는 툴인 ESLint를 설치한다.

npm install --save-dev eslint

2. Prettier pakage 설치

코드 포맷팅만을 집중적으로 수행하는 툴인 Prettier를 설치한다.

npm install --save-dev prettier

3. eslint-config-prettier 패키지 설치

Prettier 설정과 충돌 나는 ESLint의 설정을 비활성화하는 역할을 수행한다.

npm install --save-dev eslint-config-prettier

4. eslint-plugin-prettier 패키지 설치

ESLint 안에서 Prettier 검사를 실행하도록 설정한다. 즉, Prettier 검사 결과를 ESLint 검사 결과처럼 보여주도록 한다.

npm install --save-dev eslint-plugin-prettier

5. ESLint에 Airbnb Style Guide를 적용하기 위한 패키지 일괄 설치

ESLint에 Airbnb Style Guide를 적용하기 위한 여러 개의 패키지들을 일괄 설치한다.

npx install-peerdeps --dev eslint-config-airbnb

6. ESLint 설정 파일(.eslintrc.json) 작성하기

src

{
  "extends": [
    "react-app",
    "react-app/jest",
    "plugin:prettier/recommended",
    "airbnb",
    "prettier"
  ],
  "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"
      }
    ]
  }
}

7. Prettier 설정 파일(.prettierrc) 작성하기

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

css reset

css reset code

src => style 폴더 만들고 => 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;
}
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;
}
button {
  all: unset;
}