react-axios 에서 nodejs 서버로 post 요청

[Taeyoon Kim]

아래와 같이 App.js 에서 axios 사용하여 post 요청을 하였습니다. 

<input onChange={(e) => {
axios.post('/add', {inputToDB: e.target.value}).then((result) => {
setPost(result.data)
})
}}/>

server.js 에서 아래와 같이 mongodb에 요청하였습니다.

app.post('/add',function (req,res){
db1.collection('testCollection').insertOne({input:req.body.inputToDB},function (error,result){
console.log('completed')
})
})

다시 정리하면, App.js에서 axios을 이용하여 input 값들을 post요청하고, server.js에서 app.post를 통해 mongoDB에

넣어주도록 하였는데, DB에 값이 들어가지가 않습니다. "fail to load resource"란 에러메세지를 console창 통해서 확인했는데,

혹시 axios.post할때, e.target.value 부분이 잘못된 건지... 아니면,mongoDB에서 insertOne을 잘못한건지 잘 모르겠습니다. 

어쩌면 너무 쉬운건데, 제가 잘 모르는 것 같아 죄송합니다~

[codingapple]

일단 onchange 내부보다는 버튼을 누르거나 그럴 때 post요청을 하는게 좋아보입니다

어떤문제인지 확인하려면 post요청시 console.log로 request.body 이런걸 출력하는 코드를 서버에 짜보시고 

console.log가 작동 안되면 요청이 못들어온 것이기 때문에 리액트코드 문제일거고 

request.body 출력이 잘 되는데 db에 저장만 안되는거면 db저장문법이 이상한 것이겠군요

[Taeyoon Kim]

네 감사합니다.~ 좀 더 해보겠습니다. 

[codingapple]

post요청시 /add 경로가 아니라 http 부터 시작하는 풀경로를 적어보도록 합시다 

[Taeyoon Kim]

아~ 넵! 감사합니다^^

[Taeyoon Kim]

해결하였습니다. ^^ 정말 감사드립니다!

[Taeyoon Kim]

axios.post('http://localhost:3002/create', querystring.stringify( {title:input.title,content:input.content})).then((result)=>{console.log(result.data)})
}에서 기존에 undefined라고 나와서 query string.stringify 함수를 사용하니까 server.js의 app.post로 자료가 전달되었습니다. 수업에서 axios는 fetch와 다르게 json으로 바꿀필요가 없다고 알고 있는데, stringify함수를 써야 하는 이유를 모르겠습니다. ??

두번째로는 post성공하고 get으로 하는게 쉬울거라 생각했는데, axios.get은 보내는데, server.js의 app.get에서 반응이 없습니다. console로 확인해봐도 반응이 없는데... 조언 부탁드립니다. axios.get을 통해요청보내면,app.get을 통해 express 서버가 요청을 받아서 db에서 데이터를 꺼내서 보내주는 것으로 이해하고 있습니다. 이래저래 해봐도 get 요청을 못받을 특별한 것은 없는것 같은데... 안되네요. 

mongoDB에 대해서 알아보다가, mongoose를 사용하면 명령은 더 편리하게 해주지만, MongoDB버전 업데이트나 신규명령을 지원하지 

않는 상황이나 정해진 스키마를 무시하고 컬렉션을 수정할 필요가 있기 때문에 mongoDB기본 드라이버를 활용해야 한다고 해서 전 강사님이 진행하신 방식으로 해보려 하는데, 장기적으로 봤을때 mongoDB에 대한 이해도 높아질것 같아서 맞을 것 같은데, 강사님 의견 부탁드립니다.

[codingapple]

querystring.stringify 저거는 쿼리스트링으로 바꿔주는 함수라 쓸 필요는 없고 

post요청시 그냥 { a : 1 } 이렇게 써도 됩니다 

object 자료 만들 때 input.content, input.title 이런게 잘못된게 아닐까요

 

get요청성공시 파일을 보내고 있어서 그렇습니다

파일을 보내는게 아니라 데이터만 간단하게 보내봅시다 

res.send 혹은 res.json 쓰면 될듯요 

[Taeyoon Kim]

답변 감사합니다. 하지만, 여전히 app.get에는 반응이 없는데, 제가 질문을 잘못드린 것 같습니다.

아래와 같이 app.get 안에 있는 console.log("success to get in server.js")이 출력이 안됩니다. 

app.get("/notes", function (req, res) {
console.log("success to get in server.js")

db1.collection('testCollection').find().toArray((error, result) => {
console.log("server.js")
console.log(result)

[Taeyoon Kim]

index.html 하나의 파일 요청을 받아서 올리는 거니까 app.get("/")으로는 받지만, axios.get(http://localhost:3002/notes)로 요청하는 경우 server.js의 app.get(/notes)에서는 /notes라는 주소를 인식하지 못하는게 아닌가요?

[글쓴이]

글