2026
12개의 게시글화면을 도배한 배지 컴포넌트 덜어내기
상태, 분류, 사용 여부까지 모든 값에 배지를 쓰다 보니 정작 봐야 할 상태가 눈에 들어오지 않았다. 배지가 늘어나게 된 원인을 파악해보고, 어떤 값에 배지를 남기고 어떤 값은 텍스트로 둘지 고민한 내용을 담았다.
#UI/UXClaude Code 확장 기능 알아보기
Claude Code의 CLAUDE.md, Rules, Skills, Hooks, Subagents, Plugins가 각각 언제 로드되고 목적이 무엇인지에 대해 헷갈리는 점을 정리해보았다.
#claude제이콥의 법칙 (Jakob's Law)
새로운 서비스도 익숙한 구조를 기대하는 사용자 심리를 제이콥의 법칙으로 설명하고, 배달 앱과 디즈니플러스 사례로 적용 방법을 살펴보자.
#UXUX의 법칙인지 편향 (Cognitive Bias)
인지 편향이 무엇인지, 왜 UX 실무자가 알아야 하는지 살펴보자.
#UXUX의 법칙힉의 법칙 (Hick's Law)
선택지가 많아질수록 결정에 걸리는 시간이 늘어난다. 힉의 법칙의 원리와 UI 설계 적용 사례를 살펴보자.
#UXUX의 법칙심미적 사용성 효과 (Aesthetic-Usability Effect)
시각적으로 아름다운 디자인이 사용성 평가에도 영향을 미치는 심미적 사용성 효과의 개념과 연구 배경, 그리고 실제 서비스 적용 시 유의해야 할 점을 살펴보자.
#UXUX의 법칙카카오톡 로그인과 LINE 앱 로그인의 동작 방식 차이
인앱브라우저에서 카카오톡 로그인은 되지만 LINE 앱 로그인은 막히는 현상을 네트워크 분석을 통해 두 SDK의 인증 흐름 차이를 살펴 보았다.
#OAuth나를 게으르게 만드는 AI
AI 덕분에 일은 빨라졌는데, 어느 순간 스스로 생각하는 시간이 줄어들고 있다는 걸 느꼈다.
#Note패스워드 입력 필드의 마스킹 커스텀하기
브라우저와 운영체제마다 다르게 보이는 패스워드 마스킹 모양을 커스텀 폰트와 unicode-range로 통일하기
#CSSvanilla-extract로 normalize.css 설정하기
vanilla-extract로 프로젝트에 normalize.css를 직접 설정하는 방법
#vanilla-extractRender Props 패턴으로 로직과 UI 분리하기
React의 Render Props 패턴이란 어떤 것이고 언제, 어떻게 사용하면 좋을까? Hooks을 사용하는 것과는 어떤 차이점이 있을까? 예제와 함께 알아보자.
#React#디자인패턴컨테이너 쿼리(Container Query)로 진짜 반응형 만들기
미디어 쿼리로는 해결하기 어려웠던 반응형 디자인 문제를 컨테이너 쿼리로 해결하는 방법을 알아본다. 뷰포트가 아닌 부모 요소의 크기를 기준으로 스타일을 적용하여 진짜 재사용 가능한 컴포넌트를 만들어보자.
#CSS
2025
27개의 게시글당신은 0.5px을 그릴 수도, 없을 수도 있습니다. (feat. DPR)
0.5px border, 왜 어떤 디바이스에서는 보이고 어떤 곳에서는 안 보일까? DPR(Device Pixel Ratio)의 개념을 이해하면 알 수 있다.
#CSS내가 배럴 파일(index.ts)을 지운 이유
import 문을 예쁘게 만들려고 썼던 배럴 파일. 왜 문제가 됐는지, 제거 후 달라진 점, 그럼에도 남겨둔 이유를 정리했다.
#TypeScript#JavaScript#RefactoringTHREE.Cache.enabled로 인한 메모리 누수 트러블슈팅
GLTFLoader 성능 최적화를 위해 활성화한 THREE.Cache가 동적 URL 환경에서 어떻게 메모리 누수를 일으켰는지를 알아 보았다.
#Three.jsZustand 동작 원리 살펴보기 (with Closure)
Zustand의 소스코드를 직접 분석하며 클로저를 활용한 상태 관리의 핵심 원리를 파헤치며 100줄로 구현된 강력한 상태 관리 라이브러리의 비밀을 알아보자.
#JavaScript#ZustandJWT 톺아보기
널리 사용되는 인증 방식인 JWT(JSON Web Token)의 탄생 배경부터 구조, 동작 원리까지 다시 한 번 깊이 있게 짚어보며 왜, 어떻게 사용해야 하는지 다시 생각해보았다.
#Web#Security자바스크립트는 인터프리터 언어일수도, 컴파일 언어일수도 있습니다.
자바스크립트는 인터프리터 언어일까, 컴파일 언어일까? V8, WebKit, SpiderMonkey 엔진이 자바스크립트를 어떻게 실행시키는지 알아보고 결론을 내려보았다.
#JavaScriptCSS 한 줄로 숫자를 깔끔하게 표시하고 정렬하기
CSS font-variant-numeric 속성으로 숫자 정렬, 분수 자동 변환, 0과 O 구분하기 등을 한 줄로 해결해보기!
#CSS멀티패러다임 프로그래밍
멀티패러다임 프로그래밍을 읽고 HTML 템플릿 엔진 구현을 통해 함수형과 객체지향을 전략적으로 조합하여 복잡한 문제를 우아하게 해결하는 방법을 알아보자.
멀티패러다임 프로그래밍실전 함수형 프로그래밍
멀티패러다임 프로그래밍을 읽고 FxTS로 실무에 함수형 프로그래밍 적용하기. 복잡한 데이터 처리와 비동기 작업을 선언적으로 해결하는 예제들을 살펴보자.
멀티패러다임 프로그래밍React 게으른 초기화 (lazy initialization)와 원리 알아보기
React useState의 게으른 초기화(lazy initialization)로 성능을 최적화하는 방법을 알아보고 그 동작 원리를 React 소스 코드 분석을 통해 이해해보자.
#React비동기 프로그래밍
멀티패러다임 프로그래밍을 읽고 Promise를 값으로 다루는 관점에서 시작하여 함수형 프로그래밍과 조합한 비동기 처리 기법을 다루는 법을 알아봅니다.
멀티패러다임 프로그래밍코드:객체:함수 = Generator:Iterator:LISP = IP:OOP:FP
멀티패러다임 프로그래밍을 읽고 명령형 코드를 함수형으로 단계별 변환하며, Generator:Iterator:LISP = IP:OOP:FP라는 등식이 성립하는 이유를 알아봅니다.
멀티패러다임 프로그래밍쿠키 동의의 법적 필요성부터 구현 방법까지 빠르게 알아보기
쿠키 동의 팝업을 구현해야 하는 법적 이유와 다양한 구현 방법을 알아본다. 또한 GDPR 및 개인정보 보호법을 준수하면서 사용자 경험을 해치지 않기 위해 직접 구현 시 고려해야 할 주요 사항들을 정리해보았다.
#Web함수형 프로그래밍과 타입 시스템 그리고 LISP
멀티패러다임 프로그래밍을 읽고 함수형 프로그래밍, 타입 시스템, LISP 등 여러 철학이 어떻게 상호작용하며 현대 언어에서 융합되는지 알아보고, 타입스크립트 에제를 통해 고차 함수와 제네릭 타입이 결합된 안전하고 표현력 있는 코드 작성법을 살펴봅니다.
멀티패러다임 프로그래밍멀티패러다임이 현대 언어를 확장하는 방법
멀티패러다임 프로그래밍을 읽고 현대 프로그래밍 언어가 멀티패러다임 접근법을 통해 어떻게 진화하고 확장되는지 이터레이터와 일급 함수등의 예제를 통해 살펴봅니다.
멀티패러다임 프로그래밍OKLCH - 더 나은 웹 디자인을 위한 새로운 선택
OKLCH가 무엇인지, 기존 RGB와 HSL의 한계를 어떻게 극복하는지, 그리고 웹 디자인에서 어떻게 활용할 수 있는지 알아봅니다.
#CSS#WebGraphQL이란?
REST API의 한계를 극복하기 위해 탄생한 데이터 쿼리 언어인 GraphQL과 장단점을 REST API와 비교하며 알아보자.
#GraphQL웹 쿠키의 보안 속성 HttpOnly, Secure, SameSite 알아보기
쿠키의 보안 속성인 HttpOnly, Secure, SameSite 속성을 알아보고 어떻게 웹 애플리케이션을 보호하는지 살펴보자.
#Web[HTML] tabindex 속성 알아보기
많은 개발자들이 모르거나 간과하기 쉬운 HTML 속성이 있다면, 그것은 바로 tabindex다.
#HTML[Three.js] Light
Three.js가 제공하는 다양한 조명 타입(AmbientLight, DirectionalLight, PointLight, SpotLight, HemisphereLight, RectAreaLight)의 특성과 활용법을 예제와 함께 알아보았다.
#Three.js@vercel/og 라이브러리로 동적 Open Graph 이미지 생성하기
Next.js에서 Vercel의 @vercel/og 라이브러리를 활용해 다국어 지원 사이트에 동적 OG 이미지를 구현하는 방법을 알아보자.
#Vercelpagefind를 이용한 블로그 검색 기능 구현하기
정적 웹사이트를 위한 클라이언트 사이드 검색 라이브러리 pagefind를 활용해 블로그에 빠르고 쉽게 검색 기능을 추가해 보았다.
#PagefindServer Action이 간헐적으로 실행되지 않는 문제
Vercel의 서버리스 환경에서 Server Action 콜백이 간헐적으로 실행되지 않는 문제의 원인 분석과 해결 방법
#Vercel#Next.js[Three.js] Geometry, Materials, Mesh
Three.js에서 3D Object를 구성하는 세 가지 핵심 요소인 Geometry와 Materials, 그리고 Mesh에 대해 알아보자.
#Three.js서버 컴포넌트 렌더링 전략
서버 컴포넌트의 렌더링 전략을 이해하고, 주의사항을 살펴본다. 또한 Parallel Routes와 함께 사용할 때 발생할 수 있는 이슈와 그 해결 방법에 대해서도 다루어본다.
#Next.js[Three.js] Scene, Renderer, Camera
Three.js에서 무언가를 표현하기 위해 필요한 가장 기본적인 3가지 Scene, Renderer, Camera에 대해 알아보자.
#Three.jsTypeScript의 typeof 연산자
typeof 연산자의 JavaScript, TypeScript 맥락에서의 차이점과 다양한 활용 방법
#TypeScript
2024
8개의 게시글공식문서 Effect로 동기화하기 읽고 정리하기
React에 존재하는 Effect에 관하여 공식 문서를 읽고 올바른 사용 방법에 대해 알아보자.
#ReactReact Suspense의 등장 배경과 사용법 알아 보기
SSR의 구조적 한계에서 출발해 Suspense가 해결하는 문제, 실제 사용법, 그리고 Suspense가 활성화되는 조건과 활성화되지 않는 경우까지 자세히 알아본다
#ReactNext.js Middleware Matcher에 변수를 사용할 수 없는 이유
Next.js middleware matcher에 변수를 사용했을 때 발생하는 문제와 그 원인을 Next.js의 소스 코드 분석을 통해 알아보자.
#Next.jsGit cherry-pick 알아보기
git cherry-pick은 특정 커밋을 선택적으로 다른 브랜치에 가져오는 명령어로, 버그 수정, 기능 이전, 릴리스 관리에 유용하다.
#GitTanstack Virtual로 Grid 리스트 가상화하기
Grid 레이아웃에 Tanstack Virtual을 적용해 DOM을 최적화한 경험을 공유합니다
#JavaScript#ReactNamed Export와 Default Export의 이해
Named Export와 Default Export에 대해 알아보기
#JavaScriptTailwind CSS에서 color 속성 가져오기
Tailwind CSS 설정에서 색상 타입을 추출해 컴포넌트 props에 적용하는 방법
#TailwindCSS서버 컴포넌트를 클라이언트 컴포넌트안에서 사용하기
Next.js에서 모든 컴포넌트는 기본적으로 서버에서 동작한다. 이를 클라이언트 컴포넌트 안에서도 사용할 수 있는 방법을 알아보자.
#Next.js#React