업로드 이미지를 관리하는 스토리지 서버 "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..

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를 사용해서 비동기 전..

리액트 - 싱글페이지 애플리케이션 / 한 개의 페이지로 이루어진 애플리케이션 상태 useState useState(초기값) => [ state, setState ] useState(10) => return [ state, f ] // state(상태)는 f로만 관리 가능 const stateArr = useState(10); const state = stateArr[0]; const setState = stateArr[1]; = const [ state, setState ] = useState(10); // 구조분해할당 useReducer function reducer(state, action) { switch(action.type){ case "CHANGE_USER": return { ...state,..

https://axios-http.com/kr/docs/intro 시작하기 | Axios Docs 시작하기 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리 Axios란? Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코 axios-http.com https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. As of Oc..