게시글 등록 과정에 대한 고찰

client의 입장에서 보면..

1. 폰에 있는 사진 중 하나를 그냥 선택 하고, 다음 버튼을 누른다.
2. 게시글 내용을 입력하고 다음 버튼을 누른다.
3. 공유 버튼을 누른다.

참 쉽게만 생각했던 SNS 기능들을 실제로 개발하려니 생각할 점이 한 두개가 아니였다.
좀 더 일찍 이런 고민을 했어야 하나? 싶기도 하다가
이제라도 해보는게 어디야! 하고 다시 마음을 다잡아본다!

Developer의 입장에서 보면..

이미지 등록에 대해 처음 했던 고민

1. 텍스트를 입력한다
2. text를 입력하면 파일업로드 input창이 나온다
3. 파일업로드를 하고 이미지 업로드 버튼을 누른다
4. 내가 방금 업로드한 image의 preview를 보여준다
5. alert창 등록하시겠습니다? 클릭하면 마이페이지 메인으로

vs

1. 업로드 페이지에 들어오면 자동으로 게시글이 생성된다.
2. text 입력하고 input창 나오게 한다
3. 파일 업로드를 하고 이미지 업로드 버튼을 누른다
4. 그 순간 내가 이전에 자동으로 생성했던 게시글에 이미지가 붙고, 거기서 preview 를 가져와서 보여준다
5. alert창 등록하시겠습니다? 클릭하면 마이페이지 메인으로

현재 구현한 방식

두번째 방식이 그나마 근접했다!

1. useEffect에 임시 게시물 생성 POST 요청을 보낸다.
2. type이 file인 input태그에 onChange 이벤트로 파일을 받고 FormData에 append 해준다.
3. 이미지 POST 요청을 보낸다. (이 때 headers에 "content-type": "multipart/form-data" 를 붙이지 않으면 에러가 발생!)
4. 게시글에 함께 쓸 text를 작성한다.
5. 업로드 버튼을 누르면 게시물 수정 PUT 요청을 보내 빈 string을 게시글에 추가한 text 내용으로, draft인 상태를 published로 바꿔준다.

그 밖에.. 로그인 토큰 정보 저장에 대한 고민

1. 첫 시도 - 그냥 localStorage에 저장했다가 가져옴
2. 두 번째 시도 - redux-toolkit으로 함수를 만들어 Login 페이지에서 저장, 다른 페이지에서 불러오기

그러다 정착한 최종 방식!
1. axios wrapper 함수를 만들어 localStorage에서 가져온 토큰을 header에 장착
2. redux-toolkit을 이용해 함수를 만들어 상태를 스토어에 저장
3. Routes.js에서 useEffect를 이용해 두번째에서 만든 함수 실행

토큰은 로그인과 관련이 되어있으니 로그인페이지에서 저장했다가 다른 페이지에서 불러오는게 맞다고 생각했는데
두 번째 시도를 하면 새로고침 할 때마다 로그인이 풀려서 상당히 처리가 귀찮게 된다!
최종 방식대로 적용하면 Routes가 모든 페이지를 감싸고 있기 때문에 새로고침을 하거나 코드에 변화가 생겨도 토큰 유효기간만 길다면 문제없을 무!

토큰을 저장할 때 login POST 요청시 저장하는게 아니라 users/self에서 GET 요청으로 받아와 저장하는 게 중요한 뽀인트!
(물론 백앤드 분들의 재량에 따라 달라질 수 있는 문제다!)

코드는 완성되면 추후 공개 예정쓰... 🌱

주저리

요즘 시간이 많이 생겨서 어떻게 하면 더 효율적인 로직일까를 고민하고 있는데
그러다 보니 완벽하지 않으면 치지 않고 계속 검색만 하는 나쁜 습관이 생기고 있다.
고민은 조금 줄이고, 고치더라도 일단 쳐보고 고치는 습관을 길러보자..ㅠㅠ