S2) Unit 11. [실습] Coz’ Mini Hackathon (아고라스테이츠 서버)

📣 나만의 아고라 스테이츠 서버 만들기

Bare Minimum Requirement Self Checklist

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

2️⃣ my-agora-states-server 과제 제출(Pull request)
✔️ Pull request로 과제 제출

3️⃣ my-agora-states-server 시작
✔️ package.json 을 참고하여 나만의 아고라 스테이츠 서버를 로컬 환경에서 실행합니다.

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

Optional Checklist

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

---

📣 서버 구현

✔️ my-agora-states-server

1️⃣ controller/index.js

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

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

  findById: (req, res) => {
    // TODO: 요청으로 들어온 id와 일치하는 discussion을 응답합니다.
    const { id } = req.params;
    if(id){
      const filteredList = discussionsData.filter((discussion) => {
        return discussion.id === Number(id);
        // id를 number로 바꿔줘야 비교 가능하다.
      })
      if(filteredList.length === 0) return res.status(404).send('Not found');
      else return res.status(200).json(filteredList[0]);
    }
  }

};

module.exports = {
  discussionsController,
};

2️⃣ router/discussions.js

// 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;

3️⃣ App.js

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());


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-server');
});

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

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

---

📣 아고라 스테이츠 리액트 구현

✔️ 주요 기능

➰ 컴포넌트로 나누기
➰ 서버에서 데이터 불러오기
➰ 불러온 데이터 10개씩 페이지네이션 하기
➰ 버튼 누르면 새로운 데이터 추가하기
➰ localStroage에 저장하기 (구현 했는데 처음 추가한 데이터는 저장이 안되고 두번째 데이터부터 저장되는 에러 발생)

✔️ 파일 구조

﹒my-agora-states-react
ᄂ src
ᄂ components
ᄂ Content.js
ᄂ Discussions.js
ᄂ DiscussionsContainer.js
ᄂ Form.js
ᄂ Main.js
ᄂ Menubar.js
ᄂ Paging.js
ᄂ Tab.js
ᄂ styles
ᄂ images
ᄂ App.js
ᄂ App.css

✔️ 컴포넌트 구조

✔️ 구현 코드

1️⃣ 서버에서 데이터 불러오기 -> Contents.js

import Form from '../components/Form';
import '../styles/Contents.css';
import { useState, useEffect, useRef } from 'react';
import DiscussionsContainer from '../components/DiscussionsContainer';

function Contents() {
  const [storageData, setStorageData] = useState([]);
  
  useEffect(() => {
  // 처음 렌더링 할 때만 서버에서 데이터 불러오기 하기
    fetch('http://localhost:4000/discussions')  // 서버의 데이터 받아오기
      .then(res => res.json())
      .then(json => { 
        if(localStorage.length===0){
          localStorage.setItem('Discussions', JSON.stringify(json));
          setStorageData(JSON.parse(localStorage.getItem('Discussions')));
        }
        else{
          setStorageData(JSON.parse(localStorage.getItem('Discussions')));
        }
      }); 

  }, []);

  //console.log(storageData);

  return (
    <div className="Contents">
      <Form discussions={storageData} setDiscussions={setStorageData}/>
      <DiscussionsContainer discussions={storageData}/>
    </div>
  );
}

export default Contents;

➰ 나만의 아고라 스테이츠 서버에서 데이터를 불러온 다음, 그 데이터를 storageData에 담아서 Form과 DiscussionsContainer 컴포넌트에 전달해준다.

2️⃣ 불러온 데이터 10개씩 페이지네이션 하기 -> Paging.js / Discussions.js

﹒ Paging.js

import React, { useState } from 'react';
import '../styles/Paging.css';
import Discussions from '../components/Discussions';
import Pagination from "react-js-pagination";

function Paging({ discussions }) {
  const [page, setPage] = useState(1);
  //console.log(discussions);
  let discussionsCount = discussions.length;
  let discussionPerPage = 10;
  let totalPage = discussionsCount/discussionPerPage;

  let dataPerPage = [];

  for(let i=0; i<totalPage; i++){ //10개씩 나눠서 배열에 넣기
    let temp = [];
    for(let j=0; j<10; j++){
      if(i*10 + j < discussionsCount) temp.push(discussions[i*10 + j])
    }
    dataPerPage.push(temp);
  }
  //console.log(discussions[0]);

  const handlePageChange = (page) => {
    setPage(page);
  };

  let pageData = dataPerPage[page-1];
  // 그 페이지에 해당하는 데이터 10개를 Discussions 컴포넌트로 보내준다.

  return (
    <div className='Paging'>
      <Pagination
        activePage={page}
        itemsCountPerPage={discussionPerPage}
        totalItemsCount={discussionsCount}
        pageRangeDisplayed={totalPage}
        prevPageText={"<"}
        nextPageText={">"}
        onChange={handlePageChange}
      />
      <Discussions currentPageData={pageData}/>
    </div>
  );
}
export default Paging;

➰ 리액트 라이브러리인 react-js-pagination 을 사용했다.
➰ props로 받아온 데이터를 배열에 10개씩 나눠서 넣어준다(1번째 페이지의 데이터는 배열의 [0]번째에, 2번째 페이지의 데이터는 배열의 [1]번째 이런식으로 들어가게 된다)
➰ page 변수에는 현재 내가 누른 페이지의 값이 담겨 있으므로, 그 값의 -1에 해당하는 인덱스의 데이터를 Discussions 컴포넌트에 보내준다.
➰ Pagination 컴포넌트는 라이브러리를 사용한 것으로, 페이지 리스트를 화면에 띄워준다.

﹒ Discussions.js

function Discussions({ currentPageData }) {
  //스테이트로 받은 페이지 보여주기.
  //데이터를 페이지에 넣을 만큼만 받아오기.
  //console.log(currentPageData)

  return (
    <div className="Discussions">
      <ul className="discussions__container">
        {currentPageData && currentPageData.map((data) => {
          return(
          <li className="discussion__container" key={data.id}>
            <div className="discussion__avatar--wrapper"><img className="discussion__avatar--image" alt="avatarImg" src={data.avatarUrl}/></div>
            <div className="discussion__content">
              <h2 className="discussion__title"><a href={data.url}>{data.title}</a></h2>
              <div className="discussion__information">{data.author + '/' + new Date(data.createdAt).toLocaleString()}</div>
            </div>
            {data.answer !== null ? <div className="answered__check"><a href={data.answer.url}>💬</a></div> : <div className="answered__check"></div>}     
          </li>
          )
          })
        }
      </ul>
    </div>
  );
}

export default Discussions;

➰ Discussions 컴포넌트에서는 10개씩 받아온 데이터를 화면에 이름, 날짜 등등을 보여준다.

3️⃣ 버튼 누르면 새로운 데이터 추가하기 -> Form.js

import '../styles/Form.css';
import Menubar from '../components/Menubar';
import { useEffect } from 'react';

function Form({discussions, setDiscussions}) {
  function inputDiscussion(){
    let nameValue = document.querySelector('#name').value;
    let titleValue = document.querySelector('#title').value;
    let storyValue = document.querySelector('#story').value;
    let currentTime = new Date();

    const newDiscussion = {
      id: discussions.length + 10,
      createdAt: currentTime,
      author: nameValue,
      title: titleValue,
      body: storyValue,
      url: "https://github.com/codestates-seb/agora-states-fe/discussions/45",
      avatarUrl: "https://avatars.githubusercontent.com/u/79903256?s=64&v=4",
      answer: null  // 안 넣어주면 answer null 아닌거 if문에 걸려서 오류난다.
    };
    setDiscussions([newDiscussion, ...discussions]);
    // 새 데이터를 원래 데이터에 추가해준다.
    localStorage.setItem('Discussions', JSON.stringify(discussions));
  }

  return (

      <div className="Form">
        
        <Menubar text={'Your Question'}/>
        <form action="" method="get" className="form">
            <div className="form__text">
              <p>ENTER HERE</p>
            </div>
            <div className="form__input--wrapper">

              <div className="form__input--name">
                <label htmlFor="name"></label>
                <input type="text" placeholder="name" name="name" id="name" autoComplete="off" required></input>
              </div>

              <div className="form__input--title">
                <label htmlFor="name"></label>
                <input type="text" placeholder="title" name="title" id="title" autoComplete="off" required></input>
              </div>

              <div className="form__textbox">
                <label htmlFor="story"></label>
                <textarea id="story" name="story" placeholder="Write your Question" autoComplete="off" required></textarea>
              </div>

              <div className="form__submit">
                <input onClick={inputDiscussion} className="inputBtn" type="button" value="Question"></input>
              </div>
          </div>
        </form>
      </div>

  );
}

export default Form;

➰ spread 문법을 사용해서, 새 데이터를 원래 데이터에 넣어준다.

4️⃣ localStorage 에 데이터 저장하기 -> Content.js, Form.js

➰ Content.js 에서 처음 데이터를 불러는데 만약 localStorage에 데이터가 있으면 그걸 불러오고 아니면, 불러온 데이터를 localStroage에 저장한다.
➰ Form.js 에서 데이터를 추가하면 그 데이터를 배열에 추가하고, 그 배열을 다시 localStroage의 원래 데이터에 붙여넣는다.
➰ 추가가 되긴 하는데, 첫 번째 추가한 데이터는 무시되고 두 번째 추가한 데이터부터 정상적으로 추가되는 오류가 발생한다.
➰ 아직 해결을 하지 못했다..뭔가 리액트 렌더링 과정에서 생기는 문제 같은데ㅠㅠㅠㅠ

---

📣 시연 화면