React 리팩토링, 10년 넘은 리디북스 웹도 OK
리디북스 웹의 이기종 기술 스택을 React와 Next.js 중심으로 점진 리팩토링했습니다. SSR·캐싱·자동화 배포와 컴포넌트 일반화로 성능 및 유지보수성을 높였습니다.
#React#Next.js
4200
프론트엔드 기술 블로그 최신 글
필터 0
Server Driven UI 설계를 통한 UI 유연화
네이티브 앱의 배포 후 UI 수정 제약과 A/B 테스트 요구를 다룹니다. Server Driven UI로 빌드와 UI 변경을 분리하는 방향을 소개합니다.
#Server Driven UI#mobile
2300
Suspense와 선언적으로 Data fetching처리
사이트 개편에서 react-query를 도입한 경험을 다룹니다. Suspense 기반의 선언적 데이터 페칭 처리를 소개합니다.
#React#react-query
100
Suspense와 선언적으로 Data fetching처리
Suspense와 선언적으로 Data fetching처리
Suspense로 Promise 기반 비동기 작업과 fallback 렌더링을 선언적으로 연결했습니다. 경쟁 상태·워터폴·결합도를 줄이는 컴포넌트 구성을 설명합니다.
#React#Suspense
3600
리액트 네이티브로 13년 된 네이티브 앱 전환하기
13년 된 네이티브 앱에 React Native를 도입해 탐색·결제 경험을 앱으로 통합했습니다. 네이티브 브릿지와 메모리 관리의 난점을 해결하며 생산성과 협업 속도를 높였습니다.
#React Native#iOS
4700
Zum Portal Core JS 소개
Zum Portal Core JS 소개
줌인터넷 프론트엔드 파트의 표준화 코어 패키지 도입과 분리 과정을 소개했습니다. SSR, 캐시, 설정 표준화로 유지보수와 배포 시간을 개선한 내용을 정리했습니다.
#Vue.js#node.js
1100
카카오웹툰은 하드웨어 가속과 IntersectionObserver를 어떻게 사용했을까?
카카오웹툰은 GPU 가속과 lazy load로 복잡한 웹 인터랙션의 렌더링 비용을 줄였습니다. 스크롤 이벤트 대신 IntersectionObserver를 활용해 안정적인 프레임 성능을 확인했습니다.
#IntersectionObserver#lazy load
000
카카오웹툰은 하드웨어 가속과 IntersectionObserver를 어떻게 사용했을까?
카카오웹툰은 하드웨어 가속과 IntersectionObserver를 어떻게 사용했을까?
카카오웹툰 웹 개편에서 GPU 가속과 IntersectionObserver로 인터랙션·지연 로딩을 최적화했습니다. 스크롤 이벤트 대비 Observer의 안정적 프레임과 적용 시 주의점을 공유합니다.
#IntersectionObserver#lazy load
3500
웹사이트 최적화 방법 - 이미지 파트
이커머스 웹사이트의 이미지 요청과 로딩 지연을 줄이는 포맷·압축 전략을 설명했습니다. 반응형 이미지, 지연 로딩, CDN 캐시, 스프라이트 활용법을 소개합니다.
#이미지 최적화#WebP
4300
웹에서 다크모드 지원하기
웹 다크모드는 body 클래스와 CSS variable로 제어하는 방식을 제안했습니다. SSR·CSR 환경의 깜빡임과 웹뷰·구버전 OS 호환성도 함께 고려했습니다.
#CSS#JavaScript
100
웹에서 다크모드 지원하기
웹에서 다크모드 지원하기
웹 다크모드는 body 클래스와 JavaScript로 제어해 다양한 정책을 지원할 수 있습니다. 렌더링 전 판별과 CSS 변수로 깜빡임 및 스타일 중복을 줄였습니다.
#CSS#JavaScript
1100
setSelectionRange로 검색창 커서 옮기기
검색창 재포커스 시 커서를 텍스트 끝으로 옮기는 구현 문제를 다뤘습니다. `setSelectionRange`와 `setTimeout(0)`으로 브라우저 기본 동작 이후 처리했습니다.
#JavaScript#HTML
000
setSelectionRange로 검색창 커서 옮기기
setSelectionRange로 검색창 커서 옮기기
검색창 포커스 시 커서를 끝으로 옮기는 과정에서 발생한 이벤트 순서 문제를 분석했습니다. `setSelectionRange`와 0ms `setTimeout`으로 커서·스크롤 위치를 함께 제어했습니다.
#JavaScript#setSelectionRange
3700
React Children 과 친해지기
React.Children.toArray()의 평탄화와 key 할당 방식을 설명했습니다. Fragment 내부를 평탄화하지 않는 제약과 대안을 소개합니다.
#React#children
000