2022-02-20 TIL

Fact

프로그래머스 신고 결과 받기 문제를 풀었다.

전역상태에 있는 user 정보 유무로 로그인 상태를 확인했는데, 새로고침이나 로그인시 app.ts에서 로그인 정보를 확인하고 서버로부터 맞는 데이터를 가져오는 시간때문에 해당 화면이 로그인된 상태가 늦게 출력되는 문제를 해결하려고 로그인이 성공하면 로컬스토리지로 바로 로그인 상태를 인지하도록 했다. 결론은 최상위 컴포넌트가 랜더링 될때마다 firebase 로그인 여부를 확인하는 함수, 로컬스토리지 로그인 상태를 확인하는 함수, 로그인된 유저가 바뀔때마다 그 상태를 전역상태로 다시 저장하는 함수를 생성했다.

또한 로그인 유저를 확인하는 방법도 변경했다. 기존에 유저 데이터를 가져올때 email을 보내던 방식에서

axios.defaults.headers.common['Authorization'] =
  'Bearer ' + (await user.getIdToken())

axios로 요청을 보낼때 헤더 Authorization에 firebase auth토큰을 담아서 보내고 서버에서 토큰에 담긴 json데이터를 확인후 objectId에 맞는 유저정보를 보내도록 했다.

회원가입할 때 유저 _id에 firebase.authtoken을 넣어주었고, 퀴즈를 가져오거나 생성할때 유저_id로 populate를 사용해 퀴즈 데이터를 가져오기, 생성하기 작업을 수행했다.

Feelings

• 분명 1레벨 문제인데 문제를 제출한 사람은 3천명 정도다. 다른 1레벨 문제는 18000 정도인데 푸는데 시간이 1시간 이상 소모되었고, 풀긴 했지만 1렙 문제는 아닌 것 같다.
• 컴포넌트를 더 작게 추상화? 하기위해서 아토믹 디자인을 고려하고있다. 근데 찾아보고 물어본 결과는 아토믹 디자인은 좋은점과 안좋은점이 명확하게 존재한다고 한다. 말로는 느끼기 어려우니 직접 몸으로 느껴보자.

Findings

• Context는 리액트에서 데이터를 전역적으로 관리해야 할 때 사용한다. 자주 쓰이는 예로는 현재 로그인한 유저, 테마 등이 있다. 앞서 언급한 대로 Context는 전역(Global)값이고, 여러 단계로 nesting된 컴포넌트에 데이터를 전달하는 것이 목적이기 떄문에 props를 통해 전달할 필요가 없다. 그런데 이때 Context를 사용하게 되면 재사용이 어려워지기 때문에 꼭 필요할 때만 사용해야 한다.
• Bearer는 JWT 혹은 OAuth에 대한 토큰을 사용한다는 의미다.

Future Action

• 중복되는 함수를 줄이자.
• 버튼에 css 이벤트를 추가하자. 웹사이트가 딱딱하다는 느낌이 든다.