Beomlog - Writing Page & Upload

writing page를 만들려고 한다. 먼저 포스트를 업로드 할때 필요한 자원들을 보자.

업로드할때는 category, editorData, postId, time, title, uid가 필요하다. uid는 상태관리의 user.uid에서 가져와 주면 되는 것이고, category는 내가 지정하는 것이며, editorData는 에디터에서 불러오면 되고, time은 그냥 현재 시각, title은 써져있는 제목을 가져와주면 되지만, postId는 문제이다. 그냥 숫자로 하자니 postId 자체가 너무 단순하고 심플하기도 하고 새로운 포스트를 업로드 하기 위해선 전 포스트의 카운트가 얼마인지 알고 있어야 한다. 따라서 이보다 좀더 단순하게, 시간에 따라서 오름차순 또는 내림차순으로 정리할 수 있도록, (시간_글쓴이uid) 와 같은 식으로 정리를 하려고 한다.

 

먼저 자바스크립트에서 시간이 어떻게 표시되는지 보자.

보면 뒤에 덕지덕지 무언가가 붙어있다. 대한민국 표준시까지 알 필요도 없기도 하고, 정확히 언제 쓰였는지 별로 알고 싶지도 않다. 이럴때 toISOString메서드를 쓰면 된다. toISOString 메서드를 쓰면, 아래와 같이 표현이 된다.

훨씬 간결하고 기록하기 쉬운 형식으로 변환이 되었다. 그러면 이제 이걸 이용해서 표현하면 되겠다.

 

그리고 작성하다보니 왠지 닉네임이랑 이메일도 같이 전달해주면 좋을것 같다는 생각이 들었다. 작성자의 정보를 uid로 표현할 수는 없으니, 그렇게 하도록 하자

그래서 대강 다음과 같이 작성해주었다. 이제 uploadPost가 디스패치 되면,

uploadPostSaga가 발동할 것이고, uploadPostDataToDatabase에서는

이러한 액션을 발동시켜 db에 payload로 넘어온 post의 내용을 업로드 시키도록 할 것이다. createPostSaga가 발동하여,

다음과 같은 작업을 수행할 것이고, promiseCreator로서 넘어왔던 uploadPostDataToDatabase에 action.payload를 넣어 처리하여서, 성공을 하면 UPLOAD_POST_SUCCESS가 디스패치 되면서 payload로는 result 가 전달 될 것이며, 만약 실패하면 UPLOAD_POST_ERROR가 디스패치 되면서 payload로는 error가 전달될 것이다. 따라서 리듀서의 UPLOAD_POST관련 내용은 다음과 같이 정리를 하면 되겠다.

state에 일단 action.payload로 넘어온 내용들을 넣어준다 (왜냐하면 upload가 완료된다면 작성한 post의 페이지로 넘어갈 것이기 때문에). 그 후, SUCCESS가 넘어온다면 state를 스프레드 하여 그대로 두고, error를 null로 지정한다. 만약 ERROR가 넘어온다면 state를 initialState로 지정하고, action.payload로 넘어온 에러내용을 error에 저장한다. 이에 따라 필요한 내용들을 바꿔주자. 나는 error의 상태에 따라서 관리를 해주도록 하겠다. error가 undefined라면 아직 데이터를 처리하는 중인 것이고, error가 null이라면 데이터를 처리한 것이고 (SUCCESS), error에 어떤 값이 있다면, 그것은 error가 난 것이다.

 

WritingPage에서 글 작성을 성공했을때 넘어갈 PostPage를 아주간단히 만들어주겠다.

이제 PostPage와 WritingPage의 Route를 넣어주고 모든걸 처리해본다.

업로드가 잘 되는 것을 볼 수 있다. 그런데 새로운 페이지로 넘어가지기는 해도 넘어가진 후 아무것도 실행이 되지 않는다. 왜 그런지 봤더니 object를 그대로 div에 넣어서 그렇단다. 그래서 바꿔서 넣은 후 다시 실행해보았더니,

 

잘 된다. 이제 getPost로 PostPage를 다시 만들어줄 차례이다.