필터 1
단 한 줄로 전환하는 다크 테마 - Variables 기반 디자인 토큰 자동화
라포랩스
프론트엔드

단 한 줄로 전환하는 다크 테마 - Variables 기반 디자인 토큰 자동화

Figma Variables와 CSS Variables를 연결해 디자인 토큰을 자동화한 사례를 소개했습니다. data-theme 속성만으로 다크 테마와 브랜드 테마를 단순 전환하도록 구성했습니다.

#Figma#CSS
15005분
네이버 D2
프론트엔드

FE News 25년 5월 소식을 전해드립니다!

FE 뉴스 25년 5월 소식과 주요 프론트엔드 기술 동향을 소개했습니다. React Compiler RC, 최신 JavaScript 기능, LLM-first Web Framework 사례를 함께 다뤘습니다.

#React#JavaScript
296005분
신세계백화점 PC 메인 React 전환기
SSG.COM
프론트엔드

신세계백화점 PC 메인 React 전환기

신세계백화점 PC 메인 페이지를 Spring에서 React와 Next.js 기반으로 전환했습니다.\n초기 로딩, 인피니트 스크롤, SEO까지 함께 고려해 사용자 경험과 유지보수성을 개선했습니다.

#React#Next.js
243005분
마이리얼트립 SSR 최적화
마이리얼트립
프론트엔드

마이리얼트립 SSR 최적화

SSR 도입 후 발생한 중복 API 호출과 성능 저하의 원인을 분석하고 구조를 개선한 사례를 다뤘습니다. queryKey 통일, 캐시 설정, 메서드 선택으로 FCP와 LCP를 크게 개선했습니다.

#Next.js#React
71005분
LY Corporation의 프런트엔드 기술 동향을 알아보자! State of LY Frontend 2024 실시 보고서
라인
프론트엔드

LY Corporation의 프런트엔드 기술 동향을 알아보자! State of LY Frontend 2024 실시 보고서

LY Corporation 프런트엔드 조직의 2024년 기술 설문 결과를 정리했습니다. React, Next.js, Jest, Tailwind CSS와 함께 Vite, Vitest 전환 흐름도 확인했습니다.

#JavaScript#React
122005분
우아한 형제들
프론트엔드

디자인 생산성을 높이는 피그마 플러그인을 만들어보자 2부: 개발 편

피그마 플러그인으로 실제 데이터를 디자인 시안에 적용하는 구조와 구현 과정을 정리했습니다. 샌드박스, CORS, 라우팅 제약을 우회한 방법과 로그 수집 개선 사례도 소개했습니다.

#Figma#React
85005분
Amazon Q Developer CLI를 통한 쉽고 빠른 에이전트 코딩 실습
AWS
AI

Amazon Q Developer CLI를 통한 쉽고 빠른 에이전트 코딩 실습

Amazon Q Developer CLI의 새로운 에이전트 기능으로 자연어 지시만으로 앱 생성과 수정, AWS 리소스 탐색까지 수행하는 흐름을 소개했습니다. CLI에서 멀티턴 대화와 로컬 도구 활용이 가능해져 개발 작업을 더 빠르게 처리할 수 있음을 보여줬습니다.

#AWS#CLI
50005분
코드 한 줄로 경험하는 React 동시성의 마법
리멤버
프론트엔드

코드 한 줄로 경험하는 React 동시성의 마법

React 18 동시성 렌더링과 Lane 모델로 입력 지연 문제를 줄이는 방법을 설명했습니다. useTransition과 useDeferredValue를 통해 무거운 렌더링을 분리한 실제 적용 사례도 소개했습니다.

#React#동시성
264005분
11키티즈 게임에서 XState를 선택한 이유
11번가
프론트엔드

11키티즈 게임에서 XState를 선택한 이유

11키티즈 게임에서 XState를 선택한 이유를 상태 관리와 자동 진행 관점에서 설명했습니다. 복잡한 게임 로직을 명확하게 분리하고 유지보수성을 높이는 점을 강조했습니다.

#XState#React
47005분
토스 프론트엔드에 이력서 없이 리포지토리 링크로 지원하세요 (~4/30)
토스
기타

토스 프론트엔드에 이력서 없이 리포지토리 링크로 지원하세요 (~4/30)

토스 프론트엔드가 이력서 없이 공개 GitHub 리포지토리 링크로 지원받는 전형을 열었습니다. 코드 품질, TypeScript, UX, 협업 방식 중심으로 평가했습니다.

#TypeScript#React
154005분
NPM Library 를 직접 배포하여 오픈소스 개발자가 되어보는 경험
데보션
프론트엔드

NPM Library 를 직접 배포하여 오픈소스 개발자가 되어보는 경험

오픈소스에 기여하는 방법으로 직접 NPM 라이브러리를 만들어 배포하는 과정을 소개했습니다. React 컴포넌트 예시와 함께 npm publish, 버전 관리, 재배포 절차를 설명했습니다.

#NPM#React
143005분
왜 왓챠 웹은 Remix로 마이그레이션했을까?
watcha
프론트엔드

왜 왓챠 웹은 Remix로 마이그레이션했을까?

왓챠 웹이 기존 react + express 구조에서 Remix로 마이그레이션한 이유와 과정을 정리했습니다. 점진적 전환, 라우팅 분기, 컴포넌트 분리와 같은 운영 전략도 함께 공유했습니다.

#Remix#React
330005분