220523 프론트엔드 부트캠프 15일차 : 이벤트 버블링, 라이브러리 사요요
말도 안돼 벌써 15일이라니
3️⃣주차 - 라이브러리, 프리보드에 살 붙이기
1. 😫클릭이 이상해 -> 이벤트 버블링, 이벤트 위임(event delegation)
2. 🥰이미 만들어놨다고? 땡큐 ^^ -> Library
3. UI의 전체적인 구조 -> Layout
4. 다른 페이지도 보여줘! -> Pagination/Infinite-Scroll
5. 스테이트 나눠줘! 댓글 수정하기, 스테이트 끌어올리기 -> Lifting-State-Up
😫🥰 오늘 할 거
포트폴리오 리뷰
컴포넌트는 접속 대상이 아니다. index 통해서 들어가야 한다.
댓글 - 게시글 목록이랑 비교하면 조금 비슷하다.
데이터가 비동기로 넘어오기 때문에 data?: any; (처음엔 undefined 상태)
useQuery에서 백엔드로 요청이 날아감 → DB에서 댓글 목록 꺼내서 받아와야해 → 그동안 기다리고 실행되는 게 아니야, await 걸어줬을 때 그러는 거고. 이 경우엔 data가 undefined상태에서 아랫줄 실행됨.
등록할 땐 동기로 바꿔줬었음 - 등록해야 id를 받고 그걸 타고 들어가야하기 때문에 무조건 기다려야 했다.
이렇게 뜨는 게 좋은 방법은 아님. modal로 뜨게 할 것임
원단 모달과 무슨 관계가 있나?
이것들과 무슨 상관이지
중고마켓을 위해 댓글을 따로 빼서 만들자...
이벤트 버블링/캡처링, current target
id={el.writer} 해놓고, event.target.id
내용말고 다른 거 클릭했을 때도 뜨게 하는 법?
-> 그럼 래퍼에 온클릭을 주자ㅎㅎ(내 생각..) 근데 그럼 클릭은 되는데 writer가 안 나와.
-> 운 좋으면 나와...
이걸 해결하기 위해선 이벤트 버블링
🛁이벤트 버블링? 자식에서 부모로 이벤트 전파
onClick은 껍데기에만 주면 돼요. 자식을 클릭한다하더라도 부모에 있는 onClick이 실행되게 함
그 부모의 부모도 가능~
아래에서 위로 뽀글뽀글 올라가💭 - 버블링
위에서 아래로 내려가 - 캡처링(일반적이진 않음)
id가 바인딩이 제대로 안돼. 클릭하면 실행은 잘 되는데, 훈이는… 모서리에 있다…섬찟
event.target(내가 누른 그 태그!) , event.currentTarget
클릭한 건 이벤트 타겟, 넘어간 태그는 currentTarget
제목 쪽 클릭하면 그 타겟의 id를 가져오는 거고, 근데 우린 전체 래퍼에 설정한 id를 가져올거니까 currentTarget 해서 가져오면 된다.
라이브러리
📂라이브러리- 라이브러리를 따로 따로 import 해서 사용 가능. 통일성이 떨어질 수 있다.
프레임워크 - 다운 받으면 패키지에 다 들어가있어. 따로따로 x 선물박스여~
리액트 리덕스 모벡스 등 같이 사용되는 도구가 많아. 꼭 같이 설치해야하는 도구들이 많아. 공식화된건 아니고 골라서 쓰다보니까 어떤 회사는 리액트+리덕스/어떤 회사는 리액트+모벡스… 다른 앵귤러는 프레임워크다 라는 말이 많음~
🤨라이브러리 써야하는 이유!
라이브러리만 전문적으로 만드는 사람도 있고 조립하는 사람도 있어.
우리는 조립에 해당됨 라이브러리를 잘 만드는 것보다 라이브러리 목록을 잘 알고 쓸 수 있는 게 중요함
바퀴를 재발명 하지 마라 - 시간 절약, 버그 최소화(윈/맥, 브라우저 등)
오늘 점심 윤쉪... 이번주 메뉴 까스까스까쓰 불고기불고기불고기
점심 사진 못 찍었다! 😤🫥이 이모지 뭐야 귀여워
점심 먹고 병원 다녀왔고 금요일날 또 예약하고... 지겨워🫥
주말에 댓글 기능 구현을 안한 거 많이 후회했다. . . UI 조금 짜다가 우선 오늘 숙제부터.
하트로 점수 주는 거 정말 너무너무너무 귀엽다ㅠㅠ 이런 거 할 때 너무 행복해
점수 준 만큼 백엔드에 숫자를 보내서 그걸 다시 받고 싶었는데 그건 안된담... 백엔드로 보내고 받을 수 있는 게 정해져있어서 굳이 한다면 함수 호출을 여러번...? 해야할 것 같은데 이건 아닌 것 같고 방법을 잘 모르겠다.
그냥 내가 계산하고 그 누적값 쌓는 건 될 것 같아서, 그냥 그렇게 해봐야겠다. 좋아요랑 별개의 하트 점수 만들어놔야지 🐣
추워서 집업 빌려서 입고 있다가 그거 그대로 입고 집에 왔다 ㅎrㅎr 죄송해요 보시진 않겠지만
그리고 또...? 오늘은 한 번도 졸지 않았고, 근데 알고리즘 두번째 문제 흐름 놓쳐서 끝나고서야 풀었다. 그거말곤... 많이 아픈 것도 아니여서 9시 좀 넘게까지 할 수 있었고 나쁘지 않았어~~~ 헉 그리고 유튜브 영상 넣을 때 어떤 영상 넣을지 고르다가 아델리 펭귄이 황제 펭귄 새끼들 지켜주는(자기 영역이래서 쪼까내는 거라고 했지만...) 영상 7번 정도 봤다... 진짜 너무 귀여운데 새도 굶어죽을까 걱정되고,,, 나는 그런거 촬영하는 건 못할 것 같아 누가 누구 먹으려하고 그러면 방해하게 될 것 같아,,, 이것도 지극히 인간중심적인 생각이겠지 🫠 그리고 빨리 엘가시아 깨고 브금 맘껏 듣고 싶다.
처음에 털푸덕 넘어지는 애도 너무 귀엽고 처음에 목덜미 물린 것도 귀엽고 무섭고 털에 박혀있는 눈덩이들도 귀엽고 그 팔로 지켜준다고 서있는 거 너무 귀엽고 몇 살인지 궁금하구 앞뒤로 큰 애들이 서서 지켜주는 것도 귀엽고 새가 처음에 날개 푸덕푸덕 하는 것도 귀엽고 아델리 펭귄 등장하는 것도 귀엽고 아델리 등장하니까 슴새 아..😑이런 느낌으로 가는 것도 귀엽고 끝나고 아델리 펭귄이 쫓아내는 것도 귀여워;ㅠ;ㅠ ㅠ;;ㅠㅠ 이건 진짜 미친 영상이다
People need to know something too, which is awesome and one of the reasons penguins are my favourite animals. That chick who stood up to the petrel is actually the oldest of the group. The oldest chicks of the season are the leaders of their crèche by default. And as you can see he took his job seriously