CRUD의 기능 구현이 마무리 되어, 오늘은 전체적인 뷰를 만질 것 같다.
---> 저녁에 디자이너분과의 기획 회의 중 디자인이 아주 많이 수정될 요망이어서 보류..
---> 반응형까지 구현해보기로 결정..!
React Query
리액트 쿼리에 대해 궁금해져 강의를 찾아 들었는데,
데이터를 효과적으로 관리하는 것을 보면서 굳이 리덕스가 필요한 건가...? 라는 의문을 갖게 되었다.
그리고 정리했다! 명확한 차이점이 있었다!
- Redux, Recoil, MobX : 전역 상태 관리
- SWR, React Query : 서버 상태 관리
==> Redux(전역 상태 관리)가 나온 이유 ?
: 컴포넌트가 길게 이어질 때, 위에서부터 props를 차례대로 전달하는 것이 비효율적이어서
: 전역으로 모든 컴포넌트에서 다양하게 쓰이는 값을 보관하기 위한 용도로 사용
==> React Query(서버 상태 관리)가 나온 이유 ?
: 처음에는 서버 데이터도 다른 컴포넌트에서 쓰니까 리덕스에 보관했는데 ...
: 리덕스에 전부 보관하려니 서버 데이터 양이 너무 많고, 관리가 번거로워서
: '서버 데이터만' 관리해주는 라이브러리 탄생
Refresh Token
저번주 클론 코딩 때 로그인, 회원가입 부문을 맡았었는데 당시에는 refresh token 을 쓰지 않았다.
그래서 이번에 프론트엔드 팀원 분이 refresh token을 활용해서 로직을 짜시길래 옆에서 열심히 어깨너머 같이 공부 중이다..
==> acesstoken을 발급 받을 때 refresh token을 활용한다.
- 타이머는 JavaScript를 사용해서 만들기 때문에 새로고침하면 리셋이 되고, 그렇게 되면 token을 다시 발급받아와야 한다.
- 로그인 유지 혹은 사용자가 로그인 페이지를 벗어났을 경우,
-
acesstoken token = 30분 (토큰 안의 유효시간은 백에서만 확인 가능)
-
refresh token = 2주
이므로 시간이 만료돼서 만료 오류가 나올 경우, 재요청 해서 새 token을 받아와야 한다.
그런데 refresh token 까지 만료되면 새 token을 받아 오지 못한다.
--> cookie 와 local storage 삭제
CSS 세로정렬
'****' 와 '비밀번호 변경하기' 버튼을 세로 정렬 하고 싶어서 온갖 노력을 다했다..
1. font-size와 line-height size 동일하게 조정하기
2. vertical-align:middle 적용시키기
사실 margin 이나 absolute로 주는 것이 가능했으나, 그렇게 주고 싶지 않았다.
조금 더 깔끔하게 세로 정렬을 하고 싶었다.
이론상 안될 리가 없는데 왜 되지 않는걸까 고민하고 연구한 결과 ..
놀랍게도 '일반 문자'와 '*' 의 세로정렬이 다른 모습을 볼 수 있었다.
'arar'은 제대로 세로 정렬이 된 반면, ''은 위에 붙어서 움직이지 않고 있다.
이를 미루어 보아 애초에 ''은 글자 밑 부분 여백이 일반 문자보다 큰 것을 짐작할 수 있다.
이는 폰트마다 또 다른 양상을 보일 것이기 때문에 참고해야 할 것 같다 ..
그리고 나는 이 '*'을 '비밀번호 변경하기' 버튼의 중앙선에 맞출 수 있도록 조치를 취했다.
'***' Pwd 부분에 position : relative 을 주고, top에서 5px 떨어지도록 했다.
제대로 정렬된 모습을 볼 수 있다!
