TIL

Safari

사파리에서 full view-height 구현하기

사파리에서는 상태표시줄로 가려진 부분까지를 view-height로 계산함
따라서 상태표시줄을 제외한 형태를 보려면 추가 스타일 코드 필요

@supports (-webkit-touch-callout: none) {
    height: -webkit-fill-available;
  }

0629 : update

Git

git 대소문자 구분하기

Git에서 대소문자 변경을 감지하려면 설정을 바꿀 수 있다.
git config core.ignorecase false
캐시가 남아 remote 환경에서는 적용되지 않을 수 있으니
gir rm -r --cached . 후 다시 add-commit-push로 변경을 적용해줌.

Media Query & Styled-Component

emotion의 styled로 미디어쿼리 구현하기

기존에 useMediaQuery 훅을 사용했지만, styled 파일 내부에서 사용하는게 좋을 것 같다고 생각했다.
다만 사용할 때마다 @media (min-width: 000px) {}를 반복하는 것은 비효율적.

media.js 파일에 원하는 형태의 기기 사이즈와 media 조건 string을 객체로 담아두고, export 한다.

const size = {
  desktop: 1000px,
  mobile: 400px
}

const media = {
  desktop: `(min-width: ${size.desktop})`,
  mobile: `(min-width: ${size.mobile})`
}

export default media

media 객체만 import해서 @media ${media.mobile} {}과 같은 방식으로 사용

@media 를 포함한 string을 사용하거나 브레이크 포인트를 배열로 갖는 방식도 있지만 가독성이 저해될 것 같아 이정도로 리팩토링 해보았다.

0630 : update