[코딩온] 웹 풀스택 영등포 5기 과정_프로젝트 회고록

안녕하세요

3차 프로젝트를 끝내고 돌아왔습니다.

 

저희의 이번 프로젝트 포인트는 [ AI, Next.js ] 입니다.

제가 ai를 조금이라도 도입하길 원해서,,,쫄랐었구요 ㅎㅎ,,,,

 

그리고 next.js는 저희가 많은 인원에 페이지도 많지 않아서,

툴이 어렵더라도 도전해볼만 하지 않을까 싶어 겁없이 도전하였습니다.

 

Next.js는 SPA인 React와 다른 SSR이 있어서 이 부분을 살리기 위해 노력을 좀 하였습니다.

저희는 사용자에게 일기처럼 정보를 입력받아서 AI를 통해 결과를 내보이는 작업이

메인이기 때문에 사실 SSR과 완벽히 맞는 프로젝트는 아니었던 것 같습니다.

그래두,,, 해봤으니까 안맞구나 느낀 것이지 않을까,,,

 

제가 했던 작업페이지와 다사다난했던 트러블 슈팅까지 써보도록 하겠습니다.

 

0. 작업 페이지

 

1) my-shop 페이지

이 페이지는 사용자 별로 퍼스널한 물건을 추천하는 페이지입니다.

사용자별로 다르기때문에 profile 내의 간이 페이지처럼 있으며,  Naver Shopping API를 사용하여 추천하고 있습니다.

1. profile 내 my-shop 상점 페이지

 

Naver 요청 날리는 코드

 

여러개의 Shopping API를 사용해보려고 검색을 많이 해봤는데, (쿠팡, 티몬 등)

저희 알고리즘을 고려하여 여러 페이지에서 검색해본 결과

검색 쿼리를 가장 유연하게 사용할 수 있는 쇼핑 페이지가 단연 네이버가 체감 1등이었습니다.

 

네이버 검색 쿼리를 사용자별로 다르게 하고 싶어서 나름 알고리즘(?)도 적용하였습니다.

 

이렇게 되면 회원가입 때 받았던 성별과 나이, 그리고 사용자의 최근 기분을 API로 받아와서

검색 쿼리를 사용자별로 다르게 생성합니다.

 

그리고 Naver Shopping API 검색 쿼리 옵션 중에

sort(정렬 기준) 쿼리와 start (검색 시작 위치)를 통해 같은 사용자의 상태값이더라도

시간이 다르다면 늘 새로운 옵션으로 업데이트한 효과를 볼 수 있었습니다.

 

---

2) account 페이지

회원 정보 수정 페이지입니다.

2. 회원정보 수정 페이지

 

회원가입 시 자동으로 부여되는 닉네임이랑 비밀번호는 변경하지 못하도록 하였습니다.

사용자의 아이디와 연령, 나이를 바꿀 수 있도록 하였습니다.

 

 

---

 

1. 트러블 슈팅

1) 새로고침 시 profile 페이지 내 메뉴바 유지 안됨

    >>>> 메뉴바에서 useState로 초기값을 profile 페이지의 기본 페이지로 지정함

    >>>> 새로고침할 시 사용자가 선택했던 profile 메뉴바의 선택값이 초기화 되어서 페이지와 일치하지 않음

    >>>> 헤더처럼 상주하는 컴포넌트가 아니라, profile 페이지에서만 상주하는 특성 때문에 초기화되는 점이 불편했음

 

! How to fix

저희는 유저의 로그인 상태값을 Recoil과 Recoil persistAtom을 통해 관리를 하고 있었습니다.

Recoil에 사용자가 현재 프로필 페이지 내에서 몇 번째 메뉴바 아이콘을 선택했는지

저장하고 관리하도록 하였습니다.

 

그리고 프로필 페이지를 아예 벗어나서,

다른 페이지로 이동할 때 헤더에서 Recoil 상태를 초기화 하도록 하여

다시 프로필 페이지를 들어갔을 때 초기화된 프로필 페이지와 메뉴바를 만날 수 있도록 하였습니다.

 

문제의 영상

수정 후

 

 

---

 

2) Naver Shopping API Cors error

 >>>> Naver Shopping API에서 request URL이 직접 호출되어 Cors error가 남

 

하,,,,,,404,,,,

 

! How to fix

Proxy라는 것을 난 생 처음 사용해보았는데요, Next.js의 14버전에서는

Cors error로 Proxy로 URL을 우회할 때 next.config.js에서 rewrite로 뚫었습니다!

next.config.js

 

source에 내가 우회해서 사용할 url을 작성하고 { :path* } 를 달면

destination을 통해 api 요청을 날리게 됩니다.

이렇게 사용하면 하위 path를 잘 달고 API 요청을 대신 날리게 됩니다.

 

 

 

3) 아이폰 safari에서 svg 깨짐 현상

아이폰에서 safari로 열게 되면 SVG가 픽셀이 깨지는 현상이 일어났습니다.....

찾아보니 오래전부터 있었던 iphone svg blurry 라는 오래묵은 이슈인 듯합니다.

 

수정 전 - error 페이지

 

! How to fix

일단, 도움이 되었는지 모르나, svg 내의 width와 height를 %로 변경하였다. viewport도 변경함

그리고 next.js 공식 문서에 webp확장자를 권한다고 되어있어서, svg를 webp확장자로 변경함

 

수정 후

 

 

 

끝 -----------------