프레임워크가 없던 시절에는 정적인 페이지를 제공하는 HTML 페이지를 동적으로 렌더링 하려면 Vanilla Javascript를 사용해야 했다. 그러나 웹사이트 규모가 커질수록 기존 데이터의 변경이 빈번하게 발생하면 웹사이트는 바뀐 부분을 탐색하기 위해 처음부터 DOM

목적 : 필요한 책들을 찾아보고 간편하게 구매할 수 있게 하는 유저 서비스를 제공합니다.목표홈에서 엘라딘 베스트 셀러, 추천 도서 등 유저에게 유용한 서비스를 제공합니다.회원 가입을 하지 않아도 마이페이지를 제외한 모든 기능을 이용할 수 있습니다.상품 조회부터 구매까지

딥다이브 스터디를 진행하며 서로 더 알고 싶었던 부분이나 헷갈렸던 부분을 더 자세히 조사해보고 공부해보는 시간을 가지게 되었다.솔직히 이론만 봐서는 함수형 프로그래밍과 객체 지향 프로그래밍이 각각 어디에 쓰이는지, 어떤 차이점이 있는지 그리고 어떤 로직에 더 효과적인지

ES5 문법에서는 생성자 함수와 프로토타입을 통해 인스턴스를 생성할 수 있었다.그러나 ES6에서 클래스가 도입되면서 extends super 키워드를 사용하여 상속 관계 구현을 이 전 생성자 함수 방식 보다는 상속 관계 구현을 더욱 직관적으로 한다.위 코드와 같이 정의

작성 전..=> 실행 컨텍스트는 이전 생활코딩 유튜브의 스코프 부분을 보며 잠시동안 공부한 적이 있었다. 딥다이브 스터디를 계기로 깊게 공부해보게 되었다. 자바스크립트의 동작 원리를 담고 있는 핵심 개념이며, 런타임 이전에 생성된다.변수, 함수 등의 선언문만 먼저 실

자바스크립트 문법을 좀 더 엄격하게 적용하여 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으키는 코드에 대하여 명시적인 에러를 발생시킨다.함수 몸체의 선두나 전역 선두에 다음과 같이 선언한다!비슷한 것으로 ESLint 도구가 있다.암묵적

\[\[]] 로 감싼 이름들이 모두 내부 슬롯과 내부 메서드이다.자바스크립트 엔진의 구현 알고리즘을 설명하기 위에 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드이다.모든 객체는 \[\[Prototype]] 이라는 내부 슬롯을 가진다.위의 코드처럼 o

전역변수는 말 그대로 전역에 선언된 변수이다..보통 지역변수의 생명주기는 함수의 생명주기와 일치한다.outerFunction내에 존재하는 변수 및 함수 => outervariable innerFunctioninnerFunction 내에 존재하는 변수 => inner

스코프? 스코프는 변수의 유효범위이다. 예를 들어, 위와 같이 함수선언문, if, else문, for문 등을 사용할 때 항상 , 로 묶어와주었었다. 저 중괄호로 묶인 것을 스코프라고 부르고 변수의 유효범위를 나타내는 것이다. => 정리하자면 모든 식별자는 자신이

함수를 사용하는 가장 큰 이유는 코드의 재사용성, 유지보수, 가독성 이다!위의 코드를 보면 첫 번째 함수는 foo 라는 변수에 익명함수가 할당되어 있고 두 번째 함수는 foo라는 이름을 가진 함수가 선언된 것이다. 변수에 할당되어 있는 함수를 함수표현식 이라고 부르고

![대체 텍스트(궁금이미지)](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQMAAADCCAMAAAB6zFdcAAAAkFBMVEX///8AAAAFBAQIBwf7+/sMCwvx8fEHBgbz8/P39/cWFRULCwvV1dUQDw/

Task Queue는 JS 에서 비동기 처리를 담당하는 Queue이다.Macro Task Queue, Micro Task Queue 두 개로 구분되며 Task Queue 와는 별개로 처리하는 AnimationFrameQueue 가 존재한다. 또한 이 3개의 Queue는

객체는 Primitive 타입과 다르게 변경 가능한 값이다.객체 리터럴은 객체를 생성하기 위한 표기법이다.리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용하여 값을 생성하는 표기법을 말한다.인스턴스란?클래스에 의해 생성되어 메모리에 저장된 실체를 말한다.

자바스크립트의 데이터타입에는 위와 같이 primitive(원시타입) 타입의 데이터 타입이 6개, 객체 타입의 데이터 타입이 객체 함수 배열 등이 존재한다.새로 알았던 점은 NaN 이라는 데이터 타입은 Number 타입 이라는 것이다. (not a number의 약자)자

컴퓨터는 메모리를 사용해 데이터를 기억한다.=> 메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체다. 메모리 셀 하나의 크기는 1바이트이다.위와 같은 코드의 경우, 20과 30이라는 정수 값이 메모리의 한 공간을 차지하며 변수 a와 b는 그 메모리 공간의 상징적인

Iterator가 무엇일까?위의 코드를 살펴보면 당연히 배열은 어느 누구나 알다시피 1~7의 범위의 숫자가 들어있는 변수 array 이다.바로 밑에 있는 iterator 변수에 들어있는 iterator 함수는 1~7의 값을 구하는 값이다. iterator를 만들게 되면

기본적인 js에서 클래스 선언은 위와 같이 한다. 또한 class 안에서 선언되는 함수들은 function 이라는 키워드를 생략한다.객체가 만들어지기 직전에 실행되는 함수가 존재하는데 그게 바로 constructor 라는 함수이다. 함수의 이름은 바꿀 수 없다.위의 코

‏‏‎ ‎ JS engine의 구조 JS - Event Loop image Memory Heap 메모리 할당이 일어나는 곳이다. Heap 구조화 되지 않은 넓은 메모리 영역 \=> 객체, 배열들이 담긴다. Call Stack(호출 스택) 실행될 코드

JavaScript EventLoop 에 대해 알아보다가 결국 운영체제의 Process, Thread 개념까지 와버렸다.. 알고 가야 이해가 될 것 같아서 정리해본다. 그 전에 프로세스와 스레드가 무엇인지에 대해 알려면 관련 용어들을 정리할 필요가 있다.컴퓨터가 실행할

IndexedDB는 서버에 데이터를 저장하는 것이 아닌, 웹 브라우저, 클라이언트 단에 데이터를 저장할 수 있는 DB이다.‏‏‎ ‎‏‏‎ ‎웹브라우저에 db를 저장하면 클라이언트와 서버와 모두 좋은 점이 있다.네트워크를 통하지 않기 때문에 빠르게 데이터를 가지고 올 수