개발새발 로그

이제 댓글을 삭제하는 기능을 추가해보자 댓글 삭제는 이전 post삭제 기능과 유사하다. 필요한 기능 클라이언트 1. 삭제 버튼을 클릭하면 댓글을 삭제하는 함수 deletehandelr 필요함 2. 삭제 함수는 window.confrim기능을 사용 (true면 삭제 수행) 3. 삭제 요청할 때는 repleId와 postId를 보내줘야함 4. 삭제 요청후 완료 하면 새로고침을 window.location.reload()로 수행해줌 서버 1. /delete API 작성 2. Reple DB에 deleteOne 명령어 repleId를 이용해 수행 3. 삭제를 수행하고 Post의 repleNum을 감소시켜줘야함 -postId를 이용해서 해당 게시글을 찾고 repleNum을 업데이트 해줘야함

이제 댓글을 수정하는 기능을 추가해보자 필요한 기능 1. 댓글 수정 버튼을 누르면 댓글을 수정하는 컴포넌트를 띄워야함 -EditFlag라는 state를 선언해서 수정버튼을 누르면 댓글 수정 컴포넌트를 보여줌 -수정버튼을 누르면 EditFlag가 true가 되고 수정 컴포넌트가 띄워짐 -setModalFlag로 모달폼은 닫아줌 -댓글 수정 컴포넌트에 취소버튼을 추가해서 취소를누르면 다시 EditFlag를 false로 만들어줌 2. 댓글 수정을 눌렀을 때 이전 댓글의 데이터를 가져와야함 -Reple이라는 state의 초기값을 빈문자열이 아니라 props로 넘겨준 이전 댓글데이터로 설정해준다. 3. 댓글 수정 버튼을 눌렀을 때 /edit 이라는 API로 서버에 업데이트 요청을 해야한다. -서버에 업데이트 요청..

댓글을 DB에 저장했으면 이제 댓글을 불러와보자 RepleList 1. useEffect에서 axios요청을 해 댓글 데이터를 가져온다. 2. 이때 PostArea 컴포넌트에서 props로 가져온 postId로 데이터를 찾을 것이다. 3. 댓글 리스트를 가져오는 axios요청을 작성하고 요청한다. 4. 댓글리스트를 저장하는 배열 state를 선언하고 요청에서 받아오면 저장해준다. 5.그리고 받아온 repleList를 map으로 뿌려준다. server/Router/reple 1. getReple API를 작성해준다. 2. Reple을 클라이언트에서 보내준 postId를 이용해 postId로 저장된 댓글들을 모두 불러온다. 📝추가적인 부분 1.댓글을 작성하고 등록하면 새로고침이 되어야 댓글들이 나타나게된다...

댓글을 등록하기 위한 환경을 구축했으면 이제 댓글을 입력했을 때 댓글 데이터를 몽고 DB에 저장할 것이다 Express 1. 댓글 등록을 위해 Post모델, User모델, Reple모델을 가져와야한다. 2. 댓글 저장을 위한 /submit API를 작성해준다. -댓글을 등록할 때 등록한 유저의 uid 데이터를 이용해 Reple DB에 author로 저장해주고, -댓글을 등록할 때 Post의 id를 이용해 Post DB의 repleNum을 +1 증가시켜준다.(댓글 갯수 파악) -이때 서버에서 필요한 postId는 props로 가져온다. -user의 uid는 userSelector로 가져옴 React 1.클라이언트에서는 댓글 내용을 저장한 Reple과 댓글 작성한 유저의 uid와 댓글이 작성된 postId를..

게시글을 클릭해서 들어가면 아래와 같이 구성되는 것이다 이 그림과 같이 컴포넌트를 나눠준다. PostArea 1. PostArea.js에서는 서버에 postNum을 이용해 클릭한 게시글 데이터를 요청한다. 2. PostArea는 받은 데이터를 Detail과 RepleArea에 props해준다. 3. spinner도 PostArea에서 보여주게된다. -> 로딩 화면 Detail 1. props로 받은 데이터를 출력해준다. RepleArea 1. RepleUpload 컴포넌트와 RepleList 컴포넌트를 하위 컴포넌트로 만들어준다. 2.RepleUpload는 input태그와 button태그를 생성해 간단한 댓글 등록 페이지로 만든다. 3.RepleUpload에서 등록 버튼을 클릭하면 서버에 댓글 등록 요청..