1. 미니 블로그 기획 블로그에 필요한 화면을 리액트 컴포넌트로 만들고, 각 컴포넌트를 연결하여 겉모습이 그럴듯한 블로그 만들기 개발을 시작하기 전에, 기획과 필요한 기능, 전체 디자인에 대해 간단하게 정리 기능이나 디자인이 중간에 변경될 수 있지만, 간단하게라도 정리된 내용이 없다면 중간에 헤매는 경우가 자주 발생 1-1) 필요한 기능 글 목록 보기(리스트 형태) 글 보기 댓글 보기 글 작성 댓글 작성 1-2) 전체 화면 디자인 메인 화면은 글 목록을 보여주고, 글 작성 버튼을 누르면 글을 작성할 수 있는 화면으로 이동해서 글을 작성할 수 있도록 메인 화면에서 글을 클릭하면, 전체 글의 내용과 댓글을 볼 수 있는 형태가 되도록 글 보기 화면 하단에는 댓글을 작성할 수 있는 기능이 들어가도록 2. 프로젝..
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로 보내는 모든 데이터는 서버로..
딥러닝/머신러닝, 통계학, IT프로그래밍, 알고리즘을 좋아하는 사람 https://github.com/yundaehyuck
