Project #1 : Core/of <회고록>

💊 Clone Project: Care/of

걱정하던 1차 프로젝트가 끝이 났다.
짧다면 짧을 수 있는 2주동안 많은 일이 있었다.

care/of 라는 영양제를 파는 웹사이트를 clone했다. 단순히 영양제를 판매하는 것에서 그치지 않고 소비자들에게 Quiz를 제공하고 그 응답결과를 토대로 맞춤형 영양제를 추천해주는 서비스를 제공하는 웹사이트이다. 페이지 레이아웃이 간결하고 예뻐서 좋았다 👏 한국에 아주 비슷한 pilly 라는 맞춤영양제 사이트가 있어서 참조하기 너무 좋았다. 설문조사 기능까지 똑닮았다!

Care/of
Personalized Daily Vitamin Packs.
팀 구성원: Front-end 3명, Back-end 4명

프로젝트 기간:
2021.02.15~2021.02.26

💊 Planning Process

처음에 백엔드와 팀 이름, general process에 대한 대화를 나눈 후 .. 각 페이지마다 필요한 상세 기능들을 세분화시켜 Notion page에 정리하고 각자 하고 싶은 페이지를 맡아서 프론트엔드 내에서 역할 분담을 진행했다.

그리고 프론트는 프론트끼리 백은 백끼리 초기 세팅을 진행했다!
프론트는 초기 세팅 과정에서 prettier와 eslintrc 에 error가 있었는데 구글링과 notion page의 도움을 받아 잘 해결이 되었다!

💊 Communication Tools

: Trello, Notion, Slack

노션과 슬랙은 그동안 사용하던 툴이여서 나름 익숙했던 반면 Trello는 처음 사용해봐서 초반에는 어려움이 좀 있었다.

• Trello

Trello는 팀 프로젝트 진행시 전체 프로세스를 크게 Backlog(앞으로 할 일), This Week(이번주에 할 일), In Progress(현재 진행 중인 일), Done(완료한 일) 이렇게 4가지로 나누어서 각각 티켓을 process에 따라 이동시키면서 일정 및 업무를 관리하는 툴이다. 실제로 실무에서 협업시 많이 사용되는 중요한 툴이라고 하는데 좀 생소했지만 계속 사용하면서 익히면 될 것 같다!

• Slack
  팀원들과 소통하는데 주로 사용되었다.
  
  
• Git, Github는 main branch에서 page 별로 개별 branch를 각각 생성하고 main 과 merge하는데 사용했다.

💊 Front-End Tech Stack

• React
• React Router
• SASS
• Restful API

💊 Final Result GIF

1. Login Page
   

• email, password 조건문 걸기!
  (@ 포함, 몇자 이상일때 로그인 버튼 활성화)

2. SignUp Page
   

• 숫자이고 9자리 이상일 때 send 버튼 활성화
• 인증번호 확인
• Password !== Confirm Password 일때 경고문구 띄우기
• checkbox 기능 활성화
  (care/of 의 signup page 물건을 구매하지 않는 이상 열어보기 어려운? 신기한 구조로 짜여 있어서 레이아웃을 짤 때 pilly를 참조했다!)

3. Review Page
   

• mock 데이터로 보내준 리뷰 화면에 띄우기

4. Cart Page
   

• Product Delete/ Add/ Update
• Calculating Subtotal
• Different Shipping fee based on SubTotal

5. Product detail & List
   

   

• Out of Stock 표시 기능
• Category 구분

6. Quiz Page

   

• 백엔드에 quiz 내용 보내주고 recommendation data 화면에 보여주기!

7. Place Order
   

• Cart 확인 기능
• User Info auto로 불러오기
• Place order 시 주문번호 생성
• Cart 초기화

💊 My Part

- Login/ SignUp/ review page를 맡았다

- 기억하고 싶은 코드  
 
 1) 체크 박스 기능

 2) 인증 번호 보내기

1. checkbox

1) 전체약관을 활성화하면 아래 모든 체크박스가 활성화된다.

2) 전체약관을 비활성화하면 아래 모든 체크박스도 비활성화된다.

3) 개별적으로 모든 체크박스는 활성화가 가능해야 한다.

4) 개별적으로 모든 체크박스를 활성화했을 경우, 전체약관도 활성화된다.

5) 아래 체크박스 중 하나라도 비활성화 되었을 경우, 전체약관도 비활성화 된다.

//SignUp.js

import React, { Component } from 'react';
import CheckList from './CheckList';
import './SignUp.scss';

class SignUp extends Component {
 constructor() {
   super();
   this.state = {
     checkList: [],
     allChecked: false,
     check0: false,
     check1: false,
     check2: false,
   };
 }
    handleAllChecked = () => {
   const { allChecked } = this.state;

   if (allChecked === false) {
     this.setState({
       allChecked: true,
       check0: true,
       check1: true,
       check2: true,
     });
   } else {
     this.setState({
       allChecked: false,
       check0: false,
       check1: false,
       check2: false,
     });
   }
 };

  handleChecked = idx => {
   this.setState(
     {
       [`check${idx}`]: !this.state[`check${idx}`],
     },
     () => {
       this.setState({
         allChecked:
           this.state.check0 && this.state.check1 && this.state.check2,
       });
     },
   );
 };

 render() {
 
   return (
	<div className="third_content">
         <div className="agree_all_terms">
           <input
             onClick={this.handleAllChecked}
             checked={this.state.allChecked}
             type="checkbox"
             className="agree_all"
             id="agree_all"
           />
           <label for="agree_all">AGREE ALL TERMS</label>
         </div>
         <div className="termsview">
           {CHECKLIST_ARR.map((checkBox, idx) => {
             return (
               <CheckList
                 content={checkBox.content}
                 key={idx}
                 checked={this.state[checkBox.name]}
                 onClick={() => this.handleChecked(idx)}
               />
             );
           })}
         </div>
        </div>
   );
 }

맨 위의 agree all terms를 제외한 아래의 3개 개별 약관들은 CheckList.js 라는 자식 컴포넌트로 분리한 후, map을 돌려 3번 반복되게 했다.

① 먼저 SignUp.js에서 각각의 checkbox의 키값(상자가 체크되지 않았을 경우)에 false라는 value를 부여해준다.

② handleAllChecked라는 이벤트 생성한 후..

allChecked 체크박스에 onClick={this.handleAllChecked}을 걸어준다 allChecked === false일 경우

그 체크박스를 클릭했을 때 모든 체크 박스의 value값을 true(반대로) setState 해준다. allChecked === true 일

경우 vice versa! --> 1,2번 완료!

③ handleChecked 라는 이벤트 생성, map 돌린 component에 넣어준다.

map을 돌려서 key값으로 index 순서가 입력되는데 idx로 대신했다. 체크 박스들을 각각 눌렀을 때 각각 체크 되고 풀리게

하기 위해서 this.setState({[`check${idx}`]:!this.state[`check${idx}]}); 이렇게 해준다!

이렇게 하면 check0, check1, check2 각각을 클릭했을 때 value값이 반대로(false-> true로, true ->false로)

변하면서 체크가 되거나 풀린다. --> 3번 완료!

④ 해당 값을 setState 해주고 바로 다음의 콜백 함수

() => {this.setState({allChecked:this.state.check0 && this.state.check1 && this.state.check2,});}로 모두 체크될 경우에만 allChecked를 불러온다. --> 4,5번 완료!

(state는 비동기여서 콜백함수로 동기화를 시켜줘야 한다고 하는데.. 이 개념은 추후에 복습이 필요)

//CheckList.js

import React, { Component } from 'react';

class CheckList extends Component {
  render() {
    const { content, idx, checked, onClick } = this.props;
    return (
      <div key={idx}>
        <label>
          <input
            checked={checked}
            type="checkbox"
            name={checked}
            onClick={onClick}
          />
          {content}
        </label>
        <a href="https://takecareof.com">View Details</a>
      </div>
    );
  }
}

export default CheckList;

개인적으로 프로젝트를 하면서 가장 까다로웠던 부분이 바로 이 약관 동의 체크박스 기능 구현이었다. 금방 할 줄 알았는데 생각보다 너무 어려워서 꽤 많은 시간을 소요했다. 체크박스 세개를 자식 컴포넌트로 분리하는 것과 기능 구현 모두 너무 헷갈렸다. 다른 사람 코드를 보고 이해가 되도 스스로 처음부터 모범 답안을 뽑아내는건 무리였다.. 그래도 다음번에는 잊지 않고 기억할 것 같다.

인증번호 보내기는 백엔드에서 수고를 많이 해줬다.
회원가입 페이지에서 전화번호를 입력하고 send 버튼을 누르면 그 번호로 인증번호가 진짜 가는게 너무 신기했다.. 아래 사진은 테스트용 문자메세지인데 인증번호가 진짜 이런식으로 왔다.

근데 아름습니다..? 백엔드..급했네 급했어ㅋㅋㅋ

잘한 점 & 아쉬웠던 점

잘한점:

1. Agile 방식으로 프로젝트를 진행한 것!
2. General Planning, Jason Data 공유시 Notion page를 잘 활용한 점!
3. FE- BE 가 배려하며 원활하게 소통한 점!
4. 항상 서로 격려하는 분위기!

+팀원들 벨로그 빨리 쓰라고 재촉 한거..ㅇㅅㅇ

갓샘솔님이 이렇게 노션 페이지에 정리를 이쁘게 잘 해주셨다

아쉬운점:

팀 전체적으로는 크게 아쉬운 점이 없었다. 다만 초반에 Scrum에 대한 이해가 부족해서 Trello를 보다 잘 활용하지 못했는데 이건 충분히 개선 가능한 점이라고 생각한다. 또 초기세팅 과정에서 Prettier 와 eslintrc 가 충돌해 나중에 손을 봐야 되는 상황을 겪었는데 초기세팅에 더 신경써야겠다고 생각했다.

그 외에는 개인적인 실력+ 체력 부족으로 더 많은 기능 구현을 못한 아쉬움이 있고 git branch 를 생성할 때 실수했던게 기억에 남는다. review branch 를 생성할 때 main branch 로 돌아가서 작업해야 했는데 mypage branch 안에 review branch 를 파는 실수를 했다. 다행히 큰 문제가 생기지 않고 지나갔지만 git을 제대로 정리하는 시간을 갖고 다음에는 같은 실수를 반복하지 말아야 할 것 같다. Merge 할때 conflict 해결을 덜 하고 푸쉬하기도 했는데 이 또한 반복하지 말기. 또 다른 프론트 분들에 비해서 백과 소통이 좀 부족했다. 처음이어서 어떤 식으로 소통을 해야 하는지 이해가 부족했던 것 같다.

1차 프로젝트는 개발자들끼리 협업하는 방법에 대해 익힐 수 있는 좋은 기회인 동시에 내가 얼마나 부족한지 깨닫게 되는 계기가 되었다. 팀원분들에게 도움을 많이 받았는데 내가 줄 수 있는 도움은 한정적이어서 미안함을 느꼈다..

불행 중 다행은 스스로 어떤 점이 부족한지 인지하고 개선해야겠다는 생각을 가지게 된 것!

그외 후기 및 여담

프로젝트를 진행하면서 팀원분들을 보면서 많은 것을 배웠다.
한 분이라도 없었다면 이 정도의 결과는 나오지 않았을 것 같다.😭

먼저 PM 샘솔님은 내가 개발자가 된다면 저렇게 되고 싶다라는 생각이 들 정도로 멋있는 분이다.
(제 멘토가 되어주세요.. 샘솔님 짱 👻)

바쁜 와중에도 세션에서 배운 내용들 특히 git 처럼 중요한 내용들을 노트에 정성껏 빼곡하게 정리해두고 팀원들이 필요할 때마다 보여주셨다. 개발 족보..성경책이었다. 항상 새벽까지 공부하다 오시는데도 피곤한 내색 없이 모든 질문에 차근차근 답해주시는 모습이 너무 신기했다. 멘토님들이 말하는 같이 일하고 싶은 개발자가 이런 사람이구나 새삼 깨달았다.

프론트의 또 다른 에이스 지연님은 집이 먼데도 밤을 새다시피 개발을 하셨다.. 노력하는 모습이 좋은 자극이 되었다. 퀴즈 부분에서 포기하지 않고 계속 시도하는 모습이 참 아름다웠다. (노력하는 당신.. 아름답습니다)

백엔드도 분위기가 정말 좋았다. 장고 마스터 현수 교수님과 DB를 잘 아는 친절한 여자.. 한아님!😀 덕분에 너무 x 10 든든했다. 분위기 메이커 치오리더님은 리액션이 너무 좋으시고 칭찬과 격려를 아끼지 않아 팀쿱은 항상 분위기가 좋았다. 백앤드 막내 귀요미 혜윤님은 인간 비타민 그 자체 👻 깍두기끼리 스터디 결성하기로 약속도 했다.

여담이지만 프로젝트 기간 중에 생일이었는데 정말 바쁜 와중에도 생일을 챙겨 주셨다!

너무 감사했다 (감동의 눈물 뚝뚝 😭 ) 🙈 노래도 불러주시고 팀쿱 짱!
다들 정말 수고 많으셨습니다!! 모두 잘 될꺼에요~ 화이띵!

웃고 있지만 녹아내리는 초가 꼭 내 모습 같아...