개발새발 로그

게시글이 100개, 1000개가 되면 사용자가 들어올 때마다 1000개의 글을 map으로 뿌려주는 것은 너무 많은 시간이 소요가된다. 이를 해결하기위해 한번에 불러오는 게시글의 양을 정해줘서 사용자에게 버튼을 제공해서 버튼을 누를 때마다 새로운 글을 불러와주는 기능을 추가해보자 서버 1. /list API를 수정한다. 2. Post.find에서 .limit(5)를 추가해서 불러오는 게시글을 5개로 제한을 둔다. -현재 0번째 idx에서 ~ 4번째 idx 의 값을 클라이언트에 보내주었다. -그러면 다음에 찾아야할 데이터는 5번째 idx에서 ~ 9번째 idx이다. -이를 위해 클라이언트에서 요청을 보낼 때 skip이라는 값으로 값을 건너띄워줘야한다. 클라이언트 1.skip이라는 useState를 만들고 초기..

게시글 검색 및 정렬 기능을 추가해보자 정렬 기능 1. 게시글에 타임스탬프를 적용했다면 게시글을 최신순으로 정렬할 수 있다. 2. 댓글 갯수를 이용해서 인기순으로도 정렬을 해볼 수 있다. 3. 부트스트랩의 Dropdown Item을 이용했다. import { DropdownButton, Dropdown } from "react-bootstrap"; ... setSort("최신순")}> 최신순 setSort("인기순")}> 인기순 ... 4. 위 같이 널어주고 , title을 useState인 Sort값으로 지정해주고 5. 아이템별로 onClick할 때 setSort를 통해 Sort값을 바꿔준다. 6.이제 게시글데이터를 불러올 때 Sort값을 서버에 보내줄 것이다. 이를 통해 sort된 값을 가져오는 것이..

게시글을 정렬할 때 필요한 게시글 작성시간과 수정시간을 추가해보자 1. 게시글 리스트를 시간순으로 정렬하는 기능을 만들 때 게시글이 작성된 시간 데이터가 필요하다 2. 몽구스 모델을 만들 때 위 처럼 timestamps : true 속성을 주면 아래와 같이 시간데이터를 삽입할 수 있다. 3. 저장된 createdAt을 출력해보면 아래와 같이 뜨게된다. -이는 자바스크립트의 Date함수로 만들어진 시간을 그대로 저장하기 때문에 이렇게 뜨게된다. - 이 시간을 알아볼 수 있도록 Moment.js 라이브러리를 사용할 것이다. npm i moment --save https://momentjs.com/ Moment.js | Home Format Dates moment().format('MMMM Do YYYY, h..

개요 1. firebase에서 기본적으로 제공하는 photoURL가 있다. -이를 이용해 사용자의 프로필 이미지를 설정해줄 수 있다. 2. 사용자의 photoURL을 Firebase의 updateProfile명령어를 통해 설정이 가능하다. https://firebase.google.com/docs/auth/web/manage-users?hl=ko&authuser=0 Firebase에서 사용자 관리하기 의견 보내기 Firebase에서 사용자 관리하기 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 사용자 생성 Firebase 프로젝트에서 신규 사용자를 생성할 때는 createU firebase.google.com 현재 파이어베이스와 몽고DB를 둘다 사용하면서 User정보를 관..

이제 댓글을 삭제하는 기능을 추가해보자 댓글 삭제는 이전 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로 서버에 업데이트 요청을 해야한다. -서버에 업데이트 요청..

현재 댓글 컴포넌트는 이런 상황이다. 1. 먼저 ··· 버튼을 눌렀을 때 수정, 삭제 버튼이 있는 모달 폼을 열어줘야한다. 모달 폼의 css는 아래와 같다. 2. 만약 다른 곳을 클릭했을 때 모달폼이 다시 닫히도록해야하는데 이때 useHooks인 useOnclickOutside를 사용한다. useOnclickOutside 사용방법 1. useRef를 이용해서 만약 클릭이벤트가 useRef로 지정한 컴포넌트나 useRef에 포함된 컴포넌트라면 return 2. 만약 다른 것을 클릭했을 때 handler함수실행 3. 이 useEffect이벤트가 계속 발생될 수 있도록 mouseDown이나 touchStart를 계속 실행시켜준다. -touchstart는 모바일에서 발생하는 이벤트 - 이 이벤트가 계속 실행되면..

댓글을 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.댓글을 작성하고 등록하면 새로고침이 되어야 댓글들이 나타나게된다...