https://shdev.blog 개발하며 마주친 문제들과 그 해결 과정을 기록하는 개인 기술 블로그입니다. 학습한 내용과 경험을 꾸준히 아카이빙합니다. ko Wed, 13 May 2026 03:19:19 GMT https://shdev.blog/ko/post/kakao-line-app-login-difference https://shdev.blog/ko/post/kakao-line-app-login-difference Sun, 03 May 2026 00:00:00 GMT 인앱브라우저에서 카카오톡 로그인은 되지만 LINE 앱 로그인은 막히는 현상을 네트워크 분석을 통해 두 SDK의 인증 흐름 차이를 살펴 보았다. https://shdev.blog/ko/post/being-lazy-with-ai https://shdev.blog/ko/post/being-lazy-with-ai Mon, 27 Apr 2026 00:00:00 GMT AI 덕분에 일은 빨라졌는데, 어느 순간 스스로 생각하는 시간이 줄어들고 있다는 걸 느꼈다. https://shdev.blog/ko/post/unify-password-input-masking https://shdev.blog/ko/post/unify-password-input-masking Fri, 17 Apr 2026 00:00:00 GMT 브라우저와 운영체제마다 다르게 보이는 패스워드 마스킹 모양을 커스텀 폰트와 unicode-range로 통일하기 https://shdev.blog/ko/post/vanilla-extract-normalize-css https://shdev.blog/ko/post/vanilla-extract-normalize-css Mon, 09 Mar 2026 00:00:00 GMT vanilla-extract로 프로젝트에 normalize.css를 직접 설정하는 방법 https://shdev.blog/ko/post/react-render-props-pattern https://shdev.blog/ko/post/react-render-props-pattern Wed, 11 Feb 2026 00:00:00 GMT React의 Render Props 패턴이란 어떤 것이고 언제, 어떻게 사용하면 좋을까? Hooks을 사용하는 것과는 어떤 차이점이 있을까? 예제와 함께 알아보자. https://shdev.blog/ko/post/css-container-queries https://shdev.blog/ko/post/css-container-queries Tue, 13 Jan 2026 00:00:00 GMT 미디어 쿼리로는 해결하기 어려웠던 반응형 디자인 문제를 컨테이너 쿼리로 해결하는 방법을 알아본다. 뷰포트가 아닌 부모 요소의 크기를 기준으로 스타일을 적용하여 진짜 재사용 가능한 컴포넌트를 만들어보자. https://shdev.blog/ko/post/understanding-dpr-and-half-pixel https://shdev.blog/ko/post/understanding-dpr-and-half-pixel Sat, 29 Nov 2025 00:00:00 GMT 0.5px border, 왜 어떤 디바이스에서는 보이고 어떤 곳에서는 안 보일까? DPR(Device Pixel Ratio)의 개념을 이해하면 알 수 있다. https://shdev.blog/ko/post/why-i-stopped-using-barrel-files https://shdev.blog/ko/post/why-i-stopped-using-barrel-files Fri, 14 Nov 2025 00:00:00 GMT import 문을 예쁘게 만들려고 썼던 배럴 파일. 왜 문제가 됐는지, 제거 후 달라진 점, 그럼에도 남겨둔 이유를 정리했다. https://shdev.blog/ko/post/threejs-cache-enabled-memory-leak-fix https://shdev.blog/ko/post/threejs-cache-enabled-memory-leak-fix Mon, 25 Aug 2025 00:00:00 GMT GLTFLoader 성능 최적화를 위해 활성화한 THREE.Cache가 동적 URL 환경에서 어떻게 메모리 누수를 일으켰는지를 알아 보았다. https://shdev.blog/ko/post/zustand-closure-deep-dive https://shdev.blog/ko/post/zustand-closure-deep-dive Fri, 08 Aug 2025 00:00:00 GMT Zustand의 소스코드를 직접 분석하며 클로저를 활용한 상태 관리의 핵심 원리를 파헤치며 100줄로 구현된 강력한 상태 관리 라이브러리의 비밀을 알아보자. https://shdev.blog/ko/post/diving-deep-into-jwt https://shdev.blog/ko/post/diving-deep-into-jwt Tue, 29 Jul 2025 00:00:00 GMT 널리 사용되는 인증 방식인 JWT(JSON Web Token)의 탄생 배경부터 구조, 동작 원리까지 다시 한 번 깊이 있게 짚어보며 왜, 어떻게 사용해야 하는지 다시 생각해보았다. https://shdev.blog/ko/post/javascript-interpreter-vs-compiler https://shdev.blog/ko/post/javascript-interpreter-vs-compiler Mon, 07 Jul 2025 00:00:00 GMT 자바스크립트는 인터프리터 언어일까, 컴파일 언어일까? V8, WebKit, SpiderMonkey 엔진이 자바스크립트를 어떻게 실행시키는지 알아보고 결론을 내려보았다. https://shdev.blog/ko/post/css-font-variant-numeric-guide https://shdev.blog/ko/post/css-font-variant-numeric-guide Mon, 23 Jun 2025 00:00:00 GMT CSS font-variant-numeric 속성으로 숫자 정렬, 분수 자동 변환, 0과 O 구분하기 등을 한 줄로 해결해보기! https://shdev.blog/ko/post/multiparadigm-with-template-engine https://shdev.blog/ko/post/multiparadigm-with-template-engine Sat, 14 Jun 2025 00:00:00 GMT 멀티패러다임 프로그래밍을 읽고 HTML 템플릿 엔진 구현을 통해 함수형과 객체지향을 전략적으로 조합하여 복잡한 문제를 우아하게 해결하는 방법을 알아보자. https://shdev.blog/ko/post/practical-functional-programming https://shdev.blog/ko/post/practical-functional-programming Wed, 11 Jun 2025 00:00:00 GMT 멀티패러다임 프로그래밍을 읽고 FxTS로 실무에 함수형 프로그래밍 적용하기. 복잡한 데이터 처리와 비동기 작업을 선언적으로 해결하는 예제들을 살펴보자. https://shdev.blog/ko/post/react-lazy-initialization-complete-guide https://shdev.blog/ko/post/react-lazy-initialization-complete-guide Fri, 06 Jun 2025 00:00:00 GMT React useState의 게으른 초기화(lazy initialization)로 성능을 최적화하는 방법을 알아보고 그 동작 원리를 React 소스 코드 분석을 통해 이해해보자. https://shdev.blog/ko/post/multiparadigm-async-programming-guide https://shdev.blog/ko/post/multiparadigm-async-programming-guide Sun, 01 Jun 2025 00:00:00 GMT 멀티패러다임 프로그래밍을 읽고 Promise를 값으로 다루는 관점에서 시작하여 함수형 프로그래밍과 조합한 비동기 처리 기법을 다루는 법을 알아봅니다. https://shdev.blog/ko/post/paradigm-convergence-generator-iterator-lisp https://shdev.blog/ko/post/paradigm-convergence-generator-iterator-lisp Sun, 25 May 2025 00:00:00 GMT 멀티패러다임 프로그래밍을 읽고 명령형 코드를 함수형으로 단계별 변환하며, Generator:Iterator:LISP = IP:OOP:FP라는 등식이 성립하는 이유를 알아봅니다. https://shdev.blog/ko/post/cookie-consent-guide https://shdev.blog/ko/post/cookie-consent-guide Wed, 21 May 2025 00:00:00 GMT 쿠키 동의 팝업을 구현해야 하는 법적 이유와 다양한 구현 방법을 알아본다. 또한 GDPR 및 개인정보 보호법을 준수하면서 사용자 경험을 해치지 않기 위해 직접 구현 시 고려해야 할 주요 사항들을 정리해보았다. https://shdev.blog/ko/post/functional-programming-type-system-lisp https://shdev.blog/ko/post/functional-programming-type-system-lisp Sun, 18 May 2025 00:00:00 GMT 멀티패러다임 프로그래밍을 읽고 함수형 프로그래밍, 타입 시스템, LISP 등 여러 철학이 어떻게 상호작용하며 현대 언어에서 융합되는지 알아보고, 타입스크립트 에제를 통해 고차 함수와 제네릭 타입이 결합된 안전하고 표현력 있는 코드 작성법을 살펴봅니다. https://shdev.blog/ko/post/multi-paradigm-extends-modern-languages https://shdev.blog/ko/post/multi-paradigm-extends-modern-languages Sun, 11 May 2025 00:00:00 GMT 멀티패러다임 프로그래밍을 읽고 현대 프로그래밍 언어가 멀티패러다임 접근법을 통해 어떻게 진화하고 확장되는지 이터레이터와 일급 함수등의 예제를 통해 살펴봅니다. https://shdev.blog/ko/post/what-is-oklch https://shdev.blog/ko/post/what-is-oklch Thu, 01 May 2025 00:00:00 GMT OKLCH가 무엇인지, 기존 RGB와 HSL의 한계를 어떻게 극복하는지, 그리고 웹 디자인에서 어떻게 활용할 수 있는지 알아봅니다. https://shdev.blog/ko/post/what-is-graphql https://shdev.blog/ko/post/what-is-graphql Wed, 16 Apr 2025 00:00:00 GMT REST API의 한계를 극복하기 위해 탄생한 데이터 쿼리 언어인 GraphQL과 장단점을 REST API와 비교하며 알아보자. https://shdev.blog/ko/post/cookies-httponly-secure-samesite https://shdev.blog/ko/post/cookies-httponly-secure-samesite Fri, 11 Apr 2025 00:00:00 GMT 쿠키의 보안 속성인 HttpOnly, Secure, SameSite 속성을 알아보고 어떻게 웹 애플리케이션을 보호하는지 살펴보자. https://shdev.blog/ko/post/mastering-html-tabindex https://shdev.blog/ko/post/mastering-html-tabindex Tue, 01 Apr 2025 00:00:00 GMT 많은 개발자들이 모르거나 간과하기 쉬운 HTML 속성이 있다면, 그것은 바로 tabindex다. https://shdev.blog/ko/post/threejs-about-light https://shdev.blog/ko/post/threejs-about-light Sat, 29 Mar 2025 00:00:00 GMT Three.js가 제공하는 다양한 조명 타입(AmbientLight, DirectionalLight, PointLight, SpotLight, HemisphereLight, RectAreaLight)의 특성과 활용법을 예제와 함께 알아보았다. https://shdev.blog/ko/post/next-js-dynamic-og-image-generation https://shdev.blog/ko/post/next-js-dynamic-og-image-generation Fri, 21 Mar 2025 00:00:00 GMT Next.js에서 Vercel의 @vercel/og 라이브러리를 활용해 다국어 지원 사이트에 동적 OG 이미지를 구현하는 방법을 알아보자. https://shdev.blog/ko/post/blog-search-using-pagefind https://shdev.blog/ko/post/blog-search-using-pagefind Mon, 10 Mar 2025 00:00:00 GMT 정적 웹사이트를 위한 클라이언트 사이드 검색 라이브러리 pagefind를 활용해 블로그에 빠르고 쉽게 검색 기능을 추가해 보았다. https://shdev.blog/ko/post/vercel-server-action-issue https://shdev.blog/ko/post/vercel-server-action-issue Fri, 21 Feb 2025 00:00:00 GMT Vercel의 서버리스 환경에서 Server Action 콜백이 간헐적으로 실행되지 않는 문제의 원인 분석과 해결 방법 https://shdev.blog/ko/post/threejs-geometry-materials-mesh https://shdev.blog/ko/post/threejs-geometry-materials-mesh Fri, 07 Feb 2025 00:00:00 GMT Three.js에서 3D Object를 구성하는 세 가지 핵심 요소인 Geometry와 Materials, 그리고 Mesh에 대해 알아보자. https://shdev.blog/ko/post/server-component-rendering-strategies https://shdev.blog/ko/post/server-component-rendering-strategies Thu, 16 Jan 2025 00:00:00 GMT 서버 컴포넌트의 렌더링 전략을 이해하고, 주의사항을 살펴본다. 또한 Parallel Routes와 함께 사용할 때 발생할 수 있는 이슈와 그 해결 방법에 대해서도 다루어본다. https://shdev.blog/ko/post/threejs-scene-renderer-camera https://shdev.blog/ko/post/threejs-scene-renderer-camera Sun, 05 Jan 2025 00:00:00 GMT Three.js에서 무언가를 표현하기 위해 필요한 가장 기본적인 3가지 Scene, Renderer, Camera에 대해 알아보자. https://shdev.blog/ko/post/typescript-typeof https://shdev.blog/ko/post/typescript-typeof Thu, 02 Jan 2025 00:00:00 GMT typeof 연산자의 JavaScript, TypeScript 맥락에서의 차이점과 다양한 활용 방법 https://shdev.blog/ko/post/sync-with-effect https://shdev.blog/ko/post/sync-with-effect Thu, 26 Dec 2024 00:00:00 GMT React에 존재하는 Effect에 관하여 공식 문서를 읽고 올바른 사용 방법에 대해 알아보자. https://shdev.blog/ko/post/what-is-react-suspense https://shdev.blog/ko/post/what-is-react-suspense Sat, 14 Dec 2024 00:00:00 GMT SSR의 구조적 한계에서 출발해 Suspense가 해결하는 문제, 실제 사용법, 그리고 Suspense가 활성화되는 조건과 활성화되지 않는 경우까지 자세히 알아본다 https://shdev.blog/ko/post/nextjs-middleware-matcher-variable-issue https://shdev.blog/ko/post/nextjs-middleware-matcher-variable-issue Tue, 12 Nov 2024 00:00:00 GMT Next.js middleware matcher에 변수를 사용했을 때 발생하는 문제와 그 원인을 Next.js의 소스 코드 분석을 통해 알아보자. https://shdev.blog/ko/post/git-cherry-pick https://shdev.blog/ko/post/git-cherry-pick Sun, 27 Oct 2024 00:00:00 GMT git cherry-pick은 특정 커밋을 선택적으로 다른 브랜치에 가져오는 명령어로, 버그 수정, 기능 이전, 릴리스 관리에 유용하다. https://shdev.blog/ko/post/list-virtualization-with-tanstack-virtual https://shdev.blog/ko/post/list-virtualization-with-tanstack-virtual Wed, 02 Oct 2024 00:00:00 GMT Grid 레이아웃에 Tanstack Virtual을 적용해 DOM을 최적화한 경험을 공유합니다 https://shdev.blog/ko/post/named-export-vs-default-export https://shdev.blog/ko/post/named-export-vs-default-export Mon, 30 Sep 2024 00:00:00 GMT Named Export와 Default Export에 대해 알아보기 https://shdev.blog/ko/post/extract-tailwind-color-type https://shdev.blog/ko/post/extract-tailwind-color-type Fri, 27 Sep 2024 00:00:00 GMT Tailwind CSS 설정에서 색상 타입을 추출해 컴포넌트 props에 적용하는 방법 https://shdev.blog/ko/post/server-component-in-client-component https://shdev.blog/ko/post/server-component-in-client-component Tue, 16 Jul 2024 00:00:00 GMT Next.js에서 모든 컴포넌트는 기본적으로 서버에서 동작한다. 이를 클라이언트 컴포넌트 안에서도 사용할 수 있는 방법을 알아보자.