Velopers
모든 블로그
올리브영

올리브영

도메인oliveyoung.tech
주요 카테고리 백엔드 · 프론트엔드

활동 요약

대표 인기 포스트개발자가 알면 좋은 Redis 꿀팁 모음622 조회
최근 30일
2개
평균 조회
89
누적 조회
19,202
전체 글
215개
마지막 발행
2026. 10. 29.
블로그 방문

올리브영 기술 블로그 글 (58)

프론트엔드

useInfiniteQuery로 무한스크롤 구현하기

무한스크롤은 `useInfiniteQuery`와 `useInView`로 구현했습니다. 뒤로가기는 세션 스토리지와 QueryClient 캐시로 상품 목록과 스크롤을 복원했습니다.

#Next.js#React#react-query
5600

프론트엔드

올리브영 잡 챌린지! 프론트엔드 개발자로의 전환

올리브영 잡 챌린지를 통해 프론트엔드 직무로 전환한 경험과 W CARE 스쿼드에서의 실무 적응 과정을 공유했습니다. 구조도 작성, React 훅 활용, 컴포넌트 분리로 서비스 이해와 유지보수성을 높인 점이 핵심입니다.

#React#Next.js#CSS
2700

프론트엔드

B2B 물류 스쿼드 백오피스 프론트엔드 성능 개선

신규 백오피스의 SPA 성능 저하를 코드 스플리팅, Nginx 압축, 정적 캐싱으로 개선했습니다. 브라우저 API 캐싱과 Vuex를 함께 사용해 로딩 시간과 중복 호출을 줄였습니다.

#Vuex#AWS#Webpack
3400

프론트엔드

새 배송지 추가 form 개발하기

배송지 추가 form을 만들며 상태, Context, ref, React Hook Form을 비교했습니다. 최종적으로 재렌더링과 관리 복잡도를 줄이기 위해 React Hook Form을 선택했습니다.

#Next.js#React Hook Form#Context API
3400

프론트엔드

온라인몰 성능개선을 위한 FE 개발자의 고민 part-1

온라인몰 성능 개선을 위해 Infinite Scroll로 렌더링 범위를 줄인 사례를 다뤘습니다. 초기 로딩 속도와 스크롤 체감 성능이 개선됐습니다.

#React#성능#브라우저 렌더링
3700

프론트엔드

우리 애자일 해볼까? (with 라이브스쿼드)

올리브영 라이브 스쿼드의 애자일 협업 방식과 역할 분담, 그리고 라이브관 개선 과정을 소개했습니다. Daily scrum과 회고를 유연하게 운영하며 사용자 편의와 피드백 반영을 강화하고 있습니다.

#agile#스크럼#UI/UX
5400

프론트엔드

NEXT.JS의 이미지 최적화는 어떻게 동작하는가?

Next.js의 이미지 최적화가 요청 시점에 어떻게 동작하는지 정리했습니다. 캐시 재사용, 포맷 선택, sharp와 Squoosh 성능 차이까지 살펴봤습니다.

#Next.js#이미지 최적화#sharp
3900

프론트엔드

iOS ReactorKit 톺아보기

ReactorKit을 iOS 앱에 도입한 이유와 핵심 구조를 설명했습니다. 단방향 상태 흐름과 RxSwift 활용 팁으로 실무 적용 포인트를 정리했습니다.

#iOS#ReactorKit#RxSwift
2300

프론트엔드

라이브관 프론트엔드 입장에서 바라보기

올리브영 라이브관을 신규 아키텍처와 SSR 기반으로 전환한 프론트엔드 경험을 공유했습니다. 이미지·영상 최적화와 공통 코드 관리, 크로스 브라우징 대응 방향도 함께 정리했습니다.

#Next.js#TypeScript#SSR
4200

프론트엔드

Android Kotlin StateFlow 도입기

Kotlin Flow와 StateFlow를 도입한 경험을 바탕으로 LiveData의 한계와 대체 가능성을 정리했습니다. 클린 아키텍처와 생명주기 대응 관점에서 Flow 활용 방법도 살펴봤습니다.

#Android#Kotlin#StateFlow
3200

프론트엔드

올영라이브 템플릿화

올영라이브 이벤트 페이지를 반복 제작 부담을 줄이기 위해 모듈형 템플릿으로 전환한 사례를 소개했습니다. 고정 정보와 변경 요소를 분리해 등록만으로 페이지를 만들 수 있도록 구성했습니다.

#템플릿#module#UI/UX
4400

프론트엔드

플래닝 포커(Planning Poker)

플래닝 포커로 스프린트 일정을 산정하며 동료들의 경험과 의견을 공유받은 경험을 소개했습니다. 일정 산정 시에는 버퍼를 두고 큰 틀의 영향도 함께 고려하자는 인사이트를 전했습니다.

#agile#planning poker#스프린트
2300

프론트엔드

올리브영 메인페이지 성능 개선기

온라인몰 메인페이지의 초기 렌더링 지연과 느린 LCP 문제를 분석하고, 불필요한 지연 로직 제거와 탭 렌더링 순서 조정으로 개선했습니다. 또한 데이터 분리와 모니터링을 통해 FID, LCP, 로딩 타임을 함께 줄였습니다.

#성능#웹#모니터링
4200

프론트엔드

올리브영 테크블로그 Gatsby 전환&개발기

Jekyll 기술 블로그를 Gatsby 기반으로 전환한 배경과 설계·배포 과정을 정리했습니다. React 구조와 Plugin, Netlify로 개발·운영 편의성과 SEO를 강화했습니다.

#Gatsby#React#TypeScript
12200

프론트엔드

웹사이트 최적화 방법 - 이미지 파트

이커머스 웹사이트의 이미지 요청과 로딩 지연을 줄이는 포맷·압축 전략을 설명했습니다. 반응형 이미지, 지연 로딩, CDN 캐시, 스프라이트 활용법을 소개합니다.

#이미지 최적화#WebP#AVIF
4300

프론트엔드

앱 버전 관리하기

안드로이드의 versionCode와 versionName 역할, 시맨틱 버저닝 적용 방식을 설명했습니다. build type·flavor 조합 시 버전 표시와 Variant 증가에 따른 주의점을 정리했습니다.

#Android#semantic versioning#Gradle
5700

프론트엔드

All New Android 12

Android 12의 Material You, 위젯·알림 디자인, 개인정보 보호 기능을 정리했습니다. 시스템 성능 개선과 접근성 기능 강화 내용도 함께 소개합니다.

#Android#Material You#UI/UX
2200

프론트엔드

올리브영 기술 블로그에는 누가, 얼마나 방문했을까?

기술 블로그 방문자 분석을 위해 Google Analytics를 도입한 배경과 장점을 소개했습니다. 계정 생성부터 gtag.js를 Header에 삽입하는 적용 과정을 안내합니다.

#Google Analytics#gtag.js#웹 분석
2300