개발새발 로그

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

https://firebase.google.com/docs/auth/web/start?hl=ko&authuser=0#sign_up_new_users 웹사이트에서 Firebase 인증 시작하기 | Firebase Authentication Google I/O 2023에서 Firebase의 주요 소식을 확인하세요. 자세히 알아보기 의견 보내기 웹사이트에서 Firebase 인증 시작하기 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분 firebase.google.com 📋수행순서 1. 파이어베이스의 기존 사용자 로그인 기능을 이용한다. 2. ID값과 PW값이 비어있을 때 방어해줄 방어코드를 작성 3. await firebase.auth().signInWithEmailAndPassword(..

파이어베이스를 통해서 회원가입정보를 auth인증을 위한 암호화 데이터로 만들고, 그 데이터를 몽고DB에 저장하는 과정이다. 회원가입 컴포넌트에서는 닉네임 이메일 비밀번호 3개의 정보를 보낸다. 이 정보를 암호화해서 몽고DB에 저장해보자 파이어베이스 시작 1. 파이어베이스 프로젝트 만들기 -애널리틱스x 2. 파이어베이스에서 웹에 파이어베이스를 추가 -호스팅x 3. 파이어베이스 sdk추가 (npm i firebase 와 sdk 코드 복사) 4. client에 파이어베이스 설치 6. client에 firebase.js 생성 후 sdk 코드 복사 후 붙여넣기(코드에 보안주의) 파이어베이스에서 auth 빌드하기 1. 파이어베이스 메뉴의 빌드에서 authentication 클릭 2. 이메일/비밀번호 클릭 후 저장 ..

유저인증에 파이어베이스를 사용하는 이유 우리가 Express와 몽고DB를 가지고 유저정보를 구현할 수 있긴 하지만 (자바스크립트 웹토큰 라이브러리) 회원가입을 하거나 로그인을 할 때 비밀번호를 DB에 plain text로 저장하면 안된다 반드시 보안규칙을 거쳐야 한다. 즉 사용자가 회원가입을 했을 때 비밀번호는 암호화 과정을 거쳐서 DB에 저장해야하고, 로그인 했을 때 비밀번호도 암호화 과정을 거쳐서 DB에 있는 암호화과정을 거친 비밀번호와 비교를 로그인을 해야한다. 그래서 이러한 복잡한 과정을 도와주는 것이 파이어베이스이다. 유저인증과 관련된 서비스는 firebase를 사용한다 파이어베이스는 어플리케이션의 빌드부터 배포까지 도와주는 유용한 툴이다. 파이어베이스에서 Authentication(유저인증)이..