1차 프로젝트 3일차

import React, { useEffect, useState } from 'react';
import './Post.scss';
import { Link, useNavigate } from 'react-router-dom';

const Post = () => {
  const [data, setData] = useState([]);
  const navigate = useNavigate();
  const headersClick = () => {
    navigate('/postadd');
  };
  useEffect(() => {
    fetch('/data/board.json')
      .then(res => {
        return res.json();
      })
      .then(data => {
        setData(data);
      });
  }, []);
  return (
    <div className="post">
      <div className="postConTainNer">
        <div className="postList">
          {data.map(item => {
            return (
              <div className="postConTens" key={item}>
                <div>
                  <div className="proFileBox">
                    <div className="proFile">
                      <img src={item.profileImage} alt="프로필사진" />
                      <span className="name">{item.nickname}</span>
                    </div>
                    <span className="date">{item.createdAt}</span>
                  </div>
                </div>
                <div>{item.content}</div>
                <input type="button" className="comment" value="댓글 00" />
              </div>
            );
          })}
        </div>
        <div className="action">
          <button onClick={headersClick}>글쓰기</button>
        </div>
      </div>
    </div>
  );
};
export default Post;

[
  {
    "postId": 1,
    "nickname": "이주은",
    "profileImage": "/img/logo.png",
    "content": "하지만 여전히 코딩을 배우는 것이 ‘왜’ 좋은지 잘 모르시는 분들이 계신 것 같습니다. 그리고 정말로 단기간에 무언가를 만들어내는 것이 가능한지 스파르타코딩클럽의 커리큘럼을 궁금해하시는 분들도 계시고요. 그래서 준비했습니다. 코딩이 무엇인지부터 프로그래밍과의 차이점, 코딩을 배우면 좋은 이유, 어떻게 시작해야 하는지 ‘코딩’에 대한 전반을 함께 알아보아요. 단순히 많은 사람들이 배운다는 이유 하나만으로 유행을 좇아 코딩을 배우기보다는 코딩이 무엇인지 정확히 파악하고 공부한다면 더욱 적극적으로 공부할 수 있지 않을까요?..",
    "createdAt": "2023-08-16"
  },
  {
    "postId": 2,
    "nickname": "김기영",
    "profileImage": "/img/logo2.png",
    "content": "과거에 프로그래밍은 개발자들만이 하는 일이었습니다. 대부분의 비전공자 사람들에게는 미지의 영역과 같았죠. 하지만 더 이상 그렇지 않습니다. 컴퓨터와 인공지능이 우리의 삶에 더욱더 많은 영향을 끼치게 되고, 또 비교적 쉽게 배울 수 있는 프로그래밍 언어들이 생겨나면서 꼭 개발자가 되지 않더라도 충분히 자기계발을 위한 취미나 개발이 아닌 분야에서 본인의 업무 역량 향상을 위해 코딩을 공부하기도 합니다.",
    "createdAt": "2023-08-20"
  },
  {
    "postId": 3,
    "nickname": "이청원",
    "profileImage": "/img/logo2.png",
    "content": "이제는 전공자, 비전공자 할 것 없이 모두가 코딩을 배우는 추세입니다. 스파르타코딩클럽에도 초등학생 수강생분들이 계신데요. 앱개발종합반의 한 초등학생 수강생분은 자신만의 어플을 완성하기도 했습니다. 이렇게 어릴 적부터 코딩을 공부하는 사람도 빠르게 증가하고 있습니다.",
    "createdAt": "2023-08-22"
  },
  {
    "postId": 4,
    "nickname": "위코드",
    "profileImage": "/img/logo.png",
    "content": "사람간에 대화를 할 때 적절한 언어를 선택해 사용합니다. 대화 상대나 장소에 따라 한국어, 영어, 중국어 등 그에 맞는 언어를 사용하죠. 코딩도 마찬가지입니다. 코딩을 하기 위한 운영체제나 명령을 내리기에 적합한 언어를 판단해 사용해야 합니다. C, Java, Python, Kotlin, PHP 등 다양한 언어들 중에서 말이죠.",
    "createdAt": "2023-08-27"
  },
  {
    "postId": 5,
    "nickname": "김민정",
    "profileImage": "/img/logo.png",
    "content": "이렇게 코딩을 해서 컴퓨터에게 명령을 내리면 하나의 프로그램이 완성됩니다. 이렇게 프로그램 하나를 만드는 과정을 코딩, 넓은 의미로는 프로그래밍이라고 합니다. ‘앗, 코딩이랑 프로그래밍이 어떻게 다른 거지?’ 싶으셨나요? 프로그래밍은 무엇이고, 코딩과 프로그래밍의 차이점은 무엇인지 짚고 넘어가도록 해요.",
    "createdAt": "2023-08-28"
  }
]

게시물 리스트 부분을 구현하는거를 맡게 되었고 코드는 이렇게 작성하였다.
게시물 UI랑 그는거조차 어려웟고! scss는 이렇게 코드를 작성하였다.

.post {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  .postConTainNer {
    display: flex;
    flex-direction: column;
    padding: 40px 0px;
    gap: 24px;
    width: 567px;
    height: 100%;
    border: 2px solid black;
    .postList {
      display: flex;
      flex-direction: column;
      gap: 24px;
      padding: 0px 24px;
      width: 100%;
      height: 90%;
      overflow: scroll;
      .proFileBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 20px;
        .date {
          font-size: 16px;
          font-weight: 400;
          color: #999;
        }
      }
      .proFile {
        display: flex;
        align-items: center;
        .name {
          margin-left: 10px;
          font-size: 20px;
          font-weight: 700;
        }
      }
      .postConTens {
        border-bottom: 2px solid #e6e6e6;
        padding-bottom: 20px;
      }
      img {
        width: 40px;
        height: 40px;
        border-radius: 40px;
      }
      .comment {
        background-color: white;
        border: none;
        padding-top: 20px;
        color: #999;
      }
    }
    .action {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-end;
      width: 100%;
      height: 10%;
      padding: 0px 24px;

      button {
        padding: 0px 34px;
        height: 56px;
        border-radius: 6px;
        font-size: 18px;
        background-color: #2d71f7;
        color: white;
        width: 120px;
        border: 1px solid black;
        font-weight: 800;
      }
    }
  }
}

레이아웃이 이렇게 만들어졌고!!
navigate 를 사용하여! 글쓰기 버튼을 눌렀을때 같은팀원이 작업하고있는
게시물 작성 페이지로 넘어가게 기능을 넣었고!

목데이터를 만들어서 fetch 메서드를 GET 을 사용하여! 목데이터를 가지고와서 테스트를 해볼수있었다 그러다 발생한문제는 화면이 render 가 되는과정에서 데이터를 가지고 올수없어서! 빈게시물이 보이는 문제가 발생하였고 데이터를 우선적으로 가지고오기위해 useEffect를 사용하여!
화면이 render 되기전 데이터를 가지고오는 방법을 선택하여서! 해결이되었다. 아직
useEffect 이해도가 적어 활용을 어떻게 해야할지 고민을 더해봐야하겠지만! 문제를 해결하였고
map을 사용해서! 목데이터 배열을 반복문을 돌려서 데이터를 확인하였고 객체 형태로 담아져온 데이터를 각 key이름을 JSX문법을 이용하여 지정해주었다.

3일차 게시물 리스트를 구현해보았다! 백엔드에 데이터가 준비되지않아도 목데이터를 이용하여 레이아웃에 데이터가 들어왔다는 상황을 만들어볼수있다는것을 알았고! overflow: scroll;을 쓰면
지정 레이아웃부분을 넘어가면 스크롤부분으로 만들수있다는것도 알수있었다. 게시물내용일 클릭하여
상세내용을 본다던지 댓글내용을 보는것등 추가기능 구현은 조금더 고민을 해봐야할것같다.

느낀점: 아직 사용 용도나 개념이해가 부족한거같고! 상황에 맞게 사용하는 개념을 공부해야할것같다.