> For the complete documentation index, see [llms.txt](https://equus3144.gitbook.io/ryan-s-lab/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://equus3144.gitbook.io/ryan-s-lab/til/2020-12-13-react.js-jwt-and-authentication.md).

# 2020-12-13 프론트엔드 프로젝트 : 시작 및 회원 인증 구현

React.js를 통해 배우는 프로젝트 설계

매일 TIL을 작성할 때 한 가지 문장을 포함해서 작성하자.

> ### *오늘의 나는 어제보다 성장했는가?*

자산가치만이 "어제보다 오늘 더 부자가 되었는지"를 판단하는 것이 아니다. 내 분야에 대한 가치를 성장시키는 것도 부자가 되는 길이다.

이 질문에 양심적으로 그렇다" 라고 답변하면, 성장한 것이고, "아니다"라고 하면 하루를 날린 것과 다름 없다

### React.js를 사용하면서 계속 헷갈렸던 부분 - 페이지 전환할 때 Route를 사용하던 것

별 것 아니지만, 페이지 전환할 때, 계속 Route를 사용하던 것이 헷갈렸다. \<a>태그 사용해서 html에서 전환하던 것을 생각하면, 왜 굳이 Route를 쓰나 싶었지만, \<a>태그를 사용하면 페이지 전체를 다시 렌더링 해야하는 리소스 낭비가 발생하며, 굳이 페이지 전체를 새로고침 할 필요가 없기 때문이다.

> 리액트는 변화가 있는 컴포넌트만 업데이트하여 효율적으로 성능을 관리하는 구조로, 페이지 이동 시에도 굳이 화면 전체를 새로고침 할 필요가 없기 때문이다. 사실 리액트 라우터 없이도 컴포넌트 업데이트를 통해 화면전환을 할 수 있다. 그럼에도 리액트 라우터를 사용하는 이유는 사용자에게 새로고침, 뒤로가기, 즐겨찾기 등의 기능을 제공하기 위함이다.
>
> [*React-router-dom 설명*](https://velog.io/@jiasong214/React-React-Router-DOM)&#x20;

```javascript
import React from 'react'
import {Route} from 'react-router-dom'
import PostListPage from './pages/PostListPage'
import LoginPage from './pages/LoginPage'
import RegisterPage from './pages/RegisterPage'
import WritePage from './pages/WritePage'
import PostPage from './pages/PostPage'

const App = ()=>{
  return(
    <>
    {/* path={['/@:username', '/']} 배열 형태로 경로를 넣으면 한 라우트 컴포넌트에 여러개의 경로를 설정 가능 */}
    {/* 유저 계정을 주소 경로로 넣어서 사용하는 medium, branch 등은 @를 사용하기도 함 */}
      <Route component={PostListPage} path={['/@:username', '/']} exact/>
      <Route component={LoginPage} path="/login"/>
      <Route component={RegisterPage} path="/register"/>
      <Route component={WritePage} path="/write"/>
      <Route component={PostPage} path="/@:username/:postId"/>
    </>
  )
}
```

너무 단순한 것을 정리해서 오늘 공부 제대로 했나 싶지만, 차근차근 밟아 나가자. 급하면, 결국 아무 것도 못한다.

그런데 공부량이 너무 적다.&#x20;

오늘 솔직히 똑바로 공부 안해서 스스로 학습량을 관리할 필요가 있다.