위코드 2차 팀 프로젝트 'WeMong' 회고

프로젝트 소개

• '크몽' 사이트를 모델링 한 프로젝트이다.
• 강사로서 혹은 유저로서 강의를 소비하거나 등록할 수 있는 커머스 사이트로 이름은 'Wemong'이라 지었다.
• 기간 : 2022.11.28 ~ 2022.12.09
• ➡️ 프로젝트 깃허브 레포지토리 바로가기
• ➡️ 프로젝트 노션 페이지 바로가기

 

팀 소개

• 프론트엔드 4명
  • 김호준 : 메인 페이지 레이아웃, 강의 리스트 자동 생성 구현
  • 홍석현 : 로그인 및 회원가입, 강의 검색창 및 필터링 기능 구현
  • 윤수민(PM) : 강의 상세페이지, 강의 선택 조건을 서버에 전송하는 기능 구현
  • 이상윤(나) : Toss Payments 외부 API를 이용한 결제 기능 구현
• 백엔드 2명
  • 한상엽, 김수정

 

개발 도구 및 적용 기술 (+트렐로)

• 프론트엔드
  • JavaScript(ES6)
  • React.js
  • styled-components
  • React-router-dom
• 백엔드
  • JavaScript(ES6)
  • Node.js
  • Express
  • JSON Web TOKEN
  • Bcrypt
  • My SQL
  • Multer

• 커뮤니케이션 및 버전 관리
  • Slack
  • Trello
  • Postman
  • Git / Github (+GitBook)

 

작업 결과 (시연 영상)

 

 

백엔드 DB 모델링 사진

DB 모델링 사진

DB 모델링 요약 사진

 

 

나의 작업 (내 구현 사항)

Toss Payments '간편결제' 기능을 연동한 예약 및 결제 페이지 구현

 // ReservationPage.js
 
 const ReservationPage = () => {
   // 백에서 받은 데이터 객체 구조 분해 할당
   const { lectureTitle, lecturerName, price, images } = lectureData;
 
  // 토스페이 결제 기능
   const clientKey = `${process.env.REACT_APP_CLIENT_KEY}`;

   const handleKakaoPay = () => {
     loadTossPayments(clientKey).then(tossPayments => {
        tossPayments
         .requestPayment('카드', {
           // 결제 수단
           // 결제 정보
           amount: `${price}`,
           orderId: 'pe8D3rg0T526Ja0Q-bm8R',
           orderName: `${lectureTitle} (lectureTimeOptionId:${lectureTimeOptionId})`,
           customerName: '박토스',
           successUrl: 'http://localhost:3000/reservationsuccess',
           failUrl: 'http://localhost:3000/reservation',
           flowMode: 'DIRECT',
           easyPay: '토스페이',
         })
         .catch(function (error) {
           if (error.code === 'USER_CANCEL') {
             // 결제 고객이 결제창을 닫았을 때 에러 처리
           } else if (error.code === 'INVALID_CARD_COMPANY') {
             // 유효하지 않은 카드 코드에 대한 에러 처리
           }
         });
     });
   };
 
   ...
   
 }

 

// ReservationSuccess.js (예약 성공 시 보여지는 화면 컴포넌트)

const ReservationSuccess = () => {
  const [params, setParams] = useSearchParams();
  const paymentKey = params.get('paymentKey');
  const order = params.get('orderId');
  const amount = params.get('amount');

  // 토스 페이먼츠 서버로 결제 승인을 요청하는 코드
  useEffect(() => {
    let axios = require('axios').default;

    let options = {
      method: 'POST',
      url: 'https://api.tosspayments.com/v1/payments/confirm',
      headers: {
        Authorization:
          'Basic dGVzdF9za183WFpZa0tMNE1yak9uWjdaTVIxODB6SndsRVdSOg==',
        'Content-Type': 'application/json',
      },
      data: {
        paymentKey: paymentKey,
        amount: amount,
        orderId: order,
      },
    };

    axios
      .request(options)
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.error(error);
      });
  });
  
  ...
  
 };

 

 

프로젝트 후기 및 느낀 점

잘했던 점

1. 포기하고 싶은 순간에 '중꺾마 (중요한 것은 꺾이지 않는 마음)'의 의지를 갖고 끝까지 최선을 다했던 점
2. 시간이 부족한 상황에서 도저히 혼자 힘으로 해결하기 어려운 문제를 너무 오래 붙잡지 않고 주위에 도움을 청했던 점
3. 백엔드와 프론트엔드 간 데이터에 관한 의사소통이 잘 이루어져 백엔드 API 명세가 빠르게 나왔던 점
4. 브랜치면, 클래스명 컨벤션을 미리 정해 팀원들과 공유하여 프로젝트를 진행했던 점 
5. 개인적인 걱정보다는 작업물이 꽤 괜찮았던 점

 

아쉬웠던 점

1. 팀원들이 자주 지각하는 바람에 아침 Daily Meeting이 제대로 진행되지 않았던 점
2. 여러모로 팀원 간의 소통이 부족했던 점
3. 각자 자신의 업무에 몰입하느라, 모르고 어려운 것들(blocker)에 대해 팀원들과 공유하고 질문하는 것이 잘 되지 않았던 점
4. 팀원들의 평균 역량 이상의 무리한 기획안이 나오는 바람에 그 이후로 기획이 갈피를 못 잡고 계속 수정되었던 점 (팀원 간 소통 부족의 연장선)
5. 초기 세팅에 신경을 많이 썼음에도 그 이후로 계속 초기 세팅 변경 사항이 생겼고, 이것들이 팀원들과 제대로 공유되지 않았던 점 (원인 : 각자의 작업속도가 많이 달랐음, 소통의 부족)
6. Trello를 활용한 협업이 잘 이루어지지 않았던 점
7. 시간 관리를 위해 공통된 목적에 대한 데드라인을 정하지 않았던 점

 

느낀 점

1차 프로젝트에 이어 개인적으로 내가 가장 잘했다고 생각했던 점을 하나 꼽자면, 개발 도중 마주했던 여러 에러들을 그냥 넘어가지 않고, 깃허브에 해결 과정을 기록으로 남겼던 것이었다. 'ERROR-Note'라는 이름의 깃허브 저장소를 만들어 이 곳에 md 문서로 기록을 남겼는데, 이를 시작한 이유는 프로젝트 중 마주했던 문제들을 어떻게 해결헀는가를 입사 면접 때 면접관께서 자주 질문하시기도 하고, 또한 기록을 남김으로써 다음에 비슷한 에러를 또 마주쳤을 때 좀 더 빠르게 해결책을 찾기 위해서였다. 또한 기록을 습관화하기에도 괜찮은 방법이라 생각이 들었기 때문이다.

 

사실 이번 2차 프로젝트를 시작하면서, 1차 프로젝트 회고 때 다음 번에 개선하기로 했던 것들을 되새기고 이를 반영해보려 했다. 하지만 생각만큼 마음대로 잘 되지 않았다. 왜 그랬을까. 지금 와서 생각해보니 첫 회의 때 우리 팀이 너무 무리하게 기획을 짰던 것부터가 잘못이었다. 다들 하나라도 더 구현해보려고 욕심을 내서 조금 더 어려운 기획안을 함께 만들었는데, 멘토님들께서 기획안을 검토하시더니 시간 내에 이를 구현하긴 좀 어려울 것 같다고 판단하셨다. 하자만 기획안 자체적으론 완성도가 높았기에, 기획안에서 무엇 하나를 빼려고 해도 참으로 애매한 상황이었다.

 

기획이 이렇게 되다 보니, 그 이후에도 자주 기획이 변경되면서 팀 내에 혼란이 생겼고, 해야할 일들 역시 명확하지 않아 티켓 세분화도 잘 이루어지지 않았다. 또한 프로젝트의 큰 그림을 이해하는 데에 개인적으로 어려움이 있었다. 또한 나를 포함한 모든 팀원들이 아무래도 각자 맡은 업무가 어렵다 보니 자신의 일에만 몰두하게 되어버렸고, 그로 인해 팀원들과의 정보 공유가 잘 이루어지지 않았다.

 

다행이도 마감 기한 내에 각자가 맡았단 기능 구현 업무는 거의 다 성공적으로 이루어졌다. 나는 초반엔 솔직히 내가 맡았던 '외부 API를 활용한 결제 기능 구현'을 제대로 완성시키지 못할 것 같다고 생각했다. 내가 도움을 요청했던 멘토님조차 머리를 싸매시더니 결국 해결하지 못했던 오류도 있었고 (axios라는 특정 패키지를 다운그레이딩 하니 해결되었다) 프로젝트 중간에 다른 API를 사용하기 위해 그 때까지 했던 내 작업물을 갈아엎기도 했었으니 말이다. 그래서였는지, 프로젝트 마지막 날 밤 팀원들과 함께 옹기종기 모여 최종 결과물을 확인했을 땐 저번 첫 팀 프로젝트 때보다 성취감이 훨씬 더 컸다.

 

 

마지막으로 이 자릴 빌어 함께 눈물 닦으며 고생해준 팀원분들 모두에게 정말로 고맙고 고생했다는 말 남기고 싶다.