2024 프론트엔드 뉴스 한 방에 몰아 보기
2024년 프론트엔드 생태계에서 주목할 만한 뉴스와 도구를 분야별로 정리했습니다. React, Next.js, 런타임, 패키지 매니저의 주요 변화와 실무 적용 포인트를 함께 살펴봤습니다.
#React#Next.js
35005분
필터 1
@use-funnel 개발기 #2: 기존 라이브러리를 어떻게 뜯어 고칠 것인가?
기존 퍼널 라이브러리의 Next.js 의존성과 상태 관리 한계를 개선한 구현 과정을 소개했습니다. core 분리, 타입 안전성 강화, Render 확장으로 다양한 라우터와 복잡한 퍼널을 지원했습니다.
#TypeScript#React
23005분
제7회 데보션(DEVOCEAN) 테크 데이 영상 및 발표자료 공유
제7회 데보션 테크 데이의 영상과 발표자료를 공유했습니다. OpenLab 2기 스터디 성과를 Web3, AI, 프론트엔드, 클라우드 등 다양한 주제로 소개했습니다.
#세미나#React
15005분
AI 코딩 도구 개발 결과 비교\:\ Cursor, Windsurf, Aider
Cursor, Windsurf, Aider로 Todo 앱을 구현한 결과를 비교했습니다. 각 도구의 속도, 완성도, 사용 방식 차이를 함께 살펴봤습니다.
#Cursor#Windsurf
37005분
@use-funnel 개발기 #1: 왜 기존 라이브러리를 두고 새로 만들었나?
복잡한 퍼널의 상태 관리와 뒤로가기 문제를 해결하기 위해 `@use-funnel`을 새로 만들었습니다. 사내 요구사항을 모아 코어와 라우터별 구현으로 나누고 오픈소스로 공개했습니다.
#React#오픈소스
40005분
해외파트너센터 개발 오픈기 — 2. 이메일 인증 공통 서비스 개발 이야기
해외 파트너센터에서 국내 휴대폰 인증 한계를 해결하기 위해 이메일 인증 공통 서비스를 도입했습니다. 별도 도메인과 인증 흐름을 분리해 계정 관리 절차를 연결했습니다.
#React#Next.js
29005분
개발 속도와 품질 높이는 테스트 코드 도입 후기
프론트엔드 어드민 프로젝트에 테스트 코드를 소규모로 도입한 과정을 공유했습니다. 리팩토링 안정성과 개발 속도, 품질 보증 측면의 효과도 함께 정리했습니다.
#test#Jest
42005분
올리브영 서비스에 사용되는 컴포넌트를 모아놓은 그곳!
올리브영 서비스용 디자인 시스템을 Storybook과 Emotion으로 구축한 과정을 소개했습니다. 전역 스타일, 상태별 컴포넌트 문서화, 패키지 배포와 서비스 적용 방법을 다뤘습니다.
#React#TypeScript
32005분
‘Teleport 공식 기술 문서 한글판 by 인포그랩’을 소개합니다
Teleport 공식 기술 문서 700여 개를 GPT-4o-mini로 한글 번역한 서비스와 기능을 소개했습니다. 사람과 AI 협업, MDX 형식 대응, 비용 절감과 접근성 향상도 함께 정리했습니다.
#Teleport#LLM
14005분
검색 서비스에서 좋은 품질의 코드를 찾는 은하수 항해 기록
검색 서비스 프런트엔드에서 검색 결과 UI를 큐레이션하는 경험을 공유했습니다. PC와 모바일 코드 통합, 리스팅과 컬렉션 구조를 중심으로 좋은 코드의 기준을 고민했습니다.
#UI/UX#React
13005분
안전한 로그인 토큰 관리, 프론트엔드의 필수 전략
프론트엔드 토큰 인증에서 Web Storage와 직접 토큰 주입 방식의 위험성을 짚었습니다. 쿠키 기반 관리와 토큰 로테이션으로 보안을 높이는 방법을 소개했습니다.
#React#Next.js
24005분
React 전역 상태 관리, 무슨 라이브러리 써야 할까? \:\ Redux, Zustand 특징과 장단점 비교
React 전역 상태 관리가 필요한 이유와 Context API의 한계를 먼저 설명했습니다. 이어서 Redux와 Zustand의 특징, 장단점을 비교해 선택 기준을 정리했습니다.
#React#Redux
41005분