본문 바로가기

더이상 하지 않는 망한 프로젝트20

[앱삼] 9. (fullStack) Cookie-based JWT 회원 인증 구현하기 -1 (로그인 중복확인) 1. Cookie 기반의 JWT Auth 구현 이유 - 웹과 앱의 로직 연동 용이성을 위해 - CORS 확장성 문제 - REST API - 서버의 리소스를 아낄 수 있음 - 무겁거나 중요한 정보를 클라이언트에 저장할 필요가 없음(당장은) 2. 로그인 구현 - 아이디 중복과 비밀번호 중복 확인하기. (frontend) SignIn.jsx - setState 가 비동기 함수 이기때문에, 이걸 처리하느라 시간을 은근 많이 사용했다. - id/ps 둘 중 하나라도 적지 않으면 로그인 버튼을 disabled 시키고 싶어 onChange 함수에 setState를 두번 사용해서 비동기처리를 해서 동기적으로 작동하게 로직을 짤까 했는데, useState를 통해 state를 의존성으로 업데이트해주면 동기적으로 잘 작동했.. 2023. 3. 8.
[앱삼] 8. (fullStack) feature/signUp - validation 1. 아이디어 - id, pw, email, name, aors 의 다섯가지 정보를 받는다. - id : 5~15자 이상, pw : 특수문자 포함 등의 유효한 형식의 값만 받을 수 있도록 프론트엔드에서 제한을 둔다. - id와 email은 중복검사 로직을 통해 Axios 요청을 통해 각각 비동기로 프론트엔드에서 검사한다. - 유효형식과 중복이 없는 것을 확인 한 후 전체를 db생성요청한다. - server에서 받은 값 중 id와 email 중복 검사를 한번 더 실행하여 중복값이 존재할 경우 '이미 요청된 처리 입니다.' 라는 에러를 다시 보내주고, 에러로그에 로깅하며, 중복값이 없을 경우 db를 생성하고 201을 응답한다. 2. 구현(Frontend - Sign.jsx) - ID 중복검사, Email 중.. 2023. 3. 8.
[앱삼] 7. (backend) feature/signUp - userData 받아서 저장하기 auth.js const User = require('../models/User'); const bcrypt = require('bcrypt'); const { logEvents } = require('../middleware/logger'); // 해시함수로 암호화하여 스키마 생성 후 저장하는 함수 const createUserData = async ({id, ps, name, email, aors})=>{ try{ const encryptedPS = await bcrypt.hash(ps[0].toString(),10) const user = new User({id:id[0], ps:encryptedPS, name : name[0], email : email[0], aors: aors[0]}); //s.. 2023. 3. 6.
[앱삼] 6. (frontend) Sign up 페이지 세팅 및 validation pages/Sign.jsx - 유저의 정보를 입력받아 저장 할 component 내의 state를 하나 만든다. - 각 배열의 [0]은 값, [1]은 값의 유효검증 성공과 실패여부이다. //임시 State const [userInfo, setUserInfo] = useState({ id: ['',false], ps: ['',false], email:['',false], name: ['',false], aors: ['None', true] }) pages/Sign.jsx - onChange에 넣어서 매번 실행해줄 함수 하나를 구현한다. type과 현재 값을 받아서 validation을 통해 검증한 후 state를 업데이트 해준다. 여기서 immer를 쓸까 했는데 코드가 더 길어질거 뻔해서 그냥 얕은복사 두.. 2023. 3. 6.
[앱삼] 5. (frontend) React Router 세팅, 페이지 만들어놓기 1. 라우터 세팅하기 1. 설치 npm i react-router-dom 2. index.js에 설치 3. App.js에 페이지 분할하기 - 당연히 표시해줄 컴포넌트들도 만들어줘야된다. 4. 확인하기 아 디자인 하기 싫다... 디자인이 제일 싫어요 제발 2023. 3. 3.
[앱삼] 4. (frontend) Redux-toolkit 구조 세팅 1. 리덕스 툴킷 쓰는 이유 - 스승님께서 그러셨다. 취업하려면 새로운 라이브러리 신기술 이런거 적당히 배우고 리덕스나 하라고.. - 근데 오리지날 리덕스는 문법이 매우 더럽고 리듀서/액션 패턴도 좀 거지같아서 내 프로젝트에는 그나마 나은 툴킷세트를 사용한다. - 체계적으로 관리는 하고싶은데 문법이라도 깔끔하게 하고싶으면 리덕스 툴킷 쓰자 2. 설치 npm i @reduxjs/toolkit react-redux (리액트 18.0 이상이어야 한다. 꼰대프로젝트는 못쓴다) 3. 세팅 index.js import { Provider } from "react-redux"; import store from './store.js' const root = ReactDOM.createRoot(document.getEl.. 2023. 3. 2.
[앱삼] 3. DB연결 구조 개선하기 - 연결을 하다보니, db연결과 서버스타팅이 비동기적으로 일어나거나 이해하지 못하는 순서가 있었다. - 이를 구조개선을 통해 재정렬하여 connection 파이프라인이 명확해지도록 해야겠다. db.js const mongoose = require("mongoose"); mongoose.set('strictQuery', false); const mongooseConnect = async ()=>{ try{ await mongoose.connect(process.env.DB_URI, { useNewUrlParser: true, useUnifiedTopology: true, // useFindAndModify: false, // useCreateIndex: true, }, ()=>{ console.log('연.. 2023. 2. 27.
[앱삼] 2. MERN 풀스택 환경 기본세팅 - 4 1. 디렉토리/파일목록 세팅 2. Git 세팅 3. 라이브러리 세팅 4. node서버와 react 연결, 프록시 개발환경 설정 5. 디렉토리에 따른 코드스플리팅과 라우터설계 6. DB세팅 7. 로그세팅 8. 에러핸들러 미들웨어 세팅 // 여기부터 9. 쿠키파서/서드파티 미들웨어 세팅 // 이거는 나중에 쓸 거 있을 때 해야겠다 ... 1. 에러핸들러 미들웨어 /middleware/errorHandler.js 생성 const { logEvents } = require('./logger'); const errorHandler = (err, req, res, next)=>{ logEvents(`${err.name}: ${err.message}\t${req.method}\t${req.url}\t${req.hea.. 2023. 2. 26.

티스토리툴바