Scroll Snap API를 통해 이미지 캐러셀 완성하기
Scroll Snap API로 이미지 캐러셀의 스크롤 종료 위치를 제어하는 방법을 설명했습니다. JavaScript 없이 축, 스냅 강도, 정렬 기준을 조합해 슬라이드 UX를 구현합니다.
#CSS#Scroll Snap API
100
프론트엔드 기술 블로그 최신 글
필터 0
Scroll Snap API를 통해 이미지 캐러셀 완성하기
Scroll Snap API를 통해 이미지 캐러셀 완성하기
Scroll Snap API로 이미지 캐러셀을 만드는 방법을 정리했습니다. 스크롤 컨테이너와 자식 요소에 필요한 속성을 설정해 자연스러운 스냅 동작을 구현했습니다.
#CSS#web
3000
react-query로 데이터 처리하기 - 파트너스 레거시 코드 리팩토링(2) api 로직, react-query
react-query로 데이터 처리하기 - 파트너스 레거시 코드 리팩토링(2) api 로직, react-query
파트너스 서비스 레거시 코드에서 API 로직을 분리하고 React Query를 도입한 사례를 다뤘습니다. Redux 중심 구조를 정리해 데이터 처리 방식을 개선하는 방향을 소개했습니다.
#React#Redux
3100
드디어 리뉴얼 하는 날이 오는구나
서비스 리뉴얼 배경과 문제 정의, 개선 목표를 데이터와 사용자 조사로 재정립한 과정을 정리했습니다. 메인홈과 검색 UX를 개편해 탐색성과 체류시간을 높인 사례를 공유했습니다.
#UI/UX#디자인 시스템
2300
Notion API와 함께 정적 페이지로의 여정
Notion API로 정적 페이지를 관리하기 위한 Block 조회와 콘텐츠 변환 방식을 검토했습니다. 공식 API 기반 Markdown 변환과 remark·rehype 활용 방향을 선택했습니다.
#Notion API#정적 페이지
100
적정기술 딜레마
적정기술 딜레마
적정기술을 개발 환경에 맞춰 선택해야 한다는 관점을 설명했습니다. 최신 기술의 무조건적 도입보다 요구사항, 팀 역량, 유지보수성을 함께 봐야 한다고 정리했습니다.
#React#Next.js
3500
Version Catalog 도입을 위한 온보딩 - gradle 버전 관리를 위한 Version Catalog 도입
Version Catalog 도입을 위한 온보딩 - gradle 버전 관리를 위한 Version Catalog 도입
Android 프로젝트의 Gradle 버전 관리를 위해 Version Catalog 도입을 소개했습니다. 여러 모듈의 build.gradle 복잡도를 줄이고 유지보수성을 높이려는 내용입니다.
#Android#Gradle
1800
"검색엔진 가이드"를 금융쇼핑 서비스에 SEO로 활용하기
금융쇼핑 서비스에 검색엔진 가이드를 SEO로 활용하는 방법을 소개했습니다. 검색엔진 정책 변화 가능성을 염두에 두고 적용 맥락을 정리했습니다.
#SEO#검색
1500
라이브관 프론트엔드 입장에서 바라보기
올리브영 라이브관을 신규 아키텍처와 SSR 기반으로 전환한 프론트엔드 경험을 공유했습니다. 이미지·영상 최적화와 공통 코드 관리, 크로스 브라우징 대응 방향도 함께 정리했습니다.
#Next.js#TypeScript
4000
텍스처 압축으로 유니티 모바일 게임 메모리 최적화하기
Unity 모바일 게임에서 텍스처 압축이 메모리 최적화에 얼마나 중요한지 설명했습니다. ASTC 적용과 포맷 선택 기준을 통해 실제 메모리 절감 사례도 함께 소개했습니다.
#Unity#mobile
1900
사람인 접근성 개선 회고
사람인 서비스의 웹 접근성 향상을 위해 길드를 구성해 개선 프로젝트를 진행한 회고입니다. 접근성 기준 마련과 개선 과정에서의 진행 내용을 공유했습니다.
#웹#UI/UX
2000
주니어 FE 개발자들의 스터디 여정
주니어 FE 개발자들이 진행한 3번의 스터디 경험과 운영 방식을 공유했습니다. 좋았던 점과 아쉬웠던 점, 스터디 꿀팁도 함께 정리했습니다.
#스터디#주니어 개발자
1800
타입스크립트, 리액트쿼리 도입 - 파트너스 레거시 코드 리팩토링(1)
타입스크립트, 리액트쿼리 도입 - 파트너스 레거시 코드 리팩토링(1)
타입스크립트와 리액트쿼리를 도입해 파트너스 서비스 레거시 코드를 리팩토링한 사례를 소개했습니다. 프로젝트 규모가 커지며 복잡해진 의존성과 유지보수 문제를 다뤘습니다.
#TypeScript#React
2500
!프론트엔드 개발자의 next.js 개발기
!프론트엔드 개발자의 next.js 개발기
Next.js와 MUI로 프론트엔드를 개발한 경험과 시행착오를 정리한 글입니다. SSR, API Routes 활용과 컴포넌트 분리의 중요성을 함께 소개했습니다.
#Next.js#React
3700