02 - 24 ~ 02 - 25 일지
특이사항 : 팀플레이
어제부터 오늘, 2일간 팀 작업을 시작했다. 꽤나 많은 일들이 있었고, 여기에 어떻게든 적어보겠는데 만약 다 못적겠으면 내일 일지에 마저 쓸 것이다.
24일 오전
팀 빌딩, 자기소개, 피그마 및 노션 작성
특이사항
딱히 없다. 그냥 이것저것 짜면서 꽤나 바쁘게 보냈다. 피그마의 활용법을 다들 익히면서 진행하다 보니 뭔가 조금 조잡하게 진행되었다. 특히 그룹화, 다들 그룹화를 안해!!!!! 나는 어도비 다루면서 그룹화의 중요성을 배웠기에 망정이지, 나까지 안했으면 수 백개의 네모조각에 둘러쌓여 고통받을 것이다. 으으.....
오후
병원에 가느라 빠졌다. 콩팥 상태가 썩 좋지 못하다. 진짜 좋지 못하다.....투석 얘기까지 나왔는데 결과는 언제나오는 거람...
저녁
로그인 페이지 기능 구현
프론트 팀원이 대충 html 구조를 짜놔줬다. 필요한 라이브러리도 다 갖춰놓고, 솔직히 약간 감동했다. 첫날에 구현한 것은 단순한 서버 전달만 했다. 우리 프론트가 로그인 기능에 대해 아예 아무것도 배운 적이 없어서 어떤 식으로든 배운 백 친구들의 진도에 따라 잡으려고 엄청 고생했었다.
심야
통신 자체는 생각보다 쉬웠다. 리액트 쿼리 덕분이겠지.....통신 구조 자체는 프론트 입장에선 크게 겁내거나 변경시킬 것이 없었다. 하던대로 url 링크 연결해서, post나 get 시키면 되는 것이다. 그렇게 해서 로그인 기능을 구현해보려 했는데, 새벽까지 계속 CORS 에러가 나는 것이다. 결국 이걸 해결하지 못하고 밤으로 넘어갔다.
정리
24일 - 기본 얼개 맞추기, 통신 연결 시도해보기, 허나 실패
25일 오전
로그인, 회원가입 기능 구현
완전 단순하게, post로 주고받는 것만 해서 기능을 구현했다. 이것까지는 어떻게 했다. 어제 발생했던 문제도 백 친구들의 설정 오류인 것을 확인하자 쉽게쉽게 로그인 기능이 구현되었다.
오후
JWT와 쿠키 방식에 대해 배웠다. 개념을 정리한다.
제이슨 웹 토큰
사용자가 로그인하면 토큰을 출력해서 그냥 통쨰로 건네준다. 서버는 기억하질 않는다. 토큰은 알파벳이랑 글자가 섞여있는 인코딩된 3가지 데이터 덩어리다.
헤더 - 두 가지 정보가 담겨있다. type, 토큰의 타입인데 항상 JWT로 고정된다. 다른 하나는 alg, 알고리즘이다. 여기엔 3번 서명값을 만드는데 사용될 알고리즘이 지정된다. HS256등 암호화 방식 중 하나를 지정해서 꽂아넣는다.
페이로드 - 제이슨 형식으로 나오는 정보인데, 누가 누구에게 발급했는지, 유효기간은 언제인지, 서비스가 이 토큰을 통해 공개하기를 원하는 내용(닉네임, 서비스 레벨, 관리자 여부 등)서비스 측에서 원하는대로 담는다. 이를 claim이라고 한다.
베리파이 시그니쳐(서명) - 헤더와 페이로드, ‘서버에 감춰진 비밀 값’ 셋을 암호화 알고리즘에 넣고 돌리면 3번 서명이 나온다.
로그인에 성공하면, 서버에서 이쁘장한 JWT를 전달해준다. 그러면 로그인 성공에 한해 setCookie(내가 만든 커스텀 훅)로 더 이쁘장하게 포장한다. 여기서 이제 또 문제가 발생한다.
그럼 이걸 어떻게 헤더에 넣어서 인증 요청을 한담?
25일 저녁
매니저님과의 길고 긴 문답 끝에 방식을 찾았다. JWT를 response에 받아서 쿠키에 꽂아넣는 것이었다. 보안 상으로는 굉장히 무시무시한 취약점이고 원래는 응답 헤더에 있는 것을 받아다 해야하지만 내 실력으로는 헤더를 풀어보는 것이 힘들어서 차후로 미뤘다. 다행히 백분들이 헤더에도 JWT를 받고, 응답에도 넣어줘서 나중에 내가 바꾸기만 하면 된다.
보이는가 저 우람한 Bear.....뭐시기뭐시기가! 저게 바로 우리 이쁜 JWT이다. 이제 저걸
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 |
const CheckLogin = async (event) => {
event.preventDefault();
const data = {
username,
password
}
try{
const res = await mutate.mutateAsync(data)
const {status, message} = res.data
if(status == true){
window.alert('로그인 성공!')
setCookie("wow", res.data.data, {path: "/", sameSite:"strict"})
navi("/Write")
}
}
catch(error){
window.alert(error.response.data.message)
}
}
|
cs |
이렇게 setCookie 커스텀 훅으로 꽂으면 된다. 그러면 저 setCookie는 무엇이냐? 구글링으로 얻어낸 귀한 Cookie 관련 블로그 글에서 얻어온 커스텀 훅 구조를 복붙했다....원한다면 따로 검색해서 찾아가자. 힌트는 react-cookie다.
여하튼 이렇게 받아온 JWT를 쿠키에 꽂아서 인증 요청을 할 때 마다 헤더에 박아서 보내면 된다. 그러면 따란! 백 친구들이 알아서 해주시겠지......내가 좀 더 편하게 전달해주고 싶어도 방법이 이것 뿐이라....