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)

상태가 변경될 때 리랜더링 됨 (다시 그려짐) 1. useState(초기값) => [ state, f ] * 상태값 관리 const newArr = useState(초기값) const state = newArr[0] const setState = newArr[1] const [ state, setState ] = useState(초기값) setState(변경된값) 2. useReducer() * 어떤 경우에 상태가 어떻게 업데이트 될건지 관리 useReducer(함수, 초기값) => [ state, 함수를 실행시키는 함수 ] const [ state, dispatch ] = useReducer(reducer, initialstate) dispatch({액션}) dispatch({ type: "DELETE..

node.js를 설치하고 npm start를 했는데 이와 같은 오류가 발생했다. https://github.com/nodejs/help/issues/2644 internal/modules/cjs/loader.js:983 throw err; ^ Could you help me with this code? · Issue #2644 · nodejs/help internal/modules/cjs/loader.js:983 throw err; ^ Error: Cannot find module 'D:\Bryan Durán\Desktop\chat-javascript-fullstack-master\index.js' at Function.Module._resolveFilename (internal/mo... github...

웹브라우저 API 서버 데이터베이스 - mySQL 1. 데이터베이스 프로그램을 설치 2. 데이터베이스 생성 3. 테이블 생성 (데이터를 논리적으로 나누도록 컬럼을 설정) 4. 테이블에 데이터를 추가한다. sqlite데이터베이스 - 개발용으로 많이 사용 - ORM(Object Relational Mapping): 서버에서 데이터베이스를 손쉽게 다루도록 도와주는 툴을 의미함 - 데이터베이스 모델링을 쉽게 할 수 있음 - SQL을 사용하지 않고 CRUD 작업을 할 수 있음 LAMP-SHOPPING-SERVER Sqlite와 Sequelize 사용하기 1.sqlite와 sequelize 설치하기 npm install sequelize sqlite3 2. sequelize 기본환경 설치 npm install -g..

1. LAMP-SHOPPING-CLIENT main/index.js 에서 상품 불러오는거 따로 뗀 후 MainProduct라는 새 파일 만든 후 붙여준다 ! 요로코롬 이걸로 바꾸기 import React from 'react'; import { Link } from 'react-router-dom' const MainProduct = ( {product} ) => { return ( {product.name} {product.price} {product.seller} ); }; export default MainProduct; 2. LAMP-SHOPPING-SERVER server.js 로 가서 추가하기 // method는 get이고 오고 url은 /product/2 로 요청이 온 경우 app.get('..

lamp-shopping-client lamp-shopping-server 서버 - API 서버 정보를 제공하는 서버 server은 리액트로 설치안하고 그냥 폴더 만든 후 터미널 열고 ~ npm init ~ 서버는 웹브라우저로 보지 않고 터미널에 node ~ 치기 test.js console.log('hello server!!!'); ex> node test.js react -> es6 node -> Common js 모듈 1. es6 방식 1) 내보내기 export function hello(){ } function hello(){ } export default hello; 2) 불러오기 import helo from './hello.js'; 2. CommonJS 방식 1) 내보내기 (export) f..

Promise new Promise 선언할 때 P 대문자로 적을 것 ! Async는 Promise를 간편하게? 쓰도록 해주는 애 에러 핸들링 try...catch 문법 try { 코드작성 } catch(e) { 코드작성 } 복습/promise.html 복습/error.html

LAMP-SHOPPING-CLIENT * 설치해야하는 라이브러리 1) sass yarn add node-sass 2) antd npm install antd 3) axios npm install axios / yarn add axios 4) react-router-dom npm install react-router-dom * 구현 순서 // 메인페이지 1. main 폴더 생성 후 main/index.js에 마크업하기 (첫 화면 먼저 만들기) component 이름은 MainPage 2. 기본 셋팅(공통으로 적용되는 애들)은 app.css에서 스타일 주기 (header) main/index.scss 파일로 index.js(마크업한 파일)에 스타일 주기 (import './index.scss';) main에..

App.js import './App.css'; import UserCustomHook from './components/UsersCustomHook'; // import Posts from './components/Posts'; // import PostsReducer from './components/PostsReducer'; // import Users from './components/Users'; // import UsersReducer from './components/UsersReducer'; function App() { return ( {/* */} ); } export default App; components/UsersCustomHook.js // useAsync를 사용해서 비동기 전..