eslint가 JSX를 못 알아먹는다

1
2
3
4
5
6

{
  "globals": {
    "JSX": true
  }
  //...
}

1
2

yarn add @emotion/css @emotion/react @emotion/babel-preset-css-prop
yarn add -D react-app-rewired customize-cra

1
2
3
4
5
6

{
  "compilerOptions": {
    // ...
    "jsxImportSource": "@emotion/react"
  }
}

• jsx 엘리먼트에서 css 속성을 사용할 수 있다

참고

• https://emotion.sh/docs/typescript#css-prop
• https://emotion.sh/docs/@emotion/babel-preset-css-prop#install
• https://github.com/chinsun9/react-ts-template/tree/cra5.css-prop

• 7777 커밋

1

git rebase main

• main branch와 현재 브랜치가 충돌이 나서 자동 병합이 안될 떄
• rebase를 톨해 로컬에서 충돌을 해결할 수 있다

못생긴 기본 스타일을 제거해보자

1
2
3
4
5

a,
button,
input {
  all: unset;
}

예전의 삽질들…

• https://chinsun9.github.io/2020/10/08/a-tag-no-color/
• https://chinsun9.github.io/2020/11/03/li-point-remove/
• https://chinsun9.github.io/2020/12/15/input-number-화살표-없애기/

참고

• https://developer.mozilla.org/ko/docs/Web/CSS/all

• nodejs, javascript, typescript 등 어떤 카테고리에 넣어야할지 고민하다가 그냥 vscode에 넣었다

• 왜냐하면 vscode를 재시작하는 게 중요 포인트이기 때문이다

• ESLint: Restart ESLint Server 또는

• developer: reload window 을 꼭 해주자

• eslint config를 수정했으면 vscode창을 다시 실행한다
• eslint config를 수정했는데, 린트가 동작하지 않는데, 뭐 때문에 동작하지 않는지 모른다면
• yarn eslint tmp.ts 같은 명령을 사용해서 아웃풋을 확인한다
• 그러면 어떤 패키지가 없어서, 어떤 유효하지 않은 설정을 사용해서 동작하지 않는다는 정보를 얻을 수 있다
• 그리고 eslintrc에 들어가는 내용을 너무 다 세세히 알려고 하지 말자
• 일단 동작하면 그러려니 하면 된다
• 나중에 관련해서 더 세세하게 커스텀 하고 싶을 때만 알아보자

eslint 장점

• 코딩 실력이 크게 늘었다?
• eslint가 잡아주는 오류들을 수정하면서
• js의 유용한 문법이나,
• 불필요한 코드들을 많이 지울 수 있었다

• 예를 들면, prefer-destructuring룰로 구조 분해 할당 같은 문법들을 알게 된다라던가
• 반복문 안에서 비동기 함수를 await을 붙여 실행하는데,
• 당시에는 비동기가 익숙하지 않아서 무조건 await을 붙여서 값을 바로 꺼내서 핸들 하기 급급했는데,
• 린트가 Unexpected 'await' inside a loop. 에러를 뱉어줬다
• 관련해서 검색하고 공부하고, Promise에 대해 자세히 공부해보고,
• 결국 이전의 결과가 다음에 필요하지 않다면
• Promise.all로 실행해서 병렬로 처리 후에 한 번에 결과를 받아서 핸들 한다던가

• 선생님 같은 느낌으로 정말 도움이 많이 되었다

eslint rule 설정할 때

“off” or 0 - turn the rule off
“warn” or 1 - turn the rule on as a warning (doesn’t affect exit code)
“error” or 2 - turn the rule on as an error (exit code is 1 when triggered)

• 문자열 또는 숫자로 설정할 수 있다
• https://eslint.org/docs/user-guide/configuring/rules

prettier와 함께쓰기

1

yarn add -D prettier eslint-config-prettier

• eslint-config-prettier를 설치한다
• eslint와 prettier같 충돌나는 룰을 disable해준다

1
2
3
4
5
6
7
8
9
10
11
12

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "react-app",
    "react-app/jest",
    "plugin:react/recommended",
    "airbnb",
    "prettier" // 여기 추가
  ],

• eslintrc > extends 배열 마지막에 prettier를 추가한다
• https://github.com/prettier/eslint-config-prettier

참고

• https://eslint.org/docs/rules/no-await-in-loop
• https://eslint.org/docs/user-guide/configuring/rules
• https://github.com/prettier/eslint-config-prettier

이전에 react eslint 관련해서 여러 글을 작성했다 (다 엄청난 삽질이었다…)

1

npx eslint --init

• 위 명령으로 한 번에 해결
• 방향키로 선택 선택 넘어가면, 알아서 환경을 세팅해준다

CRA와 eslint –init해서 프로젝트 세팅하는 과정

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# CRA로 리액트 프로젝트 시작
yarn create react-app . --template typescript

# eslint --init 으로 eslint 세팅
yarn eslint --init
√ How would you like to use ESLint? · style
√ What type of modules does your project use? · esm
√ Which framework does your project use? · react
√ Does your project use TypeScript? · Yes
√ Where does your code run? · browser
√ How would you like to define a style for your project? · guide
√ Which style guide do you want to follow? · airbnb
√ What format do you want your config file to be in? · JSON
√ Would you like to install them now with npm? · No

• 입맛대로 답변한다
• 특히 마지막 Would you like to install them now with npm? 물음에는 No로 답변한다
• No로 답변하고 필요한 종속성을 yarn으로 설치해준다
• (Yes로 답변하면, npm으로 설치되며 package-lock.json이 생성된다)

1
2
3
4
5
6
7
8
9
10
11

# 콘솔에 적힌 종속성들을 복사해서 적절히 편집하고 실행한다
# 여러 버전들을 나열해서 알려주는데, 그중에서 최신 버전을 다운받았다
yarn add -D \
    eslint-plugin-react@^7.21.5 \
    @typescript-eslint/eslint-plugin@latest \
    eslint-config-airbnb@latest \
    eslint@^7.2.0 \
    eslint-plugin-import@^2.22.1 \
    eslint-plugin-jsx-a11y@^6.4.1 \
    eslint-plugin-react-hooks@^4 \
    @typescript-eslint/parser@latest

1
2
3
4
5

# eslint와 prettier를 함께 쓰려면 아래도 함께 설치한다
yarn add -D \
    prettier  \
    eslint-plugin-prettier  \
    eslint-config-prettier

참고

• https://eslint.org/docs/user-guide/getting-started
• https://github.com/chinsun9/react-ts-template/tree/v20210827

• https://ngrok.com/download
• 포트포워딩없이 서버 외부에 공유하기
• https로 열어준다
• 너무 간단하다
• zip 받아서 원하는 곳에 풀고,

1

ngrok http 3000

• path 환경변수 등록해서 어디서든 cli에서 실행할 수 있다

• 근데 이거보다 더 쉬운 localtunnel이 있다

대안 ; localtunnel

1

npx localtunnel --port 3000

• 포트만 설정해주면 끝

참고

• localtunnel ; https://github.com/localtunnel/localtunnel
• https://www.softwaretestinghelp.com/ngrok-alternatives/
  • ngrok의 대안들

1
2

const PrimitiveType =
  string | number | bigint | boolean | undefined | symbol | null;

• primitive value are immutable

array fill

1
2
3
4
5
6
7

const arr1 = new Array(2).fill({});
arr1[0].a = 1;
console.log(arr1); // [{a:1}, {a:1}] // 전부다 적용됨

const arr2 = new Array(2).fill(0);
arr2[0] = 1;
console.log(arr2); // [1, 0] // 하나만 적용됨

react state

1
2
3
4
5
6
7
8
9
10
11
12
13
14

const [state, setState] = useState(0);
const [state2, setstate2] = useState<number[]>([]);

const onClickHandler = () => {
  setState(1); // 제대로 렌더링 됨

  state2.push(1);
  setstate2(state2); // 레퍼런스가 달라지지 않아서 리렌더링 안됨
  console.log({ state2 }); // 로그는 제대로 찍힘
};

const onClickHandlerFix = () => {
  setstate2((prev) => [...prev, 1]); // 레퍼런스를 바꿔줘야 리렌더링
};

참고

• https://developer.mozilla.org/ko/docs/Glossary/Primitive
• bigint ; https://youtu.be/jrPybxoSogs