![[회고록] 팀 포르젝트 2차_'FLO'을 참고하여 개발한 프로젝트 (220919 ~ 220930)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FlI8Q2%2FbtrYvmStdlR%2Fv2lvrUAAOCh8OComZYbgYK%2Fimg.png)
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 |