1
2
3

yarn create react-app . --template typescript
yarn eslint --init
yarn add -D eslint-config-airbnb@latest

• cra + eslint(airbnb)
• 이렇게 리액트 프로젝트를 시작했을 때,

import/extensions
import/no-unresolved
react/jsx-filename-extension

• 이런 오류가 나온다
• 오류가 뜨지 않도록 eslintrc를 설정해주자

eslintrc

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

{
  // ...
  "rules": {
    "react/jsx-filename-extension": [
      "error",
      { "extensions": [".ts", ".tsx"] }
    ],
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "ts": "never",
        "tsx": "never"
      }
    ]
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".ts", ".tsx", ".js", ".jsx"]
      }
    }
  }
}

• 위처럼 설정해 주었다

참고

• https://github.com/chinsun9/react-ts-template/tree/cra5
• https://github.com/import-js/eslint-plugin-import/issues/1615
• https://stackoverflow.com/questions/55614983/jsx-not-allowed-in-files-with-extension-tsxeslintreact-jsx-filename-extensio

1
2
3
4
5
6
7
8
9

// input
1
2
3

// output
3
2
1

• 역전?시킬 수 있다
• 외에도 중복라인삭제, 셔플 등의 기능이 있다

참고

• https://github.com/earshinov/vscode-permute-lines/

• 익스텐션으로 사용하던 Bracket Pair Colorizer가 vscode 기본 기능이 되었다
• 기존에 사용하던 익스텐션을 제거하고, 세팅에서 활성화해주었다

1
2
3
4

{
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active"
}

참고

• https://github.com/CoenraadS/BracketPair#readme

• https://youtu.be/kK4Meix58R4

1
2
3
4
5
6
7
8
9
10

npm version -h

# 호환가능 버그수정
npm version patch

# 호환가능 기능 추가
npm version minor

# 호환불가 변경 사항
npm version major

참고

• keyword; semver
• https://docs.npmjs.com/about-semantic-versioning

• GUI 없는 환경을 의미한다

참고

• https://stackoverflow.com/questions/4647719/what-does-headless-mean

• https://nighteye.app/dark-css-generator/
• 웹 사이트 주소를 넣으면 다크모드일 때 css를 제작해준다!

참고

• https://nighteye.app/dark-css-generator/

• gitignore 파일 생성하는데 주로 사용했었는데

• 다른 유용한 도구들도 많이 있었다!

• https://www.toptal.com/developers/webdevchecklist ; 우와우우 한번 둘러봐야겠다

• https://www.toptal.com/developers/css/sprite-generator/ ; 스프라이트 생성기도 있고

참고

• https://www.toptal.com/utilities-tools

• 이제 ctrl + k 키로 검색창을 열고 닫을 수 있다!
• esc 키로 검색창을 닫을 수 있다

참고

• https://chinsun9.github.io/2022/01/22/web-api-IntersectionObserver/

• 뷰포트에 들어오는 것을 감지할 수 있다

1
2
3
4
5
6
7
8

// 검색창 인풋 오토포커스

const observer = new IntersectionObserver((entries) => {
  if (!entries[0].intersectionRatio) return;
  document.querySelector('input.searchbox-input').focus();
});

observer.observe(document.querySelector('input.searchbox-input'));

• 위 코드는 검색창을 켜면 인풋에 오토포커스 되도록하는 코드이다

참고

• 이미지 레이지로딩
• https://developer.mozilla.org/ko/docs/Web/API/IntersectionObserver