agora-states-server

1. CORS, morgan 적용, express 미들웨어 express.json() 적용

app.use(cors());
app.use(express.json({strict: false}));
app.use(morgan('tiny'));

2. 메인 화면을 원하는 경로로 라우팅

app.use('/discussions', discussionsRouter)

3. 서버 상태 확인 + listen

app.get('/', (req, res) => {
  res.status(200).send('health check');
  // throw '';  //테스트의 편의를 위해 작성
});

const server = app.listen(port, () => {
  console.log('[RUN] My Agora States Server...');
});

module.exports.app = app;
module.exports.server = server;

4. 주어진 repository의 data를 GET 요청에 따라 라우팅을 해주었다.

//router 구현
const router = express.Router();

router.get('/', findAll); //모든 discussion 목록을 조회하는 라우터
router.get('/:id', findById); // discussion 하나를 조회하는 라우터

module.exports = router;


//http messages
const { agoraStatesDiscussions } = require("../repository/discussions");
const discussionsData = agoraStatesDiscussions;

const discussionsController = {
  findAll: (req, res) => {
    const data = discussionsData.slice();
    return res.status(200).json(data);
  },
  findById: (req, res) => {
    const { id } = req.params;
    const list = discussionsData.find((item) => item.id === Number(id) )
    if(list) {
      return res.status(200).json(list);
    }
    else{
      return res.status(404).json('Incorrect request');
    }
  }
}
module.exports = { discussionsController };

5. fetch API 사용

한달 전에 구현했던 클라이언트와 오늘 만든 서버를 연동했다.

script.js 파일 최하단에 fetch API 작성

/*생략*/

fetch("http://localhost:3001/discussions/")
  .then(response => response.json())
  .then(json => {
    let agoraStatesDiscussions = json; 	//위에서 agoraStatesDiscussions 라는 dummy data를 사용했었다.
    const ul = document.querySelector("ul.discussions__container"); 
    render(ul); //화면에 dom elements를 render 해주는 함수를 위에서 구현했었다.
  })

http 요청 메서드

 

HTTP(Hypertext Transfer Protocol)는 웹을 통해 데이터를 전송하는 데 사용되는 프로토콜입니다. 지정된 리소스에 대해 수행할 작업을 나타내는 데 사용되는 요청 메서드 집합을 정의합니다. 가장 일반적인 HTTP 요청 방법은 다음과 같습니다:

GET: 지정한 리소스에서 데이터를 검색합니다.
예: 클라이언트가 웹 페이지의 내용을 검색하려고 하면 페이지의 URL을 사용하여 서버에 GET 요청을 보낼 수 있습니다.

POST: 처리할 데이터를 지정된 리소스로 제출합니다.
예: 클라이언트가 일부 데이터와 함께 양식을 제출하려고 하면 요청 본문의 양식 데이터와 함께 POST 요청을 서버로 보낼 수 있습니다.

PUT: 현재 리소스를 새 데이터로 업데이트합니다.
예: 클라이언트가 사용자의 프로필 정보를 업데이트하려고 하면, 요청 본문의 업데이트된 정보와 사용자의 프로필 리소스의 URL을 사용하여 PUT 요청을 서버로 보낼 수 있습니다.

삭제: 지정한 리소스를 삭제합니다.
예: 클라이언트가 사용자의 프로필을 삭제하려고 하면, 사용자의 프로필 리소스 URL과 함께 서버에 DELETE 요청을 보낼 수 있습니다.

HEAD: 응답 본문 없이 지정된 리소스의 헤더 정보를 검색합니다.
예: 클라이언트는 웹 페이지의 내용을 검색하지 않고 웹 페이지가 존재하는지 확인하려고 합니다. 클라이언트는 페이지의 URL로 서버에 HEAD 요청을 보낼 수 있습니다.

패치: 부분 리소스를 업데이트합니다.
예: 클라이언트는 사용자의 프로필 정보의 일부만 업데이트하려고 하며, 요청 본문의 업데이트된 정보와 사용자의 프로필 리소스의 URL을 사용하여 PATCH 요청을 서버로 보낼 수 있습니다.

다음은 가장 일반적으로 사용되는 HTTP 요청 방법입니다. OPTIONS와 CONNECT와 같은 요청 방법이 더 많지만, 사용 빈도는 더 적습니다.