본문 바로가기
728x90

전체 글

[React] Sqlite DB사용, 간단한 웹페이지 만들기_5 2022. 7. 5. 서버쪽은 자세히 공부하지못해 진행중에 하나하나 주석처리함... const express = require("express"); const cors = require("cors"); const app = express(); // 헤로쿠에서 지정한 포트가 있으면 그 번호를 사용 // 없다면 8080 포트를 사용한다. const port = process.env.PORT || 8080; const models = require('./models'); //json형식의 데이터를 처리할수 있게 설정 app.use(express.json()); //브라우저 cors이슈를 막기위해 사용(모든 브라우저의 요청을 일정하게 받겠다) app.use(cors()); //upload폴더에 있는 파일에 접근할수 있도록 설정 ap..
[React] Sqlite DB사용, 간단한 웹페이지 만들기_4 2022. 7. 5. 서버 생성.... Express 설치 npm install express npm install cors // 모든 브라우저가 내 서버에 요청할 수 있게 해줌 테이블 설치 sqlite 데이터베이스 - 개발용으로 많이 사용 - ORM(Object Relational Mapping) : 서버에서 데이터베이스를 손쉽게 다루도록 도와주는 툴 - 데이터베이스 모델링을 쉽게 할 수 있다. - SQL을 사용하지 않고, CRUD를 할 수 있다. Sqlite와 Sequelize 사용하기 sqlite와 sequelize 설치하기 npm install sequelize sqlite3 // 터미널에 바로 사용 ( 서버에 설치) sequelize 기본환경 설치 npm install -g sequelize-cli npx seque..
[React] Sqlite DB사용, 간단한 웹페이지 만들기_3 2022. 7. 5. 다음은 클릭이벤트로 주었던 상세페이지와 삭제,upload 기능 상세보기페이지에서 삭제기능은 함께 추가되어있다. async function getProduct(id){ const response = await axios.get(`${API_URL}/product/${id}`); return response.data; // id값 하나만 받아오기위해 id를 이용해 값을 호출해온다. // 서버에서는 findOne함수로 id값이 있는 1개의 값만 돌려준다. } const ProductPage = () => { const navigate = useNavigate(); // 네비게이션을 사용하기위해 함수 생성 const { id } = useParams(); // 객체언어 Params로 클릭할때 넘어온 id값을 가..
[React] Sqlite DB사용, 간단한 웹페이지 만들기_2 2022. 7. 5. Client에서 값을 받아오기에 앞서 받아온값의 상태를 확인하기위해 Reducer를 사용,처음 실핼될때 한번만 사용하기위해 Effect로 실행시키는 함수를 다른 파일에 작성하였다. useAsync.js import { useReducer, useEffect } 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: nul..
[React] Sqlite DB사용, 간단한 웹페이지 만들기_1 2022. 7. 5. https://vercel.com/sh98222-navercom/lamp-shooping-clint Dashboard – Vercel The deployment that is available to your visitors. vercel.com 완성 상태 처음 시작할때 설치했던 라이브러리 yarn add node-sass antd npm install antd axios npm install axios react-router-dom npm install react-router-dom 완성본 import './App.css'; import Footer from './include/Footer'; import Header from './include/Header'; import MainPage from '...
[React] Constext 활용 2022. 6. 29. context API props는 하나하나를 타고 이동해야하지만 context는 바로 그 내용을 불러올 수 있다. 프로젝트 안에서 전역적으로 사용할 수 있는 값을 관리 createContext(null); => context를 리턴 -> 컴포넌트 const MyContext = createContext(null); 나중에 value로 값을 넣기에 null을 넣음. 컨텍스트 만들기 const MyContext = createContext(기본값) App 최상단으로가서 감싸준다. 보내주고 싶은 값을 넣어준다. 컨텍스트 값 사용하기 import React, { useContext } from 'react'; import { MyContext } from '../component/MyCon..
[React] API연동 axios라이브러리 / state와 Reducer 으로 값 출력하기 2022. 6. 28. API 연동하기 axios 라이브러리 axios를 사용해서 get, put, post, delete 등의 메서드로 api를 요청 rest api. get : 데이터를 조회 post : 데이터를 등록 put : 데이터를 수정 delete : 데이터 제거 axios 사용법 import axios from 'axios'; 데이터 조회 사용법 > axios.get(경로) ex > axios.get('/users/1'); 데이터 등록 사용법 - axios.post(경로, 데이터정보) ex > axios.post('/users/', { username : 'green', name : 'aaaa' }) 설치 npm 사용하기: $ npm install axios bower 사용하기: $ bower install axi..
[React] 라우터(페이지 이동), 쿼리스트링 , useLocation 2022. 6. 28. 리액트 라우터 페이지이동 * 기존 방식은 여러개의 페이지를 사용해 새로운 페이지를 로드하는방식 이동 * 리액트는 spa 방식으로 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가진다. 라우팅 사용자가 요청한 url에 따라 해당 url에 맞는 페이지를 보여주는것. * React-Router : 신규페이지를 불러오지 않는 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지 에서 렌더링 해주는 라이브러리. https://reactrouter.com/ 설치방법 npm install react-router-dom BrowserRouter으로 main.jsx를 감싸줘야한다. Routers로 묶고나서 사용. v5.0때는 switch . 실습, 메인페이지 function ..
728x90

티스토리툴바