16강 Mini Project (전체 실습)

미니 블로그 기획, 프로젝트 생성 및 필요한 패키지 설치

• 개발을 시작하기 전에 정해야 할 것들

  • 기획, 기능, 디자인 등 간단하게라도 정하기

  • 기능과 기능별 컴포넌트(→주요 컴포넌트 및 폴더 구성하기 단계):

    • 글 목록 보기 기능(리스트 형태): PostList, PostListItem
    • 글 보기 기능: Post
    • 댓글 보기 기능: CommentList, CommentListItem
    • 글 작성 기능: PostWrite
    • 댓글 작성 기능: CommentWrite

  • 전체 화면 디자인

    

• 필요한 패키지 설치

  • react-router-dom v6: 리액트 페이지 전환을 위해 사용
  • styled-componets v5: 페이지를 스타일링 하기 위한 라이브러리
  • 명령어: $npm install —save react-router-dom styled-components (—save는 지금 설치한 패키지들을 pakage.json 파일이 관리하는 의존성 목록에 저장하겠다는 의미임→ 다른 사람이 이 프로젝트를 실행할 때 어떤 패키지가 필요한지 일일이 확인하지 않고 npm install 만 하면 됨)

주요 컴포넌트 및 폴더 구성하기

• 재사용이 가능한 형태로 최대한 작게 쪼개서 구성하는 것이 좋다
• 폴더 구성: 각 컴포넌트들을 적당한 폴더에 모아서 관리함으로써 개발의 편의와 향후 유지보수를 편리하게 하기 위함

UI 컴포넌트 및 List 컴포넌트 구현하기

• UI 컴포넌트: 버튼, 텍스트 입력 등 사용자가 직접 입력을 할 수 있게 해주는 컴포넌트
• 프로젝트에서는 Bottom up 방식으로 작은 부분부터 구현하자!
• 필요한 UI Component: 버튼, 텍스트 input

가짜 데이터 만들기

Page 컴포넌트 구현 및 각 페이지별 경로 구성하기

• MainPage 컴포넌트: 글 작성 버튼, 글 목록 보여줘야함

• PostViewPage 컴포넌트: 글을 볼 수 있게 해주는 컴포넌트-글과 댓글 보여주기, 댓글 작성 기능 제공

• 각 페이지별 경로 구성하기