axios로 서버 get 요청 보내고싶은데 이렇게 504 에러 났을때, 여러가지 원인이 있다고는 하는데 proxy를 여러개 설정해서 충돌난건 아닌지 확인해본다 현재 설정이 localhost:8080으로 /api proxy가 설정되어있는데 공부한거 따라하다보니까... proxy를 localhost:3001로 설정했었단말이지 그래서 충돌나서 에러가 나나봐 localhost:8080을 proxy에서 지우니까 대충 해결은 된다 proxy가 뭔지 좀 봐야겠는데.. 언젠가 보겠지
1. App.js 수정 front의 App.js에 데이터를 삭제하는 deleteData 함수 작성 async function deleteData(el) { const remove = window.confirm(el.name + '을 삭제합니까?'); if (remove) { const body = {id:el.id} const res = await axios('/delete/data',{ method : 'POST', data: {'delete':body}, headers: new Headers() }) if (res.data) { alert('데이터를 삭제했습니다.') return window.location.reload(); } } } 삭제 버튼도 추가해서, 누르면 삭제할 수 있도록 return ( ..
1. App.js 수정 App.js에 데이터를 수정하는 함수 modifyData를 작성 async function modifyData(el) { const modify = prompt(el.name + '을 어떤 이름으로 변경할까요?') if (modify !== null) { const body = { name : modify, id : el.id } const res = await axios('/modify/data', { method : 'POST', data : {'modify' : body}, headers : new Headers() }) if (res.data) { alert('데이터를 수정했습니다.') return window.location.reload() } } } 그리고 return에..
1. 데이터 조회 front의 App.js를 다음과 같이 수정 async function getData() 함수 작성 list, update state 추가 useEffect()를 사용해서, 렌더링하면 데이터를 조회하도록 import React, {useState} from 'react'; import './App.css'; import axios from 'axios'; const App = (props) => { const [name,setName] = useState('') const [list,setList] = useState([]) const [update,setUpdate] = useState(false) async function addData(e) { e.preventDefault(); ..
1. 추가, 수정, 삭제를 확인하기 위한 코드 작성 데이터 추가, 수정, 삭제를 유동적으로 확인하기 위해 클라이언트와 서버 파일 수정 //server.js const { Teacher, Sequelize: { Op } } = require('./models') sequelize.query('SET NAMES utf8;'); 당연한거지만, 서버가 해당 테이블을 읽어올려면 반드시 models/index.js에 해당 테이블을 정의해야함. server.js에 클라이언트로부터 받아오는 값을 조회할 수 있는 API 작성 //server.js app.post('/add/data', (req,res) => { console.log(req.body) }) 이제 클라이언트가 /add/data로 보내는 모든 데이터는 서버로..
1. 테이블 생성하기 models/의 js파일들이 테이블 역할을 하게 된다. 이곳에 teacher.js를 생성하고 다음 코드를 작성 const { DataTypes } = require("sequelize") module.exports = (sequelize, DataTypes) => { return sequelize.define( 'teacher', //테이블 이름을 지정 { name: { type:DataTypes.STRING(50), allowNull : true }, }, { charset: 'utf8', collate: 'utf8_general_ci', timestamps: false, } ) } 여기서 다음 name부분은 teacher 테이블의 column 역할을 한다 { name: { typ..
딥러닝/머신러닝, 통계학, IT프로그래밍, 알고리즘을 좋아하는 사람 https://github.com/yundaehyuck
