마진겹침 현상
마진겹침 현상이란? 동일한 BFC에 존재하는 블록 엘리먼트에 한해서 발생하는 현상이다. 오직 수직 방향에서만 적용된다. 2개의 마진이 겹칠 때 더 큰 마진으로 덮어 씌우는 방식이며 하나의 마진이 음수일 경우 더하는 방식을 취한다. 발생 예시 1. 인접한 엘리먼트 div { width: 100px; height: 100px; background-color: red; } .element1 { margin-bottom: 20px; } .element2 { margin-top: 40px; } 위 적용예시를 보면 더 큰 마진인 40px 로 덮어씌워진 것을 확인할 수 있다. ( 첫번째 div의 margin-bottom이 적용되지 않은 모습이다.) 마진이 음수인 경우는 어떨까? div { width: 100px; h..
화살표 함수를 지양해야할 상황
개발하는 상황에서 주로 화살표 함수를 많이 사용했지만, 여러 코드를 보면서 일반 함수를 사용하는 경우도 종종 보았다. 화살표 함수, 일반 함수를 선택하는 근거가 있어야 한다고 판단하여 나의 기준을 세워보려한다. 1. 메서드를 정의할 때 메서드를 정의할 때 화살표 함수를 사용하면, this가 전역객체(window)를 가르키기 때문에 원치않는 결과를 얻게된다. 대체로 전역객체 를 this로 가리킬 상황은 드문 것 같다. // Bad const person = { name: 'Lee', sayHi: () => console.log(`Hi ${this.name}`) }; // sayHi 프로퍼티에 할당된 화살표 함수 내부의 this는 상위 스코프인 전역의 this가 가리키는 // 전역 객체를 가리키므로 이 예제..
클래스
클래스는 프로토타입의 문법적 설탕인가? 자바스크립트는 생성자 훔수와 프로토 타입을 통해 객체지향 언어의 상속을 구현할 수 있다. 하지만 클래스 기반 언어에 익숙한 프로그래머들은 프로토타입 기반 프로그래밍 방식에 혼란을 느낄 수 있으며, 자바스크립트를 어렵게 느끼게 하는 하나의 장벽처럼 인식되었다. ES6에서 도입된 클래스는 기존 프로토타입 기반 객체지향 프로그래밍보다 자바 같은 클래스 기반 객체지향 프로그래밍에 익숙한 프로그래머가 더욱 빠르게 학습할 수 있도록 클래스 기반 객체지향 프로그래밍 언어와 매우 흡사한 새로운 객체 생성 메커니즘을 제시한다. 그렇다고 ES6의 클래스가 기존의 프로토타입 기반 객체지향 모델을 폐지하고 새롭게 클래스 기반 객체지향 모델을 제공하는 것은 아니다. 사실 클래스는 함수이며..
async / await
모던 자바스크립트 딥다이브를 공부한 내용입니다. async / await ES8에서는 비동기 처리를 동기 처리처럼 동작하도록 구현할 수 있는 async/await가 도입되었다. async/await 는 프로미스를 기반으로 동작한다. const fetch = require('node-fetch'); async function fetchTodo() { const url = 'https://jsonplaceholder.typicode.com/todos/1'; const response = await fetch(url); const todo = await response.json(); console.log(todo); // {userId: 1, id: 1, title: 'delectus aut autem', c..
프로미스
모던 자바스크립트 딥다이브를 공부한 내용입니다. 비동기 처리를 위한 콜백 패턴의 단점 콜백 헬 아래 코드 처럼 GET 요청을 전송하고 서버의 응답을 전달 받는 get 함수도 비동기 함수다. get 함수가 비동기 함수인 이유는 get 함수 내부의 onload 이벤트 핸들러가 비동기로 동작하기 때문이다. get 함수를 호출하면 GET 요청을 전송하고 onload 이벤트 핸들러를 등록한 다음 get 함수내의 명시적인 return 이 없기때문에 undefined를 반환하고 즉시 종료된다. 즉, 비동기 함수인 get 함수 내부의 onload 이벤트 핸들러는 get 함수가 종료된 이후에 실행된다. 따라서 get 함수의 onload 이벤트 핸들러에서 서버의 응답 결과를 반환하거나 상위 스코프의 변수에 할당하면 기대한..
태스크 큐와 마이크로 태스크 큐
프로미스에 대해 공부하다가, 마이크로 태스크 큐에 대해 알게되었는데 우선순위가 궁금해져 자료들을 찾아보았다. 이벤트 루프 이벤트 루프란 태스크가 들어오길 기다렸다가 콜 스택이 비어 있는 것을 확인하면 이를 콜스택으로 옮기는 자바스크립트 엔진 내부에서 끊임 없이 돌아가는 루프이다. 태스크 큐와 마이크로 태스크 큐 2개의 큐 모두 콜백함수가 들어간다는 점에서 동일하지만, 어떤 함수를 실행하여 생성된 콜백함수냐에 따라 들어가는 방향이 달라진다. 콜백함수를 태스크 큐에 넣은 함수들 setTimeout, setInterval, setImmediate, requestAnimationFrame, I/O , UI 렌더링, 이벤트 리스너 콜백함수를 마이크로태스크 큐에 넣는 함수들 Promise, Object.observ..
실행 컨텍스트
모던 자바스크립트 딥다이브를 공부한 내용입니다. 소스코드의 평가와 실행 자바스크립트 엔진은 소스코드를 평가와 실행 과정으로 나누어 처리한다. 소스코드 평가 과정에서는 실행 컨텍스트를 생성하고 변수, 함수 등의 선언문만 먼저 실행하여 생성된 변수나 함수 식별자를 키로 실행 컨텍스트가 관리하는 스코프에 등록한다. 스스코드 평가 과정이 끝난 후 런타임이 실행된다.(소스코드가 순차적으로 실행된다.) 이때 변수나 함수의 참조를 실행 컨텍스트가 관리하는 스코프에서 검색해서 취득한다. 그리고 변수 값의 변경 등 소스코드의 실행 결과는 다시 실행 컨텍스트의 스코프에 등록된다. 다음과 같은 소스코드가 있다. 먼저 소스코드 평가 과정에서 변수 선언문 var x; 가 실행된다. 이때 생성된 변수 식별자 x 는 실행 컨텍스트..
transform-origin 이란?
transform-origin transform 과 함께 쓰이는 CSS 이다. transform 이 발생하는 기준점 위치를 정한다. transform-origin: 50% 25% transform-origin: 100% 100% transform-origin: 0 0; 백문이 불여일견 이제 한번 돌려보자. 파란색 사각형에 hover 하면 rotate 된다. See the Pen Untitled by ehddud1006 (@ehddud1006-the-looper) on CodePen. 그래서 이걸 어디 써먹나? transform-origin , transform: rotate , overflow:hidden 을 잘 사용하면 저렇게 뽀족한 UI 를 만들 수 있다.