0. 들어가며

마냥 길 것만 같았던 4주간의 인턴생활도 어느덧 끝이 났다.

아무것도 모른 채 헤헤헤 뽑혔다 하면서 들어간 인썸니아 사무실에는
좋은 동료들, 좋은 사수들을 비롯해 근무환경이 거의 완벽하게 갖춰져 있었고
딱 한가지 유난히 부족했던건 내 실력이었다.

좋은 환경 덕분에 한 달동안 내 실력을 키우는 것 단 한가지에만 오롯이 집중할 수 있었고,
처음에는 와 이걸 내가 진짜 해낼 수 있을까 눈 앞이 캄캄했던 프로젝트 과제를
어찌어찌 무사히 끝낼 수 있었다 ( 물론 몇 차례 기능적 타협이 필요했지만 ).

첫 프로젝트때 로그인 하나 구현 못해서 며칠을 밤새 쩔쩔 매던걸 생각하면
이렇게 결과물을 냈다는게 감개가 무량하고, 시도때도 없이 맥북들고 쫄래쫄래 옆에 붙어서
이것저것 물어봐도 항상 친절하게 설명해주고 같이 고민해주고 했던 동료들한테 고맙고 그렇다.

아, 모모스커피에서 상품이미지 많이 가져다 썼는데 월급받으면 많이 사먹어서 보답해야겠다.

---

1. 프로젝트 개괄

🔥 Repo

Front - https://github.com/Monocrom1018/ShoppingMall-Client
Back - https://github.com/Monocrom1018/ShoppingMall-Server

🔥 기간

2021/3/31 - 2021/4/23  (4주)

🔥 기획

1. 개인별 프로젝트, Full-Stack 포지션
2. React, Framework 7, Tailwind CSS, NodeJS 를 활용한 쇼핑몰 앱 구현
3. 주요기능 - 카테고리, 검색, 카트, 찜, 결제, 리뷰, 최근본상품, 회원정보관리 등
4. 주안점 - 많은 기능보다 깔끔하고 예쁜 UI, 앱환경을 고려한 UX, 코드 가독성, 
 	  일목요연한 코드설명, 마감시간 엄수

---

2. 기술스택

---

3. 주요 기능

(1) Intro Page

☑︎ 카테고리 & 스크롤 시 위아래 툴바 숨기기

☑︎ 상품 검색 ( 상품명 또는 키워드로 가능 )

(2) Detail Page

☑︎ 로그인 요구 ( 주문내역, 마이페이지, 찜하기, 장바구니 담기 시 )

☑︎ 찜하기 ( Recoil 을 사용한 전역상태관리 )

☑︎ 리뷰보기 ( 아코디언 디자인 & 별점 오름차순・내림차순 )

(3) Shopping Cart

☑︎ 장바구니 담기 ( 옵션 및 갯수 조절, Recoil 전역상태관리 )

(4) Order List

☑︎ 결제하기 ( DB 회원정보 연동, 카카오 PostCode API )

☑︎ 리뷰쓰기 & 수정하기 ( react-star-rating-component 사용해 별점부여 )

(5) MyPage

☑︎ 최근에 본 상품 ( 스와이퍼 디자인, 최대 5개까지 실시간 업데이트 )

☑︎ 회원정보 수정 ( Formik, Yup )

☑︎ 로그아웃 & 회원탈퇴 ( 로그아웃 시 컨펌, 회원탈퇴 시 패스워드 확인 )

☑︎ 회원가입 ( 카카오 PostCode API, Formik, Yup )

---

4. 시행착오와 해결과정

• 시행착오 A
  Framework7 을 처음 사용해 보았는데, 많이 쓰이는 프레임워크가 아니라서 공개된 레퍼런스 등이 거의 없어 영문 공식문서만으로 앱 구조, UI를 만들어야 하는 상황에 직면했습니다. 어떤 기능들이 있는건지, 어떻게 사용하면 되는건지 혼란스러운 상태에서 기능개발을 시작해야 해 어려움을 겪었습니다.

• 해결과정 A
  퇴근시간 후 인턴 동료들과의 공식문서 스터디를 통해 이해도를 높이고, 해당 프레임워크를 사용해 본 인썸니아 현직 개발자분들께 적극적으로 도움을 요청해 여러 피드백을 받았습니다. 개인과제였지만 서로 도움을 주고받으며 앱 완성도를 높여나갔다는 점에서 협업을 경험할 수 있었습니다.
  
  

• 시행착오 B
  2주차 마지막 코드 프레젠테이션에서 UX 측면에 대한 지적을 받았는데, 기능 구현에만 집중하다보니 사용자가 앱을 어떻게 받아들일 것인지에 대한 고민을 크게 하지 않았어서 어딜 어떻게 고쳐나가야 할지 감이 잘 잡히지 않았습니다.

• 해결과정 B
  동료들과 서로의 앱을 사용해보면서 보완해야 할 점을 피드백해주고, 친구들에게도 잠깐 한번 사용해보고 이상한 부분이 있으면 얘기해달라고 부탁해 최대한 반영하였습니다. 예를 들어 상품리스트 화면에서 스크롤을 내리면 상단 네비와 하단 툴바가 숨겨져 상품리스트를 더 넓게 볼 수 있게 하고, 로그인이 필요한 시점이 될 때까지 로그인 요구를 하지 않게 하는 등의 반영을 할 수 있었습니다.