FE News 26년 2월 소식을 전해드립니다!
FE News 26년 2월 소식을 전해드립니다!
FE 관련 주요 소식을 모아 소개한 큐레이션 글입니다. React 최적화, 합성 컴포넌트 패턴, jQuery 4.0.0 변경점을 함께 다뤘습니다.
#React#Next.js
41005분
필터 1
Next.js에서 QueryClient를 전역변수로 사용해도 될까요?
Next.js에서 QueryClient를 전역변수로 사용해도 될까요?
Next.js SSR에서 전역 QueryClient를 공유하면 요청 데이터가 누적되어 메모리 누수가 발생했습니다. 요청마다 QueryClient를 분리해 GC가 회수할 수 있도록 개선했습니다.
#Next.js#TanStack Query
159005분
styled-components에서 Tailwind CSS로 안전하게 대규모 마이그레이션하기
styled-components에서 Tailwind CSS로 안전하게 대규모 마이그레이션하기
styled-components에서 Tailwind CSS로의 대규모 점진 마이그레이션 방법을 다뤘습니다. CSS Cascade Layers와 SSR/CSR 대응으로 스타일 충돌 없이 전환했습니다.
#Tailwind CSS#styled-components
118005분
사용자가 페이지 로딩을 눈치채지 못하게 만들기 — RSC 도입 이야기
사용자가 페이지 로딩을 눈치채지 못하게 만들기 — RSC 도입 이야기
Next.js App Router에서 RSC와 TanStack Query prefetch를 결합해 이벤트 상세 페이지의 초기 로딩과 레이아웃 시프트를 개선했습니다. LCP는 약 38% 줄었고, 선택적 적용과 서버 부하 모니터링 전략도 함께 정리했습니다.
#Next.js#RSC
30005분
텍스트 접근성을 개선했더니 거래액이 올랐습니다.
기기 글자 크기 설정을 반영해 텍스트 접근성을 개선한 사례를 소개했습니다. SSR, SSG, CSR 모두에서 FOUT를 줄이고 거래액과 탐색성 개선까지 확인했습니다.
#React Native#Next.js
46005분
AST로 Outdated 없는 퍼널 문서 만들기
AST로 퍼널 라우팅을 정적 분석해 문서를 자동 생성하고, 코드 변경 시에도 최신 상태를 유지하는 방법을 소개했습니다. 조건 분기와 훅 내부 이동까지 추출해 Mermaid 다이어그램으로 시각화했습니다.
#AST#TypeScript
96005분
AWS X Remember GenAI 해커톤 사례: 영업팀을 위한 AI 솔루션 샐리(Sales:Re) 개발기
AWS와 리멤버 해커톤에서 영업팀용 AI 에이전트 샐리 개발 사례를 공유했습니다.리드 발굴과 반복 업무를 자동화하고, 멀티 에이전트 구조를 단순화해 성능을 개선했습니다.
#AWS#LLM
30005분
사내 스터디, 잘 운영될 수 있을까?
사내 스터디를 1년 운영하며 여러 진행 방식을 시도한 경험을 공유했습니다. 상황에 맞게 빠르게 피벗하고 부담과 효과의 균형을 맞추는 것이 핵심이라고 정리했습니다.
#React#Next.js
136005분
지그재그에 “포치의 선물가게”를 오픈하며
지그재그 앱 웹뷰에서 미니게임을 구현하며 Matter.js와 Phaser.js를 조합한 과정을 공유했습니다. 또한 SSR, DPR, 모바일 제스처와 게임오버 판정 문제를 해결한 사례를 정리했습니다.
#React#TypeScript
42005분
대규모 프론트엔드 아키텍처의 새로운 패러다임 - Part 3. Nx를 활용한 마이크로프론트엔드
Nx를 활용해 모노레포에서 마이크로프론트엔드를 구축하는 방법을 소개했습니다. 빌드타임 통합과 런타임 통합을 예시 코드로 비교하며 Nx의 장점을 설명했습니다.
#Nx#모노레포
126005분
대규모 프론트엔드 아키텍처의 새로운 패러다임 - Part 2. 모듈 페더레이션 PoC
모듈 페더레이션 PoC로 Next.js 기반 마이크로프론트엔드의 런타임 통합 방식을 살펴보았습니다. 다만 원격 모듈 설정 자동화와 타입 안전성, SSR 구현 난이도는 추가 해결이 필요했습니다.
#Module Federation#micro frontend
123005분
Next.js 프로젝트의 정적 파일 배포 환경 구성
Next.js 정적 파일을 개발·운영으로 분리하고 CI/CD로 자동 배포하는 구성을 소개했습니다. 변경된 파일만 rsync와 Purge로 처리해 캐시 비용과 운영 부담을 줄였습니다.
#Next.js#CI/CD
22005분