orderResult 만들기

주문페이지부터 완료페이지까지 정말 문제가 많았던 담당파트였다.

주문 페이지쪽에서 너무 많은 시간을 허비한 탓에 주문완료페이지들 만들때는 시간이 하루 반정도가 남아있었다.
그래도 미리 만들어둔 데이터를 fetch해서 get요청으로 주문완료페이지를 띄워주면 될테니 금방 끝낼수있겠지라고 생각했다.

하지만 항상 그렇듯 쉽지않았다..

문제 발생(1) : 함수가 아니다.

데이터가 잘 들어오는것을 확인했는데 브라우저에서는 orders.map이 함수가 아니라고떴다.
엥? 이제까지 이렇게 잘 쓰고 있었는데 갑자기 함수가 아니라고뜨니 당황스러웠다.
확인해보니 어느 순간은 되고 어느순간은 빈배열이고했다.
이때 문득 재랜더링에 시간이 걸려서 빈 배열이 나오는게 아닐까 싶었다.
다른 프론트분께 물어보니 내가 생각한 이유가 맞았고 옵셔널체이닝(?.)을 사용하면 된다고 했다.

몇일전 아는 프론트분이 에러나면 옵셔널체이닝 다 찍어보면서 찾아야한다고 했던 말이 기억났다.

옵셔널 체이닝(?.)

안전탐색연산자 또는 null전파라고 하는데 null값이나 정의되지 않은 값이 발생할 경우 개체의 속성에 안전하게 접근하여 함수를 호출 할 수 있다. 옵셔널 체이닝을 사용하면 속성에 액세스하거나 null 또는 정의되지 않은 값에서 메서드를 호출하여 프로그램이 충돌하거나 런타임 오류가 발생하는 것을 방지할 수 있다고한다.

문제 발생(2) 소통의 문제 + a

처음에 레이아웃을짤때 이건 넣고 이건빼고 하면서 레이아웃을 짰다.
그모습 그대로 만들었고 백엔드분들에게 보여드렸을때 created_at이나 다른 없는 것들이 테이블에존재하지않아서 빼야하는 경우가 생겼다.
이때 내가 데이터가 어떻게 들어오는지 몰라서 user, orderResult,상수데이터를 따로 만들어서
map함수를 돌리고 있었는데 고치느라 살짝 애먹었다.
정말 막노동이라서 map함수는 너무 남용하면 안된다는 생각을 다시했다.

문제 발생(3) GET요청 API가 없다?

이번 프로젝트때 가장 어려웠던 점.
잠도 잠대로 못자고 다만들었는데 생각해보니 엊그제 get요청 api가 없다고 프론트쪽에서 처리해달라는 말을 들었다.
useLocation을 사용하면 된다는건 알고있는데 인터넷에 검색했을때 코드들도 설명도 짧아서 무슨말인지 잘 이해되지 않았다.
급한대로 생각한 방법은 props로 데이터를 전달하는거였는데 이경우 주문번호가 없고, 날짜도 내가 버튼을 누른 순간 new Date를 써서 만들어야하나 고민했다.

일단 백엔드분께 res로 데이터를 보내줄수 있는지 물어보니 줄 수 있다고 하셨다.
근데 내가 못받아옴..!끄앙
res.data를 찍어도 계속 빈배열이나오고 내일은 발표날인데..!!
머리를 싸메고 끙끙 댔다.

머리를 싸메고 끙끙 대다가 결국 모달창으로 바꾸기로 마음먹었다.
근데 나는 모달창을 만들어본적이없었다.

결국 지나가던 먼저끝난 다른팀의 프론트분과함께 props로 order페이지에있는 값들을 orderResult로 보내는 코드로 다시 다 바꾸고 없는데이터는 가짜 데이터로 대체하였다.

완성된 결과물

이랬던 레이아웃에서

아래의 모달창으로 변경되었다.

결과물..불만족..

프론트 어려워..

새롭게 배운점

1. 옵셔널 체이닝

옵셔널 체이닝을 통해서 값이 제대로 들어오고있는지 확인하는 방법을 알았다.

2. 들어올 값은 확실하게 체크하자

레이아웃을 만들때 이런거 넣을까요? 좋아요하면서 만들기는 했지만 기획은 계속해서 변하고
각자 담당하는 업무가 있어서 내가 좀 더 구체적으로 물어봤어야했다.
아니면 erd라도 내가 보던가해서 테이블에 뭐가 있는지 확인했어야했는데..
다음부터는 들어올 값을 확실하게 체크하자.

3. Props

나는 아직 props를 제대로 이해하지 못했다는점을 알았다. 프로젝트 끝나고 다시 공부해야겠다.

아쉬운점

1. useLocation

백엔드 멘토님이 get요청 api를 만들지 말라고한 이유는 알고있다.
나또한 프론트쪽에서 할 수 있다면 굳이 데이터비용을 낭비할 필요가 없다고 느끼고 시작했으니까.
근데 그걸 못했다?
아..이건 내가 프로젝트끝나고나 학원끝나고 반드시 해본다.