2차 다이어리 : https://velog.io/@jakesungjaekim/Wecode-2nd-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%ED%9B%84%EA%B8%B0
내가 구현 한 것들 CODE & 시연 영상
재사용성있는 Button, TextArea, Card Component 만들기
만들어보고, 재사용을 해보면서 느낀것은 팀 프로젝트에서 제일 중요한 작업이라고 느꼈다. 왜냐하면, 재사용성이라는 것은 리액트에서 정말 정말 중요하다고 생각하는데 이렇게 아톰단위의 컴포넌트를 먼저 선 작업을 마쳐두니까 여러모로 편리하고 좋았다.
Footer 만들기
푸터만들기, 반응형 CSS로 구성하지 않았기 때문에 상대적으로 데스크탑 차이에 의한 UI차이를 극복하기 어려웠다. 최선은 min,max-width값 설정을 통해서 방지하는 것 뿐,,
구독페이지
-
구독페이지는 Card, Button 컴포넌트를 적극 재활용해서 UI를 만든 페이지이다.
동적값을 받게 설정해준 탓에 원하는 크기에 맞게끔 설정할 수 있어서 매우 편리했다. 다만, 처음에 card 컴포넌트를 선언식으로 구성하여서 props값을 받으려면 코드를 더 타이트하게 적어야했던 문제가 있었다.
그리고 두번의 카드가 하나의 컴포넌트로 구성할 수 있게 하나로 만들어서 맵을 돌려서 만들었다. 구독페이지 같은 경우는 백엔드에서 데이터를 가져오는게 아니라, 상수데이터로 UI를 렌더링하자고 약속이 됐기 때문에 ( 나중에 마이페이지에서 값을 받으면 원하는 카드로 보일 수 있지 않을까?해서 재사용성을 높이자 생각해서 하나의 컴포넌트로 구성했는데 .. 구상을 깊게 안한탓일까, 데이터를 주고 받는 상황이 난해 한 탓이었을까? 제대로 렌더링할 수 없었다 ) -
결제CODE
back-end쪽으로 subscriptionId 값을 보내서 result값을 받으면, url주소를 카카오결제 주소로 할당하여서 이동한다. 이런구조였군!
로그인페이지
카카오 로그인 같은 경우는, .env파일에 REST_API_KEY와 REDIRECT_KEY를 적어서 보안성을 높이고,
OAUTH.js 파일에 다음과 같이 값을 저장한다.
그래서 카카오 로그인을 할 페이지에 a태그로 카카오AuthUrl을 불러와서 보낸다.
그래서 버튼을 눌렀을 때 카카오URL로 이동시켜서, 카카오측에서 인가코드를 받으면 인가코드를 저장해서 백엔드로 보낸다. 보낸 것을 통해서 답을 받아서, 이에 따른 then, catch를 작성하면 된다!!
마이페이지
마이페이지에서 핵심 기능은 구매한 영화에 대해서 데이터를 불러와서 (마이페이지에서만 리뷰를 달 수 있게 구현하였음:: 구매했던 내역에 한 해서 댓글을 다는게 트렌드라고함) 리뷰 CRUD를 하는 것이었다. 그리고 구독한 내역을 불러와서, 구독 취소를 누르면 백엔드로 구독취소값을 전해주고, 마이페이지에서는 유저의 정보를 가져오며, 장바구니에서는 영화를 담아두었던 것들을 가져와 렌더링 한다. 취소환불은 구현하지 못하였음ㅠㅠ..
마이페이지 같은 경우에는 잘 못 생각했던 부분이, 쿼리스트링으로 화면을 재 렌더링하는 구조인 줄 알았으나. 리액트 아울렛을 사용해서 조건부렌더링에따라 각 컴포넌트를 불러와서 렌더링하는 구조였다. 그래서 실질적으로 마이페이지는 약 5-7페이지를 제작하는 것이나 다름없었다.
CRUD 핵심 function
이번 CRUD를 하면서 많이 배운 것은, 컴포넌트를 어디에서 map을 돌리냐에 따라서 각 컴포넌트 useState를 관리할 수 있는 영역이 다르다는 것이었는데.. 그래서 굉장히 컴포넌트 구조,레벨에 대해서 조금 더 깊게 알 수 있었던 시간이었다.
마이페이지를 하면서 많이 배운 것은, 각 버튼이 각 페이지가 백엔드와의 소통을 해야 했기 때문에 짧은 프로젝트 기간동안에서도 더 많이 경험을 해볼 수 있었다고 생각하기 때문에 많이 배운 것 같다 !!
