----11일차-----
밸!하!
밸로그 여러분 안녕하세요~~
오늘의 포스팅주제는!
event와 library에대해서 알아볼거에요!
그럼 시작합니다!
1.Event-Bubbling
이벤트 버블링이란 무엇일까요??
이벤트 버블링이란
예를 들어서 설명을 드리겠습니다!
예를들어
한개의 contents는 여러개의 Div로 구성이 되어있죠??
이때 이벤트가 겹칠경우
자식의 event가 전달이 되어 부모의 컴포넌트까지 가는경우가 생깁니다
즉
자식의 이벤트에서 시작이 되어 부모의 이벤트까지 실행이 된다는겁니다!
단!
자식에서 부모로 전달하는 이벤트기 때문에 형제의 컴포넌트에서는 발생하지 않겠죠??
이렇게 사용이 되다보면 여러개가 동시에 작동하여 예상치못한 에러가 발생할경우가 생길것입니다!
또 다른 예시로
만약에 여러분이 Wrapper로 모든 요소에 한번에 event를 주고 싶다고한다면
이벤트를 부모에서 받아주면 됩니다!
그럼 부모에서 어떻게 이벤트를 받아줄수 있을까요??
바로
이벤트를 부모에서 받고싶을때는 event.currentTarget.id를 사용해서
현재 선택하고 있는 타겟을 설정해주면 됩니다!
그렇다면 이벤트 버블링은 어떻게 막을 수 있을까요??
바로
이벤트 버블링을 막기위해서는
event.stopPropagation()을 사용해서 막아줘야합니다!
약간 여담으로!
이벤트 캡처링도 간단하게 설명드리겠습니다!
-이벤트 캡처링이란??
->부모의 이벤트가 자식의 이벤트로 전달되는것을 의미합니다
즉 이벤트 버블링과는 반대로 작동한다는것 개념적으로 알고계시면 좋을것같습니다!!
하지만
주로쓰이는것은 이벤트 버블링이라는것 잊지마세요!
이번엔 개발자들의 가장 중요한것중 하나죠!
바로 협업때 사용하는 툴에대해서 이야기를 드리겠습니다
오늘은 두가지를 설명드리려고하는데요
2.코드린터/코드포멧터(eslint/prettier)
코드린터(eslint)
-여러명이 프로젝트를 할때 조건을 설정하는것 입니다
왜 규칙을 정할까요??
프로젝트의 규모가 커지면 커질수록 서로 다른사람들이 다른 스타일로 작업을 하다보니 코드를 읽는데 어려움이 있을수 있습니다!
이럴떄를 대비하여 서로 약속을 정하는건데요!
예시로는
import 순서라던가
==금지,===허용 이런거 등등이 있습니다!
글머 코드포멧터는 무엇일까요??
오늘 소개드릴것은 prettier입니당!
서로 협업시 더욱 잘 읽을수있게 정해주는겁니다!
예시로는
띄어쓰기를 2칸으로 고정하고
특정길이가 넘으면 줄바꿈이 되도록 하는것 등이 있습니당!
이렇게 협업을 할때 서로 규칙을 정하고 또한 시각적으로 만들면 더욱 코드를 작성하고 읽는데 복잡해지지 않겠죠??
그다음으로는 library를 볼 수 있도록 하겠습니다~~
3.Library
라이브러리를 보기전에
UI프레임워크를 볼수있도록 하겠습니당
먼저
라이브러리와 프레임워크라는게 있습니다!
이 둘의 차이는 간단히 보면
라이브러리 : 특정기능 1개
프레임워크 : 도구모음
이라고 할수있겠습니다
저희가 자주쓰는
React는 라이브러리라고 부르고
Next는 프레임워크라고 부릅니다!
React는 제작을 라이브러리로 만들어졌지만 규모가 커져서 프레임워크라고도 부를 수 있겠는데요!
쉽게말해
라이브러리는 특정 도구 1개 예를들어 배너라는것을 도구 1개로 본다면
이와같은 것들이 모여있는것을
프레임워크라고 할수있습니다!
그럼 왜!
라이브러리와 프레임워크를쓸까요??
흔히
바퀴를 재발명 하지 마라는 말이 있습니다!
첫번째로는 시간절약이 됩니다!
두번째로는 버그 절약이 됩니다!
버그절약이 무슨말인가??
예를들어 사진 삽입을 하는데 300줄의 코드를 작성해서 구현했다고 생각을 해봤을떄
기능을 한개씩 추가할때마다 200줄이상의 코드를 작성하고 이때
버그가 발생할수있겠죠??
이때 미리 다른사람이 잘 구현한것을 import해 쓰게 되면 이미 버그가 없는것이 확인이되었기에 버그발생을 다룰수있을것입니다!
어때요?
이해되셨나요??
그렇다면 무조건 라이브러리만 사용하면될까요??
아니겠죠??
가장 대표적인 기준이 다운로드 숫자입니다!
많은 사람들이 다운로드를 하고 사용을 했다면 그만큼 검증이 됬다는거겠죠??
평균적으로 10만 다운로드가 됬다면 사용을 할수있는거죠
1000만다운로드가 넘어간다면 공부를 하면서 까지라도 사용을 해야죠!
왜요?
모든 사람들이 쓴다는것이니까요!
그럼 저희가 할일은 무엇일까요??
첫번째로, 이미 잘 만들어져있는 라이브러리 목록화 해놓기
두번째, 라이브러리에 없다면?? 내가 만들기, 내가만든걸 npm에 올리기
npm에 올리게되면 저희가 만든것을 나중에도 npm명령어도 다운받을수도 있겠죠??
자 ! 오늘은 라이브러리와 프레임워크 그리고 이벤트와 코드린터와 코드 코멧터를 봤는데요!
부족한 부분이 있지만 그래도 보시면서 적립을하고 공부를 하시면 더욱 좋을것같아요!!
오늘은 여기까지 포스팅하겠습니다!!
벨~~바~
