indexed Access Type 이란 다른 타입에서 특정한 프로퍼티를 찾고자 할 때 사용하는 타입 입니다.indexed Access Type 은 그 자체로 타입이기 때문에 union, keyof 와 같은 키워드를 사용할 수 도 있습니다.존재하지 않은 index 에

아래와 같은 타입이 있다고 가정해 보겠습니다.만약 위의 타입을 기준으로 모든 property 들을 optional로 지정한 타입이 필요하거나, 변경이 불가능하게 설정한 타입이 필요한 상황이 생겼습니다.이 경우에 필요한 타입을 다음과 같이 선언할 수 있습니다.위의 경우

가장 익숙한 단위입니다. 절대단위이며, 사용중인 디스플레이 크기와 거의 일치합니다.상대단위이며 현재 요소의 폰트크기와 같습니다. 만약 head의 폰트 크기가 24px이고 아래쪽에 2em 크기의 패딩을 주었다면, 아래쪽 패딩 크기는 48px(24px X 2)가 됩니다.r

이글은 An Interactive Guide to Keyframe Animations 를 번역한 글 입니다. 오역이 있을 수 있습니다.이 글에서, CSS keyframe에 관해 깊게 살펴 볼 것 입니다. 동작하는 방식과, 멋있는 애니메이션 효과를 만드는 방법을 알아 보

본 글은 An Interactive Guide to CSS Transitions를 번역한 글 입니다. 오역이 있을 수 있습니다.애니메이션을 만들기 위해 필요한 것은 변하는 CSS 입니다.아래는 hover시에 애니메이션없이 움직이는 버튼을 구현한 예시입니다.!codepe

이벤트 위임을 알아보기 전에 이벤트가 전파되는 과정을 알아야 합니다. 만약 이벤트를 발생시키면 이벤트 객체가 만들어 집니다. 만들어진 이벤트 객체는 이벤트를 발생시킨 DOM 요소인 이벤트 타깃을 중심으로 DOM 트리를 통해 전파됩니다.캡처링 단계li요소를 클릭하면 클릭

디바운싱은 짧은 시간 간격으로 이벤트가 연속해서 발생하면 이벤트 핸들러를 호출하지 않다가 일정시간이 경과한 이후에 이벤트 헨들러가 한 번만 호출되도록 합니다. 즉 짧은 시간 간격으로 발생하는 이벤트 핸들러를 그룹화해 마지막에 한 번만 이벤트 핸들러가 호출되도록 하는 기

함수가 호출된 순서대로 함수 실행 컨텍스트가 함수 실행 컨텍스트 스택에 푸쉬되어 순차적으로 실행되는 방식입니다. 장점태스크들을 순서대로 하나씩 처리하기 때문에 실행순서가 보장이 됩니다.단점앞선 테스크가 종료할 때 까지 이후 태스크들이 블로킹 되는 단점이 있습니다.일정

자바스크립트 엔진은 함수를 어디서 호출했는지가 아닌, 어디서 선언했는지에 따라 상위스코프를 결정하게 되는데, 이를 렉시컬 스코프라고 합니다.\[Environment] 슬롯함수의 정의가 평가되는 단계에서, 함수 객체가 생성될 때, 자신이 정의된 환경에 의해 상위 스코프의

변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징입니다.❗ 변수 선언뿐만 아니라 var, let, const, function, function\*, class 키워드를 사용해서 선언하는 모든 식별자는 호이스팅이 됩니다. 모든 선언문은

자바스크립트 엔진은 소스코드를 '평가'와 '실행' 두가지 과정으로 나누에 처리합니다.평가실행 컨텍스트를 생성한 후, 변수, 함수등의 선언문만 실행해 생성된 식별자를 컨텍스트가 관리하는 스코프(렉시컬 환경의 환경 레코드)에 등록합니다.실행선언문을 제외한 소스코드가 순차적

이 글은 Building A Stepper Component 를 참고한 글 입니다. 위 그림처럼 아이템들 사이에 선들이 있는 stepper를 만들것 입니다.위 코드의 결과는 아래의 그림과 같이 나오게 됩니다.그림과 같이 내용들은 가운데 정렬이 되어있고, 각각의 아이템

본 글은 Demystifying styled-components 를 번역한 글입니다. 오역이 있을 수 있습니다. 처음 styled-components 를 사용했을때, 마법과도 같았습니다. 어찌 되었든, 문자열인 것 같기도 함수인 것 같기도 한 구문을 사용함으로써 이

본 글은 A surprising feature of JavaScript optional chaining 을 번역한 글 입니다. 오역이 있을 수 있습니다.2020년, JavaScript는 optional chaining 이라는 새로운 기능이 생겼습니다. 이 기능은 여러가

본 글은 Getting Started With Webpack을 번역한 글 입니다. 오역이 있을 수 있습니다.모듈화를 통해 명명 충돌(namespace collisions)를 피할 수 있고, 유지보수가 용이한 코드를 작성할 수 있다. 하지만 JavaScript가 실행되는

128 bits의 주소로, 기존의 32 bits의 IP 주소 공간(IPv4)이 빠른 속도로 고갈되고 있기 때문에 개발된 IP 주소이다.확장된 주소 기능 IPv6는 128bits로 확장되었기 때문에 주소가 고갈되는 일은 발생하지 않는다. 또한 Multicast, Uni

JavaScript의 this는 함수의 선언위치(Lexical Scope)와 관련있는 것이 아니라, 호출위치에 따라 동적으로 결정된다. 💻 기본 바인딩 this의 기본 바인딩 규칙 > this는 전역객체를 기본으로 참조하고 있다.

자바스크립트는 생성자 함수와 new 연산자를 통해 인스턴스를 생성할 수 있다.위의 결과는 생성자 함수로 객체를 생성하는 예시이며 정상 동작한다. 하지만 아래와 같이 여러개의 인스턴스를 생성할시 문제가 생긴다.각각의 인스턴스들이 같은 로직의 메소드를 소유하고 있다. 이는

자바스크립트의 경우 객체지향 언어이지만, Java와 같은 클래스 기반이 아닌 Prototype 기반 객체지향 언어이다.자바스크립트의 모든 객체는 자신의 부모 객체와 연결되어 있으며, 이러한 부모 객체를 Prototype 객체또는 Prototype이라 한다.자바스크립트의

💻 Babel이란? Babel은 ECMAScript 2015+ 문법으로 작성된 코드를 ECMAScript 2015+ 를 지원하지 않는 브라우저에서도 동작하도록 코드를 변환해주는 툴이다. 그 밖에도, react의 JSX, 타입스크립트의 문법 등도 변환 할 수 있다.