728x90 반응형 분류 전체보기58 client에서 server로 body에 데이터 넣어 보내기 client쪽에서 server로 데이터를 보내기 위해서 post 요청의 2번째 인자에 데이터를 넣어줍니다. client 코드 const [text, setText] = useState(""); useEffect(() => { let body = { text: "클라에서 보낸 데이터", }; axios .post("/api/test", body) .then((response) => { //요청 성공 후 setText(response.data.text); }) .catch((error) => { console.log(error); }); }, []); server 코드 app.post("/api/test", (req, res) => { console.log(req.body); res.status(200).j.. 2023. 6. 1. server에서 client로 보내온 res 화면에 출력하기 server쪽에서 text에 글을 넣어 res로 client단에 출력하려고 합니다. server 코드 app.post("/api/test", (req, res) => { res.status(200).json({ success: true, text: "server 응답 출력" }); }); client 코드 server단에서 보내준 res 데이터를 관리하기 위해 react훅인 useState를 세팅해주고 res의 응답 값을 로그에 찍어서 확인해봅니다. const List = (props) => { const [text, setText] = useState(""); useEffect(() => { //list component 실행시 한번만 실행 axios .post("/api/test") .then((re.. 2023. 6. 1. 로컬 호스트, 서버 통신 문제 (CORS 이슈) list component에서 sever쪽으로 데이터를 요청,응답을 위해서 axios를 사용하여 server쪽으로 테스트 요청을 보내봤습니다. client쪽 코드 useEffect(() => { //useEffect사용하여 렌더시 한번만 실행 axios .post("/api/test") .then((res) => { // 성공 핸들링 console.log("요청 성공"); }) .catch((err) => { // 에러 핸들링 alert("요청 실패"); console.log(error); }) .finally(() => { // 항상 실행되는 영역 }); }, []); server쪽 코드 client쪽에서 요청(req)을 보내면 요청 정보를 터미널에 띄우고 응답으로 res를 통해 상태200과 true를.. 2023. 6. 1. Mongoose활용하여 Node.js와 MongoDB를 연결 참조사이트를 읽어보니 블록도만 봐도 딱 어떤 느낌이지 알 것 같다. server단에서 mongoose를 이용해 mongoDB에 쉽게 접근하는 방법이 있는게 아닐까?? 일단 몽구스를 알아보자 Mongoose는 Node.js와 MongoDB를 연결해주는 ODM이라고 합니다 ODM(Object Document Mapping) : 객체와 문서를 1대1로 매칭하는 역할 MongoDB(nosql)의 경우 table이라는 개념이 없기 때문에 문제를 대비하여 Schema를 도입한 것이라고 합니다. Schema는 SQL의 table과 비슷한 개념 (데이터를 넣을 때 schema에서 선언한 틀에 맞게 데이터를 넣을 수 있도록 도와줍니다.) 참조 : https://devlog-h.tistory.com/27 MongoDB? .. 2023. 6. 1. MongoDB (NoSQL) 데이터베이스 출처 : https://azure.microsoft.com/ko-kr/resources/cloud-computing-dictionary/what-is-nosql-database NoSQL 데이터베이스 - NoSQL이란?| Microsoft Azure NoSQL 데이터베이스 시스템에 대한 자세한 내용과 함께 이 시스템이 기존 관계형(SQL) 데이터베이스와 어떻게 다른지 알아보세요. 기능의 개요를 확인하고 시작 방법을 알아보세요. azure.microsoft.com 2023. 6. 1. 매번 코드 변경, 서버를 재시작 ..해결(Nodemon) 작업마다 서버 재시작이 번거로웠는데 검색해 보니 편한 기능이 있습니다. npm i nodemon --save 미래의 나를 위해 기록! 출처 : https://backend-intro.vlpt.us/1/03.html 1-3. Nodemon 사용하기 · GitBook 1-3. Nodemon 사용하기 서버 코드를 변경 할 때마다, 서버를 재시작하는게 꽤 귀찮지요? nodemon 이라는 도구를 사용하면 이를 자동으로 해줍니다. 먼저, 이 도구를 npm 을 통해 글로벌 설치하세요. $ npm backend-intro.vlpt.us 2023. 6. 1. 작업중 만난 에러.. server 코드 const express = require("express"); const app = express(); //포트 로컬호스트랑 겹쳐서 5000변경 const port = 5000; app.listen(port, () => { console.log(`Example app listening on port ${port}`); }); app.get("/", (req, res) => { res.sendFile("../client/build/index.html"); }); express 홈페이지에서 기본 틀 불러와서 server 세팅중에... res.send('서버단 출력'); 은 5000번 포트에서 불러오기 성공했지만 client쪽 빌드 된 index.html 파일 보내려 하는데 에러가 뚜둥.... 2023. 6. 1. html tag를 react에서 작업시 자동완성 옵션 vsc settings.json에서 아래의 코드를 추가하면 ok "emmet.triggerExpansionOnTab": true, "emmet.includeLanguages": {"javascript" : "javascriptreact"} 출처 https://bogyum-uncle.tistory.com/142 [ReactJS] react html tag auto complete 아무런 세팅없이는 Visual Studio Code에서 React javascript의 HTML 태그의 자동완성을 지원하지 않고 있음. 따라서 이를 위해 settings.json을 수정할 필요가 있음. 'CTRL + ,' 단축키를 통해 settings.json 편집을 bogyum-uncle.tistory.com 2023. 5. 31. reduxjs-toolkit 사용시 비직렬화 문제.. reduxjs-toolkit을 사용하여 작업 도중 에러 발생.. 작업 코드 다행히도 user정보는 담겨있는데 친숙한... 경고.. 검색을 해보니 외쿸 형님들이 정성스럽게 올려놓은 글을 찾았다.. 휴.. 글을 읽어보니 직렬화 관련 문제?! you should be able to configure the middleare to remove the serilizable check or ignore specific actions '직렬화 가능 검사를 제거하거나 특정 작업을 무시하도록 구성할 수 있어야 합니다' 라고 얘기하시네요.. 1. 비활성화 코드 import { configureStore, getDefaultMiddleware } from 'redux-starter-kit' export const store.. 2023. 5. 30. 이전 1 ··· 3 4 5 6 7 다음 728x90 반응형
