[wecode] 1차 프로젝트 술담화 회고

yellowbutter·2022년 11월 28일
0

project

목록 보기
1/5
post-thumbnail

프로젝트 시연 영상 : 시연 영상 링크

1. OVERVIEW

위코드 1차 프로젝트

전통주 구매할 수 있는 이커머스 서비스인 "술담화"를 모델링한 프로젝트

📍 프로젝트 기간

2022.11.14~2022.11.25 (총 12일)

📍 모델링한 사이트 : 술담화
전통주를 구독, 구입할 수 있는 이커머스 사이트

📍 선정 이유 :
1) 깔끔한 UI로 보기 좋게 레이아웃을 잡고, 기능 구현에 중점을 두어 개발할 수 있다.
2) 커머스 사이트로써 기본적인 페이지 구성이 잘 되어 있다.

커머스 기능 위주로 작업하여 정기 구독 서비스 쇼핑몰에서
구독 기능을 제외하고 쇼핑 기능에 집중하여 작업하였다.

2. 팀원 구성 및 사용한 기술 스택

프로젝트명: Drunken Coders

📍 의미: '술담화'의 술을 넣고 싶었고 음주 후에도 개발을 하겠다는 의지를 담아 팀 이름을 짓게 되었다.

📍 4명의 프론트엔드 개발자(김건우,곽종범,안상준,조은혜) 3명의 백엔드(김수정,서재선,오현상)가 함께하였다.

front-end

React, SASS
◽ CRA(Create-React-App)을 통한 리액트 개발 환경 세팅
◽ 함수형 컴포넌트 사용
◽ ESLint, Prettier 설정

Back-end

Node.js, Express.js, MySQL
co-work
Github, Slack(소통), Trello(일정관리), Notion(회의록)

📍 다음과 같이 크게 세 파트로 나누어 회의를 진행하기로 계획했다.

  • planning Meeting
    매 주 월요일 한 주동안 진행해야 할 큰 목표를 계획하고 역할 분담을 한다.
  • Daily Standup Meeting
    매일 아침 팀원들이 정해진 시간에 모여 각자의 업무에 대해 공유한다.
  • Retrospective Meeting
    프로젝트가 끝난 후 회고한다.

💻 일정관리

📍 Trello를 사용하여 일정관리를 했다.

This sprint : 이번 주까지 해야할 일
In progress: 지금 진행 중인 작업
In Review: PR을 올리고 리뷰를 받고 있는 작업
Done: 리뷰까지 반영돼 merge 완료된 작업

3. 주요 기능 구현

프론트는 페이지별로 나눠 담당하였고, 나는 회원가입 / 로그인을 맡게 되었다.

✅ 회원가입 / 로그인
메인페이지
상품 리스트, 상품 상세, 리뷰
장바구니
Nav, Footer

4. 내가 맡은 기능 ✅

회원가입

  • 이메일 ( @, . 포함)
  • 비밀번호 (특수문자, 숫자, 영문 포함)
  • 닉네임 중복 검사

1.이메일과 비밀번호 유효성검사, 닉네임 중복 검사를 통해 회원가입을 한다.
2.모든 유효성검사와 닉네임 중복 검사, 필수 약관 체크박스가 클릭이 된 후에야 회원가입 버튼이 활성화 된다.
3. data.message를 통해 이미 가입된 이메일일경우 alert을 띄우고, 회원가입이 완료되었을 경우 회원가입 성공 alert을 띄우고 login 페이지로 이동한다.

📍 리팩토링 후 체크박스까지 선택을 해야 회원가입 버튼이 활성화 되게 수정하였다.

로그인>

  1. 로그인 유효성 검사를 진행하고 그에 따라 로그인 버튼 색상을 변경하여 로그인 가능 여부를 보여준다.
    2.fetch 함수를 사용해 존재하는 회원 정보인지를 확인하고 accessToken이 있으면 로그인에 로그인 성공했다는 alert과 함께 로컬스토리지에 토큰을 저장함과 동시에 메인페이지로 이동합니다. 실패하면 실패 메시지를 보여준다.
    3.map함수를 사용하여 3개의 소셜 로그인 버튼을 정렬하여 보여주었다.

5. 기억에 남는 코드

회원가입 기능 구현 중 유효성 검사를 진행할때 사용되는 정규 표현식을 변수로 선언하고 선언된 정규 표현식이 test메소드()를 통하여 조건에 만족하는지 판별하는 코드다.

최소 8자, 최대 16자
최소 1개의 알파벳(a-z, A-Z) 포함
최소 1개의 숫자(0-9) 포함
최소 1개의 특수문자( !@`~!@!%*#^?&()-_=+) 포함을 체크하였다.

삼항 연산자를 사용하여 isValid.useremail 값에 따라 클래스 이름을 동적으로 설정하였다.

isValid.useremail이 true이면 클래스 이름이 빈 문자열('')로 설정되며, false이면 'error' 클래스 이름으로 설정해 UI를 다르게 보여지게 했다.

삼항연산자를 알기 전에는 코드가 너무 길어지지 않을까 고민했는데,if-else 문보다 코드의 가독성이 좋아지고, 코드 길이가 짧아져서 코드 작성 시간을 단축시킬 수 있었다.

6. 성장 포인트 및 아쉬운 점

< 성장 포인트 >

📍 이커머스 사이트 구성요소에 대한 전반적인 이해

  • 기능 구현을 위해 구현해야할 기능들을 살펴보면서 이커머스 사이트의 필수 기능과 부가 기능에 대해 생각해보게 되었다. 또한, 유저가 사용하기 더 편하려면 어떤 것이 필요할까 생각해보는 시간을 가질 수 있었다.
  • 처음 홈페이지 접속 시간이 3초만 넘어가도 사용 유저 수가 급격하게 준다는 것을 듣고 단순히 보여지는 UI뿐만 아니라 성능 등에 대해서도 생각해보게 되었다. 개발자 입장과 유저 입장에서 동시에 생각해야 최적화된 사이트를 만들 수 있음을 느꼈다.

📍 팀원들과의 소통

  • 각자 하루에 목표한 기능 구현이 끝나면 다른 팀원의 기능 구현을 보고 질문하는 시간을 갖고 알려주는 시간을 갖기도 했다. 특히 나는 깃에 대한 이해가 부족하다고 느껴 상준님께 주말에 따로 깃에 대해 모르는 부분을 준비해서 질문했다. 상준님께서 감사하게도 1시간 가까이 알려주신 덕분에 이해를 할 수 있었다.

  • 매일 아침 stand up meeting을 진행하고 중간에 서로 공유하고 싶은 내용이 있다면 실시간으로 대화를 하거나 슬랙방에서 대화를 했던 것 같다.

📍 포기하지 않는 마음

  • 정해진 시간 안에 더 잘하고 싶은데 공부하고 싶고 알아야 할 것들이 많아 보여 완주할 수 있을까 불안한 마음이 있었다.

  • 불과 2주 전까지만 해도 회원가입, 로그인 페이지 레이아웃 구현하는 것에만 많은 시간이 걸렸던 것 같은데 이번 프로젝트에서 다시 한번 진행하다보니 비교적 쉽게 할 수 있었다. 스스로 성장했다고 느끼는 지점이었다. 조금 더디더라도 꾸준히 하면 나는 할 수 있다는 확신을 얻었다.

<아쉬웠던 점>

📍 스케줄 관리

  • 처음에는 merge가 금방 이뤄질 줄 알고 프로젝트 이틀 전쯤으로 마무리 기간을 잡았는데, 코드 리뷰를 받고 merge되는 시간까지 고려해서 스케줄을 짜야 함을 느꼈다. 2차 프로젝트때는 코드 리뷰를 받고 수정해 merge되는 시간까지 고려해야겠다.

📍 trello 사용법 및 소통

  • 둘째 주에 프론트와 백엔드 간 소통 문제가 생겨 마음이 조금 조급해졌던 것 같다. 그 이유는 바로 트렐로를 제대로 사용하지 않았기 때문이라 느껴 둘째주부터 트렐로를 제대로 사용하기 시작했다. 2차프로젝트에는 매일 아침 데일리 스탠드 미팅때마다 트렐로를 확인해야겠다고 다짐했다.

📍 추가 기능 구현을 못한 점

  • 네스팅을 좀 더 깔끔하게 하고 불필요한 div 사용을 줄이는 연습을 해야겠다. 다음 프로젝트를 술담화로 다시 진행 한다면 안주 추가 구독 기능 등과 같이 커머스 기능 이외에 들어있던 추가 기능을 넣으면 좋을 것 같다.

+) 애자일 방식과 소통의 중요성

애자일 방식과 소통에 대해 생각해보게 되었다.
소프트웨어 개발에서는 모나리자와 같이 구체적이지 않고, 모호한 경우가 많다. 따라서 소통이 원활하게 이루어지지 않으면 각자 생각하는 결과물이 달라질 수 있다.

이번 프로젝트에서도 트렐로와 노션, 회의 등을 통해 소통했지만 트렐로나 노션을 자주 확인하지 않아 1주차 때 소통의 오류가 생기는 문제가 발생했다.
2주차부터는 최대한 짧은 간격으로 서로 하는 일을 공유하고 개발-수정했다. 소통의 중요성을 깨닫게 된 프로젝트였다.

다음 2차 프로젝트에서는 '기록과 소통'을 개발만큼 우선시하도록 노력해야겠다.
개발자 개인의 목표뿐만 아니라 동시에 팀의 목적을 우선시하는 것이 중요하다고 느꼈다.


마치며

지칠 때도 웃으면서 으쌰으쌰했던 drunkencoder 팀원들께 감사의 인사를 전한다. 중요한 것은 꺾이지 않는 마음 ✨
인생 첫 프로젝트인 만큼 설레기도하고 조금 걱정도 되었지만, 재미있었고 많은 걸 배울 수 있었다. 팀원들과 함께 협업해 나가면서 하나의 결과물을 만들어가는 과정에서 성장과 배움에 대한 성취감을 느낄 수 있었던 경험이었다. 😆


구현 기능 gif

+) 전체 기능은 상단 영상으로도 볼 수 있습니다. gif로 밑에도 첨부하였습니다.

회원가입 : 이메일, 비밀번호 유효성 검사 및 그에 따른 UI변경, 닉네임 중복 검사

📍 리팩토링 후 체크박스까지 선택을 해야 회원가입 버튼이 활성화 되게 수정하였다.

로그인 : 유효성 검사 및 그에 따른 UI변경

메인 페이지 : 캐러셀, 메인 페이지 UI

상품 리스트 : 데이터 받아와 상품 리스트 보여주기, 상품 필터링

상품 상세 페이지 : 데이터 받아와 상품 상세 정보 보여주기, 스크롤해서 상품 더보기, 장바구니에 담기

장바구니 : 장바구니에 담은 상품을 보여주기, 개수 조절하기, 삭제하기

Nav,Footer : 로그인 상태에 따라 다른 UI 보여주기

profile
기록은 희미해지지 않는다 🐾🧑‍💻

0개의 댓글