[1차 프로젝트] 회고

안정현·2021년 5월 23일
0
post-thumbnail

1차 프로젝트 : 가구 전문 이커머스 플랫폼[이케아(IKEA)] 를 모티브로 한 팀 프로젝트

📦 프로젝트 팀 : WIKEA(위케아)

(1) 프로젝트 소개

  • 이케아는 인테리어 가구 및 소품을 판매하는 사이트로, 카테고리, 신제품, 가격, 색상 등에 따라 상품을 볼 수 있는 필터 기능을 제공

(2) 프로젝트 기간 : 2021.05.10. ~ 2021.05.21. (2주)

(3) 프로젝트 계획

  • 1주차 Sprint : 전체 레이아웃 구현 및 컴포넌트화
  • 2주차 Sprint : 컴포넌트 별 기능 구현, 프론트와 백엔드 간 API 통신, conflict 해결 등

(4) 프로젝트 팀원 (👩‍💻github)

(5) 적용기술

  • Front-end : React, React Router, Sass, JavaScript, CSS3, HTML5
  • Back-end : Python, Django web framework, Bcrypt, My SQL, pyjwt
  • Common : Slack, Trello, GitHub, Git, RESTful API

(6) 필수 구현사항 💥

  • 🎈 로그인/회원가입 페이지 : 안정현
    • 로그인/회원가입 시, 입력 항목들에 대한 validation 로직(유효성 검증) 구현
    • 사용자 인증(Authentication) 완료에 따른, Local Storage에서의 access token(JSON Web Tokens) 관리

  • 🎈 메인 페이지 : 김예슬
    • 객체 매핑을 활용한 네비게이션 탭 기능
    • react-router를 사용한 동적 라우팅 (메인 -> 리스트 이동)

  • 🎈 리스트 페이지 : 김수연
    • List page layout
    • Product card Component 구현
    • 제품 평점 기준으로 별점을 보여주는 간단한 데이터 시각화 함수 구현
    • 클릭 이벤트 발생 시 각 버튼에 해당하는 필터된 데이터의 API 주소를 변경해 리랜더링해주는 필터 구현

  • 🎈 상세 페이지 : 노선경
    • 상세 페이지의 반응형 레이아웃 및 제품 상세이미지 Carousel 구현
    • path parameter를 이용한 메인 및 리스트 페이지와의 동적 라우팅
    • 제품 상세 데이터 API를 활용한 상세 정보 모달 구현
    • 반응형 및 스크롤 감지 공동 헤더(네브바) 구현

(7) 프로젝트 전체 시연 영상


🎄 0. 프로젝트 시작 전 다짐

  • 주로 자기주도 학습에 초점이 맞추어진 처음 한 달 동안,

  • Pre-course 2주 (HTML, CSS, JavaScript 이론 + 실습) 및 Foundation 2주 (React 이론 + 실습) 과정을 거치면서

  • 동기와 비교하지 않고 나만의 보폭으로 나아가는 것도 중요하지만,

  • 전체적인 커리큘럼에 맞춰 (1) 제 시간에 결과물을 내고 (2) 피드백을 받아 진도에 지장없이 해나가는 것 또한 중요함을 깨달음

  • 즉, 프로젝트는 팀원들과 같이하는 작업이므로, 내가 할 수 있는 부분막히는 부분에 대해 빠르게 판단하여

  • 부족하고 모르는 부분에 대해서는 기한을 정해두고 구글 검색 등을 통해 1차적으로 해결하고, 그 외에는 동기나 멘토님들께 조언을 구하는 형태를 취함으로써,

  • 프로젝트 일정에 차질이 없도록 진행하고자 함


🎯 1. 구현 사항

  • 로그인/회원가입 페이지 각각 3가지 기능 단위로 구분

1) 페이지 레이아웃

2) validation 로직 구현

* 로그인/회원가입 시 입력 항목들(이메일, 비밀번호, 이름, 휴대폰 번호 등)에 대한 중복 및 유효성 검증 조건 백엔드와 사전 협의

3) API 붙이기 (백엔드와 통신)

* fetch 함수 통해 백엔드에 요청할 key값 사전 협의 

(1) 로그인 페이지로 이동

  • 인증(Authentication)되지 않은 사용자가 로그인을 시도할 경우, 아이디나 비밀번호를 확인해주세요. 라는 알림창이 뜸

  • 사용자 인증을 위해 회원가입 버튼을 클릭, 회원가입 페이지로 이동


(2) 회원가입 페이지로 이동

  • 회원가입 항목 6가지 중 백엔드와 사전 협의를 통해
    • 성/이름/휴대폰/이메일 부분은 중복이 되지 않아야 하고
    • 이메일은 @와 . 를 비밀번호는 8자리 이상 이어야 한다는 validation 을 적용함
  • 휴대폰 번호 입력 부분에서는

    • 맨 앞에 0과 하이픈(‘-’) 을 포함하여 입력할 경우, onBlur 이벤트 를 통해, 맨 앞의 0과 하이픈(‘-’)을 자동 삭제하도록 함수를 적용함
  • 비밀번호 입력 후, 우측 자물쇠 버튼을 클릭시 비밀번호 숨김/표시 기능 추가

  • 위의 조건이 모두 만족할 경우, 가입하기 버튼 활성화


(3) 다시 로그인 페이지로 이동

  • 좀전에 회원가입한 사용자의 아이디와 비밀번호를 입력

  • 회원가입 페이지에서와 동일하게,

    • 아이디와 비밀번호에 동일한 validation 적용
  • 입력 조건이 만족할 경우, 로그인 버튼 활성화

  • 로그인 버튼 클릭 시,

    • 정상적으로 로그인이 되었다면, 백엔드로부터 access token 을 받아 localStorage 에 저장하고
    • 메인페이지로 이동하게 됨

🎁 2. 기억하고 싶은 로직/코드


config.js : API 주소 관리

  • 멘토 리뷰 사항 반영
    • fetch 함수에 들어가는 API 주소는 추후에 src/config.js 등에서 관리하면 좋음
    • API 주소를 변수로 지정하고 파일을 따로 분리하면 IP 주소가 바뀔 때 관리가 용이


(2) 회원가입 페이지 : 휴대폰 번호 형식 변경

  • 처음에 해당 로직 구현 방법을 찾아보다가 fetch 함수 내에서 split 메소드 등을 사용하는 방법을 생각했으나
  • 타 팀 팀원의 도움으로 onBlur 이벤트 를 사용한 함수 호출 방법이 더 합리적이라 판단되어 해당 방법으로 적용
  • - 을 포함하여 휴대폰 번호를 입력한 경우, onBlur 이벤트를 사용하여 휴대폰 번호 형식 변경하는 함수 호출


🎨 3. 프로젝트를 마치고...


(1) 프로젝트 시작 전,

  • 한 달 동안 배운 이론과 실습 부분에 대해 어디서부터 다시 복습을 하고 임해야 하나 싶어 걱정도 되고 막막 했으나,

  • 막상 프로젝트를 시작해 보니, 우선은 얕게 알고 넘어갔던 부분들에 대해 결국은 다시 되돌아가 공부하게 되고,

  • 나의 Bloker에 대한 팀원들의 조언과 도움으로 처음 한 달 동안 배운 것보다 단기간에 더 많이 배울 수 있었음

  • 모든 공부가 그렇듯 한 번에 100% 이해하고 넘어가는 것이 아니라, 처음엔 60~70% 수준에서 알고 넘어갔다가 실습해 나가면서 조금씩 부족한 부분을 채워나가는 것임을 깨달음


(2) 팀원 각자는

  • 에자일(Agile) 하게 매일 아침 Standup Meeting, Trello 관리, 멘토의 피드백 반영 등을 통해 (1) 어제 작업한 내용 (2) 오늘 작업할 내용 (3) Blocker에 대해 팀원들과 이야기 하긴 했으나,

  • 각자가 맡은 부분에 대해 얼마나 구현을 했는지 보여주기에 급급하지 않았나 생각됨

  • 전체적인 큰 흐름을 가져가면서 무엇을 놓치고 있는지, 어떤 흐름으로 가져가야 하는지 등을 고려하면서 진행했으면 하는 아쉬움이 남음


(3) 소통(communication)의 측면에서

  • 프론트의 작업을 고려하는 백엔드 & 백엔드의 작업을 고려하는 프론트 라는 생각은 있으나, 서로간의 과한 배려(?)로 인해 첫 번째 sprint(1주) 를 마칠 때 까지는 효과적인 의사소통이 어려웠던 것 같음

  • 소통을 한다는 것이 단순히 상대방의 말을 잘 들어주는 것이 아니라, 명확한 근거를 통한 적극적인 의견 전달/조율의 스킬이 필요함을 느낌


(4) 컴포넌트 재사용의 측면에서

  • 추후, 로그인/회원가입 페이지input 박스버튼 부분에 대해 리팩토링을 적용해 볼 수 있을 듯 함