Christmas.log

# DOM (Document Object Model, 문서 객체 모델): HTML 문서의 구조를 객체로 표현한 모델= 웹 문서를 표현하는 프로그래밍 인터페이스= 브라우저가 HTML, XML 같은 문서를 파싱한 뒤 생성하는 객체 기반의 구조 Q. DOM 이 필요한 이유?A. 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델로이를 통해 프로그래밍 언어(주로 JavaScript)가 문서의 내용, 구조, 스타일을 동적으로 접근하고 조작할 수 있다- JavaScript와 브라우저 화면(HTML)을 연결하는 역할로 JavaScript는 DOM을 통해 HTML 요소를 조작한다. // 자바스크립트로 DOM 객체에 접근하여 읽거나 수정하는 예시// Welcome 노드에 접..

# 렌더링 방식 : 서버와 클라이언트에서 HTML을 어떻게 제공할지 결정하는 방식** 어디에서 실행되느냐(클라이언트 vs 서버)** 어떤 기술이 이를 처리하느냐로 방식을 구분한다.  # 클라이언트 사이드 렌더링 (CSR, Client-Side Rendering)[ 개념 ] : 초기 요청 시 서버에서 HTML의 기본 틀만 전달하고, JavaScript가 실행되면서 브라우저가 데이터를 가져와서 페이지를 렌더링함.즉, 화면을 구성하는 주요 작업인 HTML 페이지 생성이 브라우저에서 (클라이언트)에서 실행됨. [ 특징 ]- 서버는 HTML 생성을 담당하지 않고, 단순히 API 요청에 대한 데이터만 반환하면 된다.- React, Angular, Vue.js 같은 SPA(Single Page Application)..

자료구조 (Data Structure): 데이터를 저장하는 방법- 데이터를 어떻게 저장하고 활용할지에 대한 개념 [ 자료구조의 종류 ]# 기본 자료구조배열 (Array) → 순서가 있는 데이터 리스트객체 (Object) → 키-값 쌍으로 이루어진 데이터 저장 방식# 고급 자료구조집합 (Set) → 중복을 허용하지 않는 데이터 모음, 생성자 함수로만 만들 수 있다.맵 (Map) → 키-값 쌍을 저장하지만, 키에 다양한 타입 사용 가능, 생성자 함수로만 만들 수 있다.스택 (Stack) → LIFO(Last In First Out) 구조큐 (Queue) → FIFO(First In First Out) 구조링크드 리스트 (Linked List) → 노드들이 포인터로 연결된 구조트리 (Tree) → 계층적인 데..

JSON (JavaScript Object Notation): 데이터를 저장하고 전송하는 데 사용하는 경량 데이터 형식 [ JSON 데이터 예시 ]{ "name": "Alice", "age": 25, "isStudent": false}- Key(키)는 항상 문자열- Value(값)는 문자열, 숫자, 배열, 객체 등 [ 특징 ]JSON 데이터는 보통 문자열(string) 형태로 저장하거나 전송한다.JSON 문자열 = JSON 데이터를 문자 형태로 변환한 것 # JSON 메서드1. JSON.stringify(obj) : JavaScript 객체나 배열을 JSON 문자열로 변환하는 메서드 2. JSON.parse(str): JSON 문자열을 객체로 변환하는 메서드 const jsonData = { na..

# 깊은 복사 (deep copy): 원본 객체와 완전히 독립적인 복사본을 생성하는 것복사된 객체가 원본 객체와 참조를 공유하지 않으며, 복사본을 변경해도 원본에는 영향이 없다. [ 특징 ]객체의 모든 계층(중첩된 객체까지 포함하여)이 새로운 메모리에 할당됨.완전히 독립적인 객체가 생성되므로, 복사본을 변경해도 원본은 변하지 않음. [ 깊은 복사 방법 ]1. JSON.parse(JSON.stringfy())2. structuredClone()3. lodash 라이브러리 (_.cloneDeep()) [ 깊은 복사 예시 ]1.  structuredClone() 사용const obj1 = { name: "Alice", address: { city: "Seoul" } };// 깊은 복사 (structuredCl..

# 트랜스파일러 트랜스파일러특징속도사용 사례Babel가장 널리 쓰이는 트랜스파일러, 커스텀 가능느림 😢Webpack 기반 프로젝트SWCRust 기반, Babel보다 20배 빠름 ⚡빠름 🚀Next.js 기본 트랜스파일러esbuildGo 언어 기반, 초고속 빌드매우 빠름 🔥Vite 기본 트랜스파일러TSCTypeScript 코드 변환 (JSX 지원 X)보통 😐TS 프로젝트에서 Babel 없이 사용 가능  # 트랜스파일러(Transpiler) vs. 컴파일러(Compiler)- 둘 다 코드 변환을 한다는 점에서는 같으나  '어디로 변환하느냐'가 다름 트랜스파일러 : 같은 수준(high-level)의 프로그래밍 언어 간 변환- A 언어를 B 언어로 바꾸지만, 둘 다 사람이 읽을 수 있는 코드ex) Babe..

Math 객체 메서드: 수학 상수와 함수를 위한 프로퍼티와 메서드를 제공하는 빌트인 객체 # Math.round()- 소수점 이하를 반올림 # Math.floor()- 소수점 이하를 내림 # Math.ceil()- 소수점 이하를 올림 # Math.abs()- 절댓값Math.abs(-2); // 2Math.abs('-2'); // 2Math.abs(''); // 0Math.abs([]); // 0Math.abs(null); // 0Math.abs(undefined);// NaN # Math.sqrt()- 인수의 제곱근 # Math.pow(x, y)- 거듭제곱 (x^y)console.log(Math.pow(2, 3)); // 8 (2³)console.log(Ma..

기본 메서드# Object.keys(obj): 객체의 모든 키를 배열로 반환 # Object.values(obj): 객체의 모든 값(value)을 배열로 반환 # Object.entries(obj): [key, value] 배열 반환 # Object.fromEntries(arr): [key, value] 배열을 객체로 반환const user = { name: "Alice", age: 25 };console.log(Object.keys(user)); // ["name", "age"]console.log(Object.values(user)); // ["Alice", 25]console.log(Object.entries(user)); // [["name", "Alice"], ["age", 25]]const..

# bundling (번들링)= 여러 개의 파일(HTML, CSS, JavaScript, 이미지 등)과 모듈을 하나의 파일로 묶는 과정= 소스 모듈을 브라우저에서 실행할 수 있는 파일로 크롤링, 처리 및 연결하는 도구를 사용하는 것- 번들링은 주로 프론트엔드 프로젝트에서 사용된다- 번들링 과정을 통해 웹 애플리케이션에서 필요한 리소스들을 효율적으로 관리할 수 있다. # Bundle Tool (번들러)= 번들링 작업을 수행하는 도구- 대표적인 번들러 : Webpack, Rollup, Parcel, Vite [ 번들러의 핵심 기능 ]1. 의존성 분석 : 애플리케이션의 모듈 의존성 그래프를 생성하여, 모든 파일 간의 연결 관계를 파악한다.2. 코드 병합 (번들링) : 서로 의존하는 파일(모듈)을 하나 이상의 ..

# 배열 메서드1. shift(): 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환합니다. 이 메서드는 배열의 길이를 변하게 합니다.- 원본 배열을 변경한다.const array1 = [1, 2, 3];const firstElement = array1.shift();console.log(array1);// Expected output: Array [2, 3]console.log(firstElement);// Expected output: 1- 빈 배열의 경우 undefined 를 반환 ** Tip push()나 pop()은 **배열의 끝에 요소를 넣고 빼기 때문에 O(1)**로 빠릅니다.하지만 **unshift()나 shift()는 배열의 맨 앞에 요소를 넣고 빼야 하므로 O(N)**이에요. 즉,..