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

NEW FEATURE

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

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

필터 0
선택된 필터 없음
상품 조회 25% 향상시킨 온스타일 상세페이지 개편 비하인드
CJ온스타일
프론트엔드

상품 조회 25% 향상시킨 온스타일 상세페이지 개편 비하인드

온스타일 상품 상세페이지를 정보 구조와 개발 프레임워크까지 함께 개편했습니다. 그 결과 고객당 조회 페이지 수가 25% 늘고 클릭과 주문 지표도 개선했습니다.

#Vue.js#backbone.js
3900
코드, 어떻게 관리하세요?
네이버 페이
프론트엔드

코드, 어떻게 관리하세요?

모노레포로 서비스 레포와 패키지 레포를 통합한 경험을 공유했습니다. turborepo, Changesets, GitHub Actions로 빌드와 배포를 자동화하고 불편한 점도 함께 개선했습니다.

#모노레포#turborepo
7300
쏘카플랜 개편기
쏘카
프론트엔드

쏘카플랜 개편기

쏘카플랜 개편의 촉박한 일정과 QA 이슈 대응 경험을 정리했습니다. 조기 추상화보다 안정화 후 리팩토링과 점진적 개선을 제안합니다.

#React#Next.js
000
쏘카플랜 개편기
쏘카
프론트엔드

쏘카플랜 개편기

쏘카플랜 개편 과정에서 프론트엔드 일정 추정과 QA 대응, 레거시 개선 경험을 정리했습니다. 코로케이션과 WET 원칙으로 복잡한 화면과 도메인 로직을 단계적으로 분리했습니다.

#React#Next.js
4200
플랫폼 팀 없는 오픈 소스 기반의 디자인 시스템 구축 회고
인프런
프론트엔드

플랫폼 팀 없는 오픈 소스 기반의 디자인 시스템 구축 회고

전담 플랫폼 팀 없이 Mantine 기반 디자인 시스템을 구축·운영한 과정을 정리했습니다. 패키징, 버전 관리, 문서화와 협업 체계로 생산성과 UI 일관성을 높였습니다.

#React#Mantine
000
인프런 콘텐츠에 동적으로 생성되는 Open Graph(OG) 이미지 적용하기
인프런
프론트엔드

인프런 콘텐츠에 동적으로 생성되는 Open Graph(OG) 이미지 적용하기

동적 OG 이미지와 CloudFront 캐싱으로 SNS 링크 미리보기 품질과 응답 속도를 개선했습니다. sharp 전환과 satori 폰트 캐시 최적화로 이미지 생성 처리량을 35RPS까지 높였습니다.

#Next.js#Open Graph
000
Install flutter in jetson nano orin
무스마
프론트엔드

Install flutter in jetson nano orin

Jetson Nano Orin에서 Flutter를 설치하는 명령어와 환경 설정을 정리했습니다. Chromium 대체, Ubuntu 버전별 libstdc++ 패키지 차이, 생략 가능한 항목도 함께 안내했습니다.

#Flutter#Linux
900
Flutter linux 초 미세 팁
무스마
프론트엔드

Flutter linux 초 미세 팁

Flutter Linux에서 debug와 release의 asset 경로 차이와 빌드 모드 구분 방법을 정리했습니다. GTK 창 크기와 fullscreen 설정 예시도 함께 소개했습니다.

#Flutter#Linux
900
Execution Context
넥스트리
프론트엔드

Execution Context

실행 컨텍스트를 통해 자바스크립트의 스코프, 호이스팅, this 바인딩을 설명했습니다. 콜스택과 환경 레코드 흐름을 이해하면 디버깅과 코드 해석에 도움이 됩니다.

#JavaScript#비동기
2300
다나와 Kotlin을 만나다!
다나와
프론트엔드

다나와 Kotlin을 만나다!

다나와에서 Kotlin을 도입한 배경과 활용 사례를 소개했습니다. Java 호환성과 간결한 문법 덕분에 스터디와 마이그레이션에 적용했습니다.

#Kotlin#Java
3400
카카오헤어샵에 Compose 적용하기 - xml 에서 Compose 로 가는 여정길
카카오헤어샵
프론트엔드

카카오헤어샵에 Compose 적용하기 - xml 에서 Compose 로 가는 여정길

카카오헤어샵 Android 앱에 Jetpack Compose를 적용한 사례를 소개합니다. 기존 XML 기반 UI에서 선언형 UI로 전환한 과정을 다룹니다.

#Android#Compose
3000
Flutter 전환의 마침표 - 일본 1위 배달 앱, 세 번째 Recode
라인
프론트엔드

Flutter 전환의 마침표 - 일본 1위 배달 앱, 세 번째 Recode

일본 배달 앱 ConsumerApp을 React Native에서 Flutter로 전환한 사례를 공유했습니다. PoC, 병렬 개발, 단계적 QA와 배포를 통해 기술 통합과 운영 개선을 이끌었습니다.

#Flutter#React Native
3400
내자산: 마이데이터 자산 조회
네이버 페이
프론트엔드

내자산: 마이데이터 자산 조회

네이버페이 내자산의 마이데이터 자산 조회를 단계적으로 개선한 과정을 소개했습니다. 캐시 선노출, 병렬 요청, WebSocket 적용으로 응답성과 사용자 경험을 높였습니다.

#WebSocket#Socket.IO
4600
Next.js에서 MSW(Mock Service Worker)로 네트워크 Mocking하기
올리브영
프론트엔드

Next.js에서 MSW(Mock Service Worker)로 네트워크 Mocking하기

Next.js 전환 과정에서 단위 테스트와 API Mocking의 중복·관리 문제를 해결하기 위해 MSW 도입을 검토했습니다. 브라우저와 SSR 환경의 URL 차이를 보정하는 클라이언트를 만들어 프록시 이슈에 대응했습니다.

#Next.js#MSW
3900