MJ Kim

안녕하세요, 공부한 것을 기록하고 공유하는 걸 좋아하는 프론트엔드 개발자 김민정입니다. 회고록, 일상 및 다른 관심사는 티스토리에 기록하고 있습니다.

Headless 컴포넌트

Headless란? Headless를 그대로 번역하면 ‘머리가 없는’이라는 뜻이다. 구글에 Headless를 검색 시, 가장 많이 나오는 단어는 Headless browser로 ‘창이 없는’ 브라우저를 뜻한다. 주로 크롤링할 때 실제로 브라우저 창을 띄우지 않고 화면을 가상으로 렌더링하여 실제 브라우저와 동일하게 동작하는 방식을 뜻한다. 그렇다면 프론트엔…

ECMAScript 스펙 읽는법

JavaScript 관련하여 궁금한 점이 있을 때 이것저것 찾다보면 그 종착지는 언제나 ECMAScript였다. 그러나 엄청난 길이의 스크롤을 보고 주눅이 들었고, 차분히 읽어보기로 마음 먹었을 때는 처음 보거나 정의를 알 수 없는 것들이 많이 있었다. 그러다 참조 링크를 계속 타고 들어가서 이해할때 쯔음, 처음에 무엇때문에 이걸 찾아봤는지 까먹는 나를 …

웹 브라우저의 역사

웹 브라우저는 오늘날 우리들이 사용하고 있는 크롬, 사파리, 파이어폭스, IE 등처럼 웹 페이지를 볼 수 있는 프로그램이다. (해당 글에서는 웹 브라우저만 다루며, 이하 ‘브라우저’라 칭한다) 지금의 웹 페이지는 상당히 많은 정보를 담고 있다. 쇼핑몰일 경우, 우리가 사고 싶은 물건을 장바구니에 담고 결제하는 등 다양한 조작이 가능하지만, 최초의 브라우저…

웹 접근성과 웹 콘텐츠 접근성 지침

웹 접근성은 매우 중요하며, 시맨틱 마크업을 준수해야 한다. 웹 개발을 했다면 많이 들어봤을 말이다. 그렇다보니 필자는 이를 단순하게 웹 접근성 = 시맨틱 마크업, 시맨틱 마크업은 곧 적절한 곳에 올바른 HTML 태그를 작성하는 것이라고만 인지하고 있었다. 그러나 생각했던 것과는 달리 더 상세하고 복잡한 규정이 존재했다. 웹 접근성(Web Accessib…

자바스크립트의 형 변환(Type Conversions)

개발하다 보면 string을 number로, number를 string으로 혹은 boolean으로 형 변환을 해야 할 때가 존재한다. 형 변환을 하는 방법에는 여러 개가 있는데 각각의 차이점이 무엇인지 궁금해서 찾아보았다. string으로 변환 가장 간단한 방법으로는 가 있다. 하지만 나 , 같은 값들도 그대로 문자열로 반환하여 따로 예외 처리가 필요하…

WebXR

WebXR 관련 북마크 모음 Open source WebGL API WebXR Device API three.js Babylon.js A-Frame 관련 자료 OpenGL / WebGL / GLSL Learn OpenGL Coordinate Systems The Book of Shaders (한글 有) WebGL 기초 GLSL Noise Algorithm…

React의 Memoization

위키피디아에 따르면, 메모이제이션(memoization)은 컴퓨터가 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로서 동일한 계산을 하지 않도록 하여, 속도를 높이는 기술이다. 보통 애플리케이션의 최적화를 위해 사용된다. React에서 컴포넌트가 렌더링하는 규칙에는 크게 세 가지가 존재한다. state나 props가 변경되었을 때 …

자바스크립트의 비동기 프로그래밍

최근 들어 자바스크립트에서 비동기를 잘 다루는게 얼마나 중요한지 더 절실하게 느낀다. 필자가 마주한 대부분의 골치 아픈 에러는 비동기로 인한 것이며, 왜 이때 실행되는지 혹은 왜 이렇게 늦게 실행되는지 등 원인 파악이 어려워 늘 애를 먹는다. 개발 공부를 막 시작했을 무렵 Node.js란?과 자바스크립트 비동기 함수 알아보기 글을 작성했었다. 당시에 내가…

Debounce와 Throttle

디바운스(Debounce)와 쓰로틀(Throttle)은 예전부터 들어왔지만, 실무에서는 직접 구현하기 보다 lodash를 사용했기 때문에 정확히 어떻게 동작 되는지 몰랐다. 해당 글에서는 간단하게 와 hooks를 만들어서 설명해보려 한다. 언제 사용하는가? debounce와 throttle 모두 특정 함수의 호출 횟수를 줄여서, 웹 성능이 저하 되는 것…

Observer 패턴 알아보기 (hooks와 observables)

현 회사의 메인 프로젝트가 Angular로 개발되어 있다보니 자연스럽게 RxJS를 접하게 되었다. 그러나 Observable이 어떻게 그 객체의 변화를 감지하는지 모른채 사용했다. 그래서 조금이나마 이해하기 위해 Observer 패턴에 대해 찾아봤다. GoF 디자인 패턴이란? 간략하게 ‘패턴’이란 무엇인지 알아보자. 개발자라면 이게 무엇인지는 몰라도 한 …