국비 76일차

Node.js

노드
🔽
main
🔽
express() 실행
🔽

• port 세팅 -> listen()
• use 라우트 세팅 (대분류)

Router

Main

const myintroduce = require('express');
const app = myintroduce();
const Review = require('./routers/review.js')

// use 메서드 사용하여 js (라우터) 외부 연동
app.use('/review', Review);

app.listen('8080', ()=>{
  
})

기타 라우터
http://localhost:8080/review

const myintroduce = require('express');
const router = myintroduce.Router();  // Router()와 listen()의 차이~~

/review.js가 요청했을 때 나는 respond...
router.get('/', function(req, res, next){
  res.send("독립된 라우터에서 후기 데이터 보냅니다")
});

router.post('/', function(req, res, next){
  res.send("오웅")
});

module.exports = router;

---

node는 섹션, 페이지가 아닌 view단과 연결하는 것이다

server.js에 있던 get 메서드를
view1.js를 만들어서 그곳에 넣고 server.js와 연결해주었다

server.js

view1.js

api 연동

/front/src/App.js

axios를 통해 get 메서드 경로에
노드에서 미리 만들어놓은 view1.js 안의 about을 세팅하여 비동기 통신하도록 하고
그 후 then으로 respond 받은 값을 data라는 변수에 넣어놓도록 한다

받아온 data 변수 자체는 하나의 Object이고
그 안에 넣어놓은 것은 respond로 온 Object의 data라는 key 안에 들어가 있다


그래서 사전에 적어놓은 title이라는 key 안에 넣어놓은 값을 콘솔에 찍으려면
변수가 data라는 가정 하에
console.log(data.data.title);이라고 해야 위와 같이 title의 value 값이 나오는 것이다

---

여기서는 get에서 respond로 받아오는 값을 res 변수에 넣어놓도록 하였다
이 title의 value 값을 useState의 updateNodejson()에 넣어 useState 변수를 업데이트 시키고
return 안에 그 변수를 넣어 화면에 렌더링시켰다

1. 노드 Router 세팅
2. res.send로 respond object 속 data 값을 조회할 수 있도록 함
3. axios로 노드 라우터 접근 후 useEffect를 이용하여 해당 노드 라우터 값을 받아오고
   useState로 그 값을 업데이트하여 useState 변수를 통해 화면에 렌더링