Agora States server 과제

KoEunseo·2022년 8월 17일

코드스테이츠

목록 보기

21/45

server 만들기

app.js

//------기본세팅!--------------------
const express = require('express'); 
const app = express();
//------기본세팅!--------------------
//cors를 쓰기위해 npm i cors 한 후 가져온다.
const cors = require('cors');
// morgan 미들웨어가 세팅되어 있습니다.
// HTTP 요청 logger를 편리하게 사용할 수 있는 미들웨어 입니다.
const morgan = require('morgan');
app.use(morgan('tiny'));

// 1. Todo: cors를 적용
app.use(cors());
// 2. Todo: Express 내장 미들웨어인 express.json() 적용
app.use(express.json({ strict: false }));

const port = 4000;
const discussionsRouter = require('./router/discussions');

// 3. Todo: app.use()를 활용하여 /discussions 경로로 라우팅 
app.use('/discussions', discussionsRouter);

app.get('/', (req, res) => {
  // 서버 상태 확인을 위해 상태 코드 200과 함께 응답을 보냅니다.
  res.status(200).send('fe-sprint-my-agora-states-server');
});

const server = app.listen(port, () => {
  console.log(`[RUN] My Agora States Server... | http://localhost:${port}`);
});

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

router/discussions.js

//discussions 라우터
const { discussionsController } = require('../controller');
const { findAll, findById } = discussionsController;
const express = require('express');
const router = express.Router();

// 1. TODO: 모든 discussions 목록을 조회하는 라우터
router.get('/', findAll);

// 2. TODO: :id에 맞는 discussion을 조회하는 라우터
router.get('/:id', findById);

module.exports = router;

controller/index.js

const { agoraStatesDiscussions } = require("../repository/discussions");
//데이터를 담은 변수
const discussionsData = agoraStatesDiscussions;

const discussionsController = {
  findAll: (req, res) => {
    // 1. TODO: 모든 discussions 목록 응답
    // get /discussions
    if (Object.keys(req.query).length === 0) { //쿼리가 없을때
      return res.status(200).json(discussionsData);
    }
  },

  findById: (req, res) => {
    // 2. TODO: 요청으로 들어온 id와 일치하는 discussion 응답
    const { id } = req.params;
    let filteredData = discussionsData.filter(discussion => {//req.params.id가 string 형태로 들어온다. Number로 변환
      return discussion.id === Number(id);
    })
    if (filteredData.length === 0) { //필터되어 나온 게 없다면
      return res.status(404).json('${id} is not found');
    } else { //필터되어서 나온 게 있다면
      return res.status(200).json(filteredData[0]);
      //[0]으로 뽑아와야만 출력이 된다.
    }
  }
};

module.exports = {
  discussionsController,
};

findById .find를 쓴 용례

findById: (req, res) => {
    const { id } = req.params;
    const found = discussionsData.find((d) => d.id === Number(id));
    if (found) {
      return res.status(200).json(found);
    } else {
      return res.status(404).send("Not found");
    }
  },

find()로 찾았을 때와 filter()했을때의 차이는 무엇일까?

find는 찾는 요소가 발견되면 바로 작업을 마친다.
filter는 해당되는 요소를 모두 찾아 배열을 만든다.
let arr = [
  { name : 'dog', color: 'white' },
  { name : 'dog', color: 'black' },
  { name : 'cat', color: 'white' }
]
arr.find(myFriend => myFriend.color === 'white')
// { name: 'dog', color: 'white' }
arr.filter(myFriend => myFriend.name === 'cat')
// [ { name: 'cat', color: 'white' } ]
// 요소가 하나만 들어와도 배열로 묶는다!

client에 server 연동하기

fetch()

let serverDiscussions = []; // 서버에서 받은 데이터를 담을 변수를 준비한다.
fetch('http://localhost:4000/discussions')
  .then(res => res.json())
  .then(json => {
    serverDiscussions = json; //받아온 데이터를 담아준다.
    const ul = document.querySelector('ul.discussions__container');
  //ul이라는 변수로 ul.discussions__container 를 담아온다.
    render(ul); //render한다
  });

render()

// agoraStatesDiscussions 배열의 모든 데이터를 화면에 렌더링하는 함수
const render = (element) => {
  for (let i = 0; i < agoraStatesDiscussions.length; i += 1) {
    element.append(convertToDiscussion(agoraStatesDiscussions[i]));
    //ul.append와 같다.
  }
  return;
};