프론트엔드 기술 블로그 최신 글

NEW FEATURE

기술을 읽던 곳에서, 다음 기회를 만나세요.

채용 검색부터 관심사 기반 추천, 내 적합도까지.

필터 0
선택된 필터 없음
@use-funnel 개발기 #2: 기존 라이브러리를 어떻게 뜯어 고칠 것인가?
토스
프론트엔드

@use-funnel 개발기 #2: 기존 라이브러리를 어떻게 뜯어 고칠 것인가?

기존 퍼널 라이브러리의 Next.js 의존성과 상태 관리 한계를 개선한 구현 과정을 소개했습니다. core 분리, 타입 안전성 강화, Render 확장으로 다양한 라우터와 복잡한 퍼널을 지원했습니다.

#TypeScript#React
3100
첫 탐색만큼 중요한 재탐색 경험 개선
여기어때
프론트엔드

첫 탐색만큼 중요한 재탐색 경험 개선

고객의 재탐색 행동 데이터를 바탕으로 검색 결과 페이지의 날짜 변경 흐름을 단순화했습니다. 진입점을 분리하고 모듈을 바로 열리게 해 탐색 편의성을 높였습니다.

#UX/UX#검색
3000
프론트엔드팀의 디자인 시스템 재구축기
카카오스타일
프론트엔드

프론트엔드팀의 디자인 시스템 재구축기

여러 지면에서 따로 관리되던 상품 카드 컴포넌트를 일원화할 필요가 있었습니다. 단순 리팩토링을 넘어 디자인 시스템 재구축으로 통합 관리 기반을 마련했습니다.

#UI/UX#컴포넌트
5900
스플래시 화면을 활용한 홈화면 백화현상 개선하기
여기어때
프론트엔드

스플래시 화면을 활용한 홈화면 백화현상 개선하기

스플래시 화면으로 홈 화면 로딩 중 빈 화면 노출을 줄이고 백화현상을 개선했습니다. 또한 온보딩 플로우를 단순화해 첫 진입 경험을 더 자연스럽게 만들었습니다.

#iOS#RxSwift
4300
앱과 웹의 연결고리 : 여기어때 통합 WebView 구축기
여기어때
프론트엔드

앱과 웹의 연결고리 : 여기어때 통합 WebView 구축기

여기어때 앱에서 웹뷰를 통합한 과정과 연동 방식을 정리한 글입니다. 파편화된 브릿지 규격을 하나로 묶어 유지보수와 협업 효율을 높인 사례를 소개했습니다.

#Android#WebView
4700
TurboRepo Just-in-Time Packages 적용기 Feat. ModuleResolution
카카오엔터테인먼트FE
프론트엔드

TurboRepo Just-in-Time Packages 적용기 Feat. ModuleResolution

Turborepo JIT Packages로 공통 패키지 소스를 빌드 없이 참조하는 방식을 소개했습니다. TypeScript 모듈 해석과 Next.js 설정 충돌을 분석하고 해결 과정을 정리했습니다.

#Turborepo#TypeScript
000
복잡한 웹 페이지도 개발자 없이 만드는 웹 빌더 “에디터” 개발기 (2)
캐치테이블
프론트엔드

복잡한 웹 페이지도 개발자 없이 만드는 웹 빌더 “에디터” 개발기 (2)

에디터로 긴급 프로모션 페이지를 빠르게 만들고 반복 수정까지 운영한 개선 사례를 소개했습니다.이미지 업로드와 알림 기능을 다듬으며, 에디터의 활용 범위를 가설 검증 도구로 넓히려 했습니다.

#웹 빌더#AWS S3
7200
@use-funnel 개발기 #1: 왜 기존 라이브러리를 두고 새로 만들었나?
토스
프론트엔드

@use-funnel 개발기 #1: 왜 기존 라이브러리를 두고 새로 만들었나?

복잡한 퍼널의 상태 관리와 뒤로가기 문제를 해결하기 위해 `@use-funnel`을 새로 만들었습니다. 사내 요구사항을 모아 코어와 라우터별 구현으로 나누고 오픈소스로 공개했습니다.

#React#오픈소스
5200
해외숙소 홈 개편기
여기어때
프론트엔드

해외숙소 홈 개편기

해외숙소 홈을 웹에서 네이티브로 개편하며 성능과 사용성을 개선했습니다. 또한 State 관리와 탭 전환 응답 처리 문제를 분리·정리해 유지보수성을 높였습니다.

#iOS#RxSwift
3300
UIKit 환경에서 SwiftUI 적용기: 여기어때 Home 화면 편
여기어때
프론트엔드

UIKit 환경에서 SwiftUI 적용기: 여기어때 Home 화면 편

UIKit 기반 홈 화면을 SwiftUI로 전환한 적용 과정을 공유했습니다. 기존 ReactorKit과 CMS 구조를 유지하면서 생명주기 브리지와 모델 모듈화를 활용했습니다.

#SwiftUI#UIKit
3600
해외파트너센터 개발 오픈기- 3.글로벌 대응을 위한 다국어 처리 작업
여기어때
프론트엔드

해외파트너센터 개발 오픈기- 3.글로벌 대응을 위한 다국어 처리 작업

해외 파트너 센터에 다국어 처리를 적용한 과정과 i18next 선택 이유를 정리했습니다. Next.js 환경에서의 언어 감지, JSON 관리 방식, 유지보수 포인트도 함께 공유했습니다.

#i18next#react-i18next
12600
ts-pattern을 이용하여 코드 가독성 올려보기(feat. 분기처리)
현대자동차그룹
프론트엔드

ts-pattern을 이용하여 코드 가독성 올려보기(feat. 분기처리)

ts-pattern 라이브러리를 소개하며 복잡한 분기 처리를 더 읽기 쉽게 만드는 방법을 다뤘습니다. 패턴 매칭을 활용해 코드 가독성을 높이는 방향을 설명했습니다.

#TypeScript
2600
해외파트너센터 개발 오픈기 — 1. 이중 도메인에대한 접근 처리
여기어때
프론트엔드

해외파트너센터 개발 오픈기 — 1. 이중 도메인에대한 접근 처리

국내 파트너센터 레포지토리 안에서 해외 파트너센터를 빠르게 오픈한 과정을 다루었습니다. Next.js Middleware와 `isOversea` 상태로 도메인과 화면을 분기해 유지보수성을 높였습니다.

#Next.js#Recoil
3000
FE News 24년 12월 마지막 소식을 전해드립니다!
네이버 D2
프론트엔드

FE News 24년 12월 마지막 소식을 전해드립니다!

FE News 24년 12월 프런트엔드 소식을 정리한 큐레이션 글입니다. 설문 보고서, Web AI, Next.js self-hosting, 밋업 공개 소식을 담았습니다.

#Next.js#LLM
2900