본문 바로가기

프로젝트

[JavaScript] 엘리스트랙 1차 - 웹 쇼핑몰 만들기

결과물

237655160-b975d804-5844-4b5b-bbfd-93055f5ebcc3.mp4
3.05MB

티켓원잇! 바로가기

프로젝트 소개

프로젝트 주제

  • 온라인 티켓 구매 서비스 쇼핑몰

프로젝트명

  • 티켓원잇!(Ticket Wantit!)

제작 기간 

  • 2023.04.17 - 2023.04.28 (12일)

팀 구성

  • 담당포지션 : 팀장, 프론트엔드
  • Frontend(3명) : 윤우정, 김윤중, 이성호
  • Backend(3명) : 유하영, 이민영, 정혜린

기술스택

 

프론트엔드, 백엔드 기술스택
협업툴

구현기능과 목표

목표
쇼핑몰의 최소 기본 구현사항은 꼭 완성해보기


구현기능 + 페이지별 기능정리

  • 회원가입, 로그인, 회원정보 수정 및 탈퇴 등 사용자 관련 CRUD (로그인페이지, 회원가입페이지, 마이페이지)


  • 제품 관련 CRUD, 주문 관련 CRUD (메인페이지, 상품목록, 상품상세, 장바구니, 주문페이지)


  • 관리자 (관리자페이지)


내가 맡은 역할

메인페이지

  • 메인페이지 레이아웃
  • Swiper를 이용한 상단 이미지 배너
  • MD's Recommends / New Arrivals API를 이용한 추천상품, 인기상품 노출
  • Header 레이아웃 
  • Footer 레이아웃 

상품 목록, 상품 상세

  • 상품목록페이지 레이아웃
  • 카테고리별 API 통신

관리자 전체

  • 주문조회 API를 통해 주문리스트 생성
  • 주문삭제기능, 주문상태(주문완료 - 배송중 - 배송완료) 상태 변경기능
  • 상품조회 API를 통해 전체상품리스트 생성
  • 상품추가, 상품수정, 상품삭제 기능
  • 카테고리 API를 이용한 추가, 수정, 삭제기능 

1차 팀프로젝트 후기 😎

 

프로젝트 중 발생한 이슈 및 해결

관리자 페이지 - 상품조회 카테고리에서 상품등록과 수정 둘 다 goods_edit.html이라는 같은 페이지를 공유하는데,

상품 추가는 되는데 상품 수정은 안되는 기묘한 오류가 있었다. 같은페이지를 담당하는 벡엔드분과 오류를 찾아보니 이미지 등록시 벡엔드에서 multer라는 이미지 저장 라이브러리를 사용할 때, multer자체가 formData로 이미지의 url뿐아니라 데이터가 담긴 파일객체 전체를 보내줘야 한다는걸 알게되었다. 그래서 원래는 상품등록과 수정 둘 다 formData로 데이터를 보내주던걸 상품수정일시에는 조금 독특하게

이미지를 제외한 나머지 데이터는 goodsUpdateApi 객체형태로 보내고, 이미지경로만 formData형식으로 보내도록 수정을 해놨다.

(이거 동작할때 눈물 좔좔났다.....)

 

소감

기획의 중요성

프로젝트를 시작하기 전에 우리는 깃 컨벤션 메세지 + 코드 컨벤션과 간단히 필수미팅날짜만 정해놓고 작업을 시작했다. 초반회의에서 기본적인 레이아웃을 피그마로 그려놓긴 했지만 막상 프로젝트 마감일에 다가오니 레이아웃에 혼선이 오거나 기능면에서 프론트와 벡엔드가 생각했던 요소가 다른점이 있었다. 다음 프로젝트에서는 기능요소등의 부분을 정확히 합의하고 넘어가고, 또한 상세일정까지 맞춰놓고 작업하면 더 좋을것같다고 느꼈다.

 

협업의 중요성 + 팀장이란?

프로젝트를 진행하면서 오히려 프론트간의 교류보다는 백엔드와의 소통이 훨씬 많아서 놀랐다.
백엔드와 통신으로 넘어오는 데이터를 어떤 형태로 받을 수 있는지 , 나는 어떻게 요청을 해야 하는지 , 내가 어떤 정보들을 담아서 백엔드에게 전송을 해야 하는지 등 맞춰야 할 것들이 한두 가지가 아니었다. 그리고 이 과정에서 프론트가 좀 더 일처리를 해야 할 때도, 아니면 백엔드에서 더 무언가의 과정을 처리해야만 진행이 될 때도 있었다. 이런 과정마다 필요했던 대화들이 좋은 코드와 좋은 사이트를 만든다는것을 한번 더 깨닫게 되었다.

팀장을 맡으면서 부담감이 없었다고 한다면 거짓말이겠지만, 팀원들이 개개인이 정말 열정맨들이고 오류가 생기면 바로바로 도와주는 분위기여서 바쁜2주동안 오히려 부담감이 점점 줄어들고 재밌게 개발을 할 수 있었다. (담당해주신 코치님이 우리팀은 첫주에 걱정이 많이됐는데 이렇게 완성도 높은 결과물을 내와서 대단하다고 했을때 뿌듯했다.)
끝으로 2주동안 쇼핑몰의 기본기능은 무조건 완성하자를 목표를 달성한게 너무 뿌듯한것 같다. 그 과정이 힘들었지만 모두가 게더타운에서 모여 새벽까지 모여서 작업하면서 팀 분위기를 높여주었다. 그리고 현재 프로젝트에 만족하지 않고 추가로 2주정도 더 리팩토링을 진행하기로 했다. 고생한 팀원들에게 진심으로 감사의 인사를 드리고 싶다.