쇼핑몰- 상품등록 페이지 리팩토링

1년 전 프로젝트를 열어보다.

쇼핑몰 프로젝트를 했던 옛날 프로젝트를 열었다. 지금은 데이터도 없고 껍데기뿐인 프로젝트라서 한 번 리팩토링을 해보자는 생각으로 출발했고, 이제 제일 먼저 해야되는 것은 상품을 보이게 해야하는 거니까 상품을 등록할 수 있는 화면을 만들어야했다. 이전 상품등록 페이지는 아래와 같다. 간단하게 만들어진 페이지다. 개인적으로 쇼핑몰을 만들었던 적이 있으니 이게 얼마나 간략화된 페이지인지 알고있다. 그래서 조금이나마 지금보다는 나은 상태로 만들어 보고자 했다.

일단 UI 부터

나는 쇼핑몰에서 상품을 업로드했던 경험이 있기에 어떤 것들이 필요한지 대충은 알고 있었다.

1. 상품명
2. 카테고리
3. 옵션 및 옵션별 이미지, 옵션별 추가금액
4. 상세페이지 등록
5. 가격

일단은 위 항목이 기본의 기본인 것들이다. 그래서 지금 만든 겉표지는 아래와 같다.

크게 달라진건 없지만, 난 백엔드니까 ><,,,

1. 상세페이지 등록 ( SUMMERNOTE TextEditor )
   상세페이지의 경우 보통 이미 포토샵, 미리캔버스 등으로 이미지파일을 만들어서 사용하는 경우가 많다. 그렇기 때문에 굳이 여러 편집을 제공하는 에디터를 사용할 필요가 따로 없으며, 실제로 네이버 스마트스토어에서 물건을 팔더라도 대개 상세페이지는 따로 만든다. 아마 SEO 때문에 텍스트를 넣을것 같다는 예상이 가긴 하지만 그런 부분은 이런 텍스트 에디터로도 충분하다.
2. 이외의 것들은 필요한 것들만 추가했고, 천천히 기능을 입혀나갈 생각이다.

이미지 저장

이전에는 팀원이 서버에 직접 저장하는 방식으로 서버를 구현했다. 나는 다른 방식을 사용하려고 한다. 리액트 강의를 수강하면서 알게된 API인데 Cloudinary이다. cloudinary는 이미지, 비디오 등등을 저장하고 고유 url을 만들어주는 API이다. 당연하겠지만, 데이터로 요청을 보내고 내 계정에 해당하는 저장소에 해당 이미지가 등록되는 방식이다.
리액트에서 사용했던 방식은 프론트에서 바로 요청을 보내서 저장하는 거였는데 이번엔 내가 서버에서 해보려고 한다.

서버에서 처리하는 이유
1. 쇼핑몰의 경우 해당 쇼핑몰마다 규격이 다르다. 각각 제한되는 사이즈가 있고, 용량이 있다. 물론 이런 부분을 front에서 처리할 수 있겠지만, 내 생각은 서버에서 처리하는게 더 안정성 있겠다고 생각했다.
2. 나는 백엔드 개발자이기 때문에 서버에서 직접 외부 API를 호출하는 방식의 설계를 해보고 싶었다. 별거 아니지만, 그래도 좋은 경험이라고 생각했다.

https://cloudinary.com/

cloudinary의 장점

cloudinary는 이미지를 업로드할 때 원하는 규격과 필터, 회전 등의 효과를 줄 수 있다. 앞에서 말했듯 이미지의 규격이 맞지 않을 경우 쇼핑몰에서 원할할 노출이 힘들 수 있기 때문에 우리가 설정한 규격에 맞게 조절할 수 있다는 점과 cdn서버이기 때문에 우리 서버에 대한 리소스IO를 줄일 수 있다는 장점이 있다.

1. 이미지를 업로드하면 설정한 규격으로 조절할 수 있다.
2. 사이즈 조절 및 필터 회전 등의 효과를 코드로 설정할 수 있다.
3. cdn서버이기 때문에 비교적 내 서버의 부하가 줄어든다.

다음엔 Cloudinary를 spring-boot 서버에 적용한 내용을 포스팅 해야겠다.