REAL JavaScript Deep Dive

딥다이브 더 들어가보기 - 1장. 프로그래밍 💦

뭔가 쓴 듯 안 쓴 듯. 새로 쓰기엔 이미 잘 쓴 글들이 너무 많다.

많고 많은 설명 중 Node.js를 좀 더 이해하기

변수는 변하지 않는 수이긴 한데...

문은 door 아닌가요? 😮

잘 정해진 타입에 그렇지 못한 자바스크립트의 타입 변환 🙇🏻‍♂️

vite와 vitest가 낳은 지극히 주관적으로 나온 잡종 글 🚽💩

스코프를 알아야 자바스크립트를 제대로 이해할 수 있다! 😉

평일은 while(true), 휴일은 continue 😭

제발 깜빡이좀 켜고 타입 변환해주렴... 🥹

어려운 파트 들어가기 전, 잠깐 쉬어가볼까요? 😉



🌈 시작하며 함수가 드디어 나오네요. 사실 함수란 자바스크립트 뿐만 아니라 거의 모든 프로그래밍 언어에서 중요시 다뤄지는 개념이죠. 사실 방대한 양이지만, 함수라는 말을 너무 어렵게 받아들이지 말고, 우리가 예전부터 알고 있었다는 듯이, 가벼운 호흡으로 보시는 것

달면 삼키고 전역변수는 쓰면 안돼요! ⚠️

키워드의 차이 보러왔다가 TDZ 내부 원리만 주구장창 본 파트

16장 프로퍼티 어트리뷰트. 사실 처음 자바스크립트를 접하는 개발자에게는 추천하고 싶지는 않은 챕터에요. 😭섣불리 들어갔다가는 괜히 자바스크립트에 대한 체감 난이도를 높일 수 있기 때문입니다.다만 이 챕터가 필요하지 않다는 것은 아니에요. 다만, 이 챕터를 통해 얻고

우리, 이전에 10장에서 객체 리터럴을 공부해왔어요.그때, 객체를 생성하는 5가지가 있다고 했죠? 그 중 하나인 생성자 함수를 오늘 다루려 합니다.쉽게 말하자면, new 연산자와 함께 호출해서, 객체를 생성하는 함수를 생성자 함수라 해요.사실, 객체 리터럴이 값을 이해

일급 객체란 다음 4가지를 만족하는 객체를 일반적으로 의미하는데요.런타임에 무명의 리터럴로 생성이 가능하다.변수나 자료구조에 저장할 수 있다.함수의 매개변수에 전달 가능하다.함수의 반환값으로 사용 가능하다.🥲 힉, 너무 헷갈리지 않아요?🥰 따라서 저는 이렇게 정의해

🚦본론 자바스크립트를 처음 마주할 때 어려울 수 있는 파트에요. (저도 처음엔 어려웠어요!) 하지만, 우리가 객체를 사용하는 이유를 깊게 생각해보면, 프로토타입이라는 것이 어떻게, 왜 필요한 것인지 이해할 수 있어요. 😉 > 🙆🏻 너무 어렵다고 생각하지 말고, 천천히 한 번 살펴 나가볼까요? 객체와 프로토타입 프로그래밍은 현실의 문제를 해결하...

🚦 본론 흔한 자바스크립트의 비엄격 모드 엄격 모드! 생각보다 익숙한 주제네요 🙇🏻‍♂️ 자바스크립트에서는 비엄격 모드로 개발할 시 괴상한 일들이 정~말 많이 벌어집니다. 암묵적 전역 선언하지 않은 변수를 등록할 때 암묵적으로 전역 객체의 프로퍼티로 할당하기 때문에 다음 코드는 에러를 발생하지 않습니다! 변수, 함수, 매개변수 삭제 명령 시 에러...

자바스크립트의 객체는 크게 3가지로 분류된다고 해요! 뭔가 헉! 할수도 있는데, 걱정 마세요. 우리 이미 다 개발하다가 마주한 친구들이에요. 😉표준 빌트인 객체호스트 객체사용자 정의 객체가 그 주인공인데요!사용자 정의 객체는 우리가 직접 정의한 객체이니, 위의 2가지

아, 그거 있잖아 그거...! (속닥속닥)

어째 처음 공부할 때보다 더 시간을 많이 들여 정리한 파트

🚦 본론 > 이 파트는 원래 23장을 설명할 때 서술했지만, 생각보다 양이 많아지고 글의 포커스가 난잡해져서 분리하여 서술합니다 😉 렉시컬 환경 우리, 저번 파트에서 렉시컬의 의미를 이해했어요! 따라서 우리는 이제 렉시컬이라는 말이 들어왔을 때, 가슴이 철렁! 내려앉을 필요가 없다구요 😉 렉시컬 환경이라하면 결국, 의미 분석을 위한 환경이겠죠...

결국 실행 컨텍스트와 렉시컬 환경을 알아야 클로저를 이해할 수 있다!

🚦 본론 > 사실... 생성자 함수를 이해하고 있다면 이 파트는 그저 문법을 이야기하는 것과 거의 비슷하긴 합니다. > 따라서, 만약 이 원리가 이해가 안되신다면, 생성자 함수를 다시 이해하는 것을 추천합니다. 😉 문법적 설탕 일단 문법적 설탕에 대한 정의를 알 필요가 있겠습니다. wikipedia - syntactic sugar에 의하면, 다음과...

본 파트에서는, 함수가 왜ES6에서 다른 방식으로도 사용할 수 있게 되었는지를 서술하고 있습니다.생각해보면, 자바스크립트의 함수는 다목적성을 갖고 있습니다.일반적인 함수생성자 함수메서드등으로 사용할 수 있는데요.실제로는 이러한 것들이 하나하나 내부에서는 parse할 때

🚦 본론 배열이란 배열은 정~말 사용 빈도가 많은 자료구조입니다. 순차적으로 여러 개의 값을 각 인덱스에 할당하여 손쉽게 접근할 수 있기 때문입니다. 이때, 배열이 가진 값들을 요소라고 부릅니다. 그리고 이 요소에 접근하기 위한 위치를 우리는 인덱스라고 부르죠. 우리는 이러한 인덱스를 바탕으로 값의 순서를 매길 수 있으며, 순회 역시 가능합니다. ...

🚦 본론 정말 많이 쓰는 빌트인 객체입니다. Number 타입의 값을 구할 때 많이 사용하는 프로퍼티와 메서드들이 내장되어 있습니다. Math.PI 음... 이거는 가끔, 애니메이션 구현할 때 자주 사용했습니다. 이 프로퍼티를 갖고 캔버스에 원을 그릴 때 편하더

벌써 30장이네요. 역시 방향만 잘 설정하고 간다면, 끝까지 갈 수 있을 것만 같아요! 🥰 🚦본론 이 객체도 정말 자주 쓰는 친구 중 하나죠. Date는 빌트인 객체이면서 생성자 함수입니다. 이를 통해 우리는 현재 UTC에 맞는 시간대를 구할 수 있어요. 생성

🚦 본론 어떻게 보면, Number는 생성자 함수이기도 하지만, 표준 빌트인 객체이기도 합니다. 이렇게 두 개의 방법으로 사용할 수 있는 이유는, Number 자체에 관한 정적 메서드와 프로퍼티들을 제공하여 숫자 타입의 값을 핸들링하는 데 도움을 주기 위함입니다. 유의점은, 생성자 함수인 만큼 값 역시 객체로 나옵니다. 이를 꺼내기 위해서는 .valu...

🚦본론 정규표현식은 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어라 해요. 일반적으로, 정규

사실... 메서드를 다루는 챕터들이 가장 힘든 것 같아요. > 이걸 어디까지 알아야 하고, 설명해야 할지 셈하기 힘들기 때문이에요. > 저의 경우는, 대개 제게 필요한 메서드만 골라서 쓰는 편이에요. > 따라서 모든 메서드를 다루지 않으니, 양해 바라요! 🚦 본론 생성자 함수, String 표준 빌트인 객체이며, 문자열 리터럴의 래퍼 객체로써 기능합...

🚦 본론 Symbol, 왜 필요한가. Symbol이라는 타입은 7번째로 ES에서 표준화된 타입입니다. (가끔 헷갈리는 것이 있는데, 그렇다고 자바스크립트에는 7개의 타입만 존재하는 것이 아닙니다. BigInt라는 타입도 존재합니다.) 하지만... 실제로 프로젝트

🚦 본론 배경 항상 모든 것에는 "왜 탄생되었는지"를 이해하는 것이 수반되어야 합니다. 우리, 그냥 단순히 받아들이지 말고 생각을 해봅시다. > 💡 왜 이터러블이 탄생되었을까요? 우리, 유사 배열 객체라는 것을 기억하나요? length를 가지고 있으면서, 마

스프레드 문법은 ES6에 도입되었네요. (정말 ES6 때 추가된 게 많죠?!)스프레드 문법은 정말 몇 가지 중요한 특징만 알면 매우 유용하고, 그렇게 어렵지 않은 친구에요.이터러블한 친구들에게서 사용이 가능하구요!객체 리터럴 내부에서도 예외적으로 사용이 가능합니다. (

알고 계셨나요? 빌트인 이터러블과 커스텀 객체 이터러블은 디스트럭처링 과정이 완전히 다릅니다!

🚦 본론 > 많이 쓰는 표준 빌트인 객체들이군요! > 정말 애용하기 좋은 친구들이에요 🥰 Set 유일한 값들의 집합을 값으로 가집니다. 이는 원래 수학에서 사용되는 '집합'의 개념에서 착안된 객체에요! 마치, 하나하나의 값들을 집합 요소라고 치면, 이러한 요소들이 중복해서 들어있지 않도록 하기 위함이죠. 이때, 객체의 특성을 진~하게 갖고 있는데...

요청과 응답에서는... URL을 가지고 응답을 받는다는 내용을 서술했군요.맞습니다. 브라우저에 URL을 입력한다는 것은, 자원에 접근하도록 요청하는 행위입니다.반대로, 브라우저에서 출력된 화면을 본다는 것은, 자원 요청에 응답을 받은 행위입니다.결국, 우리는 알게 모르

DOM은 HTML에서 파싱한 결과로 나온다고 했어요.그렇다면 우리는 이걸 생각해봐야 돼요.💡 그럼, HTML만 잘 나오면 되지, 왜 굳이 또 객체를 만들까?이는 JavaScript 때문에 그렇습니다.데이터를 동적으로 제어하여 화면에 출력해야 하는 경우에는, 정적인 H

이벤트는 매우 중요한 개념입니다.우리가 렌더링하는 그 순간부터, 이미 이벤트는 호출이 되어집니다.이번 파트에서는 이러한 이벤트들을 통해 사용자와 애플리케이션이 어떻게 서로 인터렉티브하게 상호작용할 수 있는지를 알아보겠습니다.아! 제 글은 이벤트 타입을 다 일일이 작성하

타이머는 꽤 많이 쓰는 함수입니다.setTimeout과 setInterval이 이와 관련되어 있는데요.이 두 함수에 대해 분석해보고자 합니다.쉽게 말하자면, 함수의 호출 시점을 예약한다는 의미입니다.결국 자바스크립트에서, 특정 시간이 되면 함수를 호출하도록 하는 것이

본론 🚦 동기 처리와 비동기 처리 간단명료하게 말하자면, 동기 처리와 비동기 처리는 다음과 같은 차이가 있습니다. > 동기처리는 순서를 지향해요. 어떤 일이 끝난 다음에, 다음 일이 실행되어야 합니다. 하지만 비동기는 순서가 아닌, 비동기 처리의 필요성

드디어 AJAX가 나오네요. 이 친구를 통해 서버에서 데이터를 주고 받으며 HTML을 부분적으로 바꾸는 방식을 쓰게 됐는데요.사실 SSR이라고 불리는 친구는, 검색 최적화에 있어 CSR의 대안으로 나온 친구 같지만, 알고 보면 원래 있던 친구입니다.AJAX가 있던 이전

저는 일단 REST API라고 했을 때, 다음과 같은 의문점이 생겼어요.REST API라고 하는데, 과연 이 REST란 무엇일까요?따라서 이를 검색해본 결과, Representational State Transfer라고 합니다.음... 해석하면 표현적인 상태 전달이겠죠

Promise는 비동기 처리가 복잡했던 기존의 로직을 탈피하고자 도입된 객체입니다.이를 통해 콜백 패턴의 단점을 해소할 수 있게 되었어요!우리, 콜백 패턴이 왜 나와야 하는지를 먼저 알아야 해요.사실, 자바스크립트는 이벤트 루프를 통해 비동기의 한계를 어느정도 극복할