react로 라우팅된 페이지를 node에서 부를때 질문입니다

[전현준]

리액트로 만든 페이지 (list라고 가정)에 접속하면 서버에서 db에 접속해 나온 결과를 클라이언트로 보내주는 페이지를 제작하고 있습니다

ejs로 할때처럼 해보려고 했는데 app.get('/list', (요청, 응답)...) 이런식으로 작성해도

막상 list로 접속해도 app.get 내의 코드가 전혀 실행되지 않는것을 보면 ejs를 사용할때랑

다른 방법으로 코드를 작성해야 하는 것 같은데 혹시 어떤 방법을 사용해야 할지 팁을 알려주실 수 있을까요?

또 리액트랑 노드랑 연동하면서 8080과 3000포트로 두 페이지로 나뉘었는데

8080포트에서는 db에 데이터를 저장할 때 잘 됩니다만 3000포트에서는 404 not found 에러가 뜨는것이 정상인가요?

[codingapple]

리액트는 페이지가 index.html 하나입니다

그래서 서버에서 list.ejs 파일을 달라고 요청하는게 아니라 list페이지 구성에 필요한 array object 데이터들을 달라고 ajax get요청하면 됩니다

그럼 서버는 응답.send 등으로 데이터를 db에서 뽑아주면 되고

리액트는 ajax get 요청 성공시 list페이지로 이동하거나 컴포넌트를 보여주거나 그러면 됩니다

[전현준]

이해가 잘 되지 않아서 다시 질문드립니다..

서버에서 list.ejs파일을 달라고 요청하지 않고 list 페이지 구성에 필요한 array object 데이터를 달라고 ajax get 요청을 하라고 하셨는데

그럼 app.get('/list' ...) 말고 다른 방법으로 요청하는건가요? 

[codingapple]

app.get(‘/list’ …) 똑같이 사용합니다

근데 이번엔 응답.render(ejs파일) 하는게 아니라 리액트에서 필요한 object 데이터만 보냅니다

응답.json({오브젝트자료}) 이러면 보낼 수 있습니다 

[전현준]

계속 질문드려 죄송합니다 마지막으로 질문 하나만 더 하겠습니다

react의 list.js라는 파일을  server에서 받게끔 하고싶습니다

ejs에서는 별도의 form 작성이라던지 하지 않아도 server에서 app.get('/list'...) 로 받을 수 있었던것 같은데 js 파일을 받을때는 다른가요?

아니면 axios.get()을 해서 server의 주소를 작성해야 하는건지...

server.js에서 아래 코드처럼 작성을 했는데 전혀 반응이 없습니다

app.get('/list', (요청, 응답) => {

    console.log("test");

}

[codingapple]

자바스크립트 파일 전송하는 이유가 무엇입니까 서버로 데이터 전송을 원하면 그냥 post 요청 등으로 데이터만 보내면 됩니다. 보통 유저가 서버에게 js파일을 주고 그런 경우는 없습니다. 

 

서버파일에

app.get(‘/list’, (요청, 응답) => {

    console.log(“test”);

}

이렇게 작성해두셨으면 리액트파일에서 /list로 get요청하면 저 안의 console.log(“test”); 코드가 실행됩니다 

 

[전현준]

아 js파일을 보내지는 않는군요

말씀하신대로 작성했는데 여전히 콘솔에 test가 나타나지 않는데 뭔가 잘못작성한게 있을까요...

 

[codingapple]

리액트에서 get요청시 localhost부터 시작하는 풀 url을 작성해봅시다

경로가 잘못된건지는 리액트 콘솔창에서 확인가능할듯요

[전현준]

감사합니다 드디어 해결했습니다

이제보니 아래 코드를 server.js 제일 아래에 작성해야 했는데 위에 작성해서 안되는거였네요...

app.get('*', function (req, res) {
res.sendFile(path.join(__dirname, 'front/build/index.html'));
});

[전현준]

하다가 또 막혀서 질문드립니다...

서버에서 res.json({...})으로 json 파일을 가져오는것은 성공했습니다

그런데 리액트의 html 페이지가 뜨지 않고 json 파일 자체만 뜨는데 어떻게하면 json 파일도 가져오고 html도 띄울수 있을까요?

res는 한번만 쓸수 있다고 해서 json과 redirect를 같이 쓸 수도 없고 redirect를 쓰자니 데이터가 넘어오지않고...

리액트의 axios.get 부분이 잘못된걸까요?

[글쓴이]

글