DO MY BEST

바로 라우트 파라메터의 예를 들어보면 다음과 같다.

<Route path="/workspace/:workspace" component={Workspace} />

:workspace 이부분은 자유롭게 값을 바꿀 수 있다.

만약

<Route path="/workspace/space” component={Workspace} />
<Route path="/workspace/:workspace" component={Workspace} />

이렇게 같이 있으면 반드시 파라메터 아닌것을 밑에 써줘야한다. 왜냐하면 모든값을 받을 수 있는 파라메터이기 때문에 파라메터만 인식하기 때문이다.

저런 parameters를 가져올 때는 useParams 훅을 사용한다. 

const { workspace } = useParams<{ workspace: string; }>();

/api/workspaces/${workspace}/channels

이러한 식으로 가져올 수 있다.

💡 임의의 이미지를 넣어주는 기능을 한다.

설치

npm i gravatar @types/gravatar

사용 예

<ProfileImg src={gravatar.url(data.email,{ s:'28px', d:'retro'})} alt={data.nickname} />

※ s = 사이즈    d = default image

다음은 d에 들어갈 수 있는 목록들 이다.

프론트앤드 입장에서 내가 로그인 했다는 사실을 어떻게 알 것인가?

보통 로그인이 성공하면 내 정보를 서버에서 갖다준다. 그 정보가 밑의 그림과 같다. 로그인을 하면 이 데이터를 프론트에서 갖고있다가 로그아웃이 되면 버린다.

이 데이터를 저장하려면 Redux가 필요하다. 이 때 state에서 저장하면 되지 않냐는 질문이 나올 수 있다. 

그러나 “state에서는 하나의 component에서만(로그인 컴포넌트에서만) 저장이 된다.” 이렇게 되면 다른 컴포넌트에서 로그인 되었다는 사실을 모르게 되어서 정상적인 웹페이지가 안된다. 

그래서 컴포넌트를 넘나들면서 로그인되었다는 데이터를 갖고 있어야 한다. 이것을 하기 위해서 Redux가 필요하지만, 대안으로 context api, swr이 있다.

※ 쿠키는 항상 백앤드에서 생성을 해준다. 그래서 프론트앤드가 기억을 하게끔 만들어주고 프론트앤드에서 한번 기억한 쿠키를 매 요청마다 백앤드로 보내준다.