리액트와 서버 연동 시

[오승준]

1.  서버데이터를 받을 수 있는 ejs를,
    리액트를 build 하고 나서 서버랑 연동 하려고 해도 리액트 파일에 사용해야하나요??
    아니면 어떻게 리액트에선 서버데이터를 주고 받죠?

2. 리액트랑 서버 연동 시 app.get('/url')식으로 상세페이지를 나누는데 
    그럼 이땐 리액트에서의 Route 는 안쓰는 건가요?? 
    아니면 어떤 경우에는 Route를 쓰는 건가요?

[codingapple]

ejs필요없이 ajax로 데이터만 주고받으면 됩니다 
리액트쓰면 보통 라우팅을 리액트가 담당하도록 리액트라우터 씁니다

[오승준]

<리액트 상 ajax post 코드>

function Modal(props){
let [title, settitle] = useState(['기타 페이지 입니다.', '오신걸 환영합니다.'])
let [Topic, setTopic] = useState('')
let [Input, setInput] = useState('')

return(
<>
 
<div className='modal'>
<p>제목 : <input name="topic" onChange={(e)=>{setTopic(e.target.value)}}></input></p>
<p>내용 : </p><textarea name="context" onChange={(e)=>{setInput(e.target.value)}} rows='15' cols="36"></textarea><hr/>

<button onClick={()=>{
axios.post('http://221.xx.xx.xx:5500/add', {
topic : {Topic},
context : {Input}
 })
let copy = [...title];
copy.unshift({Topic});
settitle(copy);
 
 }}>글 올리기</button>





<node server.js 상 post 코드>

app.post('/add', function(req, res){
res.send('전송완료');
db.collection('counter').findOne({name : '게시물갯수'}, function(에러, 결과){
  console.log(결과.totalPost)
  var 총게시물갯수 = 결과.totalPost;

  db.collection('POST').insertOne({_id : 총게시물갯수 + 1, 제목 : req.body.topic, 내용 : req.body.context}, function(에러, 결과){
  console.log('저장완료');
  db.collection('counter').updateOne({name : '게시물갯수'}, {$inc : {totalPost:1}}, function(에러, 결과){
  if(에러) return console.log(에러);
 })
 })
 });
})

1. 여기서 궁금한 게 리액트 상에서 post 요청은 저런 식으로 하는 게 맞나요??
2. node server.js 상에서 req.body.topic부분에서 topic은 위에 리액트 상에서 
   <input name="topic">에서 받아 오는 식이 맞을까요??

-> 이대로 해봤는데 mongodb에 post는 되는데 값이 'object'로 저장이 되네요..

[codingapple]

넴
{topic : {Topic}} 말고 
{topic : Topic} 을 보냅시다

[오승준]

<button onClick={()=>{
axios.post('http://221.xx.xx.xx:5500/add', {
topic : Topic,
context : Input
 });

axios.get('http://221.xx.xx.xx:5500/add').then((post)=>{
let copy = [...title];
copy.unshift(post[1].topic);
settitle(copy);
props.navigate(-1)
 })
 
 }}>글 올리기</button>


<node.server.js>

app.get('/add', function(req,res){
db.collection('POST').find().toArray(function(에러, 결과){
if(에러) return console.log(에러);
console.log('결과');
res.send({post : 결과});
 })
})

질문.
post는 잘 됩니다만, get 요청에서 이번엔 잘 안되네요,,
1번데이터의 topic을 받고 싶으면 위에 처럼 post데이터를 받는 게 맞나요??
만약 1번 데이터 말고 
db에 새롭게 post한 데이터의 id를 추출해서 get하고 싶을 때는 어떻게 하나요??

[codingapple]

넴 post라는 변수도 잘 출력되나 확인해보면 됩니다 
id를 서버로 보내면 그 id를 가진 게시물 가져오라고 코드짜면 됩니다

[오승준]

<react 상>

function Modal(props){
let [title, settitle] = useState(['시 페이지 입니다.', 'BLOG에 오신걸 환영합니다.'])
let [Topic, setTopic] = useState('')
let [Input, setInput] = useState('')

return(
<>

<div className='modal'>
<p>제목 : <input name="topic" onChange={(e)=>{setTopic(e.target.value)}}></input></p>
<p>내용 : </p><textarea name="context" onChange={(e)=>{setInput(e.target.value)}} rows='15' cols="36"></textarea><hr/>

<button onClick={()=>{
axios.post('http://221.xx.xx.xx:5500/add', {
topic : Topic,
context : Input
 });

axios.get('http://221.xx.xx.xx:5500/add').then((post)=>{
let copy = [...title];
copy.unshift(post[1].제목);
settitle(copy);
 })
 }}>글 올리기</button>


<node server.js>

app.post('/add', function(req, res){
res.send('전송완료');
db.collection('counter').findOne({name : '게시물갯수'}, function(에러, 결과){
console.log(결과.totalPost)
var 총게시물갯수 = 결과.totalPost;

db.collection('POST').insertOne({_id : 총게시물갯수 + 1, 제목 : req.body.topic, 내용 : req.body.context}, function(에러, 결과){
console.log('저장완료');
db.collection('counter').updateOne({name : '게시물갯수'}, {$inc : {totalPost:1}}, function(에러, 결과){
if(에러) return console.log(에러);

 })
 })
 })
})

app.get('/add', function(req,res){
db.collection('POST').find().toArray(function(에러, 결과){
if(에러) return console.log(에러);
res.send({post : 결과});
 })
})

질문.
react에서 글 올리기 버튼을 누르면 글 발행 기능을 실현시켜야 하는데 db post는 문제없이 되는데 
db에서 get요청이 여전히 잘 안됩니다. ==post변수가 잘 출력이 안됩니다. 
혹시 get요청 코드에 문제가 있는지 한 번 확인 부탁드리겠습니다.

[codingapple]

get요청시 서버에서 '결과' 변수도 잘 출력되나 확인해봅시다

[오승준]

console.log(결과)하면 아주 잘 출력됩니다. 근데 문제는 리액트에서 결과를 담은 변수 post를 출력하고 할 땐 안되는데
보고 또 봐도 이건 어떤게 문제인지 잘 모르겠습니다.

위 코드 형식으로 get 요청하는게 맞지 않나요??

의심되는 코드가 

리액트에선 url 없이 res.send({post : 결과})로 보내는 게 맞는 건가요??

1번데이터의 제목을 추출할땐 copy.unshift(post[1].제목) 로 하는게 맞지 않나요??

[codingapple]

서버에선 {post : []} 이걸보냈으면 꺼내쓸 땐 post.post 아니면 post.result.post 해야 array자료가 나올듯요
그리고 axios.post(); axios.get() 나란히 쓰면 post요청과 get요청이 거의 동시에 들어갑니다
res.send 안되면 res.json도 써봅시다

[글쓴이]

글