YoungGyu Blog

2022-03-14 TIL

March 14, 2022

Fact

  • 퀴즈 옵션을 클릭하면 삭제, 수정할 수 있는 드롭 다운을 만들었다.
  • 퀴즈 옵션에서 삭제하는 기능을 구현했다.
  • 다크 모드로 변경하면 body의 class를 dark로 변경해 주도록 했었는데, useEffect depth를 잘못 설정해서 올바르게 작동하지 않던 문제를 해결했다.
  • YAPP 동아리 자기소개서 작성

Feelings

  • 오늘 왜 이렇게 피곤할까..

Findings

mongoose에서 생성한 데이터를 populate해서 가져오는 방법

let user = await User.create({ ... })
user = await user.populate('company').execPopulate()

외부 돔을 클릭했을때 모달을 닫는 방법

import { useState, useRef, useEffect } from 'react'

export const useVisible = initialIsVisible => {
  const [isVisible, setIsVisible] = useState(initialIsVisible)
  const ref = useRef(null)

  const ClickOutside = event => {
    if (ref.current && !ref.current.contains(event.target)) {
      console.log('응애')
      setIsVisible(false)
    }
  }

  useEffect(() => {
    document.addEventListener('click', ClickOutside, true)
    return () => {
      document.removeEventListener('click', ClickOutside, true)
    }
  }, [])

  return [ref, isVisible, setIsVisible]
}

Future Action

  • 알고리즘, 책 꾸준히
Lee YoungGyu