MJ Kim

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

Next.js의 렌더링 과정(Hydrate) 알아보기

누군가 나에게 Next.js를 쓰는 이유를 물어본다면, 가장 먼저 SSR 때문이라고 대답할 것 같다. Next.js 공식 홈페이지에서도 가장 먼저 강조하고 있는 것이 ‘hybrid static & server rendering’인 것처럼 말이다. 하지만 정확히 어떠한 과정을 거쳐 렌더링이 되는지 몰라서 찾아보았다. Next.js의 Pre-rendering…

ReactNode vs. JSX.Element 그리고 ReactElement

해당 글 작성한 시점의 React는 18.0, TypeScript는 2.8 버전이다. DefinitelyTyped/types/react/index.d.ts ReactNode vs. JSX.Element ReactNode, JSX.Element 모두 외부에서 주입받을 컴포넌트의 타입을 정의할 때 가장 많이 사용한다. ReactNode ReactNode는 R…

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란?과 자바스크립트 비동기 함수 알아보기 글을 작성했었다. 당시에 내가…