나만의 아고라스테이츠 서버 만들기_2차 솔로프로젝트 회고

wool·2022년 8월 17일
코드스테이츠
1

회고

목록 보기
5/29

과제내용

Section2에서 배운 내용을 바탕으로 나만의 아고라 스테이츠 서버를 만듭니다.

Bare Minimum Requirement Self Checklist

스스로 구현 완료한 부분까지 체크하여 제출합니다.

my-agora-states-server

  • my-agora-states-server/app.js
    • 모든 Origin, 경로에 대해 CORS 요청을 허용하게 미들웨어를 적용합니다.
    • POST 요청 등에 포함된 body(payload)를 구조화하기 위한 미들웨어를 적용합니다.
    • 서버 상태 확인을 위해 / 에서 상태 코드 200으로 응답합니다.
    • discussionsRouter 를 이용하여 /discussions 경로로 라우팅합니다.
  • my-agora-states-server/router/discussions.js
    • GET /discussions
    • GET /discussions/:id
  • my-agora-states-server/controller/index.js
    • discussionsController.findAll
    • discussionsController.findById

my-agora-states-server 과제 제출 (Pull request)

  • Pull request로 과제 제출

my-agora-states-server 시작

  • package.json 을 참고하여 나만의 아고라 스테이츠 서버를 로컬 환경에서 실행합니다.

my-agora-states와 연동하기

  • my-agora-states-server가 켜져있는지 확인합니다.
  • 로컬 환경에서 실행한 나만의 아고라 스테이츠 서버에서 discussions 데이터를 조회합니다.

Optional Checklist

스스로 구현 완료한 부분까지 체크하여 제출합니다.

  1. my-agora-states-in-react
    • create-react-app으로 프로젝트 생성
    • 기존에 만든 나만의 아고라 스테이츠를 React로 옮기기
      • 디스커션 나열 기능
    • 로컬 환경에서 실행한 나만의 아고라 스테이츠 서버에서 discussions 데이터를 조회합니다.

기본 디렉토리 구조

과제 수행 시 신경 쓴 부분

  • 이번 섹션2를 마무리하는 서버만들기 과제는 자유롭게 한다기보다 최소한의 서버 만들기 능력을 테스트하기 위한 용도였다고 생각한다.

  • 지금까지 배웠던 것들을 적용해서 풀어나갈 수 있도록 기본 디렉토리와 안의 코드작업까지 마무리하고 핵심 코드들만 적으면 서버가 정상적으로 작동할 수 있도록 만들어 주셔서 그 부분만 수정했다.

  • 테스트를 모두 통과하여 과제는 마무리 되었지만 이후 추가구현으로 지난 섹션1 과제의 페이지에 서버를 연결하는것을 말씀 해 주셨는데 이 부분까지만 하기로 한다!

과제 수행 방식

통과해야할 목록

Bare Minimum Requirements - Server
GET / 요청: Health check
✓ 상태 코드 200과 함께 응답을 보냅니다. (42 ms)

GET /discussions 요청
✓ 상태 코드 200과 함께 응답을 보냅니다. (22 ms)
✓ 모든 discussions 목록을 응답으로 보냅니다. (16 ms)

GET /discussions/:id 요청
✓ discussionsData에 해당 id와 일치하는 데이터가 존재하는 경우, 상태 코드 200과 함께 응답을 보냅니다. (5 ms)
✓ discussionsData에 해당 id와 일치하는 데이터가 존재하지 않는 경우, 상태 코드 404와 함께 응답을 보냅니다. (5 ms)
✓ 응답의 body 속성으로 id, title, url, author, bodyHTML, avatarUrl이 있어야 합니다. (5 ms)
✓ discussionsData 중 해당 id와 일치하는 discussion을 응답으로 보냅니다. (11 ms)

app.js

  • TODO: cors를 적용합니다.
    • npm i cors를 터미널에서 설치한다.
    • const로 변수를 선언하여 require메서드로 모듈을 가져온다.
    • app.use(cors())로 실행한다.

  • TODO: Express 내장 미들웨어인 express.json()을 적용합니다.
    • app.use로 express.json()를 적용한다.
    • 괄호 안에 {strict:false} 적용

  • TODO: app.use()를 활용하여 /discussions 경로로 라우팅합니다.
    • 포트번호가 선언된 바로 아래에서 const로 discussionsRouter 라는 변수를 선언하여 router폴더안의 discussions을 경로로 지정한다.
    • app.use로 라우팅한다.

  • 서버 상태 확인을 위해 상태 코드 200과 함께 응답을 보냅니다.
    • 서버상태 확인ok
const express = require('express');
const app = express();

const cors = require('cors');
const morgan = require('morgan');

// morgan 미들웨어가 세팅되어 있습니다.
// HTTP 요청 logger를 편리하게 사용할 수 있는 미들웨어 입니다.
app.use(morgan('tiny'));

// TODO: cors를 적용합니다.
app.use(cors());

// TODO: Express 내장 미들웨어인 express.json()을 적용합니다.
app.use(express.json({strict:false}))

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

// TODO: app.use()를 활용하여 /discussions 경로로 라우팅합니다. 
app.use('/discussions', discussionsRouter) 

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

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

  • TODO: 모든 discussions 목록을 조회하는 라우터를 작성합니다.
    • 서버에 있는 목록을 가져와야 하니 get으로 라우팅한다.
    • 모든 목록을 조회하므로 “/"

  • TODO: :id에 맞는 discussion을 조회하는 라우터를 작성합니다.
    • 조회니까 get을 사용하여 라우팅 하되 id를 찾는거니까 슬래시 뒤에 :id를 적어준다.
// TODO: discussions 라우터를 완성합니다.
const { discussionsController } = require('../controller');
const { findAll, findById } = discussionsController;
const express = require('express');
const router = express.Router();

// TODO: 모든 discussions 목록을 조회하는 라우터를 작성합니다.
router.get('/', findAll); // 

// TODO: :id에 맞는 discussion을 조회하는 라우터를 작성합니다.
router.get('/:id', findById);

module.exports = router;

./controller/index.js

  • TODO: 모든 discussions 목록을 응답합니다.
    • 성공 상태코드 200과 모든 목록을 담은 repository폴더안의 discussions목록을 담은 discussionsData를 그대로 return한다.
    • send도 가능하고 json도 가능

  • TODO: 요청으로 들어온 id와 일치하는 discussion을 응답합니다.
    • id를 기준으로 데이터를 찾아야 하니 요청의 파라미터를 지정 해 준다.
    • 새로운 변수 data를 선언하여 모든 데이터가 있는 discussionsData안에서 같은id를 find로 찾는다.
    • 이때 id는 숫자형태로 변환해주어야 찾기가 가능하다.
    • if문으로 data가 true일때는 성공 상태코드와 해당하는 자료를 return하고 그렇지 않을시에는 실패 상태코드와 실패 상태 메세지인Not found를 return 한다.
const { agoraStatesDiscussions } = require("../repository/discussions");
const discussionsData = agoraStatesDiscussions;

const discussionsController = {
  findAll: (req, res) => {
    // TODO: 모든 discussions 목록을 응답합니다.
    // res.status(200).send(discussionsData)
    return res.json(discussionsData)

  },

  findById: (req, res) => {
    // TODO: 요청으로 들어온 id와 일치하는 discussion을 응답합니다.
    // res.send('TODO:')
    const { id } = req.params; 
    const data = discussionsData.find(discussion => discussion.id === Number(id));
    if(data) {
      return res.status(200).json(data)
    } else {
      return res.status(404).send('Not found');
    }
  }

};

module.exports = {
  discussionsController,
};

기존 아고라스테이츠 서버 연결

  • 서버를 켜고 확인!

  • 1차 솔로프로젝트에서 작성했던 파일 중 script.js의 하단을 수정

    • 패치를 활용하여 서버를 연결한다.

    • 이후 .then으로 데이터를 가공한다.

      fetch('http://localhost:4000/discussions')
.then(res => res.json())
.then(json => {
  agoraStatesDiscussions = json;
  const ul = document.querySelector("ul.discussions__container");
  render(ul);
})

아직 해결되지 않은 이슈

nodemon 서버 오류

서버를 수정했을 때 리액트의 변경사항을 바로 확인할 수 있는 것 처럼 확인이 가능한 노드몬을 설치하여 사용하려고 하였으나 오류메세지를 만났다!

⛔ [nodemon] 내부 감시 실패: ENOSPC: 파일 감시자 수에 대한 시스템 제한에 도달했습니다.

문제를 해결하고자 구글링을 해 보았더니 시스템이 허용하는 것보다 더 많이 접근했기 때문이라며 max watches를 높여주면된다는 솔루션을 찾았다!

  • 구글링에서 찾은 솔루션 ☝ echo fs.inotify.max_user_watches=582222 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

하지만 다른 글을 또 보니 무조건 올리는게 능사가 아니라고 하여 좀더 고민 해 보다가 아고라스테이츠를 이용해보기로 했다!

아고라스테이츠 질문한 링크!

그리고 한참동안 답글이 없어서 실시간 세션에서 엔지니어님께 여쭤봤다.

이런 문제가 있어서 질문을 올렸는데 답글이없어서 한번 더 말씀을 드린다고 했더니 친절하게 봐주셨다!

결국 나의 우분투로는 노드몬을 사용하지 못한다는 결론이였다..!

엔지니어님의 말씀으로는 파고들면 좋은 에러와 별로 도움이 되지 못하는 에러가 있다고 하셨는데

오늘의 오류가 바로 파고들어봤자 도움이 되지 않는 오류라고 말씀해주셨다.

덕분에 이 오류에 더이상 시간을 투자하지 않는 선택을 할 수 있었다.

노드몬은 단순히 서버를 수정한 후에 껐다켰다하는 동작을 스킵하게 해주는 도구일뿐이며

필수로 사용해야하는 것은 아니기 때문에 노드몬을 사용하지 않는 방향이 낫다고 조언 해 주셨다.

결론은 해결이긴 하지만 노드몬을 사용하지 못하는것은 여전하니 해결하지 못한 이슈로 남겨두기로한다.

discussions 304?

  • 뭔가 성공한것같긴한데 배포한 페이지를 새로고침하면 상태코드 304만 나온다 304는 요청된 리소스를 재전송할 필요가 없음을 나타낸다는데 기존의 데이터와 요청된 리소스가 동일해서인걸까? 잘 모르겠다.

  • 그래서 배포한 페이지의 개발자도구에서 네트워크를 살펴봤는데 디스커션이 200으로 내용까지 잘 들어온것을 볼 수 있다. 그런데 이게 서버를 연결한게 맞는지 아직 잘 모르겠다.

새롭게 알게 된 것

morgan 미들웨어

morgan에 연결후 포트에 접속하면 기존 로그 외에 추가적인 로그를 볼 수 있다.

서버를 시작 후 아래 메소드로 시작되는 부분이 모두 morgan미들웨어에서 나오는 것이다.

즉 morgan은 요청과 응답에 대한 정보를 콘솔에 기록하여 응답이 상태를 눈으로 직접 확인할 수 있게 해주는 기능을 한다.

느낀점

첫번째 섹션이 끝나고 솔로프로젝트 할 때는 사실 완성도 못해서

서버는 제대로 할 수 있을까 걱정이 많았는데

엔지니어님들의 배려로 잘 따라갈 수 있었다.

당장에 다른 서버를 만들라고 한다면 또 다시 우왕좌왕 할테지만

수업하면서 적어둔 기록을 보면서 어떻게든 만들수 있지 않을까 하는 생각이 든다.

서버를 배우는 기간에 다른 어떤때보다 기록을 제일 열심히 했던 것 같다.

들어도 모르겠는부분도 그냥 무작정 적었다.

그리고 이해가 가지 않아도 적고 정리한 내용들이 나중에 도움이 많이 되었던 것 같다.

앞으로도 기록 열심히!

profile
wool
毎日一つづつゆっくり
이전 포스트

나만의 아고라스테이츠 만들기_1차 솔로프로젝트 회고

다음 포스트

Section 2 회고(2022.07.21~08.18)

0개의 댓글