위코드 1차 프로젝트
전통주 구매할 수 있는 이커머스 서비스인 "술담화"를 모델링한 프로젝트
2022.11.14~2022.11.25 (총 12일)
📍 모델링한 사이트 : 술담화
전통주를 구독, 구입할 수 있는 이커머스 사이트
📍 선정 이유 :
1) 깔끔한 UI로 보기 좋게 레이아웃을 잡고, 기능 구현에 중점을 두어 개발할 수 있다.
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(회의록)
📍 다음과 같이 크게 세 파트로 나누어 회의를 진행하기로 계획했다.
📍 Trello를 사용하여 일정관리를 했다.
This sprint : 이번 주까지 해야할 일 In progress: 지금 진행 중인 작업 In Review: PR을 올리고 리뷰를 받고 있는 작업 Done: 리뷰까지 반영돼 merge 완료된 작업
프론트는 페이지별로 나눠 담당하였고, 나는 회원가입 / 로그인을 맡게 되었다.
✅ 회원가입 / 로그인
메인페이지
상품 리스트, 상품 상세, 리뷰
장바구니
Nav, Footer
1.이메일과 비밀번호 유효성검사, 닉네임 중복 검사를 통해 회원가입을 한다.
2.모든 유효성검사와 닉네임 중복 검사, 필수 약관 체크박스가 클릭이 된 후에야 회원가입 버튼이 활성화 된다.
3. data.message를 통해 이미 가입된 이메일일경우 alert을 띄우고, 회원가입이 완료되었을 경우 회원가입 성공 alert을 띄우고 login 페이지로 이동한다.
📍 리팩토링 후 체크박스까지 선택을 해야 회원가입 버튼이 활성화 되게 수정하였다.
회원가입 기능 구현 중 유효성 검사를 진행할때 사용되는 정규 표현식을 변수로 선언하고 선언된 정규 표현식이 test메소드()를 통하여 조건에 만족하는지 판별하는 코드다.
최소 8자, 최대 16자
최소 1개의 알파벳(a-z, A-Z) 포함
최소 1개의 숫자(0-9) 포함
최소 1개의 특수문자(!%*#^?&()-_=+) 포함을 체크하였다.
삼항 연산자를 사용하여 isValid.useremail 값에 따라 클래스 이름을 동적으로 설정하였다.
isValid.useremail이 true이면 클래스 이름이 빈 문자열('')로 설정되며, false이면 'error' 클래스 이름으로 설정해 UI를 다르게 보여지게 했다.
삼항연산자를 알기 전에는 코드가 너무 길어지지 않을까 고민했는데,if-else 문보다 코드의 가독성이 좋아지고, 코드 길이가 짧아져서 코드 작성 시간을 단축시킬 수 있었다.
각자 하루에 목표한 기능 구현이 끝나면 다른 팀원의 기능 구현을 보고 질문하는 시간을 갖고 알려주는 시간을 갖기도 했다. 특히 나는 깃에 대한 이해가 부족하다고 느껴 상준님께 주말에 따로 깃에 대해 모르는 부분을 준비해서 질문했다. 상준님께서 감사하게도 1시간 가까이 알려주신 덕분에 이해를 할 수 있었다.
매일 아침 stand up meeting을 진행하고 중간에 서로 공유하고 싶은 내용이 있다면 실시간으로 대화를 하거나 슬랙방에서 대화를 했던 것 같다.
정해진 시간 안에 더 잘하고 싶은데 공부하고 싶고 알아야 할 것들이 많아 보여 완주할 수 있을까 불안한 마음이 있었다.
불과 2주 전까지만 해도 회원가입, 로그인 페이지 레이아웃 구현하는 것에만 많은 시간이 걸렸던 것 같은데 이번 프로젝트에서 다시 한번 진행하다보니 비교적 쉽게 할 수 있었다. 스스로 성장했다고 느끼는 지점이었다. 조금 더디더라도 꾸준히 하면 나는 할 수 있다는 확신을 얻었다.
애자일 방식과 소통에 대해 생각해보게 되었다.
소프트웨어 개발에서는 모나리자와 같이 구체적이지 않고, 모호한 경우가 많다. 따라서 소통이 원활하게 이루어지지 않으면 각자 생각하는 결과물이 달라질 수 있다.
이번 프로젝트에서도 트렐로와 노션, 회의 등을 통해 소통했지만 트렐로나 노션을 자주 확인하지 않아 1주차 때 소통의 오류가 생기는 문제가 발생했다.
2주차부터는 최대한 짧은 간격으로 서로 하는 일을 공유하고 개발-수정했다. 소통의 중요성을 깨닫게 된 프로젝트였다.
다음 2차 프로젝트에서는 '기록과 소통'을 개발만큼 우선시하도록 노력해야겠다.
개발자 개인의 목표뿐만 아니라 동시에 팀의 목적을 우선시하는 것이 중요하다고 느꼈다.
지칠 때도 웃으면서 으쌰으쌰했던 drunkencoder 팀원들께 감사의 인사를 전한다. 중요한 것은 꺾이지 않는 마음 ✨
인생 첫 프로젝트인 만큼 설레기도하고 조금 걱정도 되었지만, 재미있었고 많은 걸 배울 수 있었다. 팀원들과 함께 협업해 나가면서 하나의 결과물을 만들어가는 과정에서 성장과 배움에 대한 성취감을 느낄 수 있었던 경험이었다. 😆
+) 전체 기능은 상단 영상으로도 볼 수 있습니다. gif로 밑에도 첨부하였습니다.
회원가입 : 이메일, 비밀번호 유효성 검사 및 그에 따른 UI변경, 닉네임 중복 검사
📍 리팩토링 후 체크박스까지 선택을 해야 회원가입 버튼이 활성화 되게 수정하였다.
로그인 : 유효성 검사 및 그에 따른 UI변경
메인 페이지 : 캐러셀, 메인 페이지 UI
상품 리스트 : 데이터 받아와 상품 리스트 보여주기, 상품 필터링
상품 상세 페이지 : 데이터 받아와 상품 상세 정보 보여주기, 스크롤해서 상품 더보기, 장바구니에 담기
장바구니 : 장바구니에 담은 상품을 보여주기, 개수 조절하기, 삭제하기
Nav,Footer : 로그인 상태에 따라 다른 UI 보여주기