코드잇32 [4주차 위클리페이퍼] 자바스크립트에서의 this 함수를 호출한 객체를 가리키는 키워드 자바스크립트에서 this 키워드는 함수를 호출한 객체를 가리키는 키워드로 사용된다. 그런데 함수 호출 방식에 따라 가리키는 값에 차이가 있다. 그래서 함수가 호출될 때 어떤 객체가 그 함수를 호출했느냐에 따라 this의 값이 달라진다. 몇 가지의 호출방식에 따른 예시는 다음 코드와 같다.// 일반 함수 호출function globalFunction() { console.log(this);}globalFunction(); // window 객체 출력// 메서드에서 호출const obj = { name: "mck", greet: function() { console.log(this.name); }};obj.greet(); // mck 출력// 생성자 .. 2024. 7. 26. [4주차 위클리페이퍼] 이벤트 버블링, 캡쳐링, 위임 이벤트 캡쳐링 이벤트 캡쳐링은 이벤트 호출 과정에서 가장 먼저 발생하는 과정으로, 이벤트가 발생했을 때 window 객체에서부터 이벤트 대상인 target까지 전파되는 과정이다.const colorBtn = document.querySelector(".btn");const changeColorHandler = () => { colorBtn.style.backgroundColor = "blue";}colorBtn.addEventListener("click", changeColorHandler); 위 코드를 실행하면 버튼의 배경색이 파란색으로 바뀌는데, 클릭이벤트가 실행되면 클릭과 동시에 실행되는 것처럼 보이지만 사실 캡쳐링 과정을 선행하여 target인 colorBtn 요소까지 도달한 후 실행이 된 것이.. 2024. 7. 26. ES2022에서 새로 추가된 top-level await Top-level await 내가 코딩을 본격적으로 하기 전인 2022년 6월에 ES2022가 발표되었다. 여기서 오늘 내가 새로 알게된 기능 하나가 포함되었다. 여러가지가 발표되었지만, 그중에서도 top-level await 기능이다. 비동기 처리를 위해서는 async와 await는 항상 함께 사용한다. 자바스크립트 문법 규칙이기도 하고, 사용할 때는 짝꿍이라고 생각하면서 사용했다. 그래서 async 내부에서 await를 사용해야 문법 에러가 뜨지 않았는데, top-level await는 모듈의 최상단 레벨에서 async없이도 모듈화된 자바스크립트 파일들이 마치 하나의 async 덩어리처럼 동작하여 육안상으로 await만으로도 비동기 처리가 잘 되도록 만들어졌다.💡 최상단 레벨이란 각 모듈 파일의 최.. 2024. 7. 25. 콜백 지옥 콜백이 중첩될 때의 가독성 저하 콜백지옥(callback hell)은 자바스크립트에서 비동기 작업을 처리할 때 콜백 함수를 중첩해서 사용하는 것을 말한다. 예시 코드를 보면 다음과 같다.const fetchData = (data) => { setTimeout(() => { data(null, "mouse"); }, 1000)};const processData = (data, callback) => { setTimeout(() => { callback(null, `${data} 진행중`); }, 1000)};const saveData = (data, callback) => { setTimeout(() => { data(null, `${data} 저장됨`); }, 100.. 2024. 7. 24. map 메서드와 forEach 메서드 활용 배열을 반복하는 메서드 오늘 팀미팅을 하며, 팀원님이 내가 낸 문제에 대한 질문으로 해당 문제를 forEach 메서드로도 풀이가 가능한지를 물어보셨다. 그런데 그 순간 '어.. 가능할까?' 생각하다가 다른 팀원님이 대신 답을 해주셔서 넘어갔는데, map 메서드에 비해 자주 쓰지 않아서, 조금만 응용할 줄 알면 사용이 가능한 부분을 제대로 몰랐기 때문에 답변을 못했다고 생각한다. forEach 메서드와 map 메서드는 모두 배열을 반복하는 메서드인데 약간의 차이점이 있다.forEach 메서드는 배열을 반복만 한다.map 메서드는 반복하면서 새 배열을 반환한다.위 차이점말고도 작년에 올린 포스팅에서도 차이점에 대해 적어보았다.(2023.09.12 - [자바스크립트] - map과 forEach의 차이) map.. 2024. 7. 23. [2주차 위클리 페이퍼] position 속성 요소를 특정 위치로 이동할 수 있는 CSS 속성 position 속성은 요소를 특정 위치로 이동시키거나 특정 위치에 고정시킬 때 사용하는 속성이다. 이 속성의 값들은 다음과 같다.1. static이 값은 position 속성의 기본값이며, 요소를 문서상 원래 있어야 할 기본 위치를 나타낸다. 그렇기 때문에 top, bottom, left, right 속성과 z-index 속성이 적용되지 않는다.2. relative이 값은 원래 있던 자리를 기준으로 요소의 위치를 조정할 수 있다. 만약 absolute 속성을 쓰는 자식 요소가 있을 때, 부모 요소에 relative 값을 주면 자식 요소는 부모를 기준으로 이동할 수 있다.3. absolute이 값은 절대 좌표를 기준으로 요소의 위치를 조정할 수 있는 값.. 2024. 7. 11. 이전 1 2 3 4 5 6 다음
