HomeFeedAbout

Feed

useDebounce와 useQuery로 검색 요청 최적화하기

검색 요청 줄이기

Web PerformanceuseDebounceusequery

next/Link 제대로 활용하기

나는 preload 하라고 시킨 적이 없는데

Web Performance

블로그 성능 개선 2 - Feed 페이지 LCP 개선하기

웹 포폴 성능 개선기 2탄

LCPPerformance성능 개선

블로그 Feed 성능 개선 1 - 클라이언트에서 서버로

취준 때 만들었던 웹 포폴의 코드가 너무 골치 아파서 퇴근하고 틈틈히 리펙토링을 하고 있습니다. 이번 주말에는 웹 포트폴리오의 Feed 페이지를 개선해봤어요.

next리펙토링포트폴리오

디자인 시스템 만들기 - 컴포넌트 만들기

이틀 간 컴포넌트들을 새로 만들었습니다. 얼마 전에 만든 백오피스 UI 라이브러리를 막상 사용해보니 너무 불편했어요. 수정 사항이 생기면 하루에도 수십번씩 빌드, 업데이트를 해야 했거든요. 마침 새로운 웹앱 프론트엔드를 처음부터 개발해야 하는 상황이라, 이틀 간 컴포넌트 공장장이 되었습니다. 고민하면서 느꼈던 자잘한 팁을 공유해보려고 해요. 디자인 토큰...

React디자인 시스템컴포넌트

디자이너 없이 디자인 시스템 만들기 3일차 - 컴포넌트 레시피(Recipe) 만들기

최근 '어떻게 해야 더 쉽고 편하게 컴포넌트를 사용할 수 있을까?’ 계속 고민하던 중 Vanilla-Extract의 recipe 패키지를 알게 됐습니다. recipe을 적용해 다양한 타입의 Button 컴포넌트를 오전에 다 만들 수 있었고, CSS 양도 훨씬 줄어들었어

Design SystemReactrecipevanilla-extract디자인 시스템

디자인 시스템 만들기 2일차 - Color CSS 세팅

어제 수집한 토큰을 바탕으로 색상 CSS 변수를 세팅해줬습니다.세팅하기 전에 먼저 https://po4tion.dev/biome 를 참고해 프로젝트에 Biome를 세팅해줍니다. Atomic 색상 토큰들은 아래처럼 Palette.ts에 세팅해줬습니다.팔레트는 컴

디자인 시스템 만들기 1일차 - 토큰 수집하기

저는 회사에서 컴포넌트 라이브러리를 배포해 사용하고 있습니다. 디자인 시스템을 만들고 싶었지만, 일단 디자이너가 없고 만들 수 있는 업무 시간이 따로 주어지진 않아서 감각대로 주먹구구식으로 2-3일 만에 만들다보니 막상 컴포넌트를 유연하게 사용하기가 불편하더라고요. 하

FE디자인 시스템원티드랩

모듈 시스템 공부 안한 개발자 모이세요

실무를 해보면 취준 때 별로 중요하지 않게 생각했던 것들이 ‘중요한 것이었구나’ 느낄 때가 많다. 그 중 하나가 모듈 시스템이다.

JavaScriptTIL모듈모듈 시스템자바스크립트프론트엔드

틈틈히 만드는 디자인 시스템

입사한 지 벌써(이제야,,) 한달이 됐습니다.팀원들과 함께 사용할 UI 라이브러리를 npm에 배포해서 사용하고 있어요.

storybook디자인 시스템프론트엔드