7월 2주차 기록

배워가기

CSS 이모저모

• CSS pseudo class focus-visible
  • :focus와 달리, 요소에 키보드로 접근 시에만 이펙트를 주고 싶을 때 사용한다.
• CSS isolation
  • z-index를 별도의 stack에서 관리할 수 있다.

Ref

• https://www.daleseo.com/css-focus/
• https://developer.mozilla.org/en-US/docs/Web/CSS/isolation

CSS 프로퍼티의 초깃값(Initial Value)

• 스펙에 명시된 기본값
• 상속되는 프로퍼티냐 아니냐에 따라, 초깃값 사용여부가 결정된다.
  • 상속되는 프로퍼티 (inherited properties)
    • 초깃값이 root 에만 적용된다
  • 상속되지 않는 프로퍼티 (non-inherited properties)
    • 초깃값이 모든 element에 적용된다.

예시

• color
  • 초깃값은 canvastext
  • 상속됨 -> 초깃값이 root에만 적용된다.
• background-color
  • 초깃값은 transparent
  • 상속 안됨 -> 초깃값이 모든 element에 적용된다.

초깃값으로 지정하기 initial 키워드를 사용해 명시적으로 초깃값을 지정할 수 있다.

pnpm catalog

모노레포의 dependency를 고정해준다.

# pnpm-workspace.yaml

packages:
  - packages/*

# Define a catalog of version ranges.
catalog:
  react: ^18.3.1
  redux: ^5.0.1

pnpm --filter

• pnpm --filter ...foo test

  • foo와 foo에 의존하는 패키지들의 test 실행

• pnpm --filter "...^foo" test

  • foo에 의존하는 패키지들의 test 실행

Protocol-Relative URL (//)

e.g. @import url(//atelier-assets.baemin.com/font/css/SpoqaHanSansNeo.css)

• 현재 페이지의 프로토콜에 따라 폰트 파일을 가져온다.

  • 그래서 http일 수도 https일 수도 있다.

• 언제 쓸까?

  • Mixed Content 차단 경고를 피하는 데 유리

• 언제 안쓸까?

  • 보안이 중요한 경우, https://로 명시하는 것이 적합

이것저것 모음집

• TypeORM의 getCount()는 그룹화된 쿼리(groupBy(), having() 등)에서는 예상치 못한 결과를 반환할 수 있다.
• <form> 태그의 id와 <button> 태그의 form 을 연결하여 <form> 밖에 <button>이 있더라도 submit button을 연결할 수 있다
• React에서 setState 호출 시 기존과 같은 값을 넘기면 리렌더링이 되지 않는다.

기타공유

…

마무리

장마가 지나가는 듯 했더니 바로 폭염주의보다. 초복을 앞두고 삼계탕을 먹었는데, 닭과 함께 나도 쪄지고 있다.

그리고 다음주는 다시 장마다!

비가 쏟아지기 전 덥지만 고즈넉했던 삼청동에서 7월의 마지막이 될지 모르는 데이트를 즐기며… 🫠