있을때만 올리는 추후 확인용 자질구레한 팁

1. typescript 사용시 array type은

interface IProps {
  postList: Array<{ title: string; body: string; id: number }>;
}

이런 식으로 작성한다.

2. em, rem

em - em은 해당 엘리먼트의 글자 크기(font-size)에 비례한다.

예를 들어 어떠한 div 태그의 font-size가 10px 일 경우 div의 width 값을 2em으로 설정하게 되면 해당 div의 width 값은 20px이 된다.

해당 div의 font-size가 설정되어있지 않을 경우 부모에 해당하는 엘리먼트의 font-size를 상속받아서 사용한다.

em은 글자 크기에 영향을 받기 때문에 em을 사용하는 다른 속성 역시 글자 크기에 영향을 받을 수 밖에 없다. 또한 글자 크기는 상속이 기본 속성이라서, 나의 글자 크기가 변하지 않더라도 부모의 글자 크기가 변하면 또 복잡하게 일이 흘러갈 수도 있다.
그렇기 때문에 em은 꼭 필요한 경우에만 사용하는 것이 좋다.

rem - rem도 em과 마찬가지로 font-size에 비례하는 속성을 가지고 있지만, 다른 점은 HTML 의 글자크기만 참조한다.

계산하기 쉽게 참조 대상의 글자 크기를 10 픽셀로 맞춰놓고 진행하는 경우가 많다. html 태그의 경우, 브라우저 기본 설정 기준에서 기본 16 픽셀을 갖고 시작하는데 여기에 62.5% 를 곱해주면 10 픽셀로 맞춰놓고 시작할 수 있다.

html {
  font-size: 62.5%;
}

이렇게 설정하게되면 html 은 10 픽셀로 맞춰지게되고 하위 태그에서 rem 을 사용하는 경우 10 배수로 계산하면 되니 훨씬 편하다.