미니 프로젝트 - 웹사이트 클론 코딩(다노 샵)

개요

• 프로젝트 주제: 클론 코딩
• 개발인원 4명 (프론트엔드: 노유진, 여지영 / 백엔드: 윤현동, 최재성)
• 개발 기간: 2021.04.02 ~ 2021.04.08
• 리펙토링 진행 2021.05.17 ~ 2021.05.21(1주일) (프론트: 노유진 / 백엔드: 김남석)
• 클라이언트: React, 서버: spring-boot 사용
• 형상관리 툴: git

프로젝트 특징

• 본 프로젝트는 팀 프로젝트로 특정 웹사이트(다노샵)를 선정하여 클론코딩을 진행함
• UI 부분은 styled-components, material-ui, react-bootstrap(캐러셀)을 사용
• 컴포넌트 구성: 컴포넌트는 중간단위 및 페이지 단위로 구성했으며 디렉토리로 구분함
• 주요 기능: 로그인, 회원가입, 회원정보 수정 및 탈퇴, 장바구니 추가, 삭제, 조회, 주문내역 추가, 조회, 상품 조회 등
• 페이지 단위 컴포넌트 구성: 메인, 회원가입, 로그인, 마이페이지, 회원정보 수정, 제품 상세, 전체 제품, 인기 상품, 신상품, 다노제품, 알뜰상품, 무료배송, 다노샵 소개, 장바구니, 구매내역, 준비중 페이지
• DB구성(간단하게 표현)
• user: {email, nickName, password, email, phone}
• product: {productId, imageUrl, title, price}
• cart: {cartId, imageUrl, title, price, amount}
• order: {productId, imageUrl, title, price, amount}

상태관리 패키지

• react-redux, redux (+ redux-actions, immer 사용)
• redux-middleware(redux-thunk)
• react-router-dom
• 클라이언트-서버 통신: axios 사용

담당 업무

뷰: 풋터를 제외한 전체 부분 담당

기능구현: 클라이언트 전체 부분 담당(로그인, 회원가입, 회원정보 수정 및 탈퇴, 상품 조회, 장바구니 기능, 제품 구매 기능 등 

 

후기

이번주는 팀 프로젝트로 클라이언트 2명 서버 2명으로 나포함 4명이서 진행을 했다. 처음 서버분들이랑 협업을해서 진행을 한 프로젝트로 정말 재미있게 프로젝트를 진행한 것 같다. 클라-서버 통신에 대해 개념을 익힐 수 있는 경험을 했으며 클론코딩을 하면서 뷰를 최대한 똑같이 만들어야 한다는 점에서 css나 html구조를 다시 한번 더 생각하게된 계기가 된것도 있다. 또한 협업 시 소통과 협업 관리 툴이 정말 중요하다는 점도 배우게 된 것 같다. 내가 뷰를 그리고 있는 동안 서버분들이 통신에 필요한 api에 대해 얘기를 하자고 했을때 아직 api부분을 자세히 생각해 보지 않았기 때문에 버벅이게 되는 경험을 첫날에 잠깐 했었다. 이후 문제점을 파악한 뒤 api부분이나 프로젝트에 대해서 구체적인 소통을 주기적으로 나눴으며 구글 스프레드 시트를 활용해 전체적인 흐름을 정리하여 프로젝트 진행이 원활하게 흘러갔었다. 이 부분에서 소통의 중요성을 배웠다. 지금까지 여러 프로젝트를 진행하면서 CRUD구현이 꽤 익숙해진걸 보아 약 40일 동안 많이 성장한 것 같아 뿌듯했으며 남은 미니프로젝트와 실전 프로젝트를 통해 더욱 발전을 하고 싶다.

아쉬웠던점: 유저 부분에서 기능구현하는데 있어 고유 id값을 보내주시지 않아 유저id를 이용해 처리한 부분(이 부분은 그래도 primary id가 존재하면 바꿀 수 있기 때문에 + 유저 id 자체도 중복된 값은 받지 않으므로 인지하고 넘어갔다. 아쉽..), 서버분들도 그렇고 나도 그렇고 클라-서버 통신이 처음이기도 하고 개념적 부분이 많이 부족한 것도 사실인것 같다. 프로젝트가 끝나고 jwt토큰방식 로그인에 대해 개념을 다시 학습했지만 실제로 옳바른 방식으로 해봐야지 이게 맞다는걸 알듯하다.(로그인 기능을 여러번 경험하면 확실히 개념이 잡힐듯하다!) 그 밖에는 전체적으로 소통이 원활하게 된것 같아 재밌게 개발을 했던것 같다. + 복습을 하면서 알게된 점이지만 장바구니에 담기는 것을 서버랑 통신이 아닌 세선같은 곳에 저장하는 방식도 많이 쓰는 것 같아 이 부분도 기회가 있으면 진행해보고 싶다.

 

(+ 2021/05/21 타입스크립트로 변환 및 서버 전환 리펙토링 작업)

기존 프로젝트에서 효율적이지 못한 api 통신방식을 변경했으며 자바스크립트로 작성한 프로젝트를 타입스크립트로 변환하여 작업했다.

처음으로 타입스크립트를 사용해봐서 제대로 사용하는건가 싶을 정도 였지만 몇번 더 사용해보면 감이 잡힐 것 같다.

 

페이지 구성 및 API 설계 (2021/05/21 수정)

https://documenter.getpostman.com/view/15605965/TzRYbPMN

Dano

github url: https://github.com/noh-yj/ts-danoclone

noh-yj/ts-danoclone

웹 사이트 url: http://hanghae99danoclone.shop.s3-website.ap-northeast-2.amazonaws.com/

항해99 | 다노 샵 클론코딩

유튜브 url: www.youtube.com/watch?v=MMWfqYu-sW8

클론코딩 페이지 소개 영상