post-thumbnail

CSS Units

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

5일 전
·
0개의 댓글
post-thumbnail

Keyframe Animations

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

2021년 11월 25일
·
0개의 댓글
post-thumbnail

CSS transitions

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

2021년 11월 19일
·
0개의 댓글
post-thumbnail

이벤트 위임

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

2021년 9월 8일
·
1개의 댓글
post-thumbnail

디바운싱과 스로틀링

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

2021년 9월 8일
·
0개의 댓글
post-thumbnail

비동기 처리

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

2021년 9월 6일
·
0개의 댓글
post-thumbnail

클로저

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

2021년 9월 6일
·
0개의 댓글
post-thumbnail

호이스팅

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

2021년 9월 6일
·
0개의 댓글
post-thumbnail

실행 컨텍스트

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

2021년 9월 5일
·
0개의 댓글
post-thumbnail

Stepper Component 만들기

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

2021년 9월 3일
·
0개의 댓글
post-thumbnail

Demystifying styled-components

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

2021년 6월 26일
·
0개의 댓글
post-thumbnail

JavaScript optional chaining

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

2021년 6월 26일
·
0개의 댓글
post-thumbnail

Webpack 시작하기

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

2021년 6월 6일
·
0개의 댓글
post-thumbnail

IPv6

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

2021년 6월 5일
·
0개의 댓글
post-thumbnail

This

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

2021년 5월 7일
·
0개의 댓글
post-thumbnail

프로토타입과 객체지향

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

2021년 4월 28일
·
0개의 댓글
post-thumbnail

프로토타입

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

2021년 4월 27일
·
0개의 댓글
post-thumbnail

Babel Tutorial

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

2021년 3월 1일
·
0개의 댓글
post-thumbnail

IP(Internet Protocol)

verIP Protocol의 version을 의미한다. (IPv4, IPv6)head lengthHead의 길이가 가변적이기 때문에 필요한다.type of service전송 우선순위(prioritized delivery)와 같은 서비스 정보를 담고 있다.16-bit i

2021년 2월 28일
·
0개의 댓글
post-thumbnail

Network Layer

Sending Host에서 Receiving Host로 segment들을 전송하는 역할을 한다. (host-to-host)전송하는 측에서는 segment를 encapsulation하고, 수신 측에서는 decapsulation을 한다.Network Layer는 모든 호스

2021년 2월 27일
·
0개의 댓글