일단 작동만 되게 한다😎
2주차에는 데모 발표가 있는 날이였다.
그래서 그런지, 저번 주에 개발 진행이 많이 안 되어서 그런지,
어쩌면 둘 다였을지도 2주차는 정말 바빴다.👿
금요일까지 1차 스프린트 계획서에 목표로 적어 내었던
로그인과, 게시글 포스팅 기능을 어떻게든 작동하게 하여서 보여주어야 하는데 월요일까지 UI를 하나도 그리지 못하였다.😭
결국은 월,화는 UI를 그리고, 수요일은 비동기 통신 연결, 목요일은 발표 준비 금요일은 데모데이 발표와 2차 스프린트 관련 회의를 하는 것으로 2주차를 마무리하게 되었다.
작동은 어찌어찌 되긴 됐지만, 마음에 들지 않은 것 투성이다.
UI관련해서는
반응형을 구현하지 못하였고, (현재 모바일 버전의 화면만 그려져 있는 상태이다)
애니메이션 효과같은 것도 추가되지 못하였다.
로직관련해서는
상수화 되지않은 매직넘버들과,
로그인시 상태관리를 어떻게 할 것인지 등이 처리되지 못하였다.
아마 2차 스프린트 때도 1차 때와 비슷하게 바쁘게 진행될 것 같다.
아마도 더 바쁘게 될지도?
일단, 구현해야할 목표가 많아졌고,
UI 디자인도 프론트쪽에서 도맡아서 하기 때문이다.
그래서 이번에는 기능을 구현하는 단계에서 리팩토링을 습관적으로 해야할 것 같다. 내가 지금 짠 코드를 언제 리팩토링 할 수 있을지 잘 모르겠다. 물론 레벨4 때에 리팩토링을 목표로 하는 기간이 있기는 하지만 코드에 대한 기억이 조금이라도 남아있을 때 리팩토링을 진행하면 좋을 것 같다.
로그인
이번 2주차 때에는 깃허브 로그인 기능을 구현하였다.
게시글을 작성하기 위해서는 로그인을 통한 accessToken이 있어야 했기 때문에, 로그인을 먼저 구현하게 되었다.
지금 당장, 회원가입 기능을 구현하는 것에는 시간상 무리라고 생각이 들어, 깃허브 OAuth를 활용해서 로그인을 진행하기로 하였다.
일단 간략하게 프론트 쪽에서 진행했던 플로우만 적어보겠다.
유저가 로그인 버튼을 클릭한다 ->
백엔드에게 GithubOAuth 관련 인증 페이지 주소를 GET으로 요청한다 ->
유저를 GithubOAuth 인증 페이지로 이동한다 ->
Authorize버튼을 클릭하여 유저는 권한을 허용해준다 ->
깃허브가 user에 대한 정보를 code로 param에 담아 우리의 홈페이지 주소로 redirect 시킨다 ->
프론트에서 주소 변경을 감지하여 유저에 대한 정보가 담긴 code를 받는다 ->
해당 code를 담아서 백엔드에게 로그인 요청을 보낸다 ->
로그인 요청에 대한 응답값으로 받아온 accessToken을 sessionStorage에 저장한다
다행이도, 맛집이라는 여름방학때 진행한 서브 프로젝트에서
GithubOAuth를 활용한 로그인 기능을 구현한 적이 있었기에 이번에 과정은 복잡하긴 하지만 어렵지 않게 깃허브 로그인 기능을 개발할 수 있었다.
❗️Have to Do
유저가 현재 로그인인 상태인지 여부를 계속해서 관리해야한다.
현재는, sessionStorage에서 accessToken을 저장하기에
sessionStorage에 accessToken이 저장되어있는지 여부로 로그인을 확인한다.
그런데 해당 방식으로 관리하게 되면,
로그인 여부에 따라서 각 페이지 접근 권한을 주는 기능을 구현할 때에 매번 sessionStorage에서 값을 확인하는 과정이 번거롭게 되어서 이를 관리하는 전역 상태를 만들고자 한다.
게시글 작성
게시글 작성 시, react-query를 이용하여 비동기 통신을 처리하였다.
서버의 DB에서의 정보가 변경되는 작업이기 때문에 react-query에서 제공하는 useMutation을 사용하게 되었다.
useQuery를 먼저 사용하였을 때에,
비동기 코드들을 미리 선언하여 컴포넌트가 렌더링 될때에 같이 실행되는 비동기를 동기처럼 처리 해주는 것이 강점인 것을 느꼈다.
그런데 유저가 form에 입력을 완료되고 확인 버튼을 눌러야 비동기 요청이 가야하는, post요청은 어떻게 처리해야하는지 궁금하였다🤔🤔
useMutation의 경우 useQuery처럼 선언할 때에, 비동기 통신 시 처리해줘야 할 함수를 전달해서 미리 선언하는 것 까지는 똑같다. (isError, isSuccess, data를 미리 할당 받는 것 까지 말이다! )
하지만, 유저가 입력을 완료한 시점인 onClick 이벤트와 같은 이벤트를 발생시키면
mutate함수에 유저가 입력한 값을 호출하여 비동기 통신을 진행시킨다.
이번에 리액트 쿼리를 사용하면서 공식 문서를 다시 읽게 되었는데, 옵션이 정말 많다!
앞으로 기능들을 구현할 때에 옵션들을 잘 찾아보고 활용해야겠다.
