워크스페이스 만들기
1. gravatar
사용자 프로필 이미지를 등록하지 않은 사람들의 프로필 이미지를 특수한 도형이나 텍스트 등으로 대체 할 수 있는 라이브러리다. (feat. github)
$ npm i gravatar @types/gravatarnpm에서 패키지를 인스톨 할 때 javascript는 상관 없지만 typescript의 경우 @types를 붙여 타이핑 되어있는 패키지를 추가로 설치해줘야하는 경우가 있다.
그에 대한 확인 방법은 npm에서 확인이 가능하다.
DT 아이콘이 있는 경우엔 타이핑 되어있는 패키지를 추가로 설치 해야한다.
하지만 패키지의 원 제작자와 타이핑 되어있는 패키지의 제작자가 서로 다른 경우 간혹 타이핑이 맞지않는 경우가 발생 할 수 도 있어 그런 경우엔 타이핑 패키지를 삭제하고 직접 타이핑 해주어야한다.
TS 아이콘이 있는 경우엔 타이핑이 내장 되어있기 때문에 추가로 설치할 필요가 없다.
아무 아이콘이 없는 경우 직접 모두 타이핑을 해주어야한다.
// gravatar 예시
import gravatar from 'gravatar';
...
<img src="{gravatar.url('이메일', {옵션})}" />- 이메일은 해당 프로필 이미지를 사용하는 이메일을 작성.
- 옵션은 이미지의 사이즈, 디자인 등의 옵션이 있다. (공식문서)
2. 중첩라우팅
메인 라우트 안에서 새로운 라우트를 생성한다.
// app.tsx
const App = () => {
return (
<Switch>
<Redirect exact path="/" to="/login" />
<Route path="/login" component={Login} />
<Route path="/signup" component={SignUp} />
<Route path="/workspace" component={Workspace} />
</Switch>
);
};
export default App;
// Workspace.tsx
const Workspace: VFC = () => {
return (
<div>
<WorkspaceWrapper>
<Chats>
<Switch>
<Route
path="/workspace/channel"
component={Channel}
/>
<Route
path="/workspace/dm"
component={DirectMessage}
/>
</Switch>
</Chats>
</WorkspaceWrapper>
);
};
export default Workspace;다만 주의해야 할 점은 path의 상위 라우트와 같은 계층적 구조를 가져야 한다.
예를들어 App.tsx에서 Workspace의 path가 /workspace workspace 로 시작하는데 Workspace.tsx에서 하위 라우트의 path가/test/channel 이렇게 구조가 같지 않다면 렌더링 되지 않는다.
3. 라우트 주소 설계 및 라우트 파라미터
웹페이지들을 접속해서 보다보면 url뒤에 ?해서 특수한 데이터들을 보낼 수 있는데 이것을 쿼리 파라미터라고 한다. 리액트에서도 쿼리파라미터를 사용 할 수 있지만, 쿼리파라미터 이외에도 라우트에 파라미터를 만들어 동적 라우팅이 가능하다.
<Route path="/workspace/:workspace" component={Workspace} />동적 라우트는 라우트 주소에 :를 붙여 workspace라는 라우트 파라미터를 만드는 것이다.
여기서 주의할 점은 주소가 /workspace/list 라는 고정 라우트가 존재 하고 /workspace/:workspace 라는 동적 라우트가 따로 존재 하는 경우 항상 고정 라우트를 먼저 작성 해 주어야한다.
<Switch>
<Route path="/workspace/:workspace" component={Workspace} />
<Route path="/workspace/list" component={List} />
</Switch>위와 같이 작성을 하면 /workspace/list 이 라우트에는 걸리지 않는다. list라는 고정 라우트의 주소를 :workspace 파라미터로 인식하기 때문이다.
<Switch>
<Route path="/workspace/list" component={List} />
<Route path="/workspace/:workspace" component={Workspace} />
</Switch>그래서 항상 고정 라우트를 먼저 작성해 주자.
