Posts
React에서 다크 모드 완벽하게 구현하기
react에서 zustand와 useSyncExternalStore 훅을 이용해 다크 모드를 완벽하게 구현하는 방법을 설명합니다. 또한 사용자가 "애니메이션 줄이기"를 선호하는지 여부를 결정하는 훅을 구현해 애니메이션을 비활성화하는 작업을 수행하는 방법을 알아봅니다.
정교한 디자인 토큰 설계하기
디자인 토큰은 디자인 시스템의 최소 단위로, 일관성을 유지하고 프로젝트를 확장하는 데 도움이 됩니다. 이 글에선 의미 있는 디자인 토큰을 설계하기 위한 방법을 소개합니다.
탭 스크롤 동기화 크롬 익스텐션 개발해보기 with React
React를 사용해서 크롬 익스텐션을 개발한 과정들과 마주친 오류와 해결, 그리고 성능 최적화 경험을 공유합니다.
객체가 비어있는지 검사하는 2가지 방법: `Object.keys`와 `for...in`을 이용한 접근 방법
자바스크립트에서 객체가 비어있는지 검사하는 2가지 방법을 알아봅니다. 그리고 각 방법을 비교, 분석하며 상황에 따라 사용하는 방법을 명확히 알아봅니다.
JavaScript에서 내장 객체를 확장하는 것이 위험한 이유
편리해 보이지만 예상치 못한 결과를 초래할 수 있는 일반적인 JavaScript 사례인 Array.prototype과 같은 표준 내장 객체를 확장하는 방법을 알아봅니다. 그리고 잠재적인 위험의 예를 자세히 살펴보고, 보다 읽기 쉽고 유지보수하기 쉬운 코드를 작성하는 데 도움이 되는 대체 접근 방식에 대해 알아봅니다. 또한 Object.definedProperty()를 사용하여 객체를 더 안전하게 확장하는 방법을 소개합니다.
새로운 팀에서 비효율적인 업무를 개선한 사례
업무 중에 겪은 비효율적인 작업 프로세스를 해결하기 위해 Javascript를 활용해 개선한 사례를 얘기해보려 합니다. 결과적으로 비효율적인 업무를 개선해냈고, 시간을 더 효율적으로 쓸 수 있게 되었습니다.
Gatsby에서 원활한 경험을 보장하기: window 객체 사용
Gatsby의 특성을 알아보고 Gatsby에서 window 객체를 사용하기 위한 여러가지 방법을 알아봅니다.
Chrome 브라우저에서 JavaScript 성능을 프로파일링 하는 방법
Chrome 브라우저에서 performance 탭을 이용해서 웹 애플리케이션의 성능 병목 현상을 식별하고 해결하는 방법을 알아봅니다.
자바스크립트에서 객체를 복사하는 다양한 방법과 깊은 복사하는 로직 직접 구현해보기
객체를 복사하는 다양한 방법의 장단점을 살펴보고, lodash를 사용하지 않고 객체를 깊게 복사하는 로직을 직접 구현합니다. 우리 프로젝트의 번들 크기는 중요하니까요.