본문 바로가기

더이상 하지 않는 망한 프로젝트/프로젝트 개발 과정13

[앱삼] 11. (backend) 제품 데이터와 스펙 추가 및 보내주기 1. 제품 데이터 몽구스 스키마 정의하기 models/Product.js 2. 제품 리스트 데이터 따로 보관하기 models/ProductList.js 3. add 로직 controllers/product.js 4. 쿼리스트링을 이용한 다양한 상황의 데이터 요청 엔드포인트 설정하기 /controllers/product.js 5. postMan을 이용한 API 요청 Test 테스트 데이터가 잘 온다요! 엥 근데 생각해보니 jwt기반 admin 보안절차를 안거쳤다? 추가하지뭐.. 2023. 3. 26.
[앱삼] 10. (backend) 무한스크롤 - 게시물 몇개씩 정해서 던져주기 1. 몽구스 스키마 정의하기. - 일단 게시물 하나의 스키마를 정의해준다. - 타입, 아이디, 텍스트, 좋아요 수, 좋아요를 누른사람 목록 등을 정의한다. - mongoDB에서 제공하는 자동 타임스탬프를 활용해서 생성 시간, 수정 시간을 쉽게 가져다 쓸 수 있다. - 복합 인덱스를 생성해서 mongoDB에서 제공하는 인덱싱 기능을 사용할 수 있다. 여기서는 최신 순, 좋아요가 많은 순으로 인덱싱해서 각각 4개씩 보여줄 수 있도록 구현할거다. 2. 좋아요가 많은 순으로 4개씩 보내주기 - type은 게시판 타입이다 - count는 /api/chatmain/:type/popular/:count 로 들어온 파라미터이다. - nowMyId 는 현재 나의 아이디를 가져온다 이는 수정,삭제,좋아요 버튼 등에 쓰인다.. 2023. 3. 15.
[앱삼] 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.

티스토리툴바