글 목록을 가져와서 댓글을 포함한 포스트에 관련한 모든 정보를 출력해주었다.
이제는 새로운 글을 생성하고, 새로고침 없이 바로 보여줄 수 있어야한다.
Create Post
우선 어떤 API 기능과 리덕스 액션이 필요한지 살펴보자
# src/redux/modules/blogs.js
api를 통해서 content를 전달하면, 그것을 가지고 새로운 포스트를 생성한다.
생성 된 후 정상적인 응답이 돌아왔다면 addPost 액션에 응답 결과를 전달하며 호출한다.
응답으로 돌아온 인자를 newpost라고 명명하고 액션을 리듀서를 실행시킨다.
이때 백엔드 부분을 주의해줘야 하는데,
새로운 포스트를 생성하는 시리얼라이저와 응답으로 보내주는 시리얼라이저를 다르게 구현했다.
잠시 백엔드 코드를 살펴보면
# blogs/serializers.py, views.py
타임라인 컴포넌트에서 글 목록을 가지고 출력을 해줄 때, 포스트에 관련된 모든 정보가 필요하기 때문에
PostSerializer 에서 전달하는 정보가 필요하다. 그러나 글을 생성할 때는, 날짜나 작성자 같은 정보를
유저가 직접 입력하는 것이 아니기때문에, 그런것들이 시리얼라이저에 불필요 하다고 판단했다.
무언가 하나의 시리얼라이저로 하는 방법이 존재 할 것 같지만, 내가 시도해본 방법은
우선 POST 방식으로 글을 생성하려는 요청이 들어오면 InputPostSerializer 를 통해서 content만
입력받아서 글을 생성하고, 바로 그 생성된 모델을 가져와서 PostSerializer를 통해서
응답으로 전달해주었다.
이렇게 하면 약간의 코드가 늘어나지만 간단히 정상적인 응답을 받아 올 수 있었다.
다시 리덕스 파일로 넘어가서
리듀서를 통해서 state의 posts를 업데이트 해준다. 새로운 글을 맨 앞으로 배치시키고,
기존의 posts를 이어붙여주면 posts가 정상적으로 업데이트 되었다.
그리고 open_post_form은 글 작성 폼을 열고 닫는데 필요한 state 정보이다.
이렇게 리듀서 함수를 만들어 놓았고, 네비게이션에 위치하는 + 버튼을 클릭하면,
이 open함수를 호출하려 작성 폼을 화면에 출력할 것이다.
# src/components/Navigation
# index.js
# container.js
# presenter.js
이런식으로 + 버튼을 클릭하면 open_post_form 의 상태가 true가 되면서 작성 폼이 출력된다.
# src/components/Timeline/presenter.js
타임라인 컴포넌트에서 open_post_form 상태에 따라서 작성 폼 출력을 결정해준다.
타임라인 컴포넌트에서 하는 이유는 버튼을 눌렀을 때, 각 포스트 위에 폼이 출력되는게 아니고
전체화면에서 출력이 되어야 하기 때문이다.
# src/components/PostForm
# index.js
글 작성 폼을 관리하는 컴포넌트.
여기에서 폼을 닫는 함수를 가져와서 사용한다.
그리고 createPost API 함수도 사용해서 글을 생성해준다.
# container.js
로그인 폼을 작성할 때와 거의 같다. 입력 받을 때마다 자체 state를 업데이트 하고,
폼을 전송할 때 디폴트 기능을 막고, 리덕스 함수를 실행시킨다.
# presenter.js
댓글
댓글 쓰기