XState 도입기: 복잡한 여행 플랜 상태 관리를 단순화한 방법
여행 플랜처럼 단계가 많고 분기 있는 흐름을 XState 상태 머신으로 정리한 도입기였습니다. React 상태 관리보다 전이 로직을 한곳에 모아 유지 보수와 협업을 쉽게 만든 사례였습니다.
#XState#React
108005분
필터 1
이구위크 회고
29CM 이구위크의 프론트엔드 구현과 회고를 정리했습니다. 공통 컴포넌트로 큐레이션을 빠르게 만들고 배너 개선, QA, 협업 문서화로 운영 효율을 높였습니다.
#React#컴포넌트
122005분
단 한 줄로 전환하는 다크 테마 - Variables 기반 디자인 토큰 자동화
Figma Variables와 CSS Variables를 연결해 디자인 토큰을 자동화한 사례를 소개했습니다. data-theme 속성만으로 다크 테마와 브랜드 테마를 단순 전환하도록 구성했습니다.
#Figma#CSS
11005분
FE News 25년 5월 소식을 전해드립니다!
FE News 25년 5월 소식을 전해드립니다!
FE 뉴스 25년 5월 소식과 주요 프론트엔드 기술 동향을 소개했습니다. React Compiler RC, 최신 JavaScript 기능, LLM-first Web Framework 사례를 함께 다뤘습니다.
#React#JavaScript
296005분
신세계백화점 PC 메인 React 전환기
신세계백화점 PC 메인 페이지를 Spring에서 React와 Next.js 기반으로 전환했습니다.\n초기 로딩, 인피니트 스크롤, SEO까지 함께 고려해 사용자 경험과 유지보수성을 개선했습니다.
#React#Next.js
241005분
마이리얼트립 SSR 최적화
SSR 도입 후 발생한 중복 API 호출과 성능 저하의 원인을 분석하고 구조를 개선한 사례를 다뤘습니다. queryKey 통일, 캐시 설정, 메서드 선택으로 FCP와 LCP를 크게 개선했습니다.
#Next.js#React
65005분
LY Corporation의 프런트엔드 기술 동향을 알아보자! State of LY Frontend 2024 실시 보고서
LY Corporation 프런트엔드 조직의 2024년 기술 설문 결과를 정리했습니다. React, Next.js, Jest, Tailwind CSS와 함께 Vite, Vitest 전환 흐름도 확인했습니다.
#JavaScript#React
118005분
디자인 생산성을 높이는 피그마 플러그인을 만들어보자 2부: 개발 편
디자인 생산성을 높이는 피그마 플러그인을 만들어보자 2부: 개발 편
피그마 플러그인으로 실제 데이터를 디자인 시안에 적용하는 구조와 구현 과정을 정리했습니다. 샌드박스, CORS, 라우팅 제약을 우회한 방법과 로그 수집 개선 사례도 소개했습니다.
#Figma#React
80005분
Amazon Q Developer CLI를 통한 쉽고 빠른 에이전트 코딩 실습
Amazon Q Developer CLI의 새로운 에이전트 기능으로 자연어 지시만으로 앱 생성과 수정, AWS 리소스 탐색까지 수행하는 흐름을 소개했습니다. CLI에서 멀티턴 대화와 로컬 도구 활용이 가능해져 개발 작업을 더 빠르게 처리할 수 있음을 보여줬습니다.
#AWS#CLI
50005분
코드 한 줄로 경험하는 React 동시성의 마법
React 18 동시성 렌더링과 Lane 모델로 입력 지연 문제를 줄이는 방법을 설명했습니다. useTransition과 useDeferredValue를 통해 무거운 렌더링을 분리한 실제 적용 사례도 소개했습니다.
#React#동시성
263005분
11키티즈 게임에서 XState를 선택한 이유
11키티즈 게임에서 XState를 선택한 이유를 상태 관리와 자동 진행 관점에서 설명했습니다. 복잡한 게임 로직을 명확하게 분리하고 유지보수성을 높이는 점을 강조했습니다.
#XState#React
41005분
토스 프론트엔드에 이력서 없이 리포지토리 링크로 지원하세요 (~4/30)
토스 프론트엔드가 이력서 없이 공개 GitHub 리포지토리 링크로 지원받는 전형을 열었습니다. 코드 품질, TypeScript, UX, 협업 방식 중심으로 평가했습니다.
#TypeScript#React
151005분