앞 글에서 리뷰 사진을 탭해서 크게 보기까지 실제 사용자 기준 p50 1.7초가 걸리고, 그중 1.3초가 애니메이션이라는 것을 찾았다. 이 과제의 기준은 세 단계였다. 대부분의 사용자가 지금 어떤 경험을 하는지 숫자로 잰다. 확대에 걸리는 시간을 지금보다 50% 줄인다. (가능하면) 매출에 미친 효과를 잰다. 이 글은 개선을 배포하기...

쇼핑몰의 상품 상세 페이지(스마트폰)에는 리뷰 목록이 있고, 리뷰에 붙은 사진을 탭하면 크게 볼 수 있다. 그런데 탭하고 나서 사진이 뜨기까지 로딩 스피너가 한동안 돈다. 리뷰는 구매를 정할 때 많이 보는 정보라서, 팀은 “리뷰 사진 확대를 빠르게 해서 고객의 구매 결정을 방해하지 않는다”를 과제로 잡았다. 기준은 두 단계였다. 대부분의 사용자...

My 도수 화면을 옮긴 글에서, 사용자에게 공개하는 일은 마지막 단계의 “CloudFront 경로 전환” 하나로 정해진다고 적었다. 화면과 API 연동은 7~8월에 이미 운영 환경에 배포했지만, 사용자는 그동안 계속 기존 PHP 화면을 보고 있었다. 그 경로 전환을 두 번 했다. 날짜 전환한 경로 ...

CloudFront 캐시 글에서 리뷰어 프로필 이미지를 바꿔도 이전 이미지가 계속 보이던 문제를 다뤘다. 그때는 기존 쇼핑몰(PHP) 화면이었고, CloudFront 캐시 키에 v를 넣어서 해결했다. 그 뒤 같은 화면을 Next.js로 옮겼다(프로필 편집 API 연동, 실데이터 연결). 그런데 Next.js 화면에서 같은 증상이 또 나왔다. 아이콘을...

공통 컴포넌트 글에서 만든 리뷰어 프로필 화면은 고정 목업(reviewerReviewsMock)을 보여 주고 있었다. 이번에는 실제 API에 연결했다. 요구 사항은 두 줄이었다. 로그인한 상태에서 자기 프로필만 볼 수 있다 API로 가져온 내용을 보여 준다 목업을 실데이터로 바꾸는 일은 “가짜 값을 진짜 값으로 갈아 끼우는 것”쯤으로 생...

회사 서비스에서 리뷰어 프로필 이미지를 바꿔도 이전 이미지가 계속 보이는 문제가 있었다. 이미지 URL에 ?v= 파라미터를 붙여서 캐시를 피하도록 만들어 두었는데, 왜 동작하지 않았는지 정리해 둔다. 문제 상황 프로필 편집 화면에서 이미지를 변경하면 업로드는 성공한다 (API 응답 204) 그런데 화면에는 변경 전 이미지가 그대로 표시된다...

앞 글에서 리뷰어 프로필 편집 화면을 모양까지만 만들었다. 이번에는 실제로 저장되게 했다. 바꿀 수 있는 건 닉네임과 프로필 아이콘(이미지) 두 가지다. 요구 사항은 두 줄이었다. 리뷰어 정보를 수정할 수 있다 자기 리뷰어 정보만 수정할 수 있다 저장 버튼 하나를 붙이는 일이었는데, 리뷰를 거치며 생각보다 많은 걸 배웠다. 닉네임 20자...

My 도수 화면에 이어, 마이페이지의 리뷰어 프로필 화면을 PHP 쇼핑몰에서 Next.js로 옮겼다. 내가 쓴 리뷰 목록을 보는 화면과, 닉네임·아이콘을 바꾸는 편집 화면이다. 리뷰 데이터를 다루는 백엔드는 이미 PHP에서 떨어져 나와 있었고, 화면만 남아 있었다. 그런데 쇼핑몰에는 리뷰어의 리뷰를 보여 주는 화면이 하나 더 있다. 상품 상세에서 리...

회사 쇼핑몰은 오래된 PHP 애플리케이션(EC-CUBE 기반) 위에서 돌아가고, 화면을 하나씩 Next.js로 옮기는 중이다. 마이페이지 첫 화면처럼 이미 옮긴 화면도 있다. Next.js 연수를 마치고 처음 맡은 실무가 마이페이지의 My 도수 화면을 옮기는 일이었다. 사용자가 왼쪽·오른쪽 렌즈 도수를 등록해 두면, 상품을 살 때 도수가 자동으로 선...

백엔드(Spring Boot)를 주로 하다가, 프론트엔드 업무에 들어가기 전에 Next.js 연수를 받았다. 목표는 “기본적인 태스크를 받으면 Next.js로 구현해서 형태로 만들 수 있는 상태”였고, 과제는 공개 API인 PokeAPI로 포켓몬 도감을 만드는 것이었다. 진행 방식은 실제 업무와 같았다. 요구 사항을 PBI(백로그 항목) 단위로 받고...