코드 캠프 11일차) 쟤를 불렀는데 왜 네가 나와

Event Bubbling

태그를 클릭해서 해당 정보를 얻어올 때 onClick이벤트를 달아놓고 event.target을 많이 사용하곤 한다.

해당 태그에 부모 자식 관계로 엮인 태그들이 많다면, 클릭에 의해 실행되는 로직이 원하는대로 작동하지 않은 경험을 한 적이 있을 것이다.

이는 Event Bubbling이라는 현상 때문인데 이벤트 버블링이란 어떤 위치를 클릭했을 때, 해당 위치의 부모들이 다 클릭되는 현상을 말한다.

Event Capturing은 Evnet Bubbling의 반대 부모 -> 자식

<div onClick={() => console.log("parent")}> Parent 
	<div onClick={() => console.log("child")}> Child </div>
</div>
Child 를 클릭하면 나오는 결과: "child" "parent"

이벤트가 발생되는 위치의 태그를 가져오는 법 : event.currentTarget

event.preventDefault() 새로고침 막음

event.stopPropagation() 이벤트 전파 막음
버블링으로 인해 부모로 올라가는 클릭 이벤트를 막는 용도로 사용할 수 있다.

eslint / prettier

코드 린터 / 코드 포맷터

코드 린터

코드를 작성하는 규칙(+약간의 포맷팅)
ex) import 순서, == 금지, === 허용

코드 포맷터

코드를 이쁘게 만드는 규칙
ex) 들여쓰기 2칸? 4칸?, ~~길이 넘으면 줄바꿈

const fs = require('fs');
Common JS 방식 (구)
import fs from 'fs';
Module 방식 (현)

프로젝트 최상단 폴더에 .vscode 폴더를 만들고 안에 settings.json파일 만든 후 세팅

Husky -> 정해진 규칙에 어긋나는 에러가 한 줄이라도 있을 경우 커밋을 막아주는 라이브러리

라이브러리 / 프레임워크

라이브러리는 도구, 프레임워크는 도구 모음

React: 라이브러리
Next: 프레임워크

라이브러리를 사용하는 이유
1. 시간 절약
2. 버그 최소화

• 어떤 라이브러리가 존재하고 있는지 파악
• 라이브러리가 만에 하나 없다면 만들어보기

Ant-design , Material UI