탄탄한 기본기!

웹 개발을 하던 도중, 배경화면으로 사진들을 렌더링하고 그 위에 다른 HTML 요소를 렌더링 하고자 했다가 아래와 같은 상황이 발생하는 이슈가 있었다. 해당 이슈의 원인은, background 이미지로 사용되는 이미지가 load 되지 않았을 경우에 이를 포함하고 있는 컨테이너의 height가 auto이기 때문에 height가 0으로 취급되기 때문이었다. 그래서 고민하다가 이미지가 load 되었는지 상태를 감지해주면서 이미지가 load 되었을 때만 컨테이너 내부의 요소(컴포넌트) 들을 렌더링 하도록 로직을 작성해보았다. import React, { useState } from "react"; import { styled } from "linaria/react"; interface IProps { src: ..

0. 개요 DOM 요소에 이벤트를 바인딩해주고 이를 해제해주는 과정에서, 문득 이벤트 리스너들이(메모리가) 잘 해제되는지 궁금해 개발자 도구를 열어 performance 탭의 memory 부분에 있는 리스너 개수를 확인해보았다. 그런데 removeEventListener를 호출할 때, 리스너 개수가 줄어드는 것이 아닌 오히려 증가했다가, 나중에 GC에 의해 리스너가 사라지는 것을 확인하고 이 부분을 조금 더 확인해보며 그 내용을 정리했다. 1. HTMLElement.prototype.removeEventListener 개념 보통 DOM요소에 이벤트 핸들러를 바인딩해서 다양한 이벤트를 캐치한다. 하지만 메모리 누수 방지를 위해서 불필요할 경우 (컴포넌트가 unMount 되는 등) 이를 해제해주어야 한다. ..

const getName = () => new Promise((resolve) => { setTimeout(() => { resolve('Dooyeong'); }, 2000); }); const sayHi = async () => { const name = await getName(); console.log(`Hello ${name}!`); }; sayHi(); 자바스크립트에는 async와 await이라는 특별한 문법이 존재한다. 그리고 "비동기(async)"라는 어려울 것 같은 이름을 가지고 있지만 생각보다 이해하기 쉽고 사용하기도 쉽다. Asynchronus function 비동기 함수란, 동기적으로 작동하지 않는 함수이다. 이 말이 무슨 말이냐면, 두 개 이상의 이벤트들이 서로를 기다리지 않고 (b..

자바스크립트에는 Promise라는 아주 중요한 객체가 있다. 내부적으로 비동기적인 로직을 처리할 때 이 Promise객체를 통해서 callback hell이나 에러 처리 등 여러 가지 문제점들을 해결해주고 있다. // callback hell get('/step1', a => { get(`/step2/${a}`, b => { get(`/step3/${b}`, c => { get(`/step4/${c}`, d => { console.log(d); }); }); }); }); 이러한 코드를 Promise를 사용해 바꾸면 다음과 같다. promiseGet(`/step/1`) .then(a => promiseGet(`/step/${a}`)) .then(b => promiseGet(`/step/${b}`)) .t..

Ajax란 Asynchronous Javascript And XML이라는 뜻으로, 자바스크립트를 사용해 서버에 비동기적인 방식으로 데이터를 요청해 동적으로 웹페이지를 갱신하는 방식을 의미한다. 1. Ajax Ajax는 Web API인 XMLHttpRequest 객체를 기반으로 동작한다. 그리고 XMLHttpRequest는 비동기적인 HTTP 통신을 위해서 여러 메서드와 프로퍼티 등을 제공한다 이전의 웹페이지의 경우에는 html 태그로 시작해서 html 태그로 끝나는 완전한 HTML을 전송받아 웹페이지 전체를 렌더링하는 방식으로 동작했다. 그렇기 때문에 화면이 전환되면 웹페이지 전체를 처음부터 다시 렌더링해야했기 때문에 화면이 깜빡거리는 현상이 발생했다. 이러한 방식은 매번 완전한 HTML파일을 항상 전송..

디바운스와 스로틀은 scroll, resize, input, mousemove 같은 짧은 간격으로 연속적으로 이벤트를 발생시키는 경우에 과도한 이벤트 발생을 방지하는 기법이다. 1. 디바운스(debounce) 예를 들어서 click 같은 경우에 오토 마우스같은 툴을 사용해서 1초에 10번씩, 혹은 사람의 손으로 소위 말하는 '광클'로 클릭 이벤트를 1초에 1번 이상 발생시킬 수 있다. 하지만 이러한 클릭 이벤트를 조절하고 싶을 때, 디바운스라는 기법을 사용할 수 있다. 디바운스는, 엘리베이터를 생각하면 이해하기 쉽다(https://css-tricks.com/debouncing-throttling-explained-examples/). 엘리베이터를 타고 문이 닫히려고 할 때, 누군가 열림 버튼(이벤트 발생..

DOM(Document Object Model)은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조이다. 1. 노드 Hello 위와 같은 HTML요소는 div 요소 노드를 생성하는데, 이때 어트리뷰트는(class, id 등) 어트리뷰트 노드로, 텍스트 콘텐츠의 경우에는 텍스트 노드로 따로 구분된다. 참고로 HTML의 태그들 사이의 개행이나 공백들은 텍스트 노드가 된다. HTML 문서는 이러한 요소들의 집합으로 이루어지며, 중첩 관계를 통해 트리 구조로 구성된다. 1.1 노드의 종류 노드의 타입은 문서 노드, 요소 노드, 어트리뷰트 노드, 텍스트 노드로 나눌 수 있다. 문서 노드는 DOM 트리의 최상위에 존재하는 루트 노드로서 doc..

Set과 Map은 ES6에 도입된 새로운 자료구조이다. 1. Set Set객체는 중복을 허용하지 않는 자료구조이다. 배열과 유사하지만 중복이 안된다는 점, 요소의 순서가 의미 없다는 점, 인덱스로 요소에 접근할 수 없다는 점에서 차이가 존재한다. 1.1 Set 객체 생성 Set객체는 아래와 같이 생성자 함수로 생성한다. const set = new Set(); console.log(set); // Set(0) {} const set1 = new Set([1, 2, 3, 3]); console.log(set1); // Set(3) {1, 2, 3} const set2 = new Set('hello'); console.log(set2); // Set(4) {"h", "e", "l", "o"} 이 때 만약 인..