[Project] Weasly Project 2주차 1차 프로젝트 종료

1. 프로젝트 요약

남성 화장품 구독사이트 오픈워크 클론프로젝트(디자인, 비즈니스모델)
프론트, 백 기능 자체구현

Github 링크

사이트링크

 

2. 프로젝트 이름

위즐리(Weasley)

 

3. 프로젝트 소개

2030을 타겟으로 한 합리적인 가격과 편리한 화장품 구독사이트

 

4. 프로젝트 기간 및 인원

2021.11.29 ~ 2021.12.10
프론트 3명, 백엔드 3명

 

5. 프로젝트 담당한 업무

1.상세페이지

• 레이아웃 html, css
• 상세페이지 레이아웃 데이터바인딩(API GET요청)
• 구매: 상품id, 주문수량 POST 요청
• 구독: 상품id, 주문수량, 주소id POST 요청
  • (주소: 입력 받거나 오더페이지내 주소등록 히스토리 존재시 해당 주소 끌 어옴)
  • 주소입력창 조건부 렌더링/ 주소존재시 바로 구독완료알럿
    

    

    
    

    

 

2.오더페이지

• DB 주소 존재 여부에 따라 주소입력창 조건부 렌더링
  

  

  
  

  

 

3.메인페이지

• 레이아웃, 유지보수와 빠른 작업을 위해 flex레이아웃으로 작업했습니다.

 

4.푸터

• 레이아웃
• 반복적인 UI를 상수데이터화하여 map 매서드를 이용하여 렌더링했습니다.

 

6. 기억에 남는 코드

상세페이지 내에 구독 부분에서 조건에 따른 렌더링과 API명세서를 보고 GET, POST 요청하는 중첩된 부분이 기억에 남는다.

const openModal = () => {
    fetch(API.USER_ADDRESS, {
      headers: {
        Authorization: `Bearer ${sessionStorage.getItem('access_token')}`,
      },
      method: 'GET',
    })
      .then(res => res.json())
      .then(data => {
        if (data.MESSAGE === 'INVALID_TOKEN') {
          alert('로그인이 필요합니다!');
          navigate('/signin');
          return;
        }

        if (data.RESULT.length) {
          setSaveAddress(data.RESULT[0].address_id);
          postAddressUser(data.RESULT[0].address_id);
        } else {
          setModalSwitch(!modalSwitch);
        }
      });
  };

  const postAddressUser = ad => {
    fetch(API.SUBSCRIBE, {
      headers: {
        Authorization: `Bearer ${sessionStorage.getItem('access_token')}`,
      },
      method: 'POST',
      body: JSON.stringify({
        product_id: id,
        amount: count,
        address_id: ad,
      }),
    })
      .then(res => {
        return res.json();
      })

      .then(data => {
        if (data.MESSAGE === 'SUBSCRIBE_ALREADY_EXIST') {
          alert('이미 구독중인 상품입니다!');
        } else {
          alert('구독신청 완료 되었습니다.');
        }
      });
  };

  const subscribeAction = () => {
    fetch(API.USER_ADDRESS, {
      method: 'POST',
      headers: {
        Authorization: `Bearer ${sessionStorage.getItem('access_token')}`,
      },
      body: JSON.stringify({
        address_id: saveAddress,
        location: subscribeUserAddressInput,
      }),
    })
      .then(res => res.json())
      .then(data => {
        fetch(API.USER_ADDRESS, {
          headers: {
            Authorization: `Bearer ${sessionStorage.getItem('access_token')}`,
          },
          method: 'GET',
        })
          .then(res => res.json())
          .then(data => {
            if (data.MESSAGE === 'SUCCESS') {
              setSaveAddress(data.RESULT[0].address_id);
              fetch(API.SUBSCRIBE, {
                headers: {
                  Authorization: `Bearer ${sessionStorage.getItem(
                    'access_token'
                  )}`,
                },
                method: 'POST',
                body: {
                  product_id: id,
                  amount: count,
                  address_id: saveAddress,
                },
              })
                .then(res => res.json())
                .then(data => {
                  if (data.MESSAGE === 'SUCCESS') {
                    navigate('/subscribe');
                  }
                });
            }
          });
      });
  };

 

 

 

7. 팀 프로젝트 가치관

팀프로젝트를 기능구현과 다른 팀과의 경쟁이 아닌 내면의 성장을 목표로 두고 진행하려고 노력하였고, 기능구현이 우선이 아닌 팀 전체가 배워가는 것이 있고 팀이 하나가 되어 나아갔으면 좋겠다고 생각하고 프로젝트에 임했다. 학교에서나 일터에서 배운 프로젝트를 하게 될 때에는 항상 1인분을 해내야 한다는 생각으로 임했는데 스크럼방식으로 진행하니 1인분에 대한 생각보단 규율과 책임감을 가지고 하나의 요리를 다같이 협심해서 낸다는 생각으로 프로젝트를 진행하였다.

 

8. 협업툴

• Github
• Trello: 업무 분담, 업무 진척도 시각화로 판단에 용이했다.
• Notion를 trello에서 관리하기 힘든 미팅로그, API명세서, 프,백 Github링크, 프로젝트 페이지내에서 사용할 이미지를 공유
  특히 Trello는 처음 사용해봤는데 팀원간의 업무 진척도를 시각적으로 파악하기 쉽게 해주어 업무에 유용하였다.

 

9. IN PROGRESS

상세페이지를 구현하면 특히 처음에 상세페이지 레이아웃을 구현한 뒤 상품리스트별 상세페이지를 렌더링 해줄 코드에 대해 혼자 고민을 많이 했던 것 같다.

 

10. 1차 프로젝트 회고

총 2주 동안 진행된 스프린트를 토대로 팀원들과 중간회고를 가지는 시간을 가졌다. 팀 회고 결과 팀원 모두 이런 팀프로젝트가 처음이기도 하며 개개인의 실력이 다르다고 느꼈다. 그에따른 각 기능에 리소스 투입에 대한 인지가 부족하여 트렐로나 업무세분화가 체계적으로 된 것 같지 않았고, 다행히 이 문제를 중간회고 기간에 점검하여 트렐로의 체크리스트를 통해 업무세분화하여 이를 보완하였다.
또한 기능 구현에 초점을 맞춰서 사용자 중심의 UI를 고려하지 못했다. 그에 따라 CSS의 완성도가 부족했던 것 같다.

 

11. 개인 리뷰

잘한 점

• 팀 전체가 스프린트를 잘 지킬 수 있도록 팀원들의 진행과정을 틈틈이 확인하며 일정을 조율했던 점.
• 데일리 스탠드업 미팅을 통해 소통하려고 노력하였음
• 미팅로그를 만들어 회의 내용을 기록해둔것

배운점

• 처음으로 리액트로 프로젝트를 진행해보면서 리액트적, 사고와 문법에 대해 기본적인 이해와 리액트에 원리에 대한 호기심이 생겼다.
• 서버와 통신을 해보며 추가로 프는 백지식 백은 프 지식이 있어야 원활한 소통이 가능 하다는 것을 느꼈다.
• 프로젝트 이전엔 에러가 발생한다는것에 대해 거부감이 있었는데 1차 프로젝트를 진행하며 다양한 오류를 만나며 또, 그것을 해결하는 과정에서 에러를 해결하는 즐거움(?)이 뭔지 정말 배웠다고 생각한다. 특히 fetch 요청시 발생하는 에러를 네트워크 탭에서 에러메세지를 API명세서에서 확인하고 프론트단에서의 문제인지 서버에서의 문제인지 확인하고 처리하는 과정이 좋았다.

 

그래도 리액트로 초기세팅부터 AWS배포까지, 그리고 무엇보다 프로젝트 보다 좋은 팀원들을 얻게 되었다는게 너무 기쁘다.