🌈 기술스택
Flex 대신 Grid를 사용해 레이아웃 만들기
Flex 대신 Grid를 사용해 레이아웃 만들기
2021.10.21레이아웃을 만드는 또 다른 방법 요즘은 레이아웃을 만들 때, 주로 flex 속성을 사용합니다. 하지만 flex를 사용하면서 종종 아쉬운 상황들이 몇 가지 발생하는데, 기본적으로 flex는 1차원에 대한 레이아웃 시스템이기 때문입니다. 특히 정렬과 관련해 의도한 대로 동작하지 않아 억지로 맞추는 경우(CSS Trick)를 들 수 있습니다. 이런 상황에서 우리는 grid를 고려해볼 수 있습니다. grid는 기본적으로 가로/세로 2차원에 대한 레이아웃 시스템이며, 복합적인 레이아웃 구조를 만들 때 flex보다 유용합니다. Grid Box와 달리 Flex Box는 요소들을 1차원적으로 정렬하는 컨테이너입니다. Grid 시작하기 그리드도 플렉스와 동일하게 display 속성이 적용된 요소를 컨테이너(Contain..
BEM의 10가지 일반적인 문제와 이를 피하는 방법
BEM의 10가지 일반적인 문제와 이를 피하는 방법
2021.10.18본문은 Battling BEM CSS: 10 Common Problems And How To Avoid Them을 입맛대로 번역해 옮긴 글입니다. 원문 그대로 번역한 것이 아닌, BEM을 사용했을 때 발생할 수 있는 문제들을 해결하는 아이디어에 대해 개인의 생각도 일부 반영되어 있습니다. 그리고 본문에는 BEM 방법론에서 사용되는 용어들이 자주 등장하기에, BEM이 어떤 것인지 미리 알아두고 보면 좋습니다. BEM은 충분히 매력적인 방법론이지만, 사람들은 저마다 취향이 다르듯, 이를 환영하지 않는 개발자도 많습니다. 대표적인 이유로 BEM은 클래스 이름을 통한 모듈화를 하기 좋지만, 태그의 중첩이 깊어질 수록 클래스 이름이 지나치게 길어지는 문제가 있습니다. 그래서 원문의 작성자는 BEM의 딜레마에 대한..
비동기 처리를 위한 문법 (Promise)
비동기 처리를 위한 문법 (Promise)
2021.10.08Synchronous 자바스크립트 엔진은 기본적으로 동기(Synchronous)로 동작합니다. console.log(1); console.log(2); console.log(3); 런타임 시 코드를 위에서부터 아래로 읽으며 실행하기 때문에, 우리는 [ 1 2 3 ]이라는 결과를 얻을 수 있습니다. 만약 비동기로 동작하기를 원한다 하면 중간에 setTimeout, setInterval과 같은 Host API의 도움을 받아야 합니다. 그렇게 되면 태스크 큐와 이벤트 루프에 의해 비동기로 동작하는 것을 확인할 수 있습니다. 태스크 큐와 이벤트 루프에 대해 익숙하지 않으시면, 이전 글인 자바스크립트에 동시성을 부여하는 이벤트 루프를 확인해 주세요! Host API란 웹 브라우저 또는 Node 환경에서 추가적으로..
자바스크립트에 동시성을 부여하는 이벤트 루프
자바스크립트에 동시성을 부여하는 이벤트 루프
2021.10.07Single Thread 자바스크립트 엔진은 한 번에 단 한 가지의 일만 수행 가능한 싱글 스레드(Single thread) 방식으로 동작합니다. 그렇다면 setTimeout과 같은 비동기 함수들은 어떻게 논블로킹 방식으로 처리되는 걸까요? 만약 싱글 스레드로 처리된다 하면, 비동기 함수가 실행을 마칠 때까지 블로킹되면서 프로그램이 멈췄을 텐데 말이죠. 이런 자바스크립트 엔진에 동시성(Concurrency)을 지원하기 위해 웹 브라우저는 이벤트 루프(Event Loop)라는 것을 지원합니다. 우리가 비동기 작업을 위해 사용했던 setTimeout과 setInterval 함수는 ECMA Script의 기본 사양이 아닌 웹 브라우저에서 별도로 제공하는 Web API입니다. 물론 기본적으로 소스 평가 과정을 ..
연속으로 발생하는 이벤트를 제어하는 방법
연속으로 발생하는 이벤트를 제어하는 방법
2021.10.07Event Controls HTML의 DOM 요소를 조작하면서 발생하는 이벤트 중 input, mousemove, resize, scroll 등의 이벤트는 짧은 시간 간격으로 연속해서 발생합니다. 이러한 이벤트들에 함수를 등록해서 사용하는 경우, 너무나 잦은 호출로 인해 성능 저하를 불러올 수 있습니다. 그렇기 때문에 연속적으로 발생하는 이벤트들을 그룹화하여, 원하는 순간에만 호출될 수 있도록 하는 기법을 소개하려 합니다. 본문에서는 간단한 예제만 소개하기에, 프로젝트에서는 Lodash와 같은 라이브러리 사용을 추천합니다. 디바운스 디바운스(Debounce)는 연속으로 발생하는 이벤트의 마지막 이벤트만 호출할 수 있도록 하는 기법입니다. 만약 우리가 외부의 API를 호출해서 사용한다 하면 보통 요청 제한..
웹 브라우저의 렌더링 과정 알아보기
웹 브라우저의 렌더링 과정 알아보기
2021.10.05렌더링 과정을 아는 것이 중요한 이유 우리는 웹사이트에 접속할 때 단순히 주소창에 주소를 입력하거나, 링크가 걸린 텍스트를 누르기만 하면 됩니다. 하지만 반대로 웹 브라우저의 입장에서는 사용자가 원하는 화면을 보여주기 위해 내부적으로 많은 과정을 수행합니다. 서버로부터 웹 페이지와 관련된 리소스(HTML, CSS, JS)도 불러와야 하고, 이를 해석도 해야 하며, 어떤 것만 보여줄 지도 결정해야 합니다. 이러한 과정을 거치며 만들어진 결과물을 최종적으로 사용자에게 보여주게 되는데, 이 과정을 통틀어 렌더링(Rendering)이라 합니다. 렌더링을 하는 프로세스 자체는 간단하지만, 잦은 렌더링은 성능 저하를 일으킵니다. 그렇기 때문에 웹 브라우저의 렌더링 과정을 잘 이해하고 있으면, 렌더링 시 필요한 자원..
코드 실행에 필요한 정보를 담은 실행 컨텍스트
코드 실행에 필요한 정보를 담은 실행 컨텍스트
2021.10.05Execution Context : EC 실행 컨텍스트(Execution Context)는 자바스크립트 코드를 실행하기 위해 필요한 정보를 저장하고 제공하는 환경입니다. 기본적으로 스코프의 정보를 담은 환경을 말하며, 새로운 스코프가 생성될 때마다 실행 컨텍스트도 생성되면서 스택 메모리에 쌓이게 됩니다. 그리고 스택이 쌓일 때마다 새로운 컨텍스트에게 코드 실행에 대한 제어권을 넘기며, 실행이 종료된 이후에는 소멸됨과 동시에 제어권을 다시 상위 컨텍스트에게 돌려줍니다. 실행 컨텍스트는 자바스크립트의 동작 원리를 담고 있는 핵심 개념이기 때문에 정말 중요합니다. 실행 컨텍스트를 잘 이해하면, 스코프, 호이스팅, 클로저 등의 원리도 모두 이해할 수 있습니다. 😱 다음의 코드와 그림을 통해 실행 컨텍스트가 스택..
BEM 방법론에 따라 클래스명 짓기
BEM 방법론에 따라 클래스명 짓기
2021.10.04BEM Methodology BEM은 클래스 이름에 Block, Element, Modifier를 함께 작성하는 방법론으로, 개발자들로 하여금 HTML과 CSS의 관계에 대한 이해가 쉽도록 하는 목표를 가지고 만들어진 명명 규칙입니다. 정말 쉽기 때문에 공식 사이트에서 확인하셔도 좋지만, 본문을 통해 가볍게 소개해 보려 합니다. 아래 코드는 BEM 스타일을 적용한 CSS 코드입니다. /* 컴포넌트 요소(Block) */ .card {} /* 컴포넌트에 의존성이 있는 요소(Element) */ .card__image {} .card__description {} .card__button {} /* 컴포넌트의 스타일 수정자(Modifier) */ .card--success {} .card--back {} Bl..
자기 자신을 가리키는 값 this
자기 자신을 가리키는 값 this
2021.10.03This Binding 자바스크립트의 함수는 자기 자신을 가리키는 특별한 값인 this를 사용할 수 있으며, 이를 자기 참조 변수(Self-referencing variable)라 부릅니다. this가 가리키는 값은 함수를 호출하는 방식에 따라 동적으로 결정되는데, 이렇게 this의 값이 정해지는 것을 this 바인딩이라 합니다. 호출 방식에 따라 this가 어떻게 달라지는지 확인해 보도록 합시다. 일반 함수 호출 전역 실행 컨텍스트에서의 this는 항상 전역 객체를 가리킵니다. 실행 컨텍스트는 자바스크립트 코드 실행을 위한 정보가 담긴 메모리이며, 함수가 호출될 때마다 해당 함수를 실행하기 위한 정보를 담은 컨텍스트가 생성됩니다. 자바스크립트의 전역 객체는 실행 환경에 따라 달라지며 웹 브라우저에서는 ..
자바스크립트 코드의 유효 범위 Scope
자바스크립트 코드의 유효 범위 Scope
2021.10.03Scope 스코프는 변수에 접근 가능한 범위를 의미합니다. 자바스크립트에서 스코프는 함수 레벨 스코프와 블록 레벨 스코프 두 가지로 나뉘며, 함수나 블록을 선언한 위치에 따라 스코프가 중첩될 수 있습니다. 스코프는 정말 중요한 개념 중 하나이며, 클로저와 같은 문법들의 동작을 이해할 때 도움이 되니 알아두면 좋습니다. 함수 레벨 스코프 함수 레벨 스코프는 자바스크립트에서 흔히 만날 수 있는 스코프입니다. function foo() { var a = 1; function bar(b) { if (true) { var c = 5; } // 8 console.log(a + b + c); } bar(2); } foo(); 함수를 정의하면 그에 맞춰 함수 단위로 스코프가 결정됩니다. 그리고 var 키워드로 선언한 ..
얕은 복사 & 깊은 복사
얕은 복사 & 깊은 복사
2021.10.03Data Types 자바스크립트의 데이터는 원시형(Primitive Type)과 참조형(Object Type)이라는 두 가지 종류의 타입으로 나뉩니다. 원시형에는 정수, 문자열, 심볼 등이 해당되고, 참조형에는 배열, 객체 등이 해당됩니다. 데이터 타입을 먼저 얘기하는 이유는 특정 변수의 데이터를 다른 변수에 복사하고자 할 때, 원본 변수가 담고 있는 데이터의 타입에 따라 복사 방식이 다르기 때문입니다. 각 방식을 얕은 복사(Shallow copy)와 깊은 복사(Deep Copy)라 말합니다. 👏 얕은 복사 다음 코드의 결과를 예상해 보세요. let num1 = 123; let num2 = num1; console.log(num1 === num2); num2 = 456; console.log(num1 =..
유사 배열 객체 만들기
유사 배열 객체 만들기
2021.10.02Array-like Object 유사 배열 객체는 말 그대로 배열과 유사한 객체이며, 배열처럼 인덱스를 통해 요소에 접근할 수 있습니다. 유사 배열 객체 만들기 유사 배열 객체를 만드는 방법은 간단합니다. 객체 리터럴인 {} 안에 인덱스를 프로퍼티로 하여 값을 적어주고, 이러한 값의 개수만큼 length 프로퍼티만 추가하면 됩니다. 바로 다음과 같이 말이죠. const arrlike = { 0: 1, 1: 2, 2: 3, 3: 4, 4: 5, length: 5, }; for (let i = 0; i < arrlike.length; i++) { // 1 2 3 4 5 console.log(arrlike[i]); } 몇 안 되는 프로퍼티만으로 유사 배열 객체를 만들어 봤는데 어떤가요? 정말 간단하죠? 이처럼..