프레임워크에 구애받지 않는 통합 백오피스 구축하기
React, Vue, JSP가 섞인 백오피스에서 공통 화면을 웹 컴포넌트로 통합한 사례를 소개했습니다. 부모 시스템의 인증과 자원을 공유하면서도 CDN 독립 배포와 스타일 격리를 구현했습니다.
#Vue.js#React#JSP
29400
모든 블로그
대표 인기 포스트개발자가 알면 좋은 Redis 꿀팁 모음622 조회622 조회 프론트엔드 프론트엔드
프론트엔드
프론트엔드
프론트엔드
프론트엔드
프론트엔드
프론트엔드
프론트엔드
프론트엔드
프론트엔드
프론트엔드
프론트엔드
프론트엔드
프론트엔드
프론트엔드
프론트엔드
프론트엔드
올리브영
주요 카테고리 백엔드 · 프론트엔드
활동 요약
- 최근 30일
- 2개
- 평균 조회
- 89
- 누적 조회
- 19,202
- 전체 글
- 215개
- 마지막 발행
- 2026. 10. 29.
올리브영 기술 블로그 글 (58)
매장을 찾는 과정을 설계한 올영매장 고도화 여정
올영매장은 매장 정보를 보여주는 기능에서 고객의 행동을 이끄는 탐색 공간으로 고도화했습니다. 콘텐츠와 픽업 대시보드를 통해 방문 이유와 다음 행동을 더 선명하게 설계했습니다.
#UI/UX#O2O#옴니채널
12500
올리브영 타입스크립트로 알아보는 제네릭과 매개변수 다형성
제네릭과 매개변수 다형성으로 서로 다른 타입에 같은 로직을 재사용하는 방법을 설명했습니다. 타입 추론, 제네릭 제약, 변성까지 함께 살펴보며 실무 활용 예시를 정리했습니다.
#TypeScript#제네릭#다형성
21900
올리브영 타입스크립트로 알아보는 제네릭과 매개변수 다형성
제네릭으로 타입을 추상화해 서로 다른 도메인의 로직을 하나로 묶는 방법을 설명했습니다. 또한 변성과 유틸리티 타입을 통해 타입 안전성과 실용성의 균형을 살펴보았습니다.
#TypeScript#generics#variance
15100
한 기기에 개발·운영 앱을 동시에 설치하는 방법: 올리브영 DEV/PROD 환경 분리
개발 앱과 운영 앱을 한 기기에 동시에 설치하도록 환경을 완전히 분리했습니다. Android는 Product Flavor, iOS는 xcconfig와 CI/CD로 배포 리스크를 줄였습니다.
#Android#iOS#CI/CD
9100
iframe으로 웹앱 통합했더니 토큰 요청이 폭발했다
iframe 통합 환경에서 postMessage로 토큰을 안전하게 주고받는 인증 시스템을 구축했습니다. 동시 요청과 401 에러를 Promise 공유, 큐, 쿨다운으로 제어하고 보안도 강화했습니다.
#iframe#postMessage#Promise
15700
대규모 프론트엔드 아키텍처의 새로운 패러다임 - Part 3. Nx를 활용한 마이크로프론트엔드
Nx를 활용해 모노레포에서 마이크로프론트엔드를 구축하는 방법을 소개했습니다. 빌드타임 통합과 런타임 통합을 예시 코드로 비교하며 Nx의 장점을 설명했습니다.
#Nx#모노레포#마이크로프론트엔드
13400
대규모 프론트엔드 아키텍처의 새로운 패러다임 - Part 2. 모듈 페더레이션 PoC
모듈 페더레이션 PoC로 Next.js 기반 마이크로프론트엔드의 런타임 통합 방식을 살펴보았습니다. 다만 원격 모듈 설정 자동화와 타입 안전성, SSR 구현 난이도는 추가 해결이 필요했습니다.
#Module Federation#micro frontend#Next.js
13100
하이브리드 앱에 구축하는 iOS 개발자모드
하이브리드 iOS 앱에 개발자모드와 WebView 디버깅 도구를 SwiftUI로 구축한 사례를 소개했습니다. 프로토콜과 DI로 로컬 플래그를 분리해 운영 리스크를 줄이고 생산성을 높였습니다.
#iOS#SwiftUI#WebView
6200
SDUI로 네이티브 운영 민첩성 높이기
네이티브 앱의 배포 지연을 줄이기 위해 SDUI를 설계하고 도입한 과정을 정리했습니다. 서버 스키마 기반 화면 구성과 성능 최적화, 롤백 전략까지 함께 다뤘습니다.
#Android#iOS#web
12800
"이 버튼 왜 안 눌려요?" 물류 현장의 목소리로 PDA 시스템 완성하기
물류 현장 PDA의 제약을 웹과 PWA로 개선한 사례를 다뤘습니다. 스캐너 연동, 화면 최적화, 키패드 이슈 해결로 작업 효율을 높였습니다.
#PWA#웹#UI/UX
13500
올리브영, 블록 기반 CMS로 콘텐츠 제작 시간을 99% 줄이다
올리브영은 블록 기반 CMS로 콘텐츠 제작 시간을 7일에서 20분으로 줄였습니다. Vue 프로토타입 이후 Lit 웹 컴포넌트로 전환해 재사용성과 확장성도 높였습니다.
#Vue.js#Lit#CMS
16100
Visual Studio Code를 Cursor처럼? Amazon Q로 AI 코딩 환경 업그레이드하기
Visual Studio Code에서 Amazon Q와 MCP, Rule을 활용해 Cursor 같은 AI 코딩 환경을 구성하는 방법을 소개했습니다. 자동 승인과 메모리 뱅크로 사용성과 정확도를 함께 높이는 흐름을 설명했습니다.
#Visual Studio Code#Cursor#Amazon Q
27200
프론트엔드 개발자를 위한 5가지 스크롤 복구 시나리오와 실전 코드 팁
SPA 환경에서 스크롤 복구가 어려운 이유와 상황별 해결 방법을 정리했습니다. React Query, 무한 스크롤, 가상화 리스트에서의 실전 팁도 함께 소개했습니다.
#React#React Query#Infinite Scroll
22500
대규모 프론트엔드 아키텍처의 새로운 패러다임 - Part 1. 마이크로프론트엔드 너 뭐야?
마이크로프론트엔드의 개념과 통합 방식, 장단점을 정리했습니다.팀 구조와 성능 요구를 함께 고려해 도입 여부를 판단해야 한다고 설명했습니다.
#마이크로프론트엔드#MSA#Module Federation
23900
HLS 기반 숏폼 스트리밍 구현기: iOS/Android 호환성 대응 사례
숏폼 스트리밍 도입 과정에서 HLS(M3U8)를 채택하고 업로드·변환 파이프라인을 자동화했습니다. iOS와 Android 호환성 이슈도 플랫폼별 재생과 톤 조정으로 해결했습니다.
#iOS#Android#HLS
11900
Web Worker로 이미지 처리 최적화하기
모바일 이미지 처리에서 메인 스레드 부하와 메모리 과다 사용 문제를 분석했습니다. Web Worker와 OffscreenCanvas로 전처리를 분리해 반응성과 처리 시간을 개선했습니다.
#Web Worker#OffscreenCanvas#JavaScript
31100
iOS 개발자를 위한 DocC 실무 튜토리얼
DocC를 활용한 iOS 문서화 실무 흐름과 배포 방법을 정리했습니다. 코드와 문서를 동기화해 협업 비용을 줄이는 효과도 소개했습니다.
#iOS#DocC#Swift
11800