✔️ 페이지 라우팅 0 - React SPA & CSR

  • ROUTER : 데이터의 경로를 실시간으로 지정해주는 역할을 하는 것
  • ROUTE+ING : 경로를 정해주는 행위 자체와 일련의 과정들을 포함
  • 웹 서버가 요청에 명시되어 있는 경로에 따라 알맞은 페이지를 선택하고 그 페이지를 반환해서 사용자가 페이지에 접속
  • MPA(Multipage Application) : 여러 개의 페이지를 가지고 있다가 요청에 따라 적절한 페이지 반환
  • 리액트 : SPA(Singlepage Application), CSR(Client Side Rendering) 방식

 

✔️ 페이지 라우팅 1 - React Router 기본

  • React Router : https://reactrouter.com/en/main
  • npm install react-router-dom@리액트버전
  • ex. <BrowserRouter><Routes><Route path="/" element={<Home />} /></Routes></BrowserRouter> <RouterTest />
  • SPA는 <a> 태그 대신 컴포넌트를 통해 이동
  • 페이지를 이동하기 보다 컴포넌트가 바꿀 페이지를 바꿔 끼우는 형식

 

✔️ 페이지 라우팅 2 - React Router 응용

  • REACT ROUTER V6 : REACT에서 CSR 기반의 페이지 라우팅을 할 수 있게 해주는 라이브러리 
  • 1. Path Variable : useParams - 전달받아서 들어오는 Path Variable을 객체로 반환  ex. localhost:3000/diary/1
  • 2. Query String : useSearchParams - 웹 페이지에 데이터를 전달하는 가장 간단한 방법  ex. /edit?id=10&mode=dark
  • 3. Page Moving : useNavigate
  • 사용자 정의 Hook(Custom Hooks) : 리액트가 제공하는 Hook은 아니지만, 라이브러리가 자신의 라이브러리를 조금 더 편하게 쓸 수 있게 제공하는 Hook

 

✔️ 프로젝트 기초 공사 1

  • 1. 폰트 세팅 : Google Web Fonts를 이용해서 프로젝트에 사용되는 폰트 세팅(오픈 폰트 라이센스 / Google Fonts)
  • 2. 레이아웃 세팅 : 모든 페이지에 반영될 레이아웃 세팅
  • 3. 이미지 에셋 세팅 : 감정 이미지를 프로젝트에서 불러와 사용할 수 있는 환경 세팅
  • 4. 공통 컴포넌트 세팅 : 모든 페이지에 공통으로 사용되는 버튼, 헤더 컴포넌트 세팅
  • process.env.PUBLIC_URL : 어느 위치에 있던 public url을 가리키게 됨(절대 경로)

 

✔️ 프로젝트 기초 공사 2

  • 1. 상태 관리 세팅하기 : 프로젝트 전반적으로 사용될 일기 데이터 State 관리 로직 작성하기
  • 2. 프로젝트 State Context 세팅하기 : 일기 데이터 State를 공급할 Context를 생성하고 Provider로 공급하기
  • 3. 프로젝트 Dispatch Context 세팅하기 : 일기 데이터 State의 Dispatch 함수를 공급할 Context를 생성하고 Provider로 공급하기

 

✔️ 페이지 구현 - 홈 (/), 일기 쓰기 (/new), 일기 수정 (/edit), 일기 상세 (/diary)

 

 

✔️ (서브 챕터) 흔히 발생하는 버그 수정 하기

  • Dummy Data를 사용하는 경우, useRef(초기값)은 더미 데이터의 개수 + 1 이어야 자식 컴포넌트 추가 시 id가 중복되는 문제를 해결할 수 있음
  • lastday로 마지막 일자를 지정하는 경우 시, 분, 초(23 59 59)까지 지정해야 마지막 일자 필터 가능

 

✔️ LocalStorage를 일기 데이터베이스로 사용하기

  • 자바스크립트의 State가 갖는 값은 유지 되기 힘듦, 휘발성
  • Web Storage API : https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API
  • sessionStorage : 웹 브라우저가 유지되는 동안
  • localStorage : 브라우저를 닫았다 열어도 유지, 캐시를 지워야 사라짐
  • localStorage.setItem("key", value); -> 문자열로 저장 
  • 배열, 객체는 직렬화해서 저장 -> JSON.stringify({ key: value });
  • localStorage.getItem("key"); -> number 타입과 같은 경우 parseInt
  • 직렬화된 객체를 자바스크립트 객체로 복원 -> JSON.parse( localStorage.getItem("key") );

 

✔️ 프로젝트 최적화

  • 정적 최적화 : 코드 리뷰
  • 동적 최적화 : 도구 이용 -> React Developer Tools - Highlight updates when components render.
  • React.memo : 컴포넌트를 React.memo의 인자로 전달하면 강화된 컴포넌트 반환(고차 컴포넌트), 전달받는 Prop의 값이 바뀌지 않으면 렌더링이 일어나지 않도록 Memoization
  • 사용자 정의 함수(ex. 핸들러 함수)가 아니라, useState를 통해 반환받는 setData와 같은 함수들은 렌더링이 되었을 때에도 동일한 ID 보장(useCallback 처리가 됨, 재사용)

 

✔️ 배포 준비 & 프로젝트 빌드하기

  • Web Application 타이틀 변경 : pubic/index.html
  • <title> 변경하고자 하는 제목 </title>
  • <meta name="description" content="사이트 설명" />
  • <html lang="ko">
  • 페이지를 이동할 때 마다 타이틀 변경 : document.getElementByTagName('title')[0].innerHTML = "변경하고자 하는 제목";
  • 사이트 아이콘 변경 : public/favicon.ico
  • 공백 제거 등 필요한 파일만 압축 -> 빌드 npm run build
  • 빌드를 통해 압축된 형태로 배포 : npm install -g serve -> serve -s build
  • 에러 발생 시 ctrl+c로 shutdown 후 rebuild

 

✔️ Firebase로 프로젝트 배포하기

 

✔️ Open Graph 설정하기

  • index.html <meta propery> 속성을 지정하여 카카오톡과 같은 채팅방에 미리보기 창 설정 

 

 

참고) 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

 

 

'React' 카테고리의 다른 글

트위터 클론코딩  (0) 2023.01.08
리덕스 기본 개념 : Redux Essentials Tutorial  (0) 2022.11.21
React 기본 - 간단한 일기장 프로젝트  (0) 2022.10.05
React.js 기초  (0) 2022.10.02
Node.js 기초  (0) 2022.10.02

+ Recent posts

티스토리툴바