EnJinnier
처음 만난 리액트 - 17. 미니 프로젝트: 블로그 만들기 본문
지금까지 공부한 것을 활용해 블로그를 만들어보는 프로젝트를 진행해보자. 전반적인 FE개발 과정을 담을 계획이다.
1. 기획하기(기능정리)
항상 어떤 제품을 개발하기 전에는 기획과 필요한 기능, 전체 디자인에 대해 간단하게 정리해야 한다.
이번 미니 블로그에는 다음과 같은 기능이 필요하다.
- 글 목록 보기 기능 (리스트 형태)
- 글 보기 기능
- 댓글 보기 기능
- 글 작성 기능
- 댓글 작성 기능
2. 디자인하기
전체 화면 디자인을 위와 같이 간단히 정리해둔다.
3. 개발-프로젝트 세팅하기
3.1 프로젝트 생성하기
Create React App을 사요하여 프로젝트를 생성한다.
프로젝트를 만들 폴더에서 터미널을 열고 다음과 같은 명령어를 실행하여 미니 블로그라는 이름의 React 애플리케이션을 생성한다.
$ npx create-react-app mini-blog
위 명령어를 실행하면 프로젝트 생성 및 필요한 패키지 설치가 자동으로 진행된다.
3.2 프로젝트 디렉터리에 들어가서 앱 실행하기
$ cd mini-blog
$ npm start위 명령어들을 순서대로 사용하여 생성된 프로젝트 디렉터리에 들어가 React 앱을 구동시킨다.
여기까지 하면 프로젝트 생성은 완료된 상태이다.
3.3 필요한 패키지 설치하기
프로젝트를 생성하였으면 다음으로 개발에 필요한 패키지들을 설치해야 한다.
미니 블로그에서 사용할 패키지는 다음과 같다.
- react-router-dom v6 : 리액트 앱에서 페이지 전환을 위해 사용하는 패키지
- styled-components v5 : 스타일링을 위한 라이브러리
두 패키지 모두 리액트 앱에 자주 사용되므로 꼭 알아두도록 하자.
다음과 같은 명령어를 입력하여 필요한 패키지를 설치할 수 있다.
//두개 한번에 설치하기
$ npm install --save react-router-dom styled-components
//한번에 하나씩 설치하기
$ npm install --save react-router-dom
$ npm install --save styled-components
여기서 --save 옵션은 지금 설치하는 패키지들을 package.json 파일이 관리하는 의존성 목록에 저장하겠다는 의미이다.
패키지를 설치하고 설치가 완료된 이후에 package.json 파일을 열어보면 방금 설치한 패키지들이 Dependencies에 추가된 것을 볼 수 있다.
Dependencies는 이 애플리케이션에 필요한 패키지들, 즉 의존성 목록을 나타내므로 의존성을 추가하면 나중에 다른 사람이 이 프로젝트를 실행하려고 할 때 어떤 패키지들이 필요한지 일일이 확인해서 설치할 필요 없이 그냥 npm install 명령어만 실행하면 된다.
따라서 프로젝트에 꼭 필요한 패키지들을 설치할 때는 --save 옵션을 넣어야 한다.
4. 개발- 주요 컴포넌트 구현하기
4.1 주요 컴포넌트 구상하기
재사용성을 높이기 위해 위에서 작성했던 제공할 기능에 대해 어떤 컴포넌트들이 필요할지 생각해 보아야 한다.
또한 재사용이 가능하도록 컴포넌트들을 최대한 작게 쪼개서 개발해야 한다.
각 기능에 필요한 Component
- 글 목록 보기 기능 (리스트 형태) : PostList, PostListItem
- 글 보기 기능 : Post
- 댓글 보기 기능 : CommentList, CommentListItem
- 글 작성 기능 : PostWrite
- 댓글 작성 기능 : CommentWrite
4.2 폴더 구성하기
필요한 컴포넌트를 모두 구상했으면 이제 프로젝트 폴더를 구성해보자.
폴더를 구성하는 이유는 각 컴포넌트들을 적당한 폴더에 모아서 관리함으로써 개발의 편의와 향후 유지 보수가 용이하도록 하기 위해서이다.
보통 React 컴포넌트가 재사용 가능할 경우 종류별로 모아놓거나
각 페이지에서만 사용하고 딱히 재사용될 일이 없는 경우에는 각 페이지별로 폴더를 만들고 그 안에 모아놓는 방식을 사용한다.
4.3 UI Component 구현하기
UI 컴포넌트: 버튼, 텍스트 입력 등 사용자가 직접 입력을 할 수 있게 해주는 컴포넌트.
프로젝트를 설계할 때에는 탑다운 방식으로 큰 그림을 먼저 그리고 이후에 작은 부분을 구체화시켜 나갔지만
프로젝트를 구현할 때에는 반대로 바텀업 방식으로 작은 부분부터 구현한 이후에 작은 부분들을 모아 큰 부분을 완성한다.
그래서 큰 컴포넌트를 개발하기 전에 먼저 작은 UI 컴포넌트부터 구현하는 것이다.
필요한 UI Component
- 버튼 컴포넌트 : 글이나 댓글 작성을 완료했을 때 버튼을 눌러서 작성한 내용을 저장.
(HTML의 버튼 태그를 사용하지 않고 별도의 리액트 컴포넌트를 만드는 이유는 버튼의 스타일을 변경하고 버튼에 들어갈 텍스트도 props로 받아서 좀 더 쉽게 사용할 수 있게 하기 위함)
- 텍스트 Input 컴포넌트 : 사용자로부터 문자열(텍스트)을 입력받음. 블로그에 글이나 댓글을 작성하기 위해서 사용
(보통 입력을 받을 때 input 태그를 사용하지만 여기에서는 여러 줄에 걸친 텍스트를 입력받아야 하기 때문에 textarea 태그를 사용)
- styled.button : 버튼태그에 스타일을 입힌다.
- props로 받은 타이틀이 버튼 목록에 표시되도록 함.
- props로 받은 온클릭 : StyledButton에 온클릭에 넣어줌으로써 클릭 이벤트를 상위 컴포넌트에서 받을 수 있도록 함.
- textarea 태그에 스타일을 입힌 styled.textarea
- props : 높이 설정을 위한 height, 입력된 값을 표시하기 위한 value, 변경된 값을 상위 컴포넌트로 전달하기 위한 onChange
4.4 List 컴포넌트 구현하기
작은 컴포넌트를 먼저 구현하고 이후에 그것을 사용하는 큰 컴포넌트를 구현해야 한다.
ex) PostList > PostListItem
- PostListItem 컴포넌트 : 글의 제목만 표시해주면 됨.
- TitleText를 이용해서 props로 받은 post 객체에 들어있는 title 문자열 표시
- 맵함수를 사용하여 글의 개수만큼 포스트리스트 아이템 컴포넌트를 생성
CommentListItem.jsx는 약간의 스타일 변화를 제외하곤 PostListItem과 동일.
클릭해야 하는 post와 달리 댓글은 따로 클릭하지 않기 때문에 클릭이벤트 처리해주지 않아도 됨.
CommentList.jsx는 PostList와 동일.
props로 comment 객체들이 들어있는 comment라는 배열이 들어오며 맵함수 사용하여 각 댓글 객체를 CommentListItem 컴포넌트로 넘겨 화면에 댓글을 표시함.
5. 가짜 데이터 만들기
실제로 글과 댓글을 작성하려면 별도의 데이터베이스도 구축해야 하고 서버 API도 개발해야 한다.
또한 서버 API와 리액트 애플리케이션을 연동하는 작업도 해야한다.
따라서 이렇게 리액트로 FE만 개발할때는 가짜 데이터를 이용하여 데이터를 서버에서 받아왔다고 가정하고 구현한다.
소스 폴더에 data.json 파일을 만들어 미리 만들어둔 데이터 코드를 넣어두자.
(json 형태는 현재 서버와의 통신에서 가장 많이 사용하는 데이터 유형이다.)
6. 개발-Page 컴포넌트 구현하기
이제 UI 컴포넌트, 리스트 컴포넌트, 그리고 데이터까지 모두 준비되었으므로 최종적으로 이 컴포넌트들과 데이터를 모아서 페이지 컴포넌트들을 구현해 보자.
MainPage
: 우리가 만들 미니 블로그에 사용자가 처음 접속했을 때 보게 될 페이지.
글을 작성할 수 있는 버튼과 글 목록을 보여주어야 함.
PostWritePage
: 글 작성을 위한 페이지.
PostViewPage
: 글을 볼 수 있게 해주는 페이지.
글과 댓글을 보여주고 댓글 작성 기능 제공
7. 각 페이지별 경로 구성하기
각 페이지별 경로를 구성할때 react-router-dom을 사용하며
이때 사용하는 기본적인 컴포넌트는 BrowserRouter, Routes, Route 이렇게 3가지이다.
- 브라우저 라우터 컴포넌트: 웹브라우저에서 React 라우터를 사용하여 라우팅을 할 수 있도록 해주는 컴포넌트(히스토리를 이용해서 경로를 탐색할 수 있게 해주는 컴포넌트)
- 라우츠, 라우트 컴포넌트: 실제로 라우팅 경로를 구성할 수 있게 해주는 컴포넌트.
- 라우츠 컴포넌트 : 여러 개의 라우트 컴포넌트를 칠드런으로 가짐
- 라우트 컴포넌트 : 라우츠 컴포넌트의 하위 컴포넌트로서 path(경로)와 엘리먼트(경로가 일치할 경우 렌더링을 할 리액트 엘리먼트)라는 props를 갖고 있음.
useNavigate()를 이용하여 페이지간의 이동을 할 수 있음.
8. Production 빌드하기
코드 작성이 완료되었으면 빌드를 해야한다.
웹 애플리케이션 개발의 최종 단계는 빌드와 배포이다.
빌드는 우리가 작성한 코드와 애플리케이션이 사용하는 이미지, CSS 파일 등의 파일을 모두 모아서 패키징하는 과정이라고 할 수 있다.
터미널을 열고 아래 명령어를 실행하면 빌드가 진행되고, 완료된 이후에는 빌드 폴더가 생성된다.
$npm run build
serve 설치하기
이제 생성된 빌드 파일들을 이용해서 웹 애플리케이션을 실행하기 전에 serve 패키지를 설치해주어야 한다.
static 파일들을 서빙해주는 역할을 하는 프로그램이다.
$npm install -g serve
서브를 설치한 이후에 아래 명령어를 실행하여 build폴더를 기반으로 웹 애플리케이션을 서빙한다.
$serve -s build
9. 배포하기
배포는 빌드를 통해서 생성된 정적인 파일들을 배포하려는 서버에 올리는 과정이다.
이렇게 서버에 올려두고 서브 같은 명령어를 사용하여 서빙할 수 있게 해두면 인터넷이 되는 어디에서든지 해당 서버 주소로 접속하여 미니 블로그를 볼 수 있게 되는 것이다.
'스터디 > 처음 만난 React' 카테고리의 다른 글
| 처음 만난 리액트 - 16(2). Styled-components (0) | 2024.05.03 |
|---|---|
| 처음 만난 리액트 = 16. CSS와 Selector (0) | 2024.05.03 |
| 처음 만난 리액트 - 15(2). Context API (0) | 2024.05.02 |
| 처음 만난 리액트 - 15. Context (0) | 2024.05.01 |
| 처음 만난 리액트 - 14. Composition 방법(Containment,Specialization)과 Inheritance (0) | 2024.05.01 |
