-
강의 너무 잘 듣고 있습니다. 설명하는 능력이 정말 탁월하십니다. 그러나 강의 완강 후 혼자 프로젝트를 이것저것 바꿔나가다 보니 막히는게 많습니다. 밑에 분 글을 참고해서 해결하려고 했지만 잘 되지 않아서 질문드립니다
server.js 에서 mongodb와 연결은 잘 됩니다. listening on 8000 과 listening on db 모두 이상없이 터미널에 뜹니다.
const express = require('express');
const path = require('path');
const app = express();
const MongoClient = require('mongodb').MongoClient
const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({extended : true}));
require('dotenv').config()app.use(express.json());
var cors = require('cors');
app.use(cors());const http = require('http').createServer(app);
http.listen(8000, function () {
console.log('listening on 8000')
});var db; //변수 하나 필요
MongoClient.connect(process.env.DB_URL, {useUnifiedTopology: true }, function(에러, client){
//연결되면 할일
if(에러) return console.log(에러) //에러 나오면 콘솔에 띄우기db = client.db('ShopData'); //ShopData 이라는 db에 연결
console.log('listening on db')});
app.use(express.static(path.join(__dirname, '/build')));
app.get('/', function (요청, 응답) {
응답.sendFile(path.join(__dirname, '/build/index.html'));
});
app.get('*', function (요청, 응답) {
응답.sendFile(path.join(__dirname, '/build/index.html'));
});app.get('/detail', function(요청,응답){
db.collection('Data').find().toArray(function(에러, 결과){
console.log(결과);
응답.send(결과);
})
})
마지막 줄이 문제인 것 같습니다. localhost:8000/detail 의 콘솔에서 아무런 데이터가 뜨지 않고, 응답.send를 응답.json으로 바꿔도 똑같습니다
당연히 여기 React 의 더보기버튼부분에서 저 주소로 get 요청을 하니 콘솔에서는 결과 is not defined 라고 뜹니다. (리액트 프로젝트는 localhost:8001에서 작업하고 있습니다. 원래는 깃헙에 json 파일을 올려 그 주소로 get요청해 사용하고 있었으나 mongodb로 바꾸려고합니다. 사진
첨부한대로 mongodb 콜렉션에는 저렇게 데이터를 수십 개 넣었습니다)
Server.js의 문제점 혹은 콜렉션의 문제점, 그리고 아래 코드 React에 저렇게 get 주소 쓰는게 맞는지 여쭤보고 싶습니다.
<button
class="buttonYellow"
style={{width: 85}}
onClick={() => {
axios //axios는 JSON 을 예쁘게 Object 형으로 바꿔줌 즉 따옴표 다 떼줌! fetch는 그런거 없음ㅅㄱ
.get("https://localhost:8000/detail") //get 요청 할 주소
.then((result) => {
//then 은 요청 성공시 실행할 코드, result.data 는 받아온 데이터
hochony변경([...hochony, ...result.data]); //data 카피본에 추가적으로 data2 카피본 넣기
더보기변경(false);
})
.catch(() => {
//catch 는 요청 실패시 실행할 코드
console.log("불러오기 실패!");
console.log(결과);
});
}}
>
주말에도 빠른 답변 정말 감사합니다. 말씀대로 하니 localhost:8000/detail 에는 _id 가 포함된 json형태로 데이터가 뜹니다.
하지만 react에서는 여전히 "결과 is not defined" 라고 에러가 뜹니다.
.catch 에서 console.log(결과)를 console.log(result.data)로 바꿔봐도 "result is not defined" 에러가 뜹니다.
<button
class="buttonYellow"
style={{width: 85}}
onClick={() => {
axios //axios는 JSON 을 예쁘게 Object 형으로 바꿔줌 즉 따옴표 다 떼줌! fetch는 그런거 없음ㅅㄱ
.get("https://localhost:8000/detail") //get 요청 할 주소
.then((result) => {
//then 은 요청 성공시 실행할 코드, result.data 는 받아온 데이터
hochony변경([...hochony, ...result.data]); //data 카피본에 추가적으로 data2 카피본 넣기
더보기변경(false);
})
.catch(() => {
//catch 는 요청 실패시 실행할 코드
console.log("불러오기 실패!");
console.log(result.data);
});
}}
>
더보기
</button> : null}그렇다면 hochony 변경([...hochony, ...result.data]) 부분을 어떻게 해야 저 json 데이터를 가져와 사용할 수 있을까요?
hochony변경은 이렇게 사용하고 있습니다
let [hochony, hochony변경] = useState(Data); //Data 는 data.js 파일 데이터
//data.js 파일 내용
export default [
{
id: 0,
title: "This is my seat",
content: "Go get my snack then I will move",
price: 12000,
quan: 100
},{
id: 1,
title: "Eat my feet human",
content: "It is not high five",
price: 11000,
quan: 100
},{
id: 2,
title: "Too bright here",
content: "But still I can hear you",
price: 13000,
quan: 100
},
];
- 답변은 로그인 후 가능합니다.