[과제] 나만의 아고라 스테이츠 서버 만들기

Section 2를 마무리하는 솔로 과제. express를 사용하여 간단한 서버를 제작하고, fetch API를 사용하여 Section 1에서 만들었던 아고라 스테이츠 페이지에 연동했다.

사실 서버 제작 자체는 어제 했던 StatesAirline Server 과제와 거의 동일했고, 오히려 훨씬 간단하기까지 했다. 해서 이 부분에 대한 이야기는 따로 하지 않으려 한다.

오늘 제일 헷갈렸던 부분은 바로 이것.

fetch API 사용

기본 사용법

fetch('http://example.com')
  .then((response) => response.json())
  .then((data) => console.log(data));

우선 기본적인 사용법은 위와 같다. 특정 URL('http://example.com')을 통해 json 형태로 정보를 불러오는 것이다.

과제에 적용

수정 전 (Section 1 과제 제출본)

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

수정 후

// render는 element와 array를 인자로 받아 array의 모든 데이터를 element에 추가하여 화면에 렌더링하는 함수입니다.
// convertToDiscussion은 아고라 스테이츠 데이터를 DOM으로 바꿔줍니다.
const render = (element, array) => {
  for (let i = 0; i < array.length; i += 1) {
    element.append(convertToDiscussion(array[i]));
  }
  return;
};

// ul 요소에 agoraStatesDiscussions 배열의 모든 데이터를 화면에 렌더링합니다.
const ul = document.querySelector("ul.discussions__container");

fetch("http://localhost:4000/discussions")
  .then((res) => res.json())
  .then((data) => render(ul, data));

1. 수정 전 render 함수는 element 하나만을 인자로 받아 agoraStatesDiscussions의 데이터를 화면에 출력하는 함수였다. 즉 어떤 데이터를 렌더링할 것인지에 대해서는 인자로 받아올 수 없었기 때문에 이 부분을 수정했다. (element === 데이터를 추가할 엘리먼트, array === 출력할 데이터)

2. fetch API를 사용하여 "http://localhost:4000/discussions" url을 통해 모든 discussions 데이터를 json 형태로 불러온다.

3. render 함수의 element 인자에 ul, array 인자에 2를 전달한다.