원글 페이지 : 바로가기
최종 프로젝트 5일차 변수를 선언할 때 쓰는 var, let, const의 차이에 대해 알려주세요. 의도 : 자바스크립트 기본 지식, 스코프에 대한 이해도, 추가로 호이스팅에 대한 지식을 가지고 있는지 확인!! 내 답변 : 변수 선언 방식으로 나눌 수 있는데요 var의 경우 중복 선언이 가능하고 재할당도 가능합니다. let과 const는 중복선언이 불가하고 let은 재할당이 가능하지만 const는 불가능합니다. 또한 스코프 유요한 참조범위에 따라 나룰 수 있는데 var는 함수 스코프이고 let과 const는 블록 스코프입니다. 쓰로틀링과 디바운싱의 개념과 사용하는 이유 및 대표적인 사용처에 대해서 설명해주세요. 의도 : 성능 최적화 및 각 개념을 어디에 적용하면 좋을지 확인!! 팁 : 마지막에 정리하는 말을 넣어도 좋다!! 사용함 경험에 대해서도 언급하면 좋다!! 내 답변 : ==================다음에==================== 자바스크립트의 호이스팅에 대해 설명해주세요. 의도 : 호이스팅에 대해 이해하고 있고, 어떤 오류가 호이스팅 때문인가 구분할 수 있는지 확인!! 내 답변 : 코드가 실행하기 전 선언된 변수와 함수가 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상을 말합니다. 자바스크립트 엔진은 코드를 실행하기 전에 실행 가능한 코드를 형상화하고 구분하는 과정을 거친 후 모든 선언을 스코프에 등록합니다. 이미 저장되어 있기 때문에 선언문 보다 참조/호출이 먼저 나와도 오류 없이 동작합니다. 함수의 경우는 어디서든 호출이 가능하고 제대로 작동합니다. var의 경우에는 선언 전에 호출한다면 ‘undefined’를 반환하게 됩니다. (오류가 아님) let과 const의 경우에는 호이스팅이 되지만 ‘ReferenceError’ 발생하게 됩니다. 이럴때는 먼저 변수 선언 후에 접근하도록 수정해야 합니다. 이벤트 버블링과 캡쳐링에 대해 설명해주세요. 의도 : 버블링과 캡처링으로 이벤트를 제어할 수 있는지 확인!! 팁 : 이름에서 오는 뜻을 활용!! 내 답변 : 이벤트 버블링은 이벤트가 발생한 요소부터 점점 부모 요소를 거슬러 올라가 이벤트를 전파시키는 것 입니다. 마치 거품이 물 아래에서부터 위로 올라가는 것처럼요. 이벤트 캡처링은 버블링과 반대로 이벤트를 전파하는 방식입니다. 즉 상위요소에서 하위 요소로 이벤트를 전달합니다. 이벤트 위임에 대해 설명해주세요. 의도 : 이벤트 버블링과 캡처링에 대해 잘 이해하고 있는지 재확인 및 위임을 이용해 최적화를 할 수 있는지 확인!! 팁 : 최적화 얘기를 하면 좋다!! 내 답변 : 이벤트 위임은 캡쳐링과 버블링을 이용한 것으로 여러 엘리먼트마다 각각 이벤트 핸들러를 할당하지 않고, 공통되는 부모에 이벤트 핸들러를 할당하여 이벤트를 관리하는 방식입니다. 이벤트 함수 내에서 하위요소를 판단하여 이벤트를 처리하면 성능을 최적화할 수 있는 장점을 가졌습니다. 참고 자료 1. https://80000coding.oopy.io/e1721710-536f-43f2-823b-663389f5fbfa 2. 3. https://velog.io/@saemileee/Javascript-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85-%ED%81%B4%EB%A1%9C%EC%A0%B8 https://hanamon.kr/javascript-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85%EC%9D%B4%EB%9E%80-hoisting/ https://velog.io/@fromzoo/%ED%95%A8%EC%88%98%EC%8A%A4%EC%BD%94%ED%94%84-vs-%EB%B8%94%EB%A1%9D%EC%8A%A4%EC%BD%94%ED%94%84 4. https://jhyonhyon.tistory.com/24 https://velog.io/@mochafreddo/%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%B2%84%EB%B8%94%EB%A7%81Event-Bubbling%EA%B3%BC-%EC%9D%B4%EB%A5%BC-%EC%A0%9C%EC%96%B4%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95%EC%97%90-%EB%8C%80%ED%95%9C-%EC%8B%AC%EC%B8%B5-%EC%9D%B4%ED%95%B4 5. https://velog.io/@moonheekim0118/JavaScript-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%B2%84%EB%B8%94%EB%A7%81 https://ingg.dev/event-delegation/#event-delegation