2023-01-18 TIL

📌 오늘 한일

프론트엔드 데브코스(DAY 68)

• 팀프로젝트 진행
• auth 관련 디자인
• notification 추가 기능 및 디자인
• 404 페이지 추가
• 닉네임 최대 길이 설정 및 로그인 시 email 중복 확인 기능 제거

📌 배운 것

rem

• 나는 이제까지 CSS 작업을 할 때 크기 단위를 px를 사용했었다.
• 이번 프로젝트를 하기전에 CSS 과제에서 px를 사용했었는데 멘토님께서 rem를 사용하는 것이 좋다고 하셔서 팀원들과 상의를 한 후 rem를 도입했다.
• 처음에 rem 단위나 일일이 입력하는 것이 px보다 어려웠는데 멘토님께서 px단위에서 바로 rem으로 수정되도록 하는 vscode extension(px to rem)을 알려주셔서 편하게 사용했다.

존재하지 않는 경로

• 존재하지 않는 페이지에 접속했을 때 404 Error 페이지를 render 해야하는 상황이었다. 하지만 나는 어떻게 하면 존재하지 않는 페이지를 Router가 catch 하는지에 대해 몰랐다.
• 구글링을 해보니 어렵이 않아 쉽게 사용할 수 있었다.

// Router.tsx

<Route path='/*' element={<NotFound />} />

📌 어려웠던 점

email 중복 확인 제거

• 처음에는 로그인 시에 이미 접속해 있는 유저라면 로그인이 되지 않도록 하고 싶었다. 하지만 아래의 고민 이후 제거를 하기로 결정했다.

1. 내가 로그인 하고 있을 때 다른 사람에게 이미 로그인 되어 있다고 render 하는 기능 구현 x => 내가 로그인 한지 5분후에 isonline 값이 false(서버 특성상 어쩔 수 없음)가 되어서 다른 사람도 로그인할 수 있음
2. 1번 기능을 구현한다고 가정했을 때 해당 유저가 로그인 한 시점에서 5분 안에 로그아웃 및 다시 로그인을 하면 안되는 문제가 발생
3. 결론은 1번 기능을 구현한다고 해도 내가 로그인 후 5분 안에만 1번 기능이 유효하니까 중복 check 제거

📌 한줄평

오늘도 수고했어.