[TIL] 버블링 / 코드의 규칙 정하기

신재욱·2023년 3월 27일

📒 오늘 공부한 내용

🔍수업목차

[11-1] 버블링(bubbling)
[11-2] event.target
[11-3] 버블링 중단하기
[11-4] 코드의 규칙 정하기
[11-5] eslint 설치
[11-6] prettier 설치

✅ 버블링(bubbling)

이벤트 버블링 이란 특정 화면 요소에서 이벤트가 발생하였을 때, 해당 이벤트가 더 상위의 화면 요소들로 전달되는 특성을 의미한다.
버블링(bubbling)의 원리 :한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작한다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다.

<style>
  body * {
    margin: 10px;
    border: 1px solid blue;
  }
</style>

<form onclick="alert('form')">FORM
  <div onclick="alert('div')">DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>

<p>에 할당된 onclick 핸들러가 동작한다.

바깥의 <div>에 할당된 핸들러가 동작합니다.

그 바깥의 <form>에 할당된 핸들러가 동작한다.

document 객체를 만날 때까지, 각 요소에 할당된 onclick 핸들러가 동작한다.

이런 동작 방식 때문에 <p> 요소를 클릭하면 p → div → form 순서로 3개의 얼럿 창이 뜬다.
이벤트가 제일 깊은 곳에 있는 요소에서 시작해 부모 요소를 거슬러 올라가며 발생하는 모양이 마치 물속 거품(bubble)과 닮았기 때문에 이런 흐름을 '이벤트 버블링’이라고 부른다.

✅ event.target

이벤트가 발생한 가장 안쪽의 요소는 타깃(target) 요소라고 불리고, event.target을 사용해 접근할 수 있다.
event.target과 this(=event.currentTarget) 차이가 있다.
event.target : 실제 이벤트가 시작된 ‘타깃’ 요소입니다. 버블링이 진행되어도 변하지 않는다.
this(=event.currentTarget) : ‘현재’ 요소로, 현재 실행 중인 핸들러가 할당된 요소를 참조한다.

✅ 버블링 중단하기

이벤트 버블링은 타깃 이벤트에서 시작해서 <html> 요소를 거쳐 document 객체를 만날 때까지 각 노드에서 모두 발생한다. 몇몇 이벤트는 window 객체까지 거슬러 올라가기도 한다. 이 때도 모든 핸들러가 호출된다.
그런데 핸들러에게 이벤트를 완전히 처리하고 난 후 버블링을 중단하도록 명령할 수도 있다.
이벤트 객체의 메서드인 event.stopPropagation()를 사용하면 된다.

<body onclick="alert(`버블링은 여기까지 도달하지 못합니다.`)">
  <button onclick="event.stopPropagation()">클릭해 주세요.</button>
</body>

💡 이벤트 캡쳐링

캡쳐링은 버블링과 반대로 상위에서 하위로 이벤트가 전파되는 단계다.

✅ 코드의 규칙 정하기

우리는 협업시에 팀 단위로 코딩을 하게 된다. 따라서 각자의 코드 스타일이 다르게 된다.
이렇게 다양한 사람들고 협업을 하게 되면서 일정한 규칙을 정하게 되면, 일이 조금 더 수월하게 진행이 가능하다.

📂 코드린터와 코드 포멧터

코드린터 : eslint

문법 상 에러는 아니지만 에러로 약속하자고 규칙을 정하는 것 이다.
에러는 아니라 규칙에 어긋나는가를 검사하기 때문에 vscode에서 빨간 줄이 그여도 실행하는데는 아무 문제가 없다.
eslint 의 규칙으로는 중복 선언 금지, == 금지 등이 있을 수 있다.
slint자체에 포메터 기능도 어느정도 가지고 있다.

코드 포메터 : prettier

코드를 보기 좋게 만들어주는 것 이다.
규칙으로는 띄어쓰기 2칸, ~길이 넘으면 줄바꿈 하기 등이 있다.

✅ eslint 설치하기

1️⃣ 터미널에 아래 명령어를 입력 (package.json이 있는 경로에서 입력)

yarn init @eslint/config

2️⃣ 설정파일을 만들고 나면 아래와 같이 몇가지 질문이 나온다.

eslint를 어떤식으로 사용할지에 대한 질문, 우리는 문법과 코드스타일과 문제모두 체크해야하므로 마지막것을 체크
How would you like to use ESlint ? => To check syntax, find problems, and enforce code style

자바스크립트 뭐쓰고 있는지 묻는 질문, 우리는 import/export를 지원하는것을 사용
Waht type of modules does your project use? => Javascript modules (import/export)

우리는 리액트를 사용하므로 react를 선택하면 된다.
Which framework does your project use? => react

타입스크립트 사용유무를 확인하는 질문, 우리는 타입스크립트를 사용하므로 yes를 선택.
Does your project use TypeScript? => Yes

어디서 실행하는지 확인하는 질문, 우리는 브라우저에서 실행(노드는 언어가 아닌 실행 프로그램)
Where does your code run? => Browser

인기있는 가이드를 할지, 커스텀을 할 지 선택 우리는 인기있는 가이드를 따를 것
How would you like to define a style for your project? => Use a popular style guide

Which style guide do you want to follow? => Standard

설정 파일을 뭘로 만들지 물어보는 질문, 우리는 자바스크립트로 만들 것
What format do you want your config file to be in? => Javascript
Checking...

설치를 진행할 것인지 물어보는 질문
Would you like to install them now? => yes

어떤 패키지 매니저로 설치할지 묻는 질문
Which package manager do you want to use? => yarn

규칙들은 각 프로젝트의 상황마다 다르게 설정할 수 있다.
하는 프로젝트, 회사마다 설정이 다를 수 있다.

3️⃣ VS code extension에서 ESLint extention을 설치

4️⃣ parserOptions 설정

eslintrc.js 파일에 parserOptions 부분에 아래 코드를 추가

parserOptions: {
	// 이 부분을 추가해주세요
	project: '**/tsconfig.json',
...
},

5️⃣ 불필요한 규칙 무시하기

불필요하다고 합의된 규칙은 에러메시지에서 eslint() 안의 내용을 복사해 eslintrc.js 파일의 rules에 추가해주시면 규칙이 무시된다.
```
rules: {
    'react/react-in-jsx-scope': 'off',
		'@typescript-eslint/consistent-type-imports' : 'off',
 }
```

💡 JSX 파일의 return type 지정하는 방법

✅ prettier 설치

1️⃣ 터미널에 아래 명령어를 입력

yarn add --dev --exact prettier

2️⃣ 아래의 명령어로 .prettierrc.json 설정 파일을 생성

echo {}> .prettierrc.json

3️⃣ 아래의 명령어로 prettier와 eslint를 연결

arn add --dev eslint-config-

4️⃣ eslintrc.js의 extends에 다음을 추가

extends: [
  ...
	'prettier'
]

5️⃣ VS code extension Prettier Extention 설치

6️⃣ 자동으로 코드 정렬하기(VSCode 세팅)

우선 최상단 경로에 .vscode 폴더를 생성해 준 후 안쪽에 settings.json 파일을 만들어 준다.

settings 파일 안쪽에 아래 내용을 입력

{
	"editor.formatOnSave":true,
	"editor.defultFormatter": "esbenp.prettier-vscode"
}

신재욱

1년차 프론트엔드 개발자

이전 포스트

[JavaScript] filter, map, every

다음 포스트