👨‍💻 Web Development/React JS 검색 결과

8 개의 검색 결과가 있습니다.

👨‍💻 Web Development/React JS

[React JS] 7. 상품 디테일 페이지

[React JS] 7. 상품 디테일 페이지 1. 상품 디테일 페이지 생성하기 App.jsx CardItem에서 누르면 백엔드 호출 Detailedpage import React, { useEffect, useState } from "react"; import { useParams } from "react-router-dom"; import axiosInstance from "../../utils/axios"; import ProductImage from "./Sections/ProductImage"; import ProductInfo from "./Sections/ProductInfo"; const DetailedProductPage = () => { const { productId } = usePar..

2023. 9. 11. 22:49

👨‍💻 Web Development/React JS

[React JS] 6. 상품 생성, 메인 페이지 생성하기

[React JS] 6. 상품 생성, 메인 페이지 생성하기 1. Shop App을 위한 소스 코드 추가하기 RegisterPage.js UploadProductPage.js DetailProductPagejs CartPage.js HistoryPage.js 추가 App.jsx에 route 추가 Model 생성 - Product - Payment NavItem에 추가 - cart - upload import React from "react"; import { useDispatch, useSelector } from "react-redux"; import { Link, useNavigate } from "react-router-dom"; import { logoutUser } from "../../../st..

2023. 8. 17. 22:43

👨‍💻 Web Development/React JS

[React JS] 5. 회원가입/로그인/로그아웃 기능 구현하기

[React JS] 5. 로그인 기능 구현하기 1. 회원가입 페이지 UI 생성하기 RegisterPage.js import React from "react"; const RegisterPage = () => { return ( 회원가입 Email Name Password 회원가입 아이디가 있다면{" "} 로그인 ); }; export default RegisterPage; 2. React-Hook-Form 유효성 검사 - 라이브러리 없이 만들어도 되지만 react-hook-form 사용하면 편리 + re-랜더링 최소화 가능 (적은 코드, 높은 성능) React-Hook-Form npm i react-hook-form - useForm() 사용 import React from "react"; import ..

2023. 7. 17. 21:33

👨‍💻 Web Development/React JS

[React JS] 4. 백엔드 기본구조 생성하기

[React JS] 4. 백엔드 기본구조 생성하기 1. 백엔드 기본구조 생성 package.json 생성 npm init express 설치 npm install express - index.js 가 entry파일 (여기로 요청이 들어옴) nodemon 설치 npm install nodemon 파일구조 생성 필요한 패키지 다운 npm install bcryptjs cors dotenv express jsonwebtoken mongoose - bcrypt : 비번 암호화 - cors : origin 두 개에서 통신 가능하게 - env : 환경변수 생성 생성한거 사용 - jsonwebtoken : 사용가능 - mongoose : mongo db 사용 2. express.static() 이미지, css, js..

2023. 7. 15. 21:29

👨‍💻 Web Development/React JS

[React JS] [참조] Redux

[React JS] [참조] Redux 1. Redux란? - Redux is a predictable state container for JavaScript - JS 어플리케이션을 위한 상태 관리 라이브러리 Props VS State Props (Properties) - 구성요소가 서로 통신하는 방법 (A->B 컴포넌트간 데이터 교환) - 상위 구성 요소에서 아래쪽으로 흐름 - 해당 값을 변경하려면 자식 관점에서 Props 변경가능, 부모는 내부 상태를 변경해야함 = 자식 컴포넌트의 props를 변경하려면 부모 컴포넌트의 state를 바꿔야한다는 말 (a bit immutable) State - 부모 -> 자녀가 아닌 하나의 컴포넌트 안에서 데이터 전달 ex) 검색 창에 글을 입력할 때 글이 변하는 것..

2023. 6. 22. 21:34

👨‍💻 Web Development/React JS

[React JS] 3. 프론트엔드 기본구조 생성하기

[React JS] 3. 프론트엔드 기본구조 생성하기 1. Vite를 이용한 리액트 생성 - vite npm init vite project name: ./ react 선택 javascript 선택 -> 리액트 생성 npm install -> node_module안에 package.json dependencies들이 들어감 폴더구조 생성 components : 공통 컴포넌트 hooks : 커스텀 훅스 layout : header(navBar) , footer, side bar pages : 페이지들 store : redux 상태관리 utils : 여러 컴포넌트에서 사용되는 함수들 파일 생성 2. ESlint 1) 필요한 모듈 설치 npm install -D vite-plugin-eslint eslint ..

2023. 6. 18. 18:57