개발새발 로그

개요 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정보를 관..

현재 댓글 컴포넌트는 이런 상황이다. 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.댓글을 작성하고 등록하면 새로고침이 되어야 댓글들이 나타나게된다...

댓글을 등록하기 위한 환경을 구축했으면 이제 댓글을 입력했을 때 댓글 데이터를 몽고 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에서 등록 버튼을 클릭하면 서버에 댓글 등록 요청..

회원가입 시 닉네임에 중복검사 조건을 두어 글 작성자가 겹치지 않도록한다. 작동순서 1. 회원가입에 중복검사를 위한 버튼 생성 2. nameCheck라는 useState선언(false) 3.. nameCheck가 false면 중복검사진행을 안한 것이므로 방어코드 작성 - 회원가입완료버튼을 누를 때 4. 중복검사 버튼에 namcheckFunc이라는 함수를 만들어 중복검사 axios요청 추가 5. axios요청으로 닉네임 중복검사가 성공하면 nameCheck를 true로 바꿈 6. nameInfo라는 useState선언 7. nameInfo는 사용가능한 닉네임인지 알려주기 위해 클라이언트에 띄워주기위한 usestate 8 axios요청에 중복검사가 성공하면 nameInfo도 같이 "사용가능한 닉네임" 이라는..

이제 리덕스에 로그인 정보를 넣을 수 있게 되었으니 이 유저 데이터를 이용해서 게시글에 업로드한 유저의 이름을 띄우고, 게시글 수정 및 삭제는 작성한 유저만 가능하도록할 수 있다. 1. Upload.js 게시글 등록 페이지 로그인한 유저만 들어오게하기 1. Upload.js에서 useSelector을 import하고user데이터 가져오기 2. useEffect로 로그인이 되어있지않으면 막기 2. 게시글을 업로드하면 유저의 정보도 같이 저장한다. 1. useSelector로 가져온 user의 uid를 게시글 등록할 때 같이 Post 모델에 저장한다. -이때 Post에도 user의 uid를 저장할 스키마를 추가해줘야한다. 몽구스의 author과 ObjectId 활용 -Post 모델에 스키마를 추가해줄 때 a..

로그인을 했으면 컴퍼넌트들에게 이 유저가 로그인을 했다는 것을 알려줘야한다. 이것을 Redux를 통해 해결할 것이다. 우리는 Redux Toolkit을 이용해 보다 간편하게 Redux를 사용할 것이다. https://ko.redux.js.org/tutorials/quick-start Quick Start | Redux - How to set up and use Redux Toolkit with React-Redux ko.redux.js.org 1.리덕스 환경 세팅하기 1. 리덕스와 리덕스 툴킷 설치 npm i @reduxjs/toolkit react-redux 2. 리덕스 store 만들기 -client에 Reducer/store.js 폴더와 파일 생성 -안에 코드 공식문서에있느 configureStor..