모바일 웹 구축 실무 13주차 정리 (미니 블로그 만들기)

미니 블로그 기획하기

---

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

•필요한 기능 정리

•화면 디자인

 

필요한 기능

•글 목록 보기 기능(리스트 형태)

•글 보기 기능

•댓글 보기 기능

•글 작성 기능

•댓글 작성 기능

 

화면 디자인

---

프로젝트 생성하기

---

미니 블로그 프로젝트 생성

프로젝트에 사용할 패키지

---

주요 컴포넌트 구성하기

---

컴포넌트 이름 정하기

필요한 기능

•글 목록 보기 기능(리스트 형태)

•글 보기 기능

•댓글 보기 기능

•글 작성 기능

•댓글 작성 기능

 

컴포넌트 네이밍

•글 - Post

•댓글 - Comment

 

* 컴포넌트는 재사용이 가능한 형태로 작게 쪼개서 개발

 

각 기능에 필요한 컴포넌트

•글 목록 보기 기능 (리스트 형태)

- PostList, PostListItem

•글 보기 기능

- Post

•댓글 보기 기능

- CommentList, CommentListItem

•글 작성 기능

- PostWrite

•댓글 작성 기능

- CommentWrite

---

폴더 구성하기

---

프로젝트 구조 설계

•파일의 기능이나 라우트에 의한 분류

- CSS, JS, 테스트 파일을 기능이나 라우트로 분류된 폴더에 같이 두는 방법

•파일 유형에 의한 분류

-비슷한 파일끼리 묶어주는 방법

 

- 역할에 따라 컴포넌트를 다른 폴더로 분리할 수 있음 (폴더 중첩은 3~4 depth 이내로)

 

프로젝트 폴더 구성

---

UI 컴포넌트 구현하기

---

공통 UI 컴포넌트 구현

•UI 컴포넌트 - 버튼, 텍스트 입력 등 사용자가 직접 입력할 수 있게 해주는 컴포넌트

 

•프로젝트 설계 - Top-down 방식으로 큰 그림을 먼저 그리고 이후 작은 부분을 구체화

•프로젝트 구현 - Bottom-up 방식으로 작은 부분부터 구현한 후 큰 부분을 완성

 

•미니 블로그에 필요한 UI 컴포넌트

- Button 컴포넌트 - 글이나 댓글 작성을 완료하기 사용

- TextInput 컴포넌트 - 글이나 댓글을 작성하기 위해 사용

- src/component/ui 폴더에 작성

 

Button 컴포넌트 구현

•src/component/ui/Button.jsx

TextInput 컴포넌트 구현 - textarea 사용

•src/component/ui/TextInput.jsx

---

List 컴포넌트 구현하기

---

PostListItem 컴포넌트 구현 - 글 목록에서 개별 글에 해당

•src/component/list/PostListItem.jsx

PostList 컴포넌트 구현 - 글 목록

•src/component/list/PostList.jsx

CommentListItem 컴포넌트 구현 - 댓글 목록에서 개별 댓글에 해당

•src/component/list/CommentListItem.jsx

CommentList 컴포넌트 구현 - 댓글 목록

•src/component/list/CommentList.jsx

---

가짜 데이터 만들기

---

Backend에 해당하는 부분을 가짜 데이터로 대체

•블로그의 모든 기능을 구현하기 위해서는 데이터베이스 연동하는 서버 API 개발 필요

•서버 API 대신 가짜 데이터를 이용하여 Front-end 구현

•데이터 파일을 다운로드하여 src 폴더에 저장 (브라우저 오른쪽 버튼 - 다른 이름으로 저장)

https://raw.githubusercontent.com/soaple/mini-blog/master/src/data.json

---

Page 컴포넌트 구현하기

---

MainPage 컴포넌트 구현 - 블로그의 첫 페이지 (page/MainPage.jsx)

PostWritePage 컴포넌트 구현 - 글 작성 페이지 (page/PostWritePage.jsx)

PostViewPage 컴포넌트 구현 - 글 보기 페이지1 (page/PostViewPage.jsx)

PostViewPage 컴포넌트 구현 - 글 보기 페이지2 (page/PostViewPage.jsx)

---

각 페이지별 경로 구성하기

---

페이지 컴포넌트들을 URL 경로에 매핑해주기

react-router-dom

•리액트를 위한 라우팅(Routing) 라이브러리

•페이지의 새로고침 없이 페이지에 필요한 컴포넌트를 불러와 렌더링하여 보여주는 역할

•routing 예제

•useNavigate() hook - 페이지 이동 기능 제공

App.js 파일 수정

•index.js - 기본으로 App 컴포넌트를 렌더링

•App 컴포넌트에 routing 적용

:postId - 동적으로 변하는 파라미터

컴포넌트에서 useParams() hook을 사용해서 해당 값을 사용

---

애플리케이션 실행하기

---

npm start

---

Production 빌드하기

---

웹 애플리케이션의 최종 단계는 빌드(build)와 배포(deploy)

•Build

-작성한 코드와 애플리케이션이 사용하는 이미지, CSS 파일 등의 파일을 모두 모아서 패키징 하는 과정

-코드 식별을 어렵게 하는 난독화, 불필요한 공백이나 줄바꿈을 제거하는 축소 과정도 포함

-최종적으로 만들어진 파일은 build 폴더에 모이게 됨

 

•Build 명령

•생성된 빌드 파일을 이용하여 웹 애플리케이션 실행 (document root: build)

serve는 정적인 파일들을 서빙해주는 역할

serve 명령어가 없다고 나올 경우: npm install -g serve

 

•resources

-before build : 2.1MB / -after build : 224KB