2022-02-09 TIL

Fact

• 프로그래머스 코드 리뷰 스터디 짤봇 미션 리팩토링을 했다.
• we-study 프로젝트 로그인을 해도 헤더의 로그인 버튼이 로그아웃으로 변하지 않는 문제를 해결했다.
• 퀴즈를 추가하면 이메일이 아니라 추가한 사람의 이름을 나타내도록 구현했다.
• 새로고침하면 로그인 상태가 날아가는 문제를 해결했다.

Feelings

• 이번에 recoil 을 사용해서 상태를 관리했는데, 또 다른 라이브러리가 아니라 진짜 react-hooks를 쓰는 느낌을 많이 받았다.

Findings

아래 코드를

// SearchInput.js
searchInput.addEventListener('keyup', function(e) {
  if (e.target.className === 'search-keyword') {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(function() {}, 200)
  }
})

아래 코드처럼 debounce함수를 새로 만들어서 리팩토링했다.

// SearchInput.js
searchInput.addEventListener(
  'keyup',
  debounce(e => {
    if (e.target.className === 'search-keyword') {
    }
  }, 500)
)

// debounce.js
export default function debounce(fn, ts) {
  let timer

  return (...args) => {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      fn(...args)
    }, ts)
  }
}

• firebase auth 기능은 이메일과 패스워드만 저장하는 기능을 제공한다. 그래서 사용자 정보 이름 등을 저장하려면 데이터베이스를 사용해야 한다. 그래서 나는 회원가입과 동시에 데이터베이스에 정보를 저장하도록 했고, 로그인 시 유저정보 상태를 전역으로 관리하도록 했다.
• 새로고침하면 로그인 상태가 날아가는 문제를 해결하기 위해 컴포넌트 최상단 App.js에서 컴포넌트가 리렌더링 되면 유저정보를 확인하고 없으면 다시 불러와서 상태를 관리하는 방법을 사용했다.

Future Action

• 시맨틱 하게 HTML을 짜야지 하는데 자꾸 div에 의존한다. 다양한 태그를 사용해야겠다.