D'story

오늘 한 일

• 어제, 로그인 시도하면 자동으로 새로운 페이지로 리다이렉트 되어야 하는데 그게 안 되고 끝났었다.
• 그걸 해결하시는 과정에서 승진님이 전체적인 플로우를 바꾸셨고, 오늘 출근했을 때는 이미 내 코드에서도 그 부분을 고쳐주신 상태였기 때문에 나는 사실상 플로우 변화에 큰 영향을 받지 않은 거나 다름없었다. 다시 그려주신 다이어그램과 수정해주신 코드를 하나씩 비교하면서 실행해보니 이해하는 데 큰 어려움은 없었다.
• 변경된 플로우에 맞춰 그 외 다른 코드들을 조금씩 변경한 후에는 다시 로컬에서 뷰로 동일한 내용의 작업을 진행했다. 언제 리액트랑 바꿔치기 해야 될지 알 수 없으니 미리미리...!

오늘 배운 것

• 서버가 응답 헤더에 쿠키를 넣어서 보내주려면, 앞단에서는 그 직전 요청에 withCredentials 옵션을 보내줘야 한다. axios를 쓰는 경우로 예를 들면 이렇다. 헤더에 따로 넣을 필요 없이 config 부분에 그냥 바로 넣어주면 된다.

axios.post('http://server.url', {body_key: body_value}, {withCredentials: true});

• 아래 링크에 따르면 서버쪽에서도 쿠키를 넣을 때 헤더에 Access-Control-Allow-Credentials 옵션을 함께 넣어줘야 한단다. 그러면 헤더에 쿠키가 실려온다. 이후 이 쿠키는 같은 서버로 요청을 보낼 때마다 자동으로 헤더에 들어가게 된다. 정말 놀라운 사실은, 나는 이 쿠키를 서버에서 생성해서 넘길 수 있다는 것 자체를 처음 알았다. 항상 앞단에서 자체적으로 생성하곤 했었는데... 하나만 알고 둘은 몰랐구나ㅠㅠ

오늘 한 일

• 출근해서 맞닥뜨린 가장 첫 이슈였다. 댓글을 삭제하기 위해 서버로 DELETE 요청을 보내는데, 분명 형식에 맞춰 보냈는데도 왜인지 자꾸만 400 에러가 뜨고 오류의 원인은 쉽게 찾아지지가 않았다.
• 400이 뜨는 만큼 내가 뭔가 잘못한 것 같기는 한데 명확한 에러 메시지도, 가늠해 볼만한 단서도 없어서 일단 구글링을 시작했다.
• 찾아보니 DELETE에 request body를 보내도 되느냐를 가지고 제각기 말들이 많았다. 아니 근데 나도 body 보내는데...!?
• 이것과 관련한 문제가 맞을 것 같은 예감이 들었고, 그러던 중 스택오버플로우에서 해결책을 찾았다.

오늘 배운 것

• request body를 data라는 키를 붙인 객체로 만든다. {key: value} 이었다면 {data: {key: value}} 이런 식으로. 단순히 이걸로 해결된다니...

오늘 한 일

• 어제 퇴근 전에 주어진 게시판 모듈 만들기 작업을 하고 있다. 해당 컴포넌트에 DB에 저장된 리소스 이름, 테이블 형태로 보여줄 데이터 중 선택한 키 배열을 props로 넘기면 자동(?)으로 게시판을 생성하는 기본적인 기능은 거의 구현했고, 좀 더 사용성 좋게 만드는 일만 남았다. 물론 그게 하루 이틀 만에 될 일은 아니겠지만.
• 게시판 모듈에 반드시 포함되어야 하는 기능 중 하나가 페이지네이션이었다. 예전에 프로젝트 할 때 서버에서 페이지별로 데이터를 어떻게 끊어서 보내줄 것인가, 그 다음 페이지가 있는지 없는지를 어떻게 확인하도록 해줄 것인가를 가지고 백엔드 분하고 같이 고민해본 기억이 난다. 이사님께 말씀드렸더니 서버에서 보내주는 응답 헤더에 있는 Content-Range를 확인하면 DB에 저장된 데이터의 총 개수를 알 수 있다고 하셨다. 오... 전혀 몰랐다...
• 요청에 대한 응답이 올 때마다 헤더로 데이터 총 개수를 확인할 수 있고, DB로 API 요청을 보낼 때 range 쿼리를 날리면 딱 그만큼의 범위에 해당하는 데이터만 돌아온다. 그렇다면 페이지네이션은 내가 쿼리만 잘 날리고 헤더만 잘 보면 되는 것이었다! 고민했던 그때의 경험에 비하면 너무 손쉽게 해결되어 버렸다.

오늘 배운 것

• 서버의 응답 헤더 속 Content-Range에 대한 설명