1. git clone ~~~ 을 해준다. 2. clone한 폴더를 열고 터미널에 npm ci 3. npm start // git clone 후 npm install을 바로 하면 package-lock.json 파일이 변경되어서 npm start가 안된다구 한다 // npm ci를 하면 package-lock.json 파일이 변경되지 않고 node_modules 폴더가 잘 설치된다.

green_customer_server - 고객관리 서버 api 서버 node.js express - 데이터베이스 AWS npm init // enter enter ~~ npm install express npm install cors npm install mysql index.js const express = require("express"); const cors = require("cors"); const app = express(); const port = 3001; const mysql = require("mysql"); const fs = require("fs") const dbinfo = fs.readFileSync('./database.json'); // 받아온 json 데이터를 객체형태로 ..

green_customer_client Header Footer CustomerList Customer DetailCustomer - 라이브러리 설치 axios react-router-dom react-daum-postcode material-ui https://mui.com/material-ui/getting-started/installation/ Installation - Material UI Install Material UI, the world's most popular React UI framework. mui.com npm install react-router-dom@6 npm install axios npm install react-daum-postcode npm install @mui/ma..

Memoization 메모이제이션 function App() { const a =10 return ( ) } function calculate() { return 10 } 1. useMemo 계속 재연산 하지않고 연산된 값을 재사용하도록 함 useMemo(콜백함수, 의존성 배열) ex> const value = useMemo(()=>{ return caculate() },[]) 2. useCallback 함수 재사용하기 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용 useCallback(콜백함수, 의존성 배열) App.js import './App.css'; import { useState, useEffect, useCallback } from 'react'; function App() { co..

client-github https://github.com/7ingout/lamp-shopping-client GitHub - 7ingout/lamp-shopping-client: 리액트 조명 쇼핑몰 클라이언트 리액트 조명 쇼핑몰 클라이언트. Contribute to 7ingout/lamp-shopping-client development by creating an account on GitHub. github.com server-github https://github.com/7ingout/lamp-shopping-server GitHub - 7ingout/lamp-shopping-server: 조명 쇼핑몰 서버입니다. 조명 쇼핑몰 서버입니다. Contribute to 7ingout/lamp-shoppi..

클라우드 첫번째. Server 배포 heroku 두번째. Client(react 배포) vercel 첫번째. Server 배포 heroku https://www.heroku.com/ Cloud Application Platform | Heroku Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud. www.heroku.com 회원가입 -> 로그인 후 -> create new app -> Heroku CLI 설치 -> deploy LAMP-SHOPPING-SERVER 1. index.js(server.js에서 이름 바꿈, 원래 ind..

rest란 "Representational State Transfer"의 약자 자원의 이름으로 구분하여 해당 자원의 상태를 주고 받는 모든 것을 의미 웹의 기존 기술과 http 프로토콜을 그대로 활용하여 웹의 장점을 최대한 활용할 수 있는 스타일이다 CRUD Create 생성 post Read 읽기 get Update 수정 put Delete 삭제 delete

LAMP-SHOPPING-CLIENT 1. product/index.js 삭제버튼 만들고, 삭제하기 삭제 기능 구현 const productDel = () => { axios.delete(`http://localhost:3000/product/${id}`) .then(result=>{ console.log("삭제되었습니다."); }) .catch(e=> { console.log(e); }) } LAMP-SHOPPING-SERVER 2. server.js 삭제 기능 구현 // delete 삭제하기 app.delete('/product/:id', async (req, res)=>{ const params = req.params; models.Product.destroy({ where: {id: params...

LAMP-SHOPPING-CLIENT 1. customHook 폴더 생성 후 useAsync.js 파일 생성 customHook/useASync.js import { useReducer, useEffect, useCallback } from "react" const initialState = { loading: false, data: null, error: null } // 로딩중? 데이터 받기 성공? 데이터 받기 실패 // LOADING , SUCCESS, ERROR function reducer(state, action){ switch(action.type) { case "LOADING": return { loading: true, data: null, error: null }; case "SUCCE..

업로드 이미지를 관리하는 스토리지 서버 "multer" 터미널 열고 ~ npm install multer const multer = require('multer'); const upload = multer({ dest: 'upload/' }) 이미지 파일을 post로 요청이 왔을 때 업로드라는 폴더에 이미지를 저장 app.post("/image', upload.single('image'), (req, res) => { const file = req.file; res.send({ imageUrl: file.path }) }) API 서버 데이터베이스 (sqlite) 스토리지 서버 (multer)