JavaScript에서 클로저(Closure)란?클로저(Closure)는 함수가 자신이 선언된 렉시컬 환경(Lexical Environment)을 기억하고, 그 환경에 접근할 수 있는 기능을 의미합니다. 즉, 내부 함수가 외부 함수의 변수에 접근할 수 있으며, 외부 함수 실행이 끝난 후에도 변수의 값을 유지할 수 있습니다.클로저의 기본 개념함수 내부에서 선언된 함수클로저는 보통 함수 내부에서 정의된 또 다른 함수로 구성됩니다. 내부 함수는 외부 함수의 변수를 참조할 수 있으며, 외부 함수 실행이 종료된 후에도 변수의 값을 유지합니다.예제 코드function outerFunction(outerVariable) { return function innerFunction(innerVariable) { ..

Document 객체란?Document 객체는 웹 브라우저에서 HTML 문서를 나타내는 최상위 객체로, DOM(Document Object Model) 트리의 루트(root) 역할을 합니다.모든 HTML 요소들은 document 객체를 통해 접근할 수 있으며, 이를 활용하여 요소 검색, 수정, 삭제, 추가 등의 조작을 수행할 수 있습니다.1. DOM 트리의 루트 (Root) 노드웹 문서는 DOM 트리로 표현되며, 이 트리의 최상위 노드가 바로 document 객체입니다.즉, HTML 문서 전체를 다룰 때 가장 먼저 접근해야 하는 객체가 document입니다.📌 예제: 현재 HTML 문서의 루트 요소(html) 가져오기console.log(document.documentElement); // 요소 출력..

모듈 시스템이란? JavaScript에서 **모듈(Module)**이란 코드의 재사용성과 유지보수성을 높이기 위해 하나의 파일을 여러 개로 분리하여 관리하는 방법입니다. ES6 이전에는 모듈 시스템이 없었기 때문에 전역 변수 오염, 의존성 관리 문제 등의 어려움이 있었습니다. 이를 해결하기 위해 CommonJS와 ESModule(ESM) 같은 모듈 시스템이 도입되었습니다. 이 글에서는 import/export 문법, CommonJS와 ESModule의 차이, default export와 named export의 차이에 대해 자세히 알아보겠습니다. import, export 문법 (ES Module) ES6(ECMAScript 2015)에서 등장한 **ESM(ECMAScript Module)**을 사용하면..

preventDefault() 와 stopPropagation()이란? JavaScript에서 이벤트를 다룰 때, 기본 동작을 막거나 이벤트의 전파를 차단해야 하는 경우가 있습니다. 이를 위해 preventDefault() 와 stopPropagation() 메서드를 사용할 수 있습니다. preventDefault(): 기본 동작(폼 제출, 링크 이동 등)을 차단stopPropagation(): 이벤트가 부모 요소로 전파(버블링)되는 것을 방지이 두 가지는 완전히 다른 역할을 하므로, 상황에 맞게 적절히 사용해야 합니다. 아래에서 각각의 개념을 자세히 알아보고 예제를 살펴보겠습니다. preventDefault() : 기본 동작 차단 이벤트가 발생했을 때, 브라우저의 기본 동작을 막는 메서드입니다. 예를 ..

이벤트 위임JavaScript에서 이벤트를 처리할 때, 보통 특정 요소에 직접 이벤트 리스너를 등록해야하는데, 동적으로 생성되는 요소에 이벤트를 걸어야 하거나 성능 최적화가 필요한 경우, 이벤트 위임(Event Delegation) 을 활용할 수 있다. 이벤트 위임이란 부모 요소에 하나의 이벤트 리스너를 등록하고, 자식 요소의 이벤트를 부모 요소에서 처리하는 방식이다. 이렇게 하면 여러 개의 요소에 개별적으로 이벤트 리스너를 추가하지 않아도 효율적으로 이벤트를 관리할 수 있다.이벤트 전파 (Event Propagation) 개념이벤트 위임을 이해하려면 이벤트 전파(Event Propagation) 를 먼저 알아야 합니다. DOM에서 이벤트가 발생하면 캡처링(Capturing) → 타겟(Target) → ..

Intro처음 변수명부분에  [변수명1, 변수명2, ...변수명3] 이런 식으로 있는 코드를 보았을 떄, 와.....저건 또 뭐야무슨 괴생물이 있어? 어떻게 동작하길래 저렇게 사용하는거지 들어가는 값은 객체 하나인데 받는 변수는 여러개? 뭐야 라는 생각을 했었다. 얼핏 찾아보기로는 안에 있는 속성들을 꺼내서 사용하는데 구조분해할당처럼 전부 풀어서 사용하기보단 원하는 것만 꺼내서 사용하기 위한 방법인거 같은데 맞는지 확인해보자Destructuring Assignment (구조 분해 할당)배열이나 객체에서 값을 쉽게 꺼내서 변수에 할당하는 문법이야.배열 구조 분해 할당const numbers = [1, 2, 3, 4, 5];const [first, second, ...third] = numbers;conso..

Intro(...) 이게 뭐야 할 말 생략 된건가... 자바에서는 자주 써보지 않았지만 가변인자라고 있는걸 아는데, 스프레드 연산자, 나머지 파라미터 단어부터 생소하네나머지 연산자는 자바의 가변인자랑 비슷한걸려나?Spread Operator (전개 구문)배열이나 객체를 펼쳐서(전개해서) 사용하는 연산자이다.배열에서 Spread 사용const arr1 = [1, 2, 3];const arr2 = [4, 5, 6];// 기존 배열을 변경하지 않고 새로운 배열을 만들 때const arr3 = [...arr1, ...arr2];console.log(arr3); // 출력: [1, 2, 3, 4, 5, 6]// 배열 복사 (깊은 복사)const arr4 = [...arr1]; // 기존 배열을 변경하지 않음 co..

Intro프론트 온보딩을 진행하면서 이번 키워드들은 배열 메서드인데 자바와 크게 다른게 있을까 싶다.대부분 주로 코테 lv1 풀때 사용했던것들이 몇몇개 보이는데 다른게 뭐가 있는지 찾아봐야지배열 메서드forEach순회 메서드로, 인덱스 순서로 배열의 각 요소를 호출하여 정해둔 함수 로직을 실행하여 반환합니다.한번 방문한 인덱스는 재방문 하지 않으며 일반 반복문과 달리 조기 종료를 할 수 없습니다.map과 달리 항상 undefined를 반환하므로 체이닝 할 수 없습니다.예시const people = [ {age: 17, gender: 'female'}, {age: 23, gender: 'male'}, {age: 30, gender: 'female'}, {age: 26, gender: 'male'},..