개발새발 로그

게시글을 클릭해서 들어가면 아래와 같이 구성되는 것이다 이 그림과 같이 컴포넌트를 나눠준다. 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도 같이 "사용가능한 닉네임" 이라는..

https://www.acmicpc.net/problem/5430 5430번: AC 각 테스트 케이스에 대해서, 입력으로 주어진 정수 배열에 함수를 수행한 결과를 출력한다. 만약, 에러가 발생한 경우에는 error를 출력한다. www.acmicpc.net 📋풀이방법 1. 주어진 문자열을 3개씩 변수로 나눈다. 2. 주어진 명령어 p에 따라 반복한다. 3. p가 R이면 뒤집어준다. 4. p가 D면 앞의 요소를 빼준다. 4-1. 만약 m=0이면 error를 체크해준다. 5. 모든 반복이 끝나면 error체크유무에 따라 error를 정답 배열에 넣거나 명령어수행된 배열을 정답 배열에 넣는다. 내 제출 const fs = require("fs"); const filePath = process.platform =..

이제 리덕스에 로그인 정보를 넣을 수 있게 되었으니 이 유저 데이터를 이용해서 게시글에 업로드한 유저의 이름을 띄우고, 게시글 수정 및 삭제는 작성한 유저만 가능하도록할 수 있다. 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(..

https://www.acmicpc.net/problem/14500 📋풀이방법 1. 먼저 우리가 사용하는 DFS가 4까지 뻗어나간다고 했을 때 4가지의 테르미노는 회전과 대칭인 경우를 모두 탐색가능하다. 2.하지만 아래의 도형같은 경우는 DFS로 탐색이 안되므로 따로 탐색해야한다. 3. 위 도형같은 경우는 한 점을 중점으로 사방탐색을 하면된다. 사방 탐색을 하면서 3가지의 경우가 생기는데 아래와 같다. 📝코드 풀이 방식 1.모든 좌표를 순회한다 (i,j) 2. 좌표를 순회하면서 방문표시를해야한다(사방탐색시 왔던 곳은 다시 탐색할 수 없도록) 3. 좌표 하나씩 순회하면서 DFS(4가지 도형)와 otherFind(ㅓㅏㅜㅗ)를 수행한다 4. DFS -DFS는 좌표를 4개 탐색했을 때 종료한다(깊이가 4) -방..

파이어베이스를 통해서 회원가입정보를 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. 이메일/비밀번호 클릭 후 저장 ..