오늘도 DND 프로젝트를 이어서 했다. 오늘은 로그인 구현 및 메인페이지 정보들 불러오는 작업을 하였다.
1. 로그인 구현
우리 로그인은 jwt를 이용하여 하는데 지금 하는 방식이 좀 좋지 않은 방식이라는 생각이 들었다. 지금 React + spring boot로 이루어져있는데 클라이언트에서 로그인을 하면 서버에서 jwt를 보내주고 그것을 localstorage에 저장하고 그 정보를 해독해서 id를 받아와서 정보를 보여주는 식으로 하였는데 이게 맞는지 모르겠다. 일단 많은 곳에서 jwt를 localstorage에 저장하지 말라는 글을 보았고 이 jwt를 해독해서 id를 넣어주는게 맞는지도 확실하지 않은 것 같다. 예전에 express로 할 때 github에서 이런 방식을 찾아서 했었는데 지금 생각해보니 보안에 아주 취약할 것 같아서 고민이다. 백엔드 팀에서 이미 쿠키 세션으로 안 해놨으니... 일단 이렇게 해보고 jwt를 어떻게 저장하는게 더 좋을지 시간 남으면 좀 더 찾아봐야겠다.
-> 오픈 카카오톡에서 jwt도 cookie에 저장하는게 좋다. 그런 말이 나왔는데 jwt를 어떻게 cookie에 저장하는건지 잘 모르겠어서 찾아봐야겠따!!
쿠키 세션은 저번에 공부했어서 httponly 등으로 보안이 좀 더 좋다고 하는데 이것도 한번 더 제대로 공부해야겠다.
2. 메인 페이지 정보 가져오기
메인 페이지 정보 가져오는 것은 그냥 get 방식으로 request를 보내면 되어서 쉬웠다. 여러개의 정보가 배열로 왔고 그 배열을 map을 사용해서 redux store의 state에 넣어주었다. 그리고 그것을 useSelector로 가지고 왔다.
그런데 고민이였던 것이 로그인을 하지 않은 상태일 때는 그냥 전체 정보에서 5개정도 가져오는 것이었는데 자동로그인이 된 상태일 때는 근처 지역 정보를 5개 가지고 와야 해서... 마이페이지 들어갔을 때 나의 정보를 가져오는 로직이였는데 변경해서 메인 페이지부터 나의 정보를 가지고 와서 redux store state에 저장하는걸로 하였다. 그래서 자동로그인인지 아닌지 판단하기 위해 getInitailProps에서 localStorage에 토큰이 있는지 확인하려 했는데, getInitialProps는 서버에서 실행되는 것이기 때문에 localStorage를 확인할 수 없었다..!! 어쩔 수 없이 _app.js에서 useEffect로 확인하려 했는데 확인하고 있으면 dispatch를 보내려고 하니깐 redux의 Provider 밖이라서 안된다고 한다!!! 그래서 모든 화면에 공통으로 쓰이는 AppLayout.js 쪽에서 확인해서 로그인을 시켜주었다.
* 1. AppLayout.js에서 토큰 확인 후 로그인
* 2. Main.js의 useEffect에서 메인 정보들을 가져오는 dispatch를 실행.
* 3. saga에서 서버로 요청을 보내고 받아와서 redux store에 저장이런식으로 구현하였다...(data들을 다 ssr 해서 가져오고 싶었는데... 유저 정보를 가져오고 나서 해야 하니 어쩔 수 없...었다..?) 그래서 렌더링 되는데 어느정도 걸릴 줄 알았는데 그래도 바로 잘 렌더링 되는거 같아서 만족했다.
이제 심부름이나 잡일 등의 카테고리를 눌렸을 때 나오는 전체적인 목록들은 getInitialProps를 사용해 ssr로 가져오게 구현해봐야겠다!!
3. navBar 선택한 메뉴 글자 색 변하게
원래는 selected 라는 state 값을 주고 메뉴를 클릭하면 그 메뉴마다 정해놓은 name을 selected에 주고 css의 속성선택자([])를 사용하여 구현했었다. 그런데 뒤로 가기를 누르면 제대로 작동하지 않고 여러가지로 에러 상황들이 많았다. 그래서 바꾸기로 생각하고 url에 따라서 다르게 나타나도록 구현하고자 했다. 그래서 구현한 방법은 _app.js에서 getInitialProps의 ctx.asPath를 props로 내려주고
useEffect(() => { // asPath에 따라서 header 부분 색 바뀌게
setSelected(asPath.split('/')[1]);
}, [asPath]);
로 하여서 /를 뺀 값에 따라서 selected의 값이 바뀌게 했다. 그리고 나서 styled-components 부분에 selected를 props로 주고
& a[name=${props => props.selected}]{
color : #ff4300;
}이런식으로 주니깐 되었다. a 태그의 name과 props의 selected랑 같으면 color를 바꿔주라는 거였다. 그런데 회원가입 메뉴는 처음에 회원가입 동의창 -> 회원가입으로 가는 방식이라 url 2개에 색이 칠해질 필요가 있었고 그래서 a태그의 name에 "1 2" 로 두개를 주었고
& a[name~=${props => props.selected}]{
color : #ff4300;
}으로 바꿔서 해결했다. ~는 "'attr' 속성의 값에 'val'이 포함되는 요소를 선택합니다.(공백으로 분리된 값이 일치해야 합니다.)" 이였고 *은 "'attr' 속성의 값에 'val'이 포함되는 요소를 선택합니다." 이였다.
정확하게 하는게 더 좋을 것 같아서 ~를 사용하여 구현하였다.
이렇게 하니깐 url에 따라서 메뉴의 색이 잘 바뀌니 훨씬 좋았다. 뒤로가기를 눌려도 색이 알맞게 잘 된다!!
오늘의 삽질일기 끝..
