오늘은 즐겁게 하루를 시작했다.
어제 오늘것 알고리즘을 풀었으니 오늘은 모던 자바스크립트를 읽으며 자습시간을 보내고,
첫 수업을 들었다.
이벤트 버블링.
이벤트 버블링은 자식의 이벤트를 부모애개도 전파하는 것이다.
클릭 이벤트를 줄 경우 자식도 클릭되지만 부모도 같이 클릭되는 경우를 말한다고 할 수 있다.
방울처럼 위로 전파된다고해서 버블링이라는 이름이 붙은 것 같다.
event.target.id는 내가 선택한 그 태그의 아이디를 받아오는 것이라 딱 그 태그에 그 아이디가 있어야 받아올 수 있으나,
event.currentTarget.id는 지금 가리키고 있는 태그를 의미하며 이것을 사용하면 부모나 자식 어디를 클릭해도 id를 받아와 원하는 것을 출력?할 수 있다. 반대의 경우는 이벤트 캡쳐링으로 부모의 이벤트를 자식에게 보내는 형태인데, 주로 이벤트 버블링을 많이 사용한다고 한다.
자식꺼실행 --> 부모로 올라가 부모꺼 실행
그 위의 부모의 이벤트랑 겹치지 않게하기위해 event.stopPropagation()사용.
컴포넌트 분리되어 있을 시 예기치 못한 오류가 발생할 수도 있기에 사용하기.
코드린터:eslint사용.코드 포맥터 기능도 약간 함.
:import 정렬 순서 정하기 , 금지와 허용사항(==금지, ===허용) ,if문시실행문이 한줄일경우 중괄호 생략여부등 규칙을 정하는것.
-->에러는 아니나 에러처럼 빨간줄이뜸. 규칙에맞지 않으니 확인해보라는 말.
코드포맷터:prettier사용.
:코드를 이쁘게 만드는 규칙.
띄어쓰기, 줄바꿈 등.
extention을 먼저 vscode에서깔고, 각각 브라우저에서 검색해 다운받기.
eslint설정파일이 생기게되는데, 설정파일에서 extends에 "prettier"주고, paseroptions에 project :"tsconfig.json"을 추가해줌. 타입스크립트 설정파일경로를 알려준것.
rule에 추가하여 "off"를 주어 기능을 끌수 있음. 협업시에는 상의하에 추가할것.
npx eslint . 모든파일 검사하기.
오류줄이는 용.
Housky. ==> eslint 로 확인 후 에러있으면 규칙에 맞지 않아 깃에 커밋을 막음.
그리고...
라이브러리와 프레임워크에 대해 배웠다.
둘다 다른사람이 만든 기능을 일컷는데, 라이브러리의경우 특정기능. 즉, 특정도구를 말하고, 프레임워크는 도구들의 모음을 말한다.
다운로드수가 많은것을 사용하는것이 좋다.
오늘은 Ant-design을 활용해 실습을 해봤는데.... 솔직히 어려웠다.
docs보는법도 잘 모르겠고, 어디까지를 써야 코드가 잘 나오는지, 사용하던 함수 모양도 아니라서 혼란스러웠고.... 페어분이 도와주셔서 겨우겨우했다.. 멘토분은 docs를 살펴보라시는데 start docs는 찾았으나 대체 사용방법은 어디있다는 건지... 결국 코드찾아붙이고... ..뭘한건지 자괴감이 막 든다..
그래도 앞으로 나아간다..
