처음 만난 리액트 문서
16.1 미니 블로그 기획하기
이번에 함께 만들어볼 웹 애플리케이션은 바로 미니 블로그입니다. 여기서 서버까지 만들 수는 없기 때문에 실제 블로그처럼 작동하지는 못하겠지만, 블로그에 필요한 화면들을 리액트 컴포넌트로 만들어보고 각 컴포넌트들을 연결하여 겉모습은 그럴듯해 보이는 블로그로 만들어 보겠습니다.
먼저 개발을 시작하기 전에 정해야 할 것들이 있습니다. 항상 어떤 제품을 개발하기 전에 먼저 기획과 필요한 기능, 그리고 전체 디자인에 대해서 간단하게라도 정리를 해야 합니다. 기능이나 디자인이 중간에 변경될 수도 있지만, 간단하게라도 정리된 내용이 없다면 중간에 헤매게 될 수 있기 때문입니다. 저는 이번에 개발할 미니 블로그에 필요한 기능들을 아래와 같이 정리해봤습니다.
- 필요한 기능
- 글 목록 보기 기능 (List 형태)
- 글 보기 기능
- 댓글 보기 기능
- 글 작성 기능
- 댓글 작성 기능
그리고 전체 화면 디자인은 아래와 같이 아주 간단하게 그려보았습니다.
이렇게 그려놓고 보니 대략 어떤식으로 개발해야 할 지 감이 좀 잡히는 것 같죠? 메인 화면에서는 글목록을 쭉 보여주고, 글 작성 버튼을 누르면 글을 작성할 수 있는 화면으로 이동하여 글을 작성할 수 있습니다. 그리고 메인 화면에서 글을 클릭하면 전체 글의 내용과 댓글을 볼 수 있는 형태입니다. 글 보기 화면 하단에는 댓글을 작성할 수 있는 기능이 들어가 있습니다. 굉장히 간단한 UI(User Interface)이지만, 이번 미니 프로젝트를 통해서 함께 구현하는 과정을 배워보면 앞으로 큰 규모의 리액트 앱을 만드는 데에도 분명 도움이 될 것입니다. 이제 이것을 기반으로 하여 실제로 개발에 들어가보도록 하겠습니다.
마지막 업데이트: 2025년 08월 21일 09시 05분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.
On this page