11월 2주차 기록

배워가기

react-hook-form의 watch

• 특정 input 값의 변화를 관찰하기 위해 사용

• default value, 전체 watch, 여러 개의 input을 넣을 수 있다

  Copy

  const watchShowAge = watch("showAge", false) // you can supply default value as second argument
  const watchAllFields = watch() // when pass nothing as argument, you are watching everything
  const watchFields = watch(["showAge", "age"]) // you can also target specific fields by their names

• 관찰을 해지할 수 있는 unsubscribe 를 반환한다

  Copy

  useEffect(() => {
    const { unsubscribe } = watch((value) => {
      console.log(value)
    })
    return () => unsubscribe()
  }, [watch])

styled-components의 theme 활용하기

styled-components에서 theme 에 미리 정의된 스타일도 넣을 수 있다

// src/styles/theme.ts

export const theme: DefaultTheme = {
  // ... 
  lineClamp: () => `
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  `,
};

// 가져다 쓸 때 
export const _DescFlexWrapper = styled.div`
  ${({ theme }) => theme.lineClamp()}
}

Ref https://velog.io/@sammy1101/CSS-SCSS와-styled-component의-mixin-그리고-사용법-소개

JavaScript의 fetch를 사용할 때 await을 두번 하는 이유는

첫번째 await은 네트워크의 헤더를 수신하고 두번째 await은 네트워크의 바디를 수신하기 때문이다

const response = await fetch() // 첫번째 await
const data = await response.json() // 두번째 await

Ref JavaScript fetch 메서드는 왜 2번 await 해야만 할까?

이것저것 모음집

• git stash pop 으로 날려버린 stash 복구하기 (Ref)

마무리

때론 내가 선택했더라도 인생의 모든 순간은 정말 어찌 될지 모르는 일

그 과정 과정에서 모든 걸 다 취할 순 없기에, 현명한 선택과 포기를 하는 일이 어른으로써 가장 어려운 일 중 하나인 것 같다 🤷‍♀️