본문 바로가기

앱삼9

[앱삼] 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.
[앱삼] 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.
[앱삼] 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 풀스택 환경 기본 세팅 - 1 1. 디렉토리/파일목록 세팅 2. Git 세팅 3. 라이브러리 세팅 4. node서버와 react 연결, 프록시 개발환경 설정 // 오늘 여기까지 5. 디렉토리에 따른 코드스플리팅과 라우터설계 6. DB세팅 7. 로그세팅 ... 1. 디렉토리 세팅 - controllers : 컨트롤러api들 - logs : log 저장공간 - middleware : 미들웨어들 - models : 몽구스 스키마 정의 공간 - public : html css js 빌드결과물 - routes : 서버에서 담당하는 router management - app.js : req 받는 곳 - server.js : server 실행 - .env : 환경변수 설정 파일 - db.js : database 연결용 프론트엔드디렉토리 - 그런게.. 2023. 2. 26.

티스토리툴바