8주차 (2024.11.25)

프로젝트 (감정 일기장)

1. 프로젝트 기획 및 준비

감정을 포함한 일기를 작성할 수 있는 웹 서비스 

• 외부 폰트 사용
• 불러온 이미지 사용 및 최적화
• 다양한 페이지를 제공
• 공통 컴포넌트로 UI 요소 모듈화
• 복잡한 데이터 다루기
• 리액트 앱을 실제로 배포

 

 

2. 페이지 라우팅

페이지 라우팅이란 경로에 따라 알맞은 페이지를 렌더링 하는 과정이다.

MPA 방식

서버가 사용자들에게 제공할 여러개의 페이지를 미리 가지고 있는 방식을 '여러 개의 페이지를 갖는 어플리케이션이다' 라는 뜻에서 MPA(Multi Page Application)라 한다. 이런 방식에서 브라우저가 새로운 페이지를 요청했을 때 서버측에서 미리 완성해 놓은 HTML 파일을 보내주면 브라우저가 그것을 그대로 렌더링하는 방식은 '서버측에서 페이지를 미리 렌더링 해준다' 라고 해서 Sever Side Rendering 이라고 한다.

MPA는 동작 방식이 매우 직관적이기 때문에 현재까지도 많은 서비스들이 이용하는 전통적인 방식이다.

해당 방식은 페이지의 이동을 빠르게 처리하기 어렵기 때문에 ReactJS는 이 방식을 따르지 않는다.

  -  페이지 이동이 매끄럽지 않고 비효율적임

  -  다수의 사용자 접속 시, 서버의 부하가 심해짐

리액트 앱은 SPA(Single Page Application) 방식으로 작동한다. 이 방식에서는 사용자가 링크나 버튼을 클릭해서 페이지 이동이 발생하게 된다면 새로운 페이지를 매번 서버에게 요청보내지 않고 처음 접속할 때 서버로부터 받았던 리액트 앱을 이용해 자체적으로 브라우저 내에서 새로운 페이지에 필요한 컴포넌트들로 화면을 교체한다.

 

2.1. 라우팅 설정하기

React Router란 npmjs.com에 등록외어 있는 대표격 라이브러리이다.

terminal 창에서 npm i react-router-dom을 입력하여 react router dom을 설치한다.

 

2.2. 페이지 이동

 

<a> 태그를 사용할 경우 리렌더링이 발생하므로 <Link> 훅을 사용하는 것을 추천한다.

 

2.3. 동적 경로

동적 경로란 동적인 데이터를 포함하고 있는 경로를 뜻한다. 

• URL Parameter: 아이템의 id 등 변경되지 않는 값을 주소로 명시하기 위해 사용됨 (e.g. ~/product/1, ~/product/2, ~/product/3)
• Query String: 검색어 등의 자주 변경되는 값을 주소로 명시하기 위해 사용됨 (e.g. ~/search?q=검색어)

URL Parameter	Query String

 

 

2.4. 폰트, 이미지 레이아웃 설정하기

vite가 내부적으로 진행하는 이미지 최적화 설정때문에 public에 폰트를, assets에 이미지를 저장한다.

 

 

2.5. 공통 컴포넌트 구현하기프로젝트 개발 순서는 사람마다 다르기 때문에 공통 컴포넌트를 먼저 구현한다.