MJ Kim

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

GitHubTistory

함수형 사고하기

해당 글은 쏙쏙 들어오는 함수형 코딩 책 내용을 기반으로 작성된 내용입니다. 언젠가부터 함수형 프로그래밍 얘기가 여기 저기에서 들려왔다. 함수형 프로그래밍이라하면 대부분 부수효과가 없는 순수함수, 일급 객체, 불변성 지향 그리고 고차 함수 등의 특징을 말한다. 그러나 필자가 봤었던 대부분의 자료들은 어플리케이션 전반이 아니라 단편적인 예시만 알려주고 있어…

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가 변경되었을 때 …