📄Today I Learned41 이벤트 버블링 & 캡쳐링 이벤트 버블링이벤트 버블링은 특정 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 요소들로 전달되어 가는 특성을 의미한다. 마치 거품이 퍼지는 것 처럼 예시로 3개의 div 태그에 각각의 id를 부여했고 가장 하위 단계의 버튼(id = "children")을 눌렀을 때 모든 addEventListener 가 작동하는 것을 알수있다. button 태그 한 개만 클릭했을 뿐인데 왜 3개의 이벤트가 발생되는 걸까?브라우저가 특정 요소에서 이벤트가 발생했을 때 이벤트를 최상위에 있는 요소까지 전파 시킨다.따라서 children -> parents -> grandParents 순으로 이벤트들이 실행된다. 이와 같이 하위에서 상위 요소로 이벤트가 전파 되는 방식을 Event Bubbling(이벤트 버블링)이.. 2025. 1. 17. 동기 & 비동기 자바스크립트 비동기 처리의 핵심자바스크립트는 싱글 쓰레드로 동작하지만, Web APIs를 통해 효율적으로 비동기 작업을 처리한다. 이를 통해 복잡한 작업을 효율적이고 원활하게 처리할 수 있다.자바스크립트의 동기적 처리 방식자바스크립트는 기본적으로 모든 코드를 위에서 아래로 순차적으로 실행하는 동기적 언어다. 하지만 시간이 오래 걸리는 작업이 있다면 전체 코드의 실행 흐름이 막혀버릴 수 있다. 이러한 문제를 해결하기 위해 자바스크립트는 비동기 처리 방식을 사용하고 있다.만약 우리가 카페에서 커피를 주문한다면?비동기 처리를 이해하기 쉽게 예를 들어보자. 커피숍에서 손님이 주문을 하고 커피가 나올 때까지 기다린다고 상상해보자. 만약 점원이 손님 한 명의 주문을 받고 커피를 다 만든 뒤에야 다음 손님의 주문을 .. 2025. 1. 16. 단락 평가 function returnFalse () { console.log('False 함수'); return false;}function returnTrue () { console.log('True 함수'); return true;}console.log(returnFalse() && returnTrue()); 실행 순서 및 결과returnFalse() 실행console.log('False 함수')가 실행되며 False 함수가 출력된다.false를 반환논리 AND 연산자(&&) 평가&&는 왼쪽 값이 false면 오른쪽을 평가하지 않고 바로 false를 반환따라서 returnTrue()는 실행되지 않는다.최종 결과 출력console.log(false)가 실행되어 false가 출력 단락 평가(Short-c.. 2025. 1. 14. map 메서드의 목적과 객체의 불변성 map 메서드의 목적map은 기존 배열을 변경하지 않고 각 요소를 변환해서 새로운 배열을 만드는 함수이다.즉, 원본 배열을 그대로 두고, 가공한 결과를 새 배열에 담는 것이 목적!map은 반환(return)하는 값을 모아서 새로운 배열을 만들어주기 때문에. 반환값이 명확해야 한다.const newArray = originalArray.map((item) => { // item을 가공해서 새로운 값을 반환 return 가공된 값;}); const products = [ { name: "상품1", price: 10000 }, { name: "상품2", price: 20000 }, { name: "상품3", price: 30000 }, ]; const discountedProduct.. 2025. 1. 13. 검색 기능 구현하기 드디어 검색 기능을 구현했다!!😭 내가 선언한 fetchMovies는 비동기 함수이기 때문에 변수에 바로 데이터를 할당하려고 하는 방식이 잘못되었었다. 그래서 비동기적으로 처리한 후 그 결과를 필터링해야 했다.//* --- 검색 기능 구현 --- *// searchBtn.addEventListener("click", function () { const keyword = searchInput.value; // 사용자가 입력한 검색어 const searchUrl = `https://api.themoviedb.org/3/search/movie?query=${keyword}&include_adult=false&language=ko&page=1` fetchMovies(searchUrl.. 2025. 1. 12. 1월 10일 개발일기😢 이번에 영화 검색 기능 사이트를 만들면서 자존감이 너무 떨어진거같다.. 내가 뭘 모르는지 몰라서 뭘 검색해야하는지도 모르고 그래서 공부를 한다는 느낌보다 하루에 생각을 하는시간이 많아졌다. 사실 오늘 검색기능을 구현하고 싶었는데 하지 못해서 너무 속상했다... 이번 개인 프로젝트를 하면서 느낀 건 내가 근래에 한달동안 해오던 건 그냥 다른 사람이 써놓은 코드를 따라쓰는 코드카피에 불가했다는 것을 깨달았다. 내 스스로는 아무것도 써낼수가 없고 로직도 생각할줄 모르고 할줄 아는 건 그냥 검색해서 찾아낸 코드를 여기 저기 뜯어 고쳐서 붙여넣기 밖에 없다는 것이 너무 내 자신한테 미안하다. api데이터를 가져오는 것부터 그 데이터를 이용해 화면에 구현하고 버튼을 눌렀을 때 인기영화 목록이 아니라 전체 영화 목록.. 2025. 1. 10. 이전 1 2 3 4 5 6 7 다음
