클라이언트-서버

서버가뭐니?

간단하게 답하면 그냥 원하는거 다 해주는친구라고보면됨.
우리가 필요한데이터 그냥 서버에 가져다주세요~ 하면 서버가잇으면 가져다주는 구조로되있음

간단하게 서버를 만들때 node.js 와 express를 이용하는데 node는 너무복잡하니
express로 만드는거 간단히 보고넘어가자

예시를하나가져왔다.

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)

요건뭐냐 hello world를 보내주는 서버다. 또여기서 get,post 등 다양한기능을 이용하기위해 라우팅을 사용하는데 express는 라우팅을 제공한다.

const router = express.Router()

router.get('/lower', (req, res) => {
  res.send(data);
})

router.post('/lower', (req, res) => {
  // do something
})

대충 요런느낌이된다.

음그러면 서버가뭔지는 간단하게 정리됬으니 내가 복습하고자한 클라이언트와 서버 연결에대해서 짚어보자

우리가 많이쓰고있는 리액트에서 서버에 뭔가 요청을 해서 가져오려면 ajax요청이란걸하게되는데 양식에맞춰그냥
원하는요청 보내면된다.

get(데이터주세요) post(내가쓴거 서버에 입력해줘요) put(갱신작성) delete(지워줘요~)

ajax요청을 보내는방식은 여러가지가있는데 그중 간단한 axios라는 라이브러리를 바탕으로 하는걸 살짝보여줌.

<button onClick={()=>{
        axios.get('입력주소(url)같은거')
        .then((data)=>{console.log(data.data)})
        .catch(()=>{console.log('실패해버림')}) //서버에서 가져온 데이터
      }}>버튼</button>
//get요청으로 받아옴
//then요청으로 데이터를담음 작명은암거나상관없음
//catch는 실패했을떄 이거뜨게함.

간단하다. 만약 여러가지 요청을하고싶으면 promise.All안에다가 여러요청집어넣으면된다.

서버와 클라이언트 통신과정과 요청보내는방법에대해 간단하게 정리해봤다.