웹브라우저 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를 사용해서 비동기 전..

리액트 - 싱글페이지 애플리케이션 / 한 개의 페이지로 이루어진 애플리케이션 상태 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..

https://reactrouter.com/ Declarative routing for React apps at any scale | React Router Version 6 of React Router is here! React Router v6 takes the best features from v3, v5, and its sister project, Reach Router, in our smallest and most powerful package yet. reactrouter.com Router 페이지 이동 * 기존 웹페이지는 여러개의 페이지를 사용 (새로운 페이지를 로드하는 방식) 서브페이지 * 리액트는 sap 방식 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형..

App.js import './App.css'; import styled from 'styled-components'; import Header from './components/Header'; import Content from './components/Content'; import { BookProvider } from './context/BookContext'; const ContainerDiv = styled.div` width: 70%; margin: 0 auto; text-align: center; `; function App() { return ( ); } export default App; Context/BookContext.js import React,{createContext, useC..