✅ ToDo

---

• Notion(코드) -> codesandbox
• 코플릿
• 나만의 아고라스테이츠 코드 리팩토링(discussion 컴포넌트)
• 나만의 아고라스테이츠 디테일 구현(Method, Css)
• Error Note 작성
• 6, 7, 8주차 회고

💬 잡담

---

살면서 일주일이 이렇게 짧은지 몰랐습니다.. 😅

깃헙 잔디밭에는 fork 해와서 그런지 올라가지 않지만, 매일 커밋도 하고 있슴니다 ㅎ.ㅎ

뭔가 요즘 하루는 공부 + 블로깅이면 정말 뚝딱입니당

근데 우리 그런 말이 있잖아요. 이열치열이라고 ㅎ

이 상태에서 코드스테이츠 스터디까지 들어갔습니다 :)

정말 좋은 스터디 장님이 계신 스터디여서 호시탐탐 노리기만 하다가 들어왔네요 😚

아 그리고 회고록을 주고받는 시간이 있었는데 제 블로그를 봐주신다고 하신 분들
(제가 서울 상남자라 말을 잘 못해서..) ❣️ 드림니다.

앞으로 더욱더 터질도록 달릴 예정입니다. 연료는 충분합니다.

요약은, 오늘도 화이팅 🔥🔥

🏁 자~ 그럼 출발~! 🏁

🔥 Review

---

1. 나만의 아고라스테이츠 코드 리팩토링(discussion 컴포넌트)

저번에 아고라스테이츠 회고를 작성했을 때 1차로 완료한 사항은 다음과 같다.

1. 기존 클라이언트 파일에서 데이터를 가져오던 mock 파일 삭제
2. 큰 틀로 사용할 폴더 2개 생성 (Server, Client)
3. Client는 React 식으로 리팩토링(useState, useEffect, map), Server는 그대로 가져오기
4. Client에 Axios로 실제 서버 주소 Get 해오기
5. Client 디테일한 코드(discussion 컴포넌트), CSS 코드 리팩토링
   
   

그리고 이어서 진행할 2차 작업 ToDO는 다음과 같았다.

1. discussion 눌렀을 때, URL 제대로 수정
2. discussion 눌렀을 때, 해당 컴포넌트 제외하고 모두 숨김 처리
3. POST, DELETE 기능 추가
4. CSS 리팩토링
   
   

결론적으로는 일부는 수행했지만, 일부는 수행하지 못했다.

대신 다른 기능이 추가되었다.
이 기능에 정신이 팔려서 시간이 조금 모자랐다 😅

2. 나만의 아고라스테이츠 디테일 구현(Method, Css)

구현을 완료한 리스트를 작성하자면 다음과 같다.

1. 기존 클라이언트 코드들을 컴포넌트화시켜 리팩토링
2. POST, PUT, DELETE 메서드 서버에 구현
3. POST, PUT, DELETE 메서드 클라이언트에 구현
4. 서버 작동 시, 정상적으로 클라이언트의 모든 메서드가 작동하는지 확인
   
   

이제 각각 어떻게 진행했는지 리뷰해보면서, 뜯어보자 !

1. 기존 클라이언트 코드들을 컴포넌트화시켜 리팩토링

전에 Html 코드를 React 식으로 변환하는 작업은 처음이라 미숙하기도 했고, 시간이 없어 불만족스러웠다.

개인적으로 메서드들을 추가시켜 적용시키는 것이 메인이었다고 생각하긴 하지만,
이 작업 또한 매우 도움되는 시간이었다고 스스로 생각하며 만족하고 있다.

일단 기존 클라이언트 코드 App.js에 컴포넌트 4개를 추가시켜 리팩토링을 진행했다.
기존에 비해, 메서드가 추가되었음에도 불구하고 코드가 매우 간결해진 것을 알 수 있다.

import React, { useState, useEffect } from "react";
import "./App.css";
import axios from "axios";
import { Form, Discussions } from "./components";

const App = () => {
  const [discussions, setDiscussions] = useState([]);
  const [error, setError] = useState(null);

  const addDiscussion = ({ title, author, bodyText }) => {
    const newDiscussionData = {
      title,
      author,
      bodyHTML: bodyText,
    };
    axios
      .post("http://localhost:4000/discussions/", newDiscussionData)
      .then((response) => {
        if (response.status === 201) {
          getDiscussion();
        }
      })
      .catch((error) => {
        setError("Failed to add discussion.");
      });
  };
  const getDiscussion = () => {
    axios
      .get("http://localhost:4000/discussions/")
      .then((response) => {
        setDiscussions(response.data);
      })
      .catch((error) => {
        setError("Failed to fetch discussions.");
      });
  };

  const deleteDiscussion = (id) => {
    axios
      .delete(`http://localhost:4000/discussions/${id}`)
      .then((response) => {
        if (response.status === 202 || response.status === 204) {
          getDiscussion();
        }
      })
      .catch((error) => {
        setError("Failed to delete discussion.");
      });
  };

  useEffect(() => {
    getDiscussion();
  }, []);

  return (
    <main>
      <div className="form__info">
        <h1>My Agora States</h1>
        <Form addDiscussion={addDiscussion} />
      </div>
      <div className="form__active">
        {error ? (
          <div className="error">{error}</div>
        ) : (
          <Discussions
            discussions={discussions}
            deleteDiscussion={deleteDiscussion}
          />
        )}
      </div>
    </main>
  );
};

export default App;

추가된 컴포넌트들을 소개하겠다.

1. Discussion.js - 개인 discussion 하나의 컴포넌트
2. Discussions.js - discussion 들을 모아둔 구역의 컴포넌트
3. Form.js - 질문을 작성하는 form 컴포넌트
4. index.js - 위 컴포넌트 3개 컴포넌트를 현재 파일에서 내보내는 역할
   
   

1. Discussion.js

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faTrashAlt } from "@fortawesome/free-solid-svg-icons";

// 기존 map으로 뿌려주던 대상인 내부 Props 역할을 대체 (DiscussionItem)
// discussion 객체와 deleteDiscussion 함수를 받아와서 화면에 표시하는 역할
export const Discussion = ({ discussion, deleteDiscussion }) => {
  const { id, url, avatarUrl, title, author, createdAt, answer } = discussion;
  return (
    <li className="discussion__container">
      <div className="discussion__avatar--wrapper">
        <img
          className="discussion__avatar--image"
          src={avatarUrl}
          alt="avatar"
        />
      </div>
      <div className="discussion__content">
        <h2 className="discussion__title">
          <a href={url}>
            {title.length > 53 ? `${title.slice(0, 53)}...` : title}
          </a>
        </h2>
        <div
          className="discussion__information"
          dangerouslySetInnerHTML={{
            __html: `${author} / ${new Date(createdAt).toLocaleTimeString()}`,
          }}
        ></div>
      </div>

      <div className="discussion__answered">
        <p>{answer ? "✅" : "❌"}</p>
      </div>
      // 삭제 버튼 fontawesome package로 아이콘으로 구현 & 기능 추가
      <button
        className="discussion__deleteButton"
        onClick={() => deleteDiscussion(id)}
      >
        <FontAwesomeIcon icon={faTrashAlt} /> 
      </button>
    </li>
  );
};

2. Discussions.js

import { Discussion } from "./Discussion";

// 기존 map으로 뿌려주던 DiscussionItem 컴포넌트 역할 대체
// discussions 배열을 받아와서 Discussion 컴포넌트를 여러 개 생성하여 화면에 나타내는 역할
export const Discussions = ({ discussions, deleteDiscussion }) => {
  return (
    <section className="discussion__wrapper">
      <ul className="discussions__container">
        {discussions.map((discussion) => {
          return (
            <Discussion
              key={discussion.id}
              discussion={discussion}
              deleteDiscussion={deleteDiscussion}
            />
          );
        })}
      </ul>
    </section>
  );
};

3. Form.js

export const Form = ({ addDiscussion }) => {
  // 제출 버튼을 누를 시, form 작성 정보를 넘겨주는 역할 
  const handleSubmit = (event) => {
    event.preventDefault();
    const author = event.target[0].value;
    const title = event.target[1].value;
    const bodyText = event.target[2].value;
    addDiscussion({ author, title, bodyText });
  };

  return (
    <section className="form__container">
      <form action="" method="get" className="form" onSubmit={handleSubmit}>
        <div className="form__input--wrapper">
          <div className="form__input--name">
            <label htmlFor="name">Enter your name: </label>
            <input type="text" name="name" id="name" required />
          </div>
          <div className="form__input--title">
            <label htmlFor="title">Enter your title: </label>
            <input type="text" name="title" id="title" required />
          </div>
          <div className="form__textbox">
            <label htmlFor="story">Your question: </label>
            <textarea
              id="story"
              name="story"
              placeholder="질문을 작성하세요"
              required
            ></textarea>
          </div>
        </div>
        <div className="form__submit">
          <input type="submit" value="submit" />
        </div>
      </form>
    </section>
  );
};

4. Index.js

export * from "./Form";
export * from "./Discussions";
export * from "./Discussion";

2. POST, PUT, DELETE 메서드 서버에 구현

먼저 서버에 구현하고 클라이언트에 관련 기능들을 Merge 하는 것이 맞다고 생각하여, 서버를 먼저 구현했다.

라우터를 구현하는 것은 일도 아니었지만... 컨트롤러가 역시 본체였나.. 너무 힘들었다.. ㅎ

1. server/router/discussions.js

const { discussionsController } = require("../controller");
const { findAll, findById, createOne, updateById, deleteById } =
  discussionsController;
const express = require("express");
const router = express.Router();

// TODO: 모든 discussions 목록을 조회하는 라우터를 작성합니다.

router.get("/", findAll);

// TODO: :id에 맞는 discussion을 조회하는 라우터를 작성합니다.

router.get("/:id", findById);

// ✨ TODO: discussion 하나를 생성하는 라우터를 작성합니다. 

router.post("/", createOne);

// ✨ TODO: discussion 하나를 수정하는 라우터를 작성합니다.

router.put("/:id", updateById);

// ✨ TODO: discussion 하나를 삭제하는 라우터를 작성합니다.

router.delete("/:id", deleteById);

module.exports = router;

2. server/controller/index.js

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

// 요청 본문(form 작성 정보)을 검사하여 필요한 데이터가 있는지 여부를 확인하고,
// 데이터가 없거나 잘못된 경우에는 적절한 응답을 보내는 역할
const handleRequestBody = (req, res) => {
  if (!req.body) return res.status(400).send("no request body");
  const { title, author, bodyHTML } = req.body;
  if (!title && !author && !bodyHTML)
    return res.status(400).send("bad request");
  return true;
};

const discussionsController = {
  findAll: (req, res) => {
    const { author } = req.query;
    if (author) {
      res.json(discussionsData.filter((item) => item.author === author));
    } else {
      res.json(discussionsData);
    }
  },
  findById: (req, res) => {
    const { id } = req.params;
    if (id) {
      const discussion = discussionsData.find((item) => item.id === Number(id));
      if (discussion) {
        res.json(discussion);
      } else {
        res.status(404).json({ error: "Discussion not found." });
      }
    }
  },
  // 클라이언트로부터 받은 요청의 본문(req.body)에서 title, author, bodyHTML을 추출하고,
  // 유효성 검사가 통과되면 새로운 토론(discussion) 객체를 생성하고, 이를 discussionsData 배열의 가장 앞에 추가하는 역할
  createOne: (req, res) => {
    const { title, author, bodyHTML } = req.body;

    if (handleRequestBody(req, res) !== true) return;
    const id = parseInt(Math.random() * 10000);
    const avartarId = parseInt(Math.random() * 100);
    const url =
      "https://github.com/codestates-seb/agora-states-fe/discussions/" + id;
    const newDiscussion = {
      id,
      createdAt: new Date().toISOString(),
      title,
      url,
      author,
      answer: null,
      bodyHTML,
      avatarUrl: `https://randomuser.me/api/portraits/men/${avartarId}.jpg`,
    };
    discussionsData.unshift(newDiscussion);
    return res.status(201).send("resource created successfully: ID " + id);
  },
  // 클라이언트로부터 받은 요청의 본문(req.body)을 이용하여 토론의 업데이트를 수행하는 역할
  updateById: (req, res) => {
    if (handleRequestBody(req, res) !== true) return;
    const idx = discussionsData.findIndex(
      (d) => d.id === Number(req.params.id)
    );
    const updated = {
      ...discussionsData[idx],
      ...req.body,
      updatedAt: new Date().toISOString(),
    };

    if (idx !== -1) {
      discussionsData.splice(idx, 1, updated);
      return res.status(200).send("resource updated successfully");
    } else {
      return res.status(404).send("Not found");
    }
  },
  // 클라이언트로부터 받은 요청의 URL 파라미터(req.params.id)를 이용하여 토론을 삭제하는 역할
  deleteById: (req, res) => {
    const idx = discussionsData.findIndex(
      (d) => d.id === Number(req.params.id)
    );
    if (idx !== -1) {
      discussionsData.splice(idx, 1);
      return res.status(202).send("resource deleted successfully");
    } else {
      return res.status(404).send("Not found");
    }
  },
};

module.exports = {
  discussionsController,
};

3. POST, PUT, DELETE 메서드 클라이언트에 구현

아! 클라이언트는 구현하다가 의문점이 하나 들었었다.

바로 기존 Html 시절 때는 script.js 에 submit 시, discussion 배열 가장 앞에 추가해주는
코드가 있었는데 이번에 구현하면서 이 부분이 서버에는 있으나, 클라이언트에서 빠졌던 것이었다.

그러려니 하고 넘기고 있었는데 확실하게 짚고 가야한다고 생각했다.

결론은 '빠져도 된다' 였고, 이유는 다음과 같다.

기존 자바스크립트 코드에서는 클라이언트 측에서 직접 배열 앞에 토론을 추가하고 있었다.

그러나 리액트로 변경된 코드에서는 상태 관리와 UI 갱신을 리액트가 담당하고 있으며 (use 시리즈),
클라이언트 측에서 배열 앞에 토론을 추가하는 동작은 직접 구현되어 있지 않다.

• 역할 변경: 직접 배열 앞에 토론을 추가 ➡️ 상태 관리와 UI 갱신

따라서, 리액트로 변경된 클라이언트 측에서 배열 앞에 토론을 추가하는 동작은 서버 측에서 구현되어야 한다.

클라이언트는 서버에 토론 추가 요청을 보내고,
서버에서 해당 요청을 처리하여 배열 앞에 토론을 추가하는 작업을 수행해야 한다.

1. App.js

import React, { useState, useEffect } from "react";
import "./App.css";
import axios from "axios";
import { Form, Discussions } from "./components";

const App = () => {
  const [discussions, setDiscussions] = useState([]);
  
  // 에러 처리를 useState로 상태 관리
  const [error, setError] = useState(null);
  
  // 새로운 토론을 추가하는 역할
  // title (제목), author (작성자), bodyText (본문 텍스트)를 매개변수로 받는다.
  // 새로운 토론 데이터를 생성하고, 생성된 데이터를 서버로 전송한다.
  // 만약 요청이 성공적으로 완료되면 getDiscussion 함수를 호출하여 업데이트된 토론 목록을 가져옵니다.
  const addDiscussion = ({ title, author, bodyText }) => {
    const newDiscussionData = {
      title,
      author,
      bodyHTML: bodyText,
    };
    axios
      .post("http://localhost:4000/discussions/", newDiscussionData)
      .then((response) => {
        if (response.status === 201) {
          getDiscussion();
        }
      })
      .catch((error) => {
        setError("Failed to add discussion.");
      });
  };
  // 모든 토론 목록을 가져오는 역할
  // 서버로부터 토론 목록을 가져와서 response.data에 저장하고, 이를 상태에 설정
  const getDiscussion = () => {
    axios
      .get("http://localhost:4000/discussions/")
      .then((response) => {
        setDiscussions(response.data);
      })
      .catch((error) => {
        setError("Failed to fetch discussions.");
      });
  };
  // 주어진 id에 해당하는 토론을 삭제하는 역할
  // 서버에 삭제 요청을 보내고, 요청이 성공적으로 완료되면 getDiscussion 함수를 호출하여 업데이트된 토론 목록을 가져온다.
  const deleteDiscussion = (id) => {
    axios
      .delete(`http://localhost:4000/discussions/${id}`)
      .then((response) => {
        if (response.status === 202 || response.status === 204) {
          getDiscussion();
        }
      })
      .catch((error) => {
        setError("Failed to delete discussion.");
      });
  };
  // 렌더링될 때와 의존성 배열이 변경될 때마다 실행
  // 초기 렌더링 시에 getDiscussion 함수를 호출하여 초기 토론 목록을 가져오기 위해 사용
  useEffect(() => {
    getDiscussion();
  }, []);

  return (
    <main>
      <div className="form__info">
        <h1>My Agora States</h1>
        <Form addDiscussion={addDiscussion} />
      </div>
      <div className="form__active">
        {error ? (
          <div className="error">{error}</div>
        ) : (
          <Discussions
            discussions={discussions}
            deleteDiscussion={deleteDiscussion}
          />
        )}
      </div>
    </main>
  );

4. 서버 작동 시, 정상적으로 클라이언트의 모든 메서드가 작동하는지 확인

💡 Error Note.

---

💡 서버와 클라이언트의 Mock 데이터 차이

• 서버 껐다 키면 메서드 작업을 했던 부분이 초기화되는데 이게 mock이랑 뭐가 다른지 의문이 생겼다.
• 현재는 데이터베이스나 파일 시스템같은 영구 저장소를 사용하고 있지 않고,
  agoraStatesDiscussions 에서 데이터를 가져와서 그렇다.
• 실제 데이터베이스나 파일 시스템같은 영구 저장소를 사용한다면, 서버의 진짜 존재 이유가 생긴다.
  
  

💡 서버의 대표적인 역할 예시

• 클라이언트에서 요청한 작업을 처리하고, 필요한 데이터를 관리하며, 클라이언트에게 적절한 응답을 제공하는 역할을 수행한다.

1. 사용자 등록: 클라이언트에서 사용자가 회원 가입을 요청하면, 서버는 해당 요청을 받아서 사용자 정보를 데이터베이스에 저장하고, 적절한 응답을 반환한다.

2. 데이터 저장: 클라이언트에서 생성한 새로운 데이터를 서버로 전송하면, 서버는 해당 데이터를 데이터베이스나 파일 시스템에 저장하고, 저장 완료 후 클라이언트에게 적절한 응답을 반환한다.

3. 인증과 권한 부여: 클라이언트에서 로그인 요청을 보내면, 서버는 사용자의 인증을 검증하고, 유효한 인증이면 액세스 토큰을 발급하여 클라이언트에게 제공한다. 또한, 클라이언트가 보유한 액세스 토큰을 기반으로 요청된 작업에 대한 권한을 검사하고, 허용되지 않은 작업에 대해서는 적절한 권한 오류 응답을 반환한다.

4. 비즈니스 로직 처리: 클라이언트가 요청한 작업에 대해 비즈니스 로직을 수행해야 할 경우, 서버는 해당 로직을 실행하고 그 결과를 클라이언트에게 반환한다. 예를 들어, 상품 구매 요청에 대해서는 재고 체크, 결제 처리, 배송 정보 업데이트 등의 비즈니스 로직을 수행할 수 있다.