노드JS 프로젝트 구성 전 확인 1. node / npm 버전 확인 2. 프로젝트 폴더 생성 및 npm 초기화 C:\dev\nodejs\workspaces\node_react_shop 이동 후 npm 초기화 npm init 노드 익스프레스 설치 npm install express server.js 파일 생성 후 기본 작성 const express = require('express'); const path = require('path'); const app = express(); const http = require('http').createServer(app); http.listen(8080, function () { console.log('listening on 8080') }); nodejs 프로젝트..

Detail.js 더보기 import { useParams, useHistory } from "react-router-dom"; import { Nav } from 'react-bootstrap'; import { useEffect, useState } from "react"; import { CSSTransition } from "react-transition-group"; import './Detail.scss'; import { useDispatch } from "react-redux"; function Detail(props) { let { id } = useParams(); let foundObj = props.shoes.find((obj) => { return obj.id == id; }); ..

lazy (lazy / Suspense) 로딩 : 상세 페이지 첫 인덱스 페이지 로딩 시 상세페이지까지 한번에 모두 가져올 필요가 없으니 상세페이지를 클릭했을 시에만 임포트하도록 하여 성능개선 상세페이지를 클릭 시 데이터를 불러오기 전까지 Suspense fallback에 로딩중 이라는 표시를 해준다. App.js 더보기 import './App.css'; import { Navbar, NavDropdown, Nav, Container } from 'react-bootstrap'; import Shoes1 from './api/shoes1.json'; import { useState, lazy, Suspense } from 'react'; import axios from 'axios'; import { ..

sass 라이브러리 추가 yarn add node-sass 파일명 변경 Detail.css > Detail.ccss 파일 내용 변경 : Detail.js 기존 import './Detail.css'; 수정 import './Detail.scss';

장바구니(카트) 기능 구현 2 수량 증가 / 수량 감소 버튼에 대한 기능구현 index.js 더보기 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { BrowserRouter } from 'react-router-dom'; import { combineReducers, createStore } from 'redux'; import { Provider } from 'react-redux'; let reducer1State = []; export const redu..

장바구니(카트) 기능 구현 이슈 수정 기존 동일한 상품카드의 장바구니에 여러번 추가할 경우 계속 새로운 중복 데이터가 등록 수정 동일한 상품카드의 장바구니에 여러번 추가할 경우 동일한 상품의 수량만 1씩 증가 index.js 더보기 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { BrowserRouter } from 'react-router-dom'; import { combineReducers, createStore } from 'redux'; import ..