Custom Style System 구축하기
styled-components 기반 프로젝트에서 반복되는 레이아웃 스타일을 줄이기 위해 Custom Style System을 구축했습니다. props 매핑과 반응형 인터페이스로 VStack, HStack 같은 재사용 컴포넌트를 만들었습니다.
#styled-components#CSS-in-JS
2400
필터 1
파일 변수 Deep-Dive
웹 서비스 규모가 커지며 Redux 전역 관리의 한계를 줄이기 위해 상태를 유형별로 분리한 사례를 소개했습니다. 추적이 불필요한 값은 파일 변수로 관리하고, SSG와 하드 네비게이션 제약도 함께 설명했습니다.
#Redux#Zustand
2100
디자인 시스템, 디자인과 코드의 간극 줄이기
디자인 시스템에서 Figma와 코드 간 간극이 커지며 커뮤니케이션 비용과 개발 피로도가 늘어나는 문제를 다뤘습니다. Figma 규약 정비와 Plugin API 기반 도구로 명세 검증과 코드 변환을 자동화하는 방안을 소개했습니다.
#디자인 시스템#Figma
2500
웹 컴포넌트로 프레임워크 마이그레이션 준비하기
Vue2에서 React로 점진적 마이그레이션할 때 웹 컴포넌트를 도입한 사례를 소개했습니다. 프레임워크별 UI 중복 구현을 줄이고 디자인 일관성과 유지보수 효율을 높였습니다.
#웹 컴포넌트#Vue.js
2700
목록 가상화의 마법 “우리 DOM이 달라졌어요”
무한 스크롤 피드에서 DOM 증가로 인한 성능 저하를 해결하기 위해 가상화를 도입했습니다.\n동적 높이와 스크롤 복원을 고려해 react-virtuoso를 선택하고 직접 복원 로직도 구현했습니다.
#React#Next.js
1900
신규 서비스 "꿀템"을 만들기 위한 여정(네? 다음달까지요?) -2편
꿀템 신규 서비스의 기술 스택 선택과 개발 과정을 정리한 글입니다. 프론트, 백엔드, QA, 성능 테스트와 운영 도구 활용까지 함께 소개했습니다.
#TypeScript#React
1800
신규 서비스 "꿀템"을 만들기 위한 여정(네? 다음달까지요?) -2편
꿀템 서비스의 프론트·백엔드 기술 스택 선택과 구현 과정을 소개했습니다. 또한 자체 QA, Oracle, QueryDSL, 사내 도구 활용 경험과 런칭 성과를 정리했습니다.
#node.js#Fastify
2500
신규 서비스 "꿀템"을 만들기 위한 여정(네? 다음달까지요?) -1편
신규 서비스 ‘꿀템’ 피드의 첫 론칭과 구축 여정을 소개하는 글입니다. 현재 제공된 본문만으로는 구체적인 기술 내용은 확인하기 어렵습니다.
#web#React
1800
Velopers 추천광고
쿠팡 파트너스
개발자를 위한 인기 상품을 확인해 보세요
이 게시물은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
#개발자#노트북#컴퓨터
B2C 서비스 레거시의 가르침 - Part2. Planning
운영 중인 B2C 프론트엔드 레거시를 개선하기 위한 플래닝 과정과 원칙을 정리했습니다. 기술 부채 정렬, 점진적 개선, 공유 문화를 통해 팀워크와 서비스 이해도를 높였습니다.
#레거시#JavaScript
2300
Vite로 구버전 브라우저 지원하기
Vite 레거시 플러그인으로 구버전 Safari와 Chrome의 흰 화면 문제를 해결한 사례를 다루었습니다. targets 설정만으로는 부족해 modernPolyfills를 함께 조정한 과정도 설명했습니다.
#Vite#React
6300
프로젝트 전체에서 사용되는 패키지, 어떻게 마이그레이션 할까?
프로젝트 전반의 패키지 마이그레이션 사례를 다뤘습니다. Next는 대체 구현으로 전환했고, Recoil은 AST 기반 스크립트로 Jotai로 옮겼습니다.
#migration#Next.js
2400
여러 프레임워크에서 사용할 수 있는 라이브러리 만들기
Framework Agnostic 개념을 바탕으로 코어와 어댑터를 분리하는 라이브러리 설계 방식을 소개했습니다. Tanstack Query와 계산기 예시로 프레임워크 독립성과 통합 구조를 설명했습니다.
#JavaScript#TypeScript
3300
React Conf 감상기
React Conf 2024를 시청한 감상과 인상 깊었던 세션 몇 가지를 간단히 소개했습니다. 실시간 대신 공개된 영상으로 전체 세션을 본 소감을 정리했습니다.
#React#컨퍼런스
2800
리액트 19 신규 기능 및 개선 사항
리액트 19의 신규 기능과 개선 사항을 Actions, use API, 서버 컴포넌트 중심으로 정리했습니다. 또한 메타데이터, 스타일시트, 스크립트, 자원 preloading 등 운영상 개선점도 함께 소개했습니다.
#React#SSR
500