JavaScript
-
[JS] 콜백함수 / 콜백지옥JavaScript 2025. 6. 25. 14:04
• 콜백함수함수의 매개변수로 다른 함수를 전달하고, 어떠한 이벤트가 발생한 후 매개변수로 전달한 함수가 다시 호출되는 것을 의미 function sayHello() { console.log("안녕!");}function runLater(callback) { console.log("잠시 후에 콜백 실행할게"); callback(); // 여기서 실행됨}runLater(sayHello); 보통 아래와 같은 비동기 작업 처리 시 콜백함수를 사용 setTimeout(() => { console.log("3초 후 실행");}, 3000); 지금 바로 실행❌ 3초 뒤에 실행됌⭕→ 여기서 화살표 함수가 콜백 • 콜백지옥익명함수에 콜백 함수를 전달하는 과정에서 콜백 내에서 함수 호출이 반복되어 코드의 들여쓰..
-
[JS] 이벤트 버블링 / 이벤트 캡쳐링 / 이벤트 위임JavaScript 2025. 6. 19. 11:42
• 이벤트 캡쳐링이벤트 버블링과 반대 방향으로 진행되는 이벤트 전파 방식 • 이벤트 버블링 HTML에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미 부모 영역 자식 버튼 부모 영역 자식 버튼 위에서 자식 버튼 클릭시, 자식 버튼이 클릭됨!부모가 클릭됨! • 이벤트 위임 이벤트 버블링을 이용해 부모에 이벤트 하나만 달아서 모든 자식을 처리하는 게 이벤트 위임.parent.addEventListener("click", (e) => { console.log("실제로 클릭한 요소:", e.target);}); • stopPropagation() 버블링을 막기 위해서는 stopPropagation() 사용child.addEventListener("cl..
-
[JS] 브라우저의 랜더링 원리 / HTML 랜더링 중에 Javascript가 실행되면 렌더링이 멈추는 이유JavaScript 2025. 6. 18. 10:24
• 브라우저의 랜더링 원리 HTML을 파싱 후 DOM(Document Object Model) 트리 구축CSS 파싱 후 CSSOM(CSS Object Model) 트리 구축 // Parsing 단계JavaScript를 실행 (단, HTML 중간에 스크립트가 있다면 HTML 파싱이 중단)DOM과 CSSOM를 조합하여 렌더트리 구축 (단, display:none 속성과 같이 화면에서 보이지도 않고 공간을 차지하지 않는 것은 렌더트리로 구축되지 않음) // Style 단계 뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기를 계산 // Layout 단계계산한 위치/크기 기반으로 화면에 그림 // Paint 단계 📕DOM문서 객체 모델로 웹페..
-
[모던 JS 딥다이브] 11장 원시 값과 객체의 비교JavaScript 2023. 12. 17. 17:47
https://github.com/kimyurie/study_modernJSdeepDive/tree/master/11_%EC%9B%90%EC%8B%9C%20%EA%B0%92%EA%B3%BC%20%EA%B0%9D%EC%B2%B4%EC%9D%98%20%EB%B9%84%EA%B5%90아래 정리한 문서는 티스토리에서 일부 지원되지 않는 마크다운 기능이 있어 서식이 정확하지 않습니다ㅜㅜ정확한 정리 문서는 위에 깃허브 링크를 참고해주세요!+ 원시 타입의 값 : 변경 불가능한 값 ↔ 객체(참조) 타입의 값 : 변경 가능한 값 + 원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에 `실제 값` 저장 → 할당시 원본의 원시 값이 복사되어 전달(`값에 의한 전달`)+ 객체를 변수에 할당하면 변수(확보된 메모리 공간)에..
-
[모던 JS 딥다이브] 10장 객체 리터럴JavaScript 2023. 12. 12. 14:01
https://github.com/kimyurie/study_modernJSdeepDive/tree/master/10_%EA%B0%9D%EC%B2%B4%20%EB%A6%AC%ED%84%B0%EB%9F%B4아래 정리한 문서는 티스토리에서 일부 지원되지 않는 마크다운 기능이 있어 서식이 정확하지 않습니다ㅜㅜ정확한 정리 문서는 위에 깃허브 링크를 참고해주세요!10.1 객체란?js를 구성하는 거의 모든 것, 원시값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)이 객체원시값은 변경 불가능한 값 ↔ 객체 타입의 값(객체)은 변경 가능한 값 (ㄴ11장 원시값과 객체의 비교)객체는 0개 이상의 프로퍼티로 구성된 집합 ( 프로퍼티 = 키 + 값 )var person = {name : 'Lee', // 프로퍼티age..
-
[모던 JS 딥다이브] 9장 타입 변환과 단축 평가JavaScript 2023. 11. 30. 17:53
https://github.com/kimyurie/study_modernJSdeepDive/tree/master/09_%ED%83%80%EC%9E%85%20%EB%B3%80%ED%99%98%EA%B3%BC%20%EB%8B%A8%EC%B6%95%20%ED%8F%89%EA%B0%80아래 정리한 문서는 티스토리에서 일부 지원되지 않는 마크다운 기능이 있어 서식이 정확하지 않습니다ㅜㅜ정확한 정리 문서는 위에 깃허브 링크를 참고해주세요!9.1 타입 변환이란?명시적 타입 변환(타입 캐스팅) : 개발자가 의도적으로 값의 타입을 변환하는 것var x = 10;var str = x.toString(); // 명시적 타입 변환 (숫자 → 문자열)console.log(typeof str, str); // string 10c..
-
[모던 JS 딥다이브] 8장 제어문JavaScript 2023. 11. 26. 15:22
https://github.com/kimyurie/study_modernJSdeepDive/tree/master/08_%EC%A0%9C%EC%96%B4%EB%AC%B8아래 정리한 문서는 티스토리에서 일부 지원되지 않는 마크다운 기능이 있어 서식이 정확하지 않습니다ㅜㅜ정확한 정리 문서는 위에 깃허브 링크를 참고해주세요!8. 제어문조건문 , 반복문제어문은 코드 실행 순서 변경시켜 코드의 흐름 이해하기 어렵게 만들어 가독성 해치는 단점이 있음→ forEach, map, filter, reduce 사용 시 복잡성 해결(ㄴ나중 단원에 나옴)# 8.1 블록문0개 이상의 문을 {}로 묶은 것끝에는 세미콜론을 붙이지 않는다8.2 조건문8.2.1 if ... else문아래 코드와 같이 대부분의 if...else문은 삼항..
-
[모던 JS 딥다이브] 7장 연산자JavaScript 2023. 11. 25. 20:58
https://github.com/kimyurie/study_modernJSdeepDive/tree/master/07_%EC%97%B0%EC%82%B0%EC%9E%90아래 정리한 문서는 티스토리에서 일부 지원되지 않는 마크다운 기능이 있어 서식이 정확하지 않습니다ㅜㅜ정확한 정리 문서는 위에 깃허브 링크를 참고해주세요!7.3 비교 연산자1. x == y (동등 비교)x와 y의 값이 같음// 타입은 다르지만 암묵적 타입 변환 통해 타입을 일치시키면 동등하다. 5 == '5' // true동등 비교(==)는 예측하기 어려운 결과 만들어내므로 아래 일치 비교 연산자(===)를 사용하는 것이 더 좋다.2. x === y (일치 비교)x와 y의 값과 타입이 같음5 === '5' // false⚠️ NaN 주의!//..