비동기 처리를 위해 자주 사용되는 Promise. Promise는 ES6부터 자바스크립트에 본격적으로 적용되어 현재는 대부분의 개발자들에게 친숙한 개념이다. 보통 Promise는 async / await 문법과 사용되고, 특정 상황에서 유용하게 쓰이는 내장 메서드들을 가지고 있다. 오늘은 그 중에서 자칫 혼동되기 쉬운 Promise.all과 Promise.allSettled의 차이점을 알아보도록 하자. Promise.all Promise.all([ promise1, promise2, ... ]) 의 형태로 사용되며, 배열로 받은 모든 프로미스가 fulfill 된 이후, 모든 프로미스의 반환 값을 배열에 넣어 반환한다. 이때 배열에 들어있는 값의 순서는 완료 순서와 상관없이, 인자로 받은 프로미스 배열의 ..

문득 여태껏 자바스크립트를 사용하면서 window객체와 document객체의 차이에 대해 잘 알지 못했다는 점이 생각나서 공부 후 포스팅한다. 내가 window / document 객체를 참조하는 흔한 작업들은 다음과 같았다. 1. 이벤트 리스너 등록 window.addEventListener("scroll", function () {}); document.addEventListener("click", function() {}); 2. dom에 접근 document.body.style.backgroundColor = "#fafafc"; document.getElementById("nextForm").focus(); 3. 스크롤 위치 이동 window.scrollTo(pos); 4. 창 닫기 / 열기 wi..

이미지 최적화와 웹 사이트 속도는 떼려야 뗄 수 없는 관계이다. 이미지의 용량을 압축과 최적화를 통해 줄일 만큼 줄였다면, 이제 페이지 로딩 시간을 향상하기 위한 지연 로딩(Lazy Loading)을 적용해보자. 지연 로딩이 적용된 이미지는, 사용자의 눈에 충분히 노출되기 전에는 데이터 요청이 일어나지 않게 할 수 있다. 그러므로 이를 통해 페이지의 초기 로딩 속도를 비약적으로 향상시킬 수 있다. React와 TypeScript를 사용한 이미지 컴포넌트 코드는 다음과 같다. Image.tsx import React, { useEffect, useRef, useState } from "react"; //* polyfill 2개. 아래에 설명있음*// import "intersection-observer";..

웹 페이지에서 AJAX 요청 시에 불필요한 중복 요청이 발생하는 경우는 뭐가 있을까? 페이지에 잘 바뀌지 않는 게시판(공지사항)이 존재한다고 가정하자. 공지사항 목록을 가져오는 API와 공지사항 내용을 불러오는 API는 약 1초가 소요된다고 가정한다. 이 페이지의 로직을 가정하면, 유저가 공지사항 목록 페이지에 접근하는 순간, 서버에서 공지사항 목록을 가져오기 위해 AJAX 요청이 호출된다. (1초) 렌더링 된 공지사항 목록 페이지에서 유저가 1번 공지사항을 클릭한다. 1번 공지 내용을 불러오는 요청이 호출된다. (1초) 뒤로가기로 다시 목록 페이지에 접근하는 순간, 공지사항 목록을 가져오기 위해 AJAX 요청이 호출된다. (1초) 실시간으로 글의 목록이 갱신되는 자유게시판이라면 이야기가 다르겠지만, 잘..

Typo를 관리하는 컴포넌트. 테마에 지정해놓은 Typo의 값을 사용하는 것에만 집중했다. import React from "react"; import { WithChildrenAndStyle } from "../../../interfaces"; import { styled } from "../../../styles/Themes"; export interface Props extends WithChildrenAndStyle { ellipse?: boolean; type?: "body" | "head"; dp?: "block" | "inline" | "inline-block" | "flex"; ws?: "pre" | "no-wrap" | "pre-wrap"; s?: string; c?: string; } ..

최근 지인으로부터 css in js 에 대한 불만 아닌 불만을 들을 기회가 있었다. css, js, html이 각자 가지고 있는 역할이 분명히 다른데, (컴포넌트 위주의 웹 개발 환경이 득세하다보니) css in js등의 등장으로 그 역할이 모호해지고 있다는 것이다. 그 말에도 일리가 있다고 생각했다. 사실 구현의 측면에서는 그 역할이 사라지거나 불분명해지진 않았다. 하지만 컴포넌트 위주의 웹 개발에서는 html태그의 계층구조, 스크립트와 dom의 연결, bem등을 사용한 css클래스 네이밍 등의 작업에 많은 시간을 투자하지 않고 결과물을 낼 수 있게 된 것은 사실인 것 같다. css in js가 가지고 있는 성능상의 이슈도 있고, 기술에는 정답이 없다고 생각하는 만큼 이러한 추세가 앞으로 또 어떻게 변..