2024-05-13.md

날짜: 2024-05-13

🌤️ 스크럼

• 학습 목표 1 : 커뮤니티웹 이메일 & 닉네임 중복체크 API 구현
• 학습 목표 2 : 커뮤니티웹 게시글 목록 무한스크롤 구현
• 학습 목표 3 : Preflight와 Single Request에 대한 이해
• 학습 목표 4 : Wireshark 실습

⚡️ 새로 배운 내용

1. Preflight Request와 Single Request

• Preflight Request

  • 브라우저가 실제 요청을 보내기 전에 서버에게 요청을 보내는 것
  • CORS 요청 중에 사용되며, 실제 요청을 보내기 전에 서버가 요청을 받아들일 수 있는지 확인
  • OPTIONS 메서드로 요청을 보내며, 서버는 이에 대한 응답을 보내고 브라우저는 이에 따라 실제 요청을 보냄

• Single Request

  • 예비 요청을 생략하고 바로 서버에 직행으로 본 요청을 보낸다.
  • 이후, 서버가 이에 대한 응답의 헤더에 Access-Control-Allow-Origin 헤더를 보내주면 브라우저가 CORS 정책 위반 여부를 검사하는 방식

• notion link

🔥 오늘의 도전 과제와 해결 방법

도전 과제 1: infinite scrolling 구현

• 상황
  기존에는 한 번에 모든 게시글 정보를 불러와서 게시글 목록을 구성하였다. 이를 무한스크롤로 구현하고자 한다.

• 의도
  무한스크롤을 구현하여 사용자가 스크롤을 내릴 때마다 추가적인 게시글을 불러오도록 한다. 게시글은 5개씩 불러온다.

• 방법
  게시글 목록을 불러오는 API를 수정하였다.

  기존 코드

  postController.js

  const getPosts = (req, res) => {
      // --- 생략 ---
  
      try {
          const { posts } = Post.getPosts();
          res.status(200).json(posts);
      } catch (error) {
          console.error("게시글 불러오기 에러: ", error);
          res.status(500).send("Internal Server Error");
      }
  };

  postModel.js

  const getPosts = () => {
      postsJSON = JSON.parse(
          fs.readFileSync(path.join(__dirname, "../data", "posts.json"), "utf-8")
      );
  
      // --- 생략 ---
  
      console.log("[POST] GET all posts");
      return { posts: postList };
  };

  수정 코드

  postController.js

  const getPosts = (req, res) => {
      // --- 생략 ---
  
      const page = parseInt(req.query.page) || 1;
      const limit = parseInt(req.query.limit) || 5;
  
      try {
          const { posts, total, currentPage } = Post.getPosts(page, limit);
          res.status(200).json({
              posts: posts,
              total: total,
              currentPage: currentPage,
          });
      } catch (error) {
          console.error("게시글 불러오기 에러: ", error);
          res.status(500).send("Internal Server Error");
      }
  };

  postModel.js

  const getPosts = (page, limit) => {
      postsJSON = JSON.parse(
          fs.readFileSync(path.join(__dirname, "../data", "posts.json"), "utf-8")
      );
  
      // --- 생략 ---
  
      const startIndex = (page - 1) * limit;
      const endIndex = page * limit;
      const paginatedPosts = postList.slice(startIndex, endIndex);
  
      console.log(`[POST] GET posts from ${startIndex} to ${endIndex}`);
      return { posts: paginatedPosts, total: postList.length, currentPage: page };
  };

• page와 limit 변수를 선언하여 페이지 번호와 한 페이지에 보여줄 게시글 수를 받아오고, 해당 페이지에 해당하는 게시글 목록을 불러오도록 수정하였다.

• github link

🤔 오늘의 회고

• 스크럼 중 완료한 작업: 커뮤니티웹 추가기능 구현, 미니퀘스트 공부
• 바닐라자바스크립트와 express로 개발한 커뮤니티웹을 드디어 완료했다. 실행 상에 문제는 없지만 보완되면 좋을 버그들이 좀 보인다.
• 리액트로 다시 커뮤니티웹을 개발하며 처리하지 못했던 버그들도 고치고 코드도 더 효율적으로 작성하자!

참고 자료 및 링크