JavaScript35편

언어의 동작 원리, 브라우저와 DOM, TypeScript.

핵심 개념 15

모듈 시스템 정리: Require와 Import, 모듈은 동기적으로 불러올까
CommonJS와 ESM의 문법과 동작 차이를 예제로 비교하고, 정적 import와 동적 import의 처리 순서를 따라가며 모듈 로딩이 동기인지 비동기인지 정리했다.
2024-10-26
- #JavaScript
- #Node.js
자바스크립트 this 바인딩 정리
함수 호출, 메서드 호출, 화살표 함수, call/apply/bind, strict mode에서 this가 각각 무엇을 가리키는지 예제로 하나씩 확인하며 정리했다.
2024-04-20
- #JavaScript
[JavaScript] 렉시컬 스코프 왜 이렇게 어렵게 설명해?
log함수가 실행되기 직전에, var name="stupid" 때문에 멈칫거릴 수 있다.
2022-03-10
- #JavaScript
[호이스팅] TDZ, var, const, let, window 바인딩 여부
인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화한다. 반면 let과 const로 선언한 변수의 경우…
2022-02-04
- #JavaScript
스코프: 크롬 디버거로 보기, 블록스코프, 함수스코프, 렉시컬스코프
스코프란, 변수 이름, 함수 이름, 클래스 이름과 같은 식별자가 본인이 선언된 위치에 따라 다른 코드에서 자신이 참조될 수 있을지 없을지 결정하는 것이다. 식별자에 대한 유효범위라고도 간단히 말한다.
2022-02-03
- #JavaScript
this 바인딩: 일반 함수와 화살표 함수의 this
this는 호출할 때 정해진다. 일반 함수는 호출 대상을, 화살표 함수는 상위 스코프의 this를 참조한다는 대전제로, call을 섞어 헷갈리는 예시까지 풀었다.
2022-02-03
- #JavaScript
원시 데이터 타입과 래퍼 객체: 원시 타입이 메소드를 갖는 이유
래퍼 객체는원시값(문자열, 숫자 등)을 마치 객체처럼 다룰 수 있게 하여, 원시값에서도 메서드를 호출할 수 있다.
2022-02-02
- #JavaScript
[native code]: 넌 누구냐, 코드를 내놓거라!
위와 같은 생성자 함수들의 내부코드를 보고 싶어, 크롬 개발자 모드에서 확인했다. 하지만 native code라고만 나오고 더 이상의 정보를 알 수 없었다. You don't know Js라는 책에서 언급한…
2022-01-30
- #JavaScript
프로토타입: 자바스크립트의 핵심 철학
자바스크립트가 클래스가 아니라 프로토타입을 택한 철학적 배경을 비트겐슈타인의 의미사용이론과 가족유사성 개념으로 풀어 정리했다.
2022-01-11
- #JavaScript
불변값과 가변값을 나누는 기준은 뭘까?
불변값과 가변값은 데이터 영역의 메모리를 변경할 수 있는가에 따라 나뉜다.기본형 데이터 타입의 값을 변경할 때는 데이터 영역의 메모리를 변경하지 않고(불변성) 변수의 값만 재할당하는 반면,참조형 데이터 타입의…
2022-01-07
- #JavaScript
Iterable과 Enumerable, 한 번에 정리하기
for...in과 for...of가 각각 무엇을 순회하는지부터 enumerable 속성, Object.keys, getOwnPropertyNames, hasOwnProperty의 차이까지 예제로 정리했다.
2021-11-19
- #JavaScript
arguments 객체: function안에 있는 너, 누가 선언했니?
arguments 객체는 실행 컨텍스트 생성 시점에 함께 만드는 정보 중 하나다. 지정한 매개변수의 개수와 무관하게 호출 시 인자가 모두 arguments 정보에 담긴다. 이러한 특성 덕에 함수의 자율성을 높이는…
2021-11-18
- #JavaScript
key에 접근하는 2가지 방법. obj.key, obj['key']
하이픈(-)이 들어간 property에 접근할 수 없다.
2021-08-03
- #JavaScript
JavaScript의 역사
출처: www.youtube.com/watch?v=wcsVjmHrUQg&t=629s
2021-03-10
- #Web
ES(ECMAScript) VS JS(JavaScript) 차이점
1. Javascript는 프로그래밍 언어로써 하나의 개별된 대명사로 쓰인다.
2021-02-13
- #JavaScript

브라우저와 DOM 10

자바스크립트 런타임과 엔진의 차이: 이벤트 루프는 어디에 있을까
V8 같은 엔진과 브라우저나 Node.js 같은 런타임이 각각 맡는 일을 나누고, 이벤트 루프가 엔진이 아니라 런타임에 속하는 이유와 그 구조를 다이어그램으로 설명한다.
2024-10-24
브라우저에서 자바스크립트가 동작하는 원리
자바스크립트 런타임을 이루는 엔진, Web API, 태스크 큐, 잡 큐, 이벤트 루프가 각각 무슨 일을 하는지, 싱글 스레드로 어떻게 비동기를 처리하는지 그림과 함께 정리했다.
2024-05-05
AJAX란 무엇이고, 비동기 통신 API fetch, axios는 어떻게 쓰이는가
1) 페이지를 리로딩하지 않고 컨텐츠만 바뀌게 하기위해 API 통신을 한다.2) API를 사용함으로써 랜더링 없이 컨트롤러로만으로도 데이터베이스를 수정할 수 있다.
2022-02-12
- #JavaScript
- #AJAX
[DOM]: 이벤트 버블링을 이용해 하위 요소 전체 다루기(e.target, e.currentTarget)
옵션들을 forEach로 반복시켜서 이벤트를 주는 방식이 아닌 event.target으로 옵션들의 부모요소 ul을 참조해 이벤트를 위임시키면 반복문을 쓰지않고도 옵션들에 이벤트를 줄 수 있다. 옵션이 많아지면…
2022-01-27
- #JavaScript
- #DOM
[DOM] Javascript로 html을 조작해보자
OM은 Object Model, 객체 지향 모델을 뜻한다. 뭔가를 객체로 표현하는 방법을 말한다. 나아가 Documnet가 추가된 "D"OM은 웹 페이지의 내용을 객체로 표현하는 형식을 말한다. Brower가…
2022-01-17
스크립트(script) 추가/제거하는 버튼 만들기
script를 실행하고 싶은 이름을 배열에 적으면, 버튼이 생성되며, 누르면 해당 js파일이 실행된다.
2021-11-22
- #JavaScript
[addEventListener] 콜백함수에게 인자를 주는 방법
1. EventTarget의 메서드이다.
2021-11-17
- #JavaScript
[Web APIs] 브라우저 API
개발자가 복잡한 기능을 쉽게 개발할 수 있도록 내부 코드에 신경 쓰지 않아도 복잡한 작업을 쉽게 기능을 가져다 쓸 수 있도록 돕는다.
2021-11-17
- #Web
Window 객체
브라우저의 요소들과 자바스크립트 엔진, 모든 변수를 담고 있다. - 모든 객체를 포함하고 있는 전역객체(글로벌객체)이다.
2021-02-23
- #JavaScript
MediaRecorder: 웹 녹화 API와 MediaStream 정리
getUserMedia로 카메라 스트림을 얻어 video에 보여 주고, MediaRecorder로 녹화한 Blob을 webm 파일로 내려받기까지의 흐름을 정리했다.
2021-02-19
- #JavaScript
- #브라우저

TypeScript 10

[Typescript] 좀 더 알아보기(Type Assertion, Index Signature)
- 타입스크립트가 추론하지 못하는 타입을 as keyword를 통해 명시해주는 것
2022-03-24
- #TypeScript
[Typescript] 유틸리티 타입 12가지 사용하기
• TypeScript는 공통 타입 변환을 용이하게 하기 위해 유틸리티 타입을 제공한다.
2022-03-22
- #TypeScript
[Typescript] 타입 가드 (intersection, union, Type Guard) 가드 올려!
intersection Type - union Type - Type Guard
2022-03-22
- #TypeScript
[Typescript] 함수 사용하기 (parameter, optional, rest, overloading)
• 매개변수와 리턴값의 타입을 선언 후 사용하면 된다.
2022-03-22
- #TypeScript
[React+Typescript] React.FC를 굳이 사용하지 않아도 되는 이유
굳이 FC type을 명시해줘서 코드 가독성이 떨어진다.
2021-09-06
- #TypeScript
[Typescript] 추가 제공 타입 (tuple, enum, any, void, never)
TypeScript 에서는 기본형 자료형, 참조형 자료형외에도 추가로 타입을 제공한다.
2021-09-06
- #TypeScript
[Typescript]: type, interface, generics 사용하기
Type의 property를 optional하게 지정할 수 있다.
2021-09-06
- #TypeScript
Typescript 생성자, public, private
[생성자] 1. 모든 class는 constructor를 가짐 2. constructor는 class로부터 객체를 생성할 때 호출되며 객체의 초기화를 담당 클래스안에 컨스트럭터를 만들고 오브젝트를 생성할 때는…
2021-09-06
- #TypeScript
Typescript: 중급(Type Aliases/Type Guard)
https://www.typescriptlang.org/docs/handbook/advanced-types.html
2021-09-06
- #TypeScript
[Typescript] 타입스크립트 왜 써요?
1. 안정적이다. 높은 수준의 추상화가 필요할 때, 프로그램에 구조를 만들고 문서화할 수 있다.
2021-07-13
- #TypeScript