11일차

1. 목록 보기하는데 클릭이 이상해.. -> Event-Bubbling / Event- Delegation
2. 이미 만들어 놨다고? -> Library

포트폴리오 리뷰

타입스크립트로 변환

• nextJs에서 AppProps라는 이름으로 타입을 제공해주고 있다.

• boardId의 타입이 String, String [] , undefined가 들어오는데 이것을 엄격하게 제안하려면 typeof로 string일때만 실행시킨다. 그렇지 않으면 String으로 변환하여 사용 가능

에러처리

• 에러는 뭐가 들어올지 모르고 백엔드에서 주기 때문에 무슨 타입인지 모른다.
• 따라서 error 타입에 속해 있으면 에러 타입이 맞으므로 실행시킨다. -> instatnceof

try {...}
catch (error){
 if(error instanceof Error) alert(error.message) 
}

Quiz) 댓글을 클릭하면 "00님이 작성한 글입니다."라는 알림 주기
(힌트 : id와 onClick을 활용하기)

1. 

• 각각의 태그에 id 값과 onClick 함수를 넣어 클릭시 알림을 준다
• 이것은 반복되고 비효율적이라고 생각하여 두 번째 방법을 사용

2. 

• 상위 태그에 onClick 태그를 넣어줌으로써 해결 시도
• 그러나 태그와 태그 사이 틈을 클릭하면 잘 나오지만, 태그를 선택하면 이름은 안나오고 님이 작성한 글입니다. 만 나온다. -> 이를 해결하기 위해서는 이벤트 버블링에 대해 알아야 한다.

이벤트 버블링

• 목록을 뜯어보자

• 번호의 div, 내용의 div, 날짜의 div를 클릭했을때 onClick을 각각 둔 것이 1번 방법
• 이렇게 두니 비효율적이라 가장 상위 wrapper에 onClick을 두었더니 에러가 발생한다.

이벤트 버블링이란 자식에서 부모로 이벤트 전파되는 것을 말한다.

• 그래서 위의 경우도 1번 방법에서 자식(번호의 div, 내용의 div, 날짜의 div)을 클릭해도 부모도 같이 클릭되는 것이다.

따라서 자식 태그 또는 부모 태그에 onClick 속성을 두 군데에 줄 수 있다. 부모 태그에 클릭을 하거나, 자식 마우스를 클릭해도 이벤트 버블링에 의해 부모태그에도 적용될 것이다.

• 이 같은 경우 19번째 줄, Writer 태그를 클릭하면 이벤트 버블링에 의해 부모 태그로 타고타고 올라가서 결국 14번째 줄 ItemWrapper의 onClick 속성이 실행되는데 이때 클릭한 id 값이 들어온다.

실행된 onClick에 해당하는 태그의 id 값을 가져올 수는 없을까?

이벤트 버블링 문제 해결하기

• event.target은 내가 클릭한 태그를 나타냈었다.

• event.currenTarget은 이벤트 버블링에 의해 실행된 onClick, 그 태그가 가리키고 있는 현재 태그를 가리킨다.

• 하나의 버튼을 클릭했을 때 두 가지의 태그(부모, 자식)의 id 값을 가져올 수 있다.

  1. onClick이 실행될 당시의 해당 태그(부모 태그)의 id 값을 가져올 수도 있고
     -> event.currentTarget.id
  2. 클릭한 태그(자식 태그)의 id 값을 가져올 수도 있다.
     -> event.target.id

이벤트 캡처링

이벤트 캡처링이란 이벤트 버블링의 반대로 부모를 클릭했을 때 자식으로 이벤트가 전달되는 것으로 default 값은 아니고 따로 설정을 해주어야 한다.

이벤트 버블링 막기(stopPropagation)

• MainWrapper와 ItemWrapper 태그에 모두 onClick 속성을 주었을 때 writer 태그를 클릭했을시 mainwrapper 또한 writer의 부모이므로 zzz가 실행이 되고 그 부모인 itemwrapper의 qqq가 실행이 된다.

  한 번만 클릭했지만 부모에 있는 onClick은 모두 실행된다.

• 내가 버튼을 클릭했을때 이렇게 이벤트버블링에 의해 부모에 있는 onClick들이 실행될때 의도와는 다른 onClick이 실행되버리는 예상치 못한 에러들이 발생한다.

• 사이즈가 커지면서 파일을 분리했을 때 이벤트 버블링에 의해 예상치 못한 에러가 발생한다.
• stopPropagation을 사용하여 상위로 올라가는 클릭 이벤트를 막을 수 있다.

코드 린터 / 코드 포멧터 (eslint/prettier)

코드 린터	코드 포멧터
eslint	prettier
import 순서	띄어쓰기 2칸
== 금지, === 허용	00길이 넘으면 줄바꿈

• eslint, prettier 모두 규칙인데, prettier는 어떻게 더 이쁘게 보여줄지 보여주는 규칙이다. eslint는 약간의 포멧터 기능도 포함하고 있다.
• eslint, prettier 두 개를 설치하고 eslint에 있는 포멧터 기능은 삭제하여 prettier의 포멧터 기능을 사용해보자

라이브러리 vs 프레임워크

라이브러리	프레임워크
특정 기능(도구) 1개	기능(도구) 모음

사용 이유 : 바퀴를 재발명 하지 마라

1. 시간 절약
2. 버그 최소화

라이브러리 사용방법

1. 이미 잘 만들어져있는 라이브러리 목록화해놓기(십만 이상이면 양호)
2. 라이브러리에 없다면, 내가 만들기. 만든걸 npm에 올리기

아이콘(ant-design) 소개

daum-postcode

daum 우편번호 검색 서비스를 react 환경에서 간편하게 이용