8

댓글 작성자에게만 버튼을 노출하기

github.com/bang-gui/blog bang-gui/blog 나의 리액트 페이지. Contribute to bang-gui/blog development by creating an account on GitHub. github.com const CommentItem = ({ user, comment, onToggleAskRemove }) => { return ( {user && user._id === comment.author._id && ( 수정 onToggleAskRemove(comment._id)}>삭제 )} {comment.body} ); }; 사람처럼 생각하자, 코멘트의 주인을 찾아주면 된다. const CommentsList = ({loading, user, comments, onTo..

2020.11.24

삭제 기능

github.com/bang-gui/blog bang-gui/blog 나의 리액트 페이지. Contribute to bang-gui/blog development by creating an account on GitHub. github.com 삭제 기능은 모달을 통해서 한번 더 물어보는 기능을 추가해서 구현했다. 모달을 불러오는 중에 코멘트의 아이디를 스토어에 저장하고, 삭제 확인 버튼을 누르면 저장된 아이디를 조회해서 삭제확인 액션에게 payload로 넘겨주는 방식으로 만들었다. 리덕스를 사용하는데 좀 불편하다고 느꼈다. 규모가 커짐에 따라 리덕스 모듈의 코드가 너무 쉽게 늘어나 버린다. 요청, 성공, 실패... 하나의 api만 추가해도 3개의 액션을 일일이 만들어야하고 모달만 추가하더라도 모달을 띄우..

2020.11.24

리덕스로 댓글 쓰기 요청 보내기

github.com/bang-gui/blog bang-gui/blog 나의 리액트 페이지. Contribute to bang-gui/blog development by creating an account on GitHub. github.com 리액트를 다루는 기술의 연장선으로 댓글 기능을 추가하는 작업을 공부 겸 해보고 있다. ducks스타일의 리덕스를 구현한다. modules/comments.js를 만들자. import { createAction, handleActions } from 'redux-actions'; const CHANGE_INPUT = 'comments/CHANGE_INPUT'; export const changeInput = createAction(CHANGE_INPUT, (body)..

2020.11.18

생성, 조회, 삭제, 수정 API 생성하기

github.com/bang-gui/blog bang-gui/blog 나의 리액트 페이지. Contribute to bang-gui/blog development by creating an account on GitHub. github.com API를 작성하려면 URL지정에 신경 써야 한다. 현재 우리는 아래의 url 중에 post만을 구현하였다. 종류 기능 POST /posts 포스트 작성 GET /posts 포스트 목록 조회 GET /posts/:id 특정 포스트 조회 DELETE /posts/:id 특정 포스트 삭제 PATCH /post/:id 특정 포스트 업데이트 POST /posts/:id/comments 특정 포스트에 댓글 등록 GET /posts/:id/comments 특정 포스트의 댓글 목..

2020.11.16

DB를 위한 댓글 스키마 생성하기

github.com/bang-gui/blog bang-gui/blog 나의 리액트 페이지. Contribute to bang-gui/blog development by creating an account on GitHub. github.com 댓글 스키마를 검색해보다가 설명이 잘나와 있는 포스트가 있어서 사용해 보려한다. github에 오픈 소스로 올려 놓았지만 출처를 남긴다. www.a-mean-blog.com/ko/blog/Node-JS-%EC%B2%AB%EA%B1%B8%EC%9D%8C/%EA%B2%8C%EC%8B%9C%ED%8C%90-%EB%A7%8C%EB%93%A4%EA%B8%B0-%EA%B3%A0%EA%B8%89/%EA%B2%8C%EC%8B%9C%ED%8C%90-%EB%8C%93%EA%B8%80..

2020.11.16

'리액트를 다루는 기술' 댓글기능 추가해보기 2. 아웃라인

github.com/bang-gui/blog bang-gui/blog 나의 리액트 페이지. Contribute to bang-gui/blog development by creating an account on GitHub. github.com '리액트를 다루는 기술'의 마지막 프로젝트 소스코드를 사용하는 개인 공부 작업에 들어가기 전에 해야 할 일들을 잠시 생각해 보고자 한다. BACK END 1. DB를 위한 댓글 스키마 생성하기 2. 생성, 조회, 삭제, 수정 API 생성하기 FRONT END 댓글 입출력 UI 구성하기 리덕스로 상태 관리하기 API 연동하기, API 함수 작성 아, 그리고 추가적으로 알려줄 것이 있다. 기존 코드에서 post스키마를 먼저 변경하였다. 기존 코드의 Post스키마에서는 ..

2020.11.16

'리액트를 다루는 기술' 댓글기능 추가해보기 1. 시작

github.com/bang-gui/blog bang-gui/blog 나의 리액트 페이지. Contribute to bang-gui/blog development by creating an account on GitHub. github.com '리액트를 다루는 기술'이라는 책을 보았다. 다양한 개발 방법, 코드를 만드는 접근방법 등이 잘 나와있다. 어느 정도의 난이도가 있다고 생각했지만 이 책만큼의 내용을 다루는 책들이 많지 않다고 단언한다. 리액트를 공부하시는 분이라면 강력 추천한다. mongoDB, Koa, React를 사용한다. 마지막 프로젝트는 회원 기능, 포스트 쓰기, 읽기, 수정, 삭제, 페이지네이션, 태그 기능을 담고 있다. 나는 이 책의 마지막 프로젝트의 연장선으로 댓글 기능까지 추가해보려..

2020.11.16