본문 바로가기

전공공부211

프론트 버블링에 대하여 아래 코드에서 우리는 em부분을 클릭해도 div에 할당된 핸들러가 동작한다.이것은 어떻게 가능한 것인가?``` EM을 클릭했는데도 DIV에 할당한 핸들러가 동작합니다.```바로 버블링이 발생하기 때문이다### 버블링버블링이랑특정 화면 요소에서 이벤트가 발생했을 때이벤트가 더 상위의 화면 요소들로 전달되어가는 것이다.마치 vue에서 emit을 통해 부모 컴포넌트로 이벤트를 발생시키는 것과 비슷한 개념 같다.한 요소에서 이벤트가 발생하면이 요소의 이벤트 핸들러가 동작하고 부모의 핸들러가 동작한다.이 과정을 최상위 요소를 만날 때까지 반복한다. 부모요소 자식 요소이런 구조에서 p를 클릭한다면p의 핸들러를 동작하고 부모인 div의 핸들러를 동작하게 된다.따라서 p alert가 동작하고.. 2024. 12. 12.
자바스크립트 변수 호이스팅이란? 호이스팅인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 import의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상var 변수 호이스팅아래 javascript 코드를 vs에서 실행하면console.log(a)var a = 10console.log(a)원래라면 a는 참조오류가 나야한다.하지만 결과로 나온다.왜? 그럴까?javascript가 해당 코드를 실행할 때 변수 호이스팅이 발생하여변수 선언문을 최상단으로 보낸다.var aa = undefinedconsole.log(a)a = 10console.log(a)결과적으로 이렇게 변환해서 실행하기 때문에 오류가 나지 않고 undefined가나타나는 것이다.let 변수 호이스팅여기서 var가 아니라 ES6부터 등장한 let으로 선언하면.. 2024. 11. 25.
CleanCode 4장, 5장 4장. 주석주석은 나쁜 코드를 보완하지 못한다.주석을 유지보수하기는 불가능 하기 때문에주석은 오래 될 수록 코드에서 멀어진다.주석을 사용하기 보다는 코드를 명확하게 작성하는 것이 좋다.좋은 주석은 무엇인가?법적인 주석 ex) 저작권 정보, 표준 라이센스 등정보를 제공하는 주석의도를 설명하는 주석// 스레드를 대량 생성하는 방법으로 어떻게든 경쟁 조건을 만들려 시도한다.for(int i = 0;i결과를 경고하는 주석ex) // 여유 시간이 충분하지 않으면 실행하지 마시오TODO 주석중요성을 강조하는 주석 5장. 형식 맞추기코드 형식은 의사소통의 일환오늘 구현한 코드는 바뀔 가능성이 높고오늘 구현한 코드의 가독성은 앞으로 바뀔 코드의 품질에 영향을 미친다.좋은 형식의 코드란?세로 형식 : 적절한 행 길이를 .. 2024. 11. 14.
자바스크립트의 비동기와 병렬처리 자바 스크립트는 비동기로 병렬처리를 하는가?자바스크립트는 싱글 스레드 언어이다.즉, 한번에 하나의 일만 수행할 수 있다는 것이다. 그럼 어떻게 병렬처리를 할까?자바스크립트는 병렬처리를 하지 않는다.그럼 Promise는 병렬처리가 아닌가?지금부터 자바스크립트의 비동기 동작을 알아보자Promise.resolve().then(()=>console.log(1));console.log(2);console.log(3);Promise.resolve().then(()=>console.log(4));해당 코드에서 Promise는 JS의 비동기 함수이다.결과를 보면 2,3이 비동기로 호출한 1,4보다 먼저 나오는 것을 볼 수 있다.즉 JS에서 비동기는 task를 바로 실행하는 것이 아니라 queue나 어딘가에 넣어뒀다가 .. 2024. 10. 13.

티스토리툴바