2023.02.07 미니 블로그 기획하기
서버는 만들 수 없기 때문에 실제 블로그처럼 작동하지는 못하지만 블로그에
필요한 화면을 리액트 컴포넌트로 만들어 보겠습니다.
- 필요한 기능
- 글 목록 보기 기능 (리스트 형태)
- 글 보기 기능
- 댓글 보기 기능
- 글 작성 기능
- 댓글 작성 기능
- 전체 화면 디자인
프로젝트 생성하기
cteate-react-app을 사용하여 프로젝트를 생성하도록 하겠습니다.
VS code의 Terminer 실행하여 명령어 입력
npx create-react-app mini-blog
-> Create React App 완료
다음은 아래 명령어들을 순서대로 사용해서 생성된 프로젝트 디렉터리에 들어가 리액트 앱을 구동시킵니다.
필요한 패키지 설치하기
이번 미니 프로젝트에서 사용할 패키지는 아래와 같습니다.
- react-router-dom (v6)
- styled-components (v5)
먼저 react-router-dom은 리액트 액에서 페이지 전환을 위해 사용하는 패키지입니다.
react0router-dom은 거의 모든 리액트 앱에 필수적으로 들어가기 때문에 앞으로 배울 사용법에 대해서 잘 기억해 두기 바랍니다.
이 패키지들을 설치하기 위해 터미널에서 아래와 같은 명령어를 실행합니다.
여기에서 --save 옵션은
지금 설치하는 패키지들을 packege.json 파일이 관리하는 의존성 목록에 저장하겠다는 의미입니다.
npm install --save react-router-dom styled-components
위 명령어를 통해 패키지를 설치하고 설치가 완료된 이후에
package.json 파일을 열어보면 다음 그림과 같이 방금 설치한 패키지들이 dependensies에 추가된 것을 볼 수 있습니다. 이렇게 의존성을 추가하면 나중에 다른 사람이 이 프로젝트를 실행하려고 할때 어떤 패키지들이 필요한지 일일이 확인해서 설치할 필요 없이 그냥 npm install명령어만 실행하면 됩니다. 따라서 프로젝트에 꼭 필요한 패키지들을 설치할 때에는 --save 옵션을 넣기 바랍니다.
주요 컴포넌트 구성하기
지금부터 미니 블로그에 필요한 컴포넌트를 구성해 보도록 하겠습니다.
컴포넌트는 재사용이 가능한 형태로 최대한 작게 쪼개서 개발하는 것이 중요합니다.
이 미니 블로그에서는 '글'을 Post라고 하고
'댓글'을 Comment라고 이름을 정해봅시다.
- 글 목록 보기 기능
목록은 흔히 List라고 부르는데 이 목록을 표시하기 위해서 목록을 나타내는 컴포넌트와
목록 안에 들어갈 항목을 나타내는 item 컨포넌트가 필요하겠군요. - 글 보기 기능
글의 내용을 보여주는 Post 컴포넌트
댓글 목록을 보여주기 위한 CommentList, CommentListIrem 컴포넌트
댓글 작성을 위한 CommentWrite 컴포넌트가 필요합니다. - 글 작성 기능
글의 제목과 내용을 사용자로부터 입력받을 수 있는 PostWrite 컴포넌트가 필요합니다.
폴더 구성하기
필요한 컴포넌트를 모두 구상해쓰면 이제 프로젝트 폴더를 구성해 보도록 하겠습니다.
폴더를 구성하는 이유는 각 컴포넌트들을 적당한 폴더에 모아서 관리함으로써
개발의 편의와 향후 유지 보수가 용이하도록 하기 위해서입니다.
보통은 재사용이 가능할 경우 종류별로 모아놓거나,
각 페이지에서만 사용하고 딱히 재사용될 일이 없는 경우에는 각 페이지별로 폴더를 만들고 그안에 놓습니다.
