section 11,12
defaultValue: input 태그에서 처음부터 보여줄값
value: input 태그에서 계속 보여줄 값.
반복.. (CUDR)등, 수 , 삭, 조 => 복습.(CURD)
댓글 다시 한번 만들어보기.
이해. 활용.
협업 규칙정하기.
eslint ,prettier 사용. => 코드 규칙정하기.
2가지방향리뷰
- 타입스크립트 적용부분.
- 댓글부분.
catch(error) { if(error instanceof Error) alert(error.message) }
error가 Error의 자식이면 알림창을 띄워줘
instanceof ??
const date = new Date() ==> Date가 부모고 그로부터 나온게 date라는 자식이다. => 이 관계를 instance라고 한다.(원본으로부터 자식을 만들어냈고, 자식은 원본의 그 기능을 뽑아올 수 있다.)
즉 instance는 부모의 기능을 자식으로 가져온 객체.(부모가 가진 변수와 함수등이 들어있음... )
defaultValue={props.data?.fetchBoard.writer ?? ""} // null과 undifined이면은 빈문자열 넣어줘
readOnly={!!props.data?.fetchBoard.writer} // 있으면 true 없으면 false => (false => 빈문자열이나 null이나 undefined)
true또는 false값으로 명확하게 바꿔주는 것.
!! => 명시적으로 true값으로 바꿔주는 것. => 하나붙이면 반대, 두개 붙이면 반대의 반대.
명시적으로 바꾸는 방법 2가지:
Boolean으로 감싸거나 => true값
!!이렇게 두개 붙이거나. => true값
if (!router || typeof router.query.boardId !== "string") return <></> ```; // 이런 상황의 경우에는 빈화면으로 그려지게 처리.
event.target => 태그가 아닐경우에도 사용됨. 태그인 경우에는 id가 있지만 태그가 아니면 id가 없는것!
따라서 이렇게 빨간줄..
해결법 => event target이 HTML태그 라는 조건을 걸어줌. => 태그다 라고 알려주어 태그일때 실행되도록 처리
if(event.target instanceof HTMLDivElement)
- 페이지 -> 게시물 상세, 댓글, 댓글 상세 OR
- 페이지 => 게시물상세 => 댓글등록, 댓글 상세(목록)(게시물 상세페이지 UI에 댓과 댓 목록을 넣음)
중고마켓의 ㄷ경웅에 상세페이지를 제외하고, 댓글 부분은 그대로 사용하니 컴포넌트 안에 넣지 않고 페이지에 넣음...?
재사용하는 부분만떼서 사용하면 되니 쉬워짐..?
Section11
event-bubbling
: 무엇인가.
어떨때 클릭이 되고 어떨때 클릭이 안되는지.
먼저 게시글을 클릭하면 "oo님이 작성한 글입니다" 라는 알림을 주는 것을 만들어보았아.
id와 onClick을 활용해 제목을 클릭시 해당 알림이 나오게 함 -->
전체줄을 클릭시에 나오게 하고싶어 하나의 줄을 감싸는 div에 옮겨 넣었다.
그런데 이번에는 애매한 곳(배경부분.)을 선택시에만 이름부분이 나온다.(그런데, onClick함수는 실행된다.)
==> 이벤트 버블링!
감싸고있는 전체 div =-> 부모.
안에 있는 것들은 자식. 자식끼리는 형제.
-> 자식하나를 클릭시 그 자식이 클릭되어야하는지, 아니면 부모가 클릭되어야하는지 알 수 없음....
결론 -> 자식을 클릭시에도 감싸고있는..(바탕이되는) 부모도 클릭이 되어야함.
html => 자식을 클릭해도 꾹 눌려서 그 바닥에있는 부모의 onClick도 실행됨.
--> 이벤트가 전파된다. => 자식에서 클릭된 이벤트가 부모까지 전파된다.
전파 :Propagation
: 자식을 클릭시 부모의 onClick도 실행된다. --> 위로 올라간다. ==> 전파 => 위로(이벤트 버블링)
부모부터 자식으로 내려오는 반대의 경우 : 이벤트 캡처링 => 따로설정필요.
default값이 이벤트 버블링.
=> 배경 클릭시 잘 나오던 것 => event.target => 내가 선택한 태그!!. ==> 선택한 태그의 id가 비어있기에 id를 못가져오는것.
전체를 감싸는 div에만 id가 존재하고, 나머지 태그에는 id가 없기에 배경클릭시에는 클릭이벤트가 버블링통해 넘어가 실행은 되지만, 무엇을 클릭을 했던지 id나오게 하려면 전부 id를 넣어주어야함. (이벤트는 버블링에의해 자동으로 자식에서부터 부모까지의 것이 실행됨.)
어떤 태그를 클릭했을시 해당 태그가 event.target.
클릭한 이벤트가 있는 타겟을 선택하는 것이 event.currentTarget
현재 선택되어있는 , 즉, onClick에 바인딩 되어잇는 태그를 의미하기에 event.currentTarget을 사용하면 문제가 해결된다.
이 경우 event.target을 위임한다라고하고, title을 클릭시 나오면 title에 이벤트 타겟을 위임한다... 이런식으로.
event.target => 클릭한 태그. 태그가 아닐경우에도 사용되어 태그가 아닐경우 id가 없으므로 타입스크립트 에러가 발생한다.
event.currentTarget => 무언가를 클릭했을때의 태그 이므로 해당 event.target부분이 당연히 태그라고 인식되어 뒤에 id를 붙여도 문제되지 않는다.
정리: 이벤트 버블링: 자식에서 부모로 이벤트가 전파되어 자식의 onClick이 있고, 부모의 onClick이 있다면 자식일 클릭시 꾸욱-! 눌려 부모의 onClick도 실행된다.!
그러나 event.target은 클릭한 해당 태그를 의미.
onClick함수가 실행된 그 태그를 사용하려면 event.currentTarget을 사용하면됨.
꾹 눌리게 하지 않기.( 클릭한것만 실행되고, 부모로 전파되지 않게 하기)
해당 이벤트 함수에 event를 매개변수로 넣고, event.stopPropagation()을 넣으면 해당 이벤트만 발생하고 버블링이 일어나지 않는다.
해당부분을 컴포넌트로 분리하여 실행하더라도 자식의 것이 부모(감싸고 있는 태그)에도 영향을 주는 이벤트 버블링이 일어나기에 주의할것
Section 12
린터(문법)와 포맷터(예쁘게) :협업위한 규칙정하기
eslint / prettier
eslint => 문법부분. ==금지, === 허용, 등..
prettier =>띄어쓰기 칸수 동일하게...
eslint에서도 포멧터 기능있는데 프리티어 적용할것이니 eslint의 해당기능은 사용하지 않기로..
npm init @eslint/config
세번째거 선택 -> import/export 부분 -> 리엑트 -> 뭐.. 브라우저에서 실행 선택하고,,, 표준 모드선택 -> 자바스크립트로 -> yarn 으로 설치
..
eslint와 타입스크립트 연결하기 =>
import React를 하지 않아도 되는 이유: next 사용중이기에 자동으로 반영됨.
yarn add --dev --exact prettier
yarn add --dev eslint-config-prettier
echo {}> .prettierrc.json
eslint.js에 extends 부분에 "prettier" 추가
...
자바스크립트에서도 props 타입이라는것이 있음 - 실행중에 (런타임중에) 타입을 체크함. 타입스크립트의 경우 아예 실행이 안되게 막기에 타입스크립트가 더 확실? 함.
실무 : 하나의 폴더에 하나의 깃. + 하나의 허스키.
yarn add --dev husky
npx husky install
npx husky add .husky/pre-commit "yarn lint"
