1. 어제 코드 수정리뷰
어제의 코드를 올렸는데 리뷰로 "함수보다는 변수로 쓰는 게 나아보여요"라는 말을 들었다.
...무슨...소리지ㅠㅠ 근데 아무리 생각해도 이게 무슨 소리냐고 물어보는 건 넘 바보같은 질문이어서 그때부터 변수에 함수를 담는 방법을 열심히 찾았다.
그러면서 왜 삼항연산자는 return 문 안에서 쓸 수 있는지 알게 되었다.
"if문은 표현식이 아니고 어떤 값을 return하는 거라서 불가능하지만 삼항 연산자는 표현식이기 때문"이었다.
어쨌든 결론적으로는 무슨 소린지 잘 모르겠어서 그냥 또 물어봄🫠
let buttonText;
if (status === 'HIGH') {
buttonText = <button>HIGH</button>
};
if (status === 'LOW') {
buttonText = <button>LOW</button>
};
const example = () => {
return (
<div>{buttonText}</div>
)
}그러니까 아예 하나로 묶을 필요가 없었던 것...
하나로 묶어야 한다는 강박에 사로잡혀서 그만...
이건 함수에 대한 설명 잘 되어있으니 때 될 때마다 보려고 메모.
2. useMutation
이건 코드 가져올 기운 없어서 말로만 할게...
지금 만들고 있는 페이지가 배송지 정보 리스트 뜨는 페이지인데 여기서 '새 배송지 추가' '수정' '삭제' 버튼이 이렇게 세 개 있다.
나는 버튼에 이벤트 걸 생각까지는 딱히 하지 않았는데 리뷰 왔을 때 "버튼이라면 이벤트가 있어야 합니다"라는 말을 듣고 '음, 그럼 이벤트를 만들어야겠군' 하고 생각했다.
그래서 useMutation을 이용해 정보를 바꿔야 하는 것을 깨닫고 이해하려고 노력했다(물론 여기까지 이미 2시간 정도 걸리고 실패함).
이 다음에는 몰라서 물어보고는 설명을 들은 다음에 delete와 post까지는 성공했다.
왜냐면 얘네는 간단한 작업인 거야. 아직 API 연결이 되지는 않고 있어서 그냥 네트워크 통신이 되는지 바디값에 내가 원한 정보가 날아가는지 정도만 보면 됐다.
그러나 문제는 put이었다...
얘는 원하는 idx값의 정보를 가져와서 걔를 변경한 다음에 다시 정보를 날려야 되잖아?
모르겠죠? 너무 복잡하죠? 머리가 핑핑 돌죠?
몇 시간을 하다가 아 이제 물어봐야겠다! 하고 물어봐서 설명을 쭉 다 들었는데...
일단 내가 여태까지 너무 프론트엔드에만 집중하고 있었고 실질적으로 백엔드와 협업하는 일은 거의 회사 와서가 처음이라 API 문서를 보는 법만 알고 해석하는 법은 모르는 게 문제였다.
나는 put을 할 때 내가 idx를 보내주면 그 값을 받아서 프론트에서 고친 다음에 다시 날려줘야 된다고 생각하고 '어떻게 데이터를 담아서 보내줘야 하는 거지?ㅈㅣ!🫠' 하고 있었다.
근데 사수분은 문서 보시더니 '200이 ok가 날아오는 거면 우리가 프론트에서 값을 바꿔주는 작업을 할 필요가 없다. 이건 백엔드에서 알아서 처리가 되어 있을 거니까 값을 보내기만 하면 끝이다. 그러면 백엔드에서 코드 짜놓은대로 idx로 맞는 정보 들어가서 내가 보낸 값으로 수정하고 다 수정됐으면 프론트로 200 코드 날아올 거다'라고 해서... 넘나리 충격이었다... 그렇구나... 백엔드는 짱이구나... 오키오키...
무엇보다 이 모든 일이 소용없어진 이유는 따로 있었는데~!
배송지 추가나 수정 버튼을 만들면서도 '새로운 배송지 정보는 어디다가 입력하지?(왜냐면 내가 만드는 페이지는 말 그대로 배송지 리스트 페이지여서 입력 칸이 없었음)'라는 생각은 했었다.
근데 피그마 보니까 그 페이지는 따로 있는 거야.
그럼... useMutation을 여기서 쓸 일이 아니었던 것이다...
나는 그냥 버튼 이벤트에 페이지 url이나 바꿔주고 땡 치면 됐던 것이었다...
너무 어이없어서 웃음이 다 났음...
하지만 어차피 배워야 할 거 미리 배우긴 한 거니깐 뭐...^^..........
ㅎㅎ........ 우당탕탕 신입아기 TIL 이번주도 끝.......
