Christmas.log

# 정렬 (Sorting): 데이터를 특정한 순서(오름차순, 내림차순, 임의의 조건) 로 정렬하는 알고리즘목적 : 데이터의 정규화 = 순서와 패턴이 있는 데이터화 한다 [ 기본 자바스크립트 정렬 ]# sort(): 기본적으로 오름차순 정렬 실행const items = [ { key: "여름", value: 10 }, { key: "가을", value: 7 }, { key: "겨울", value: 6 }, { key: "봄", value: 9 },]// compareFunction : 비교 함수items.sort((a,b) => { // 비교할 아이템 두 개 if(a.value > b.value){ // a 인덱스가 b 인덱스보다 크다 return 1; } if(a.value    정렬 방식평균 시간복잡..

1. 기본형 (classic for loop)for (let i = 0; i 사용하는 경우 :- 반복할 횟수를 정확히 알고 있을 때 유용하다.- 인덱스가 중요하고, 순차적으로 값에 접근할 때. 2. for ... of 문for (let item of array) { // 반복할 코드}  사용하는 경우 :- 배열이나 이터러블 객체의 각 요소를 순차적으로 처리할 때.- 배열의 각 항목에 대해 특정 작업을 수행하거나 값 변경하기. 3. for ... in 문for (let key in object) { // 반복할 코드} 사용하는 경우 :- 객체의 키를 반복한다. (배열 x)- 객체의 키에 접근하고자 할 때 유용합니다.- 객체에 속한 모든 속성을 반복할 때.- 객체의 속성값을 출력하거나 변경할 때. 4. ..

비동기적으로 처리되는 작업을 설계하고 관리하는 다양한 방법들을 알아보자. * 비동기 코드가 어려운 이유 :일반적인 코드 방식은 동기적인데, 비동기 코드는 내부적으로 비동기 메커니즘(ex. 이벤트 루프)을 통해서 동기와는 다른 방식으로 처리되는데에서 혼돈이 온다. 그래서 비동기 코드를 동기 코드처럼 보이게 발전을 거듭하는 중 (ex. async, await)인 것임~! # 비동기 코드 종류들 (웹브라우저)1. HTTP 요청 처리 : XMLHttpRequest(XHR), Fetch API2. 비동기 프로그래밍 패턴 : Callback, Promise, async/await3. 타이머 및 애니메이션 : setTimeout, requestAnimationFrame4. 백그라운드 작업 : web worker, s..

# new Blob(): Blob (Binary Large Object) 객체 생성- 주로 대용량 파일이나 바이너리 데이터(이미지, 비디오 등)를 처리할 때 사용- Blob 은 파일의 데이터를 메모리상에 들고 있는 객체 [ 특징 ]Blob은 이진 데이터를 효율적으로 처리할 수 있도록 도와주며, 파일의 형태로 데이터를 다룰 수 있게 합니다.파일을 다룰 때, 특히 웹 애플리케이션에서 파일 업로드나 다운로드 기능을 구현할 때 유용하게 사용됩니다.Blob은 대체로 파일 시스템의 일부로 처리되는 것처럼, 로컬 파일을 읽거나 다운로드할 때 사용될 수 있습니다. [ 사용법 ]- 두 가지 인수 받기 1. Array-like Object (배열과 유사한 객체): Blob의 데이터를 나타내는 값입니다. 문자열, Array..

1. 하나의 프로세스는 여러 스레드를 가지며, 같은 메모리 공간을 공유한다.# 프로세스 ( process)= 컴퓨터에서 실행 중인 프로그램의 독립적인 단위= 각 프로세스는 운영 체제에 의해 고유한 메모리 공간, CPU 등의 리소스를 할당 받는다. 예시) 브라우저, 크롬, 사파리, 문서 편집기, 음악 플레이어 등등이 하나의 프로세스 이다.- 브라우저의 각 탭도 별개의 프로세스 이다- 한 탭에서는 유투브로 음악을 듣고, 한 탭에서는 벨로그를 작성한다.  # 프로그램 vs 프로세스- 프로그램 : 저장된 코드(정적인 개념)예시) 컴퓨터에 설치된 "엑셀" 프로그램은 하드디스크에 저장된 파일이다. - 프로세스 : 실행 중인 프로그램(동적인 개념)예시) 엑셀을 실행하면, 메모리와 CPU 리소스를 할당받아 "엑셀 프로..

# this: 현재 실행 중인 컨텍스트에 따라 다르게 바인딩되는 키워드: 현재 실행 중인 컨텍스트(문맥)를 참조하는 키워드[ 개념 ]1. 함수가 호출되는 방식에 따라서 this가 가리키는 대상이 달라진다. = 다른 객체를 참조한다2. 실행 컨텍스트가 생성될 때마다 this의 바인딩이 일어난다. # 바인딩 (Binding): 변수나 함수, 객체 등이 특정 값이나 실행 컨텍스트와 연결되는 과정this 바인딩 : this가 가리키는 대상을 결정하는 과정바인딩 된다 = 가리킨다 = 참조한다# 위치 별 this의 바인딩 규칙상황this 바인딩 대상전역 컨텍스트window (strict mode에서는 undefined)객체의 메서드 호출호출한 객체생성자 함수 (new)새로 생성된 객체화살표 함수상위 스코프의 thi..

# 스코프 (Scope): 변수와 함수가 접근할 수 있는 유효한 범위- 코드 내에서 특정 변수나 함수가 어디에서 접근 가능한지를 정의하는 규칙 [ 스코프의  종류 ]** 변수를 찾는 기준에 따른 분류" 어떤 기준으로 변수를 찾을까?" 1. 정적 스코프 = 렉시컬 스코프 (Lexical Scope): 함수가 선언된 위치(렉시컬 환경)에 따라 스코프(변수의 유효 범위)가 결정되는 방식- 자바스크립트는 렉시컬 스코프를 따르는 언어로, 함수가 어디서 호출되었는지가 아닌, 어디서 정의되었는지에 따라서 스코프가 결정된다.- 스코프는 런타임이 아닌 코드 작성 시점에 이미 결정된다.- 스코프 체인을 통해 자신이 선언된 스코프와 상위 스코프의 변수에 접근할 수 있다. 2. 동적 스코프 (Dynamic Scope): 함수..

# BOM (Browser Object Model): 브라우저와 관련된 객체를 다루는 모델- 브라우저와 관련된 다양한 기능들을 제어할 수 있도록 돕는 API 제공 [ 특징 ]- 브라우저와의 상호작용을 위해 사용한다.- 브라우저 자체에 대한 제어를 담당- window 객체는 BOM의 핵심으로, 브라우저의 상위 객체로서 다양한 기능을 제공한다. # Window 객체: 웹 브라우저에서 제공하는 전역 객체(global object)- 브라우저 환경에서 자바스크립트를 실행할 때 자동으로 생성되며, 브라우저의 전체 창을 나타낸다.- 웹 브라우저에서 실행되는 자바스크립트의 "최상위 객체"- 브라우저와 페이지 사이의 인터페이스 역할을 한다.- 모든 전역 객체와 메서드는 window 객체의 하위에 포함된다. [ 주요 기..

[ 이벤트 종류 ]마우스 이벤트 : click, mouseover, mouseout, mouseup키보드 이벤트 : keydown, keyup, keypress폼 이벤트 : submit, change, focus, blur문서 이벤트 : load, resize, scroll [ DOM 이벤트 전파 (Event Propagation) 단계 ]캡처링 → 타깃 → 버블링 1. 캡처링 단계 (Capturing Phase)** 기본적으로는 캡처링 이벤트 리스너를 설정하지 않으면 무시되는 단계이벤트가 최상위 요소(window)에서 시작해 이벤트 대상 요소까지 내려가는 과정입니다.클릭 이벤트가 발생했을 때 브라우저는 최상위 부모 요소인 window에서부터 차례대로 각 부모 요소를 거쳐 이벤트가 발생한 타깃 요소(실제..

JavascriptHTML, CSS 와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어다.개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어다. 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어다.웹 개발을 중심으로 사용되는 동적 프로그래밍 언어다.등 등,,, [ 주요 특징 ]1. 인터프리터 언어 (Interpreted Language)- JavaScript 코드는 컴파일 과정 없이 한 줄 씩 즉시 실행됨 2. 동적 타입 언어 - 변수 선언시 데이터 타입을 지정하지 않아도 됨3. 객체 기반 (prototype based, object-oriented)- 모든 값이 객체와 연관됨- 프로토타입으로 객체의 속성을 상속 할..