Event-Bubbling
Event-Bubbling 이란, 특정 화면 요소에서 이벤트가 발생하였을때 해당 이벤트가 더 상위의 화면 요소들로 전달되는 특성을 의미한다.
위 사진을 예시로 보았을 때 click3을 누르게 되면, click2와 click1까지 클릭 이벤트가 전파 된다.
또한, 부모에도 클릭 이벤트가 있기 때문에 click이벤트가 다중으로 발생된다.
게시판 목록 페이지 화면에서 목록의 제목이나 내용이 아니라, 전체를 감싸주는 div 태그에 onClick함수가 있을 경우 이벤트 버블링이 발생하게 된다.
이러한 경우 event.target.id가 아닌 event.currentTarget.id 를 사용하여 클릭한 태그의 id값을 가져와 버블링을 막아 줄 수 있다. (이벤트 위임)
또한, import된 페이지에 클릭이벤트가 존재할때 event.stopPropagation() 로 이벤트 전파를 막아 줄 수 있다.
이벤트 bubbling : 상위 부모로 이벤트 전파
이벤트 capturing : 부모가 먼저 클릭됨
이벤트 delegation : 이벤트 위임
error 타입 정의
if(error instanceof Error) // error가 Error의 자식인가요??
boardId가 undefined이거나 string타입이 아닐때 return부분을 보여준다.
코드 규칙
코드 규칙은 문법에서 에러는 아니지만 에러로 약속하자고 규칙을 정하는 것이다.
Eslint와 Prettier를 설치하면 vscode에서 자동으로 인식한다.
Eslint
코드 린터로 코드 규칙을 맞추어 준다.
Eslint 규칙
-
import 순서
import {qqq}
import AAA
-> 어떤걸 먼저 작성할지 정한다. -
== 금지, === 허용
Eslint 설치
npx eslint --lint
vscode extensions에서 eslint를 설치해준다.
rules: {
'react/react-in-jsx-scope': 'off',
'react/prop-types': 'off'
}-> eslintrc.js 파일에서 룰을 추가해주면 필요없는 규칙을 off할 수 있다.
Prettier
코드 포멧터로 코드 형식을 맞추어 준다.
Prettier 설정
- 띄어쓰기 2칸
- ~길이 넘으면 줄바꿈
- 따옴표 등
Prettier 설치
yarn add --dev --exact prettier
터미널에서 설정파일 만들기
echo {}> .prettierrc.json
Eslint와 Prettier 연결
yarn add --dev eslint-config-prettier
{
"extends": [
"plugin:react/recommended",
"standard-with-typescript",
"prettier"
]
}.eslintrc.js 파일 안에서 "extends" 배열에 "prettier"를 추가해준다.
vscode extenstion에서 Prettier를 설치해준다.
app.tsx에서 qqq만들어서 eslint에러 발생을 확인해준다.
husky
husky는 소스코드를 git에 commit 하기 전에, 기존의 규칙(typescript, eslint, prettier 등)을 지켜가면서 코딩을 했는지 검증해 주는 도구이다.
규칙에 어긋나는 코드가 있다면 commit을 강제로 거절절하기 때문에 실무적으로 더 안정적인 협업을 할 수 있다.
Husky 설치
yarn add --dev husky@4 (뒤에 숫자는 버전을 의미함)
yarn add --dev lint-staged
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"**/*.{ts,tsx}": [
"npx eslint '**/*.{ts,tsx}'"
]
}package.json에 husky와 lint-staged 내용을 추가해준다.
.eslintignore 파일을 만들어서 /src/commons/types/generated/types.ts 을 작성해준다.
