clone toy projects/node-react-shop-app 썸네일형 리스트형 상품 디테일 페이지 상품 디테일 페이지 생성하기 UI 완성본 npm install react-image-gallery --save 상세페이지 UI 및 백엔드에서 해당 데이터 가져오기 reactGallery을 사용해서 사진 UI 띄우기 Product Info 컴포넌트 생성하기 productinfo 페이지 컴포넌트 유저관련 데이터는 redux로 상태관리를 하고 있다. 그래서 dispatch를 사용해서 thunk함수를 만들어 갯수에 대한데이터를 받아온다. 카트에 상품이 있던건지 새로 장바구니에 넣은것 인지 확인하고 카트의 객체를 반환한다. 쇼핑 카트 페이지 데이터 가져오기 위와같은 구조를 만들기 위해 쿼리의 키와 벨류를 추가하여 데이터 베이스에 있는 상품들 정보 가져오기 아래와 같이 분기 처리 추가 if (type === "ar.. 더보기 랜딩 페이지 랜딩 페이지 생성하기 완성본 예시 기본적인 UI 완성 state 생성 몽고 DB에 저장되 있는 데이터들 가져오기 ( 아직 백엔드 라우트 안만듬) 상품 데이터 가져오는 Route 생성하기 product 콜렉션에는 writer 에 유저의 id가 있다. populate를 쓰면 그 해당 유저의 모든 정보(객체)를 가져 올 수 있다. 브라우저 새로고침을 하고 개발자 도구의 네트워크를 보니 proudct 콜렉션 의 속성으로 writer가 속성으로 있고 그 writer안에 해당 user id 를 가진 user 콜렉션 정보가 있는것을 확인 가져올 상품 카드의 예시 기본 UI 틀 완성 npm install eact-responsive-carousel 더 보기 기능 생성하기 더보기 버튼 만들기 이전에 더 많은 상품들 넣기.. 더보기 상품 업로드 Shop App을 위한 소스 코드 추가하기 페이지 생성 및 라우트 작성 백엔드 모델 추가 상위 Nabar에 다른 라우트들 추가 상품 업로드 페이지 UI 생성하기 상품 업로드 페이지 기능 생성하기 1. stae 생성 2. 핸들러 함수 생성 3. upload route 생성 업로드하니 데이터베이스에 잘 들어간다 ! 파일 업로드 컴포넌트 생성하기 npm install react-dropzone // 이미지 업로드 편하게 한다. 컴퓨터 파일을 업로드 할수 있고 드래그 앤 드롭기능 가능 fileuplad 컴포넌트를 upload 페이지에 추가 file 업로드 컴포넌트 UI 백엔드로 보내기 위한 handle 함수 Multer를 이용해서 파일 업로드하기 npm install multer 백엔드 product uploa.. 더보기 로그인 로그인 페이지 생성하기 회원가입 페이지와 거의 비슷하기 때문에 대부분의 코드를 복사 붙여넣기 후 로그인에 맞게 수정. 성공시 토큰은 로컬스토리지에 저장. login route 생성하기 로그인 라우트 생성 비밀번호 비교함수 생성 로그인시 토큰이 잘왔고 isAutheh도 true로 잘 나온다. 인증이 되어있는지 체크하기 app.jsx가에서 새로고침을 하고 isAuth가 ture일 이면 dispatch의 auth User가 호출이 되면서 axios를 사용해서 비동기 요청을 한다. const auth = require("../middleware/auth"); auth라우터 생성 그리고 auth 미들 웨어를 작성하고 그걸 이용해서 인증된 유저의 정보를 준다. 미들웨어 코드 작성 userSlice 작성 NotAu.. 더보기 회원가입 회원가입 페이지 UI 생성하기 위와 같은 다지인이 목표 기본 입력 틀 갖춘 다음 div 단 복사해서 email, name, password 도 같이 생성 회원가입 버튼 만들기 아이디가 있다면 로그인 페이지로 가게 라우팅 React-Hook-Form react-hook-form 을 이용한 유효성 체크 렌더링도 효율적으로 되게함. npm install react-hook-form useform를 사용하여 from을 관리하는 객체 선언 register : input 관련 함수 handlesubmit : 제출 관련 함수 errors: form 입력값의 유효성 결과값을 저장하는 객체 reset : 제출시 초기화관련 함수 유효성 체크를 위한 객체 생성 유효성 체크 등록 에러가 있을 경우 에러 표시 Axios ins.. 더보기 백엔드 기본구조 생성하기 package.json 세팅 및 설치 npm init npm install bcryptjs cors dotenv jsonwebtoken mongoose npm install -D nodemon nodemon 스크립트 작성 "dev" : "nodemon src/index.js", 전체 폴더 구조 생성 express.static() 이미지, CSS 파일 및 JavaScipt 파일과 같은 정적 파일을 제공하려면 Express의 express.static 내장 미들웨어 기능을 사용. 바로 upload 폴더에 있는 이미지 파일들을 프론트로 나중에 보낼수 있게 public 이라는 폴더에 있는 정적인 파일을 제공할 수 있다. 가상 경로를 지정하여 특정 url 을 지정할 수 있다. 상대경로를 path 모듈을 사용해서 .. 더보기 프론트엔드 기본 구조 생성하기 Vite을 이용한 리액트 생성하기 전체 폴더 및 파일 생성 Vite ESlint 설정하기 import를 하지 않아도 에디터에서 빨간줄이나 에러가 안뜨는 건 eslint를 설정하지 않아서이다. 그래서 설치를 해주자 타입스립트를 사용할 경우 eslint가 없어도 큰 문제가없다. 3가지 라이브러리 설치 npm install -D vite-plugin-eslint eslint eslint-config-react-app eslint plugin 적용 및 eslintrc 파일 생성 후 rules 생성 언어 버전 지정, 규칙 설정 및 플러그인 사용을 포함하여 eslint의 동작을 구성할 수 있다. 구성 파일은 extends 구성에서 규칙을 확장하거나 덮어쓸 수도 있다. TailwindCSS 를 앱에 적용하기 3가지 .. 더보기 이전 1 다음
