[회고록] 팀 포르젝트 2차_'FLO'을 참고하여 개발한 프로젝트 (220919 ~ 220930)

1. 프로젝트 간략 소개

참고 사이트 : FLO https://www.music-flo.com/
선정 이유 : 음악 재생 및 내 리스트 저장, 로그인, 이용권 결제 등 다양한 기능을 구현해볼 수 있는 기회를 React를 사용하여 필요한 라이브러리를 설치하여 사용할 수 있는 기능이 많아서 선정했습니다.
내가 참여한 FLOrida팀 FE Github :https://github.com/Roxy100/justcode-6-2nd-florida-front
BE Github : https://github.com/wecode-bootcamp-korea/justcode-6-2nd-team6-back
개발 인원 : 프론트엔드 4명(김진영, 김충만, 임지영, 최승철), 백엔드 2명(김교은, 이신희)

2. 팀에서 내가 맡은 역할 및 해당 기능 설명

내가 맡은 시연 연상 : https://youtu.be/obziHIyn5SI

전체 시연한 이용권 페이지

주요한 해당 기능 설명 (이미지 첨부 및 코드 추가)

✅ 이용권 탭

🔷 4개의 이용권 데이터 조회(GET)

✔ 카드 컴포넌트화

✔ 결제리스트 컴포넌트화

✔ 데이타 구조에 맞게 map방식 사용 ( 참고 : 기억하고 싶은 코드 )

🔷 이용권 구매버튼 클릭시, 결제(모달)창 구현

🔷 결제방식에 따라 보여지는 부분이 있고, 안 보여주는 부분을 삼항연산자를 사용해 UI구현.

✔ 이용권 구매 _ 정기결제

✔ 이용권 구매 _ T멤버십

✔ 이용권 구매 _ 1개월권

🔷 결제수단 클릭시, 색깔 효과 적용.

🔷 체크박스(필수 2개만) 존재한 경우, 결제하기 버튼 활성화 적용.

🔷 결제하기 버튼 클릭시, 결제 데이타 생성(POST) - 알림창(alert창) 띄우기

⭕ 결제되었습니다! alert창 뜨면 성공!

❌ 결제에 실패하였습니다! alert창 뜨면 실패!

✅ 제휴 탭

🔷 무료 아이콘으로 이미지 대체, 보여주는 UI만 구현.

✅ MY 탭

🔷 로그인 ❌ UI

✔ 로그인 버튼 누르면, 로그인 페이지로 이동

🔷 로그인 ⭕을 한 후, 이용권 결제하지 않은 UI

✔ 이용권 구매 버튼 누르면, 이용권 탭 페이지로 이동

🔷 로그인 ⭕을 한 후, 이용권 결제한 UI 구현 및 데이터 조회(GET)

3. 기억하고 싶은 코드

(1) 가장 어려웠던 코드 및 복습이 필요한 코드

voucherdata.json 파일 - 이용권 데이타 구조중의 이용권 1개의 부분만 가져옴.원래는 백엔드 분께서, payments 배열 안에 3개의 배열이 있고, 각각 객체가 있는 구조였으나, 최종적으로 바뀐 구조로 변경된 부분이다.

{
  "data": [
    {
      "voucherId": 1,
      "voucherName": "무제한 듣기+오프라인 재생",
      "description": "기기제한 없음, 무제한 스트리밍, 오프라인 재생",
      "payments": [
        {
          "name": "정기결제",
          "salePrice": "10,900",
          "description": null,
          "originPrice": "11,000",
          "paymentType": "regular"
        },
        {
          "name": "T멤버십",
          "salePrice": "100",
          "description": "선택하신 T멤버십 혜택 타입과 사용 가능한 T플러스포인트에 따라 실제 결제금액이 변동될 수 있습니다.",
          "originPrice": "10,900",
          "paymentType": "membershipT"
        },
        {
          "name": "1개월권",
          "salePrice": "11,000",
          "description": null,
          "originPrice": null,
          "paymentType": "oneMonth"
        }
      ]
    },

VoucherCard.js 파일 - 이용권 카드 구조

  const [voucher, setVoucher] = useState([]);

  useEffect(() => {
    fetch("http://3.34.53.252:8000/purchase/voucher")
      .then((res) => res.json())
      .then((res) => {
        setVoucher(res.data);
      });
  }, []);

  return (
    <StyledVoucherCard>
      {voucher &&
        voucher.map((voucherCard, index) => {
          return (
            <li key={voucherCard.voucherId}>
              <div className="voucher-carditem">
                <div className="card-left">
                  <h3 className="name">{voucherCard.voucherName}</h3>
                  <p className="desc">{voucherCard.description}</p>
                </div>
                <div className="card-right">
                  <ul className="voucher-list-sub">
                    {voucherCard.payments &&
                      voucherCard.payments.map((payment, index) => {
                        if (payment.salePrice)
                          return (
                            <PaymentList
                              payment={payment}
                              voucherName={voucherCard.voucherName}
                              voucherId={voucherCard.voucherId}
                            />
                          );
                      })}
                  </ul>
                </div>

이 프로젝트에서 백엔드에서 데이터를 받아오고 뿌려주는 작업을 나로서는 처음 해보는 코드라... 머릿속에 정리되지 않은 개념 map 때문에 더 시간이 오래걸렸다. 처음에 하드코딩했을 때, 코드를 길게하고 작업을 했더니, 내가 원하는 화면상 조건이 그려지지 않은 걸 확인할 수 있었다. 멘토님의 조언을 받아 컴포넌트화 작업을 하고, 어떤 부분을 map으로 돌려야 할지 고민하면서, map을 쓸 때의 매개변수 item, index 등을 어떤 식으로 활용하는지에 대해서 고민해보는 시간이 많았다. 그리고 이 작업에 대해서 동기분한테 map의 쓰임새 데이터 배열/객체 접근법을 강의해주시면서 한번 더 복습차원으로 공부할 수 있었던 의미있는 시간이었다.

(2) 깨닫고 싶은.. 새롭게 알게 된 코드

Router.js 파일 - 라우터 적용 부분

        <Route path="/purchase" element={<Purchase />}>
          <Route path="voucher" element={<Voucher />}></Route>
          <Route path="affiliate" element={<Affiliate />}></Route>
          <Route path="my" element={<My token={token} />}></Route>
        </Route>

Purchase.js 파일 - 해당 탭을 클릭 시 컴포넌트가 바뀌는 부분 밑에 가상의 <Outlet/>을 적용한 부분이다.

          <div className="purchase-inner-box">
            <ul className="purchase-tab">
              <li>
                <NavLink
                  to="/purchase/voucher"
                  className={({ isActive }) =>
                    isActive ? "btn-primary" : "btn-color-black"
                  }
                >
                  이용권
                </NavLink>
              </li>
              <li>
                <NavLink
                  to="/purchase/affiliate"
                  className={({ isActive }) =>
                    isActive ? "btn-primary" : "btn-color-black"
                  }
                >
                  제휴
                </NavLink>
              </li>
              <li>
                <NavLink
                  to="/purchase/my"
                  className={({ isActive }) =>
                    isActive ? "btn-primary" : "btn-color-black"
                  }
                >
                  My
                </NavLink>
              </li>
            </ul>
            <div className="purchase-coupon">
              <button type="button" className="btn-coupon">
                쿠폰
              </button>
            </div>
            <Outlet />
          </div>

우리가 클론하는 사이트 주소가 이용권 탭 : /purchase/voucher, 제휴 탭 : /purchase/affiliate, My 탭 : /purchase/my 이기 때문에 이 부분을 어떻게 라우터를 적용시킬지 의문이었다. 멘토님의 조언을 받아 해당하는 공식문서를 보고 참고하면서 코드에 적용한 부분이다.

그리고 해당 탭 변경시 적용되는 스타일 문제도 멘토님의 조언을 받아 해당하는 공식문서를 보고 참고하면서 코드에 적용한 부분이다.

이처럼 구글링할 때 블로그를 찾기보다, 공식문서를 많이 참조해서 코드에 적용해보는 습관에 길들여져야 겠다는 생각이 들었다.

4. 프로젝트를 마치고 느낀 점

협업

내가 맡은 부분의 백엔드 담당과 초반에 얘기를 자주 못했던 게 조금 아쉬웠다. 중간중간 데이터들도 조금씩 바뀌는 작업이다보니, '아! 다음에는 첫만남에서라도 이렇게 구현할 것이다 라고 얘기를 하고, 잦은 소통이 주가 되야 '하는 생각이 들었다.
서로 구현하는 기능 중에서 비슷한 부분이 있으면, 코드를 공유해서 더 효율적인 작업을 할 수 있었다. (ex. 체크박스 기능구현, state를 이용한 버튼 클릭했을 때 스타일 변화)

개인

내가 이번 프로젝트를 하면서 느낀 건, 난 아직 코린이고, 바로바로 문제를 캐치하지 못한 상태라는 것이다. 무작정 멘토님이나 동기분한테 여쭤보면서 작업을 한 게 죄송스럽고, 무례한 행동이었다고 생각한다... 지금 돌이켜보면, 너무나 쉬운 문제해결들이었고.. 콘솔창이나 콘솔찍어보면 되는 건데... 말이다. 스스로 문제해결능력이 부족한 것 같다!
그래도 이 작업들을 하면서 내가 부족한 게 뭔지... 더 공부해야할 것들이 생긴 건 크나큰 행운이었다.
기능구현이 복잡할지라도 작업순서를 차근차근 메모하면서 작업을 한다면, 내 마음속 깊이 있는 조급함을 내려놓고, 더 앞으로 나아갈 수 있다는 희망을 가지게 되었다.
남한테 물어보기 전에 꼭 한 번 더 생각해보고, 구글링 키워드를 잘 검색해보고, 콘솔창 확인하거나, 콘솔찍어보기!!!!
사용자 입장을 생각하며, 경우의 수나 조건을 생각해보면서, 코드 짜기!!!!!!

기술스택에 있어서...

styled-components로 선택하며, 기존에 사용하던 scss와는 차이점이 있는지 알아보았다.

Css-In-JS 대표적인 라이브러리라서 장*단점은 워낙 명확했다. 따로 css파일을 만들지 않아도 되었지만 그만큼 js파일안에 들어가는 코드줄이 길어진다는 것이다. 그래서 처음에 컴포넌트 분리를 안 한채로 하다보니 더욱 더 가독성이 떨어지고, 남들 눈에 이뻐보이지 않았다.

그래서 이 단점을 해결하고자 내가 만들어야 할 부분을 어떻게 분리해야 하는지 가상으로 그림(선 구분)으로 그려가면서 빠르게 컴포넌트화 작업을 해주었다. 이 작업의 생각을 하면서 들어갔어야 하는데, 짧은 기간이라 조급함 마음에 더 그랬던 것 같다.

이 작업이 끝난 뒤 다음 할 일들도 다시 재수정하면서 남들보다 느리더라도 차근차근 해결해나가는 모습의 나를 보면서, '아 내 마음생각 안에 있는 '조급함'을 내려두고 내가 해야 할 일이 무엇인지 순서대로 적어보고 차근차근 메모하며 피드백 받는 훈련을 해야겠다'는 생각이 들었다.

'교육참여 > [저스트코드]' 카테고리의 다른 글

[회고록] 기업협업 프로젝트 3rd 개인과제 (221011 ~ 221019) (0)	2022.10.23
[회고록] 기업협업 프로젝트 2nd 과제 (221007 ~221009) (0)	2022.10.23
[회고록] 기업협업 팀프로젝트 1st 과제 (221004 ~ 221006) (0)	2022.10.10
[회고록] 팀 프로젝트 1차_'미래식당' 을 참고하여 개발한 프로젝트 (220829 ~ 220908) (0)	2022.09.17
[저스트코드 회고록] 팀 프로젝트 들어가기 전 (220707 ~ 220826) (1)	2022.09.13