웹 폰트

그동안 웹 폰트는 CDN으로만 해왔는데(어제 적용한 방법도 CDN이었다!), 외부 링크로 연결된 파일의 다운로드가 완료되지 않았으면 브라우저가 해당 자원을 사용하는 콘텐츠의 렌더링을 차단할 수 있다고도 한다. 이번 기회에 직접 Local로 다운로드해 폰트파일을 적용해보도록 하자!

NanumBarunGothic.woff2

원본 웹 폰트파일을 더 경량화해서 배포해주는 고마운 사이트를 발견했다. woff2가 기존 WOFF에 비해 30~50% 정도 더 압축되어 훨씬 가볍다고 해 woff2로만 다운로드 받았다.(어차피 IE는 이제 유물)

public 폴더 아래 fonts 폴더를 생성하고 그 안에 .woff2파일을 넣었다.

//src/styles/globalStyle.ts
import { css } from '@emotion/react';
import emotionReset from 'emotion-reset';

const GlobalStyle = css`
  ${emotionReset}
  @font-face {
    font-family: 'myFont';
    src: url('/fonts/NanumBarunGothic.woff2');
  }

(다른내용의 css코드들)
export default GlobalStyle

Tada~!

글로벌 폰트 단위 적용 에러

글로벌로 적용한 font-size:10px이 안먹혀서 계속 스타일에서 1rem으로 작성하는게 16px으로만 나왔다. 뭐가 문제지...생각하다가 font를 inherit으로 작성했다는 걸 몇시간만에 깨달았다. 고작 한줄 앞에 썼을 뿐이지만 역시 순서는 중요해...

굳이 font:inherit은 없어도 될 것 같아서 지우고 나니 잘 해결되었다!

동영상 플레이어

ReactPlayer

홈페이지 안에 에드의 Dusty 뮤직비디오를 넣고 싶었다. 찾다보니 ReactPlayer라는 라이브러리를 알게 되었고, 공식문서를 보니 굉장히 코드가 깔끔했다. 그동안은 그냥 유명한 라이브러리면 아무 궁금증 없이 사용하곤 했는데, 이번 기회에 라이브러리 선택 기준에 대해서 정리해놓은 글을 봐서 한번 공부해보았다.

• 잘 정리된 문서: 코드도 굉장히 깔끔했고, 사용법도 자세하며, 예제가 5줄 미만이었다.

• 유지보수: 마지막 업데이트가 5달 전이었다. 예전에 팀플할 때 2년전이 마지막 업데이트였던 라이브러리도 있었는데...ㅋㅋㅋ 5달 오케이!

• fork 횟수/ star 횟수: 1.1k fork, 8k star였다. 뭐야.. 인기쟁이 라이브러리였군.

• issue의 개수: 222개였고,(참고로 emotion은 211개, react는 1054개였다) 개발자가 피드백을 긍정적으로 받아들이는가..의 여부는 잘은 모르겠었다.

  사실 라이브러리를 이렇게 생각하고 써본 적이 처음이라, 오늘만 봐서는 잘은 모르겠다. 계속 이렇게 고민해나가다보면 점차 나만의 기준을 만들어나갈 수 있겠지..!

오늘의 작업결과

(동영상 재생도 포함해 gif 만들었더니 벨로그 업로드에 계속 오류가 나서 재생은 못 보여주는걸루....😔)

참고사이트: 글로벌 스타일 적용 by huni velog
[React] 프로젝트에 동영상을 넣고싶어요 by eassy
어떤 JS 라이브러리를 사용해야 할까요? by Khan Academy

오늘의 일기:
벨로그에 사진이나 영상을 올리다보니 이미지 크기 조절해주는 사이트나 .mov를 .gif로 바꿔주는 사이트를 알게 됐다.
이미지 크기 조절 사이트
gif로 변환해주는 사이트
다른 사이트와 다르게 ezgif.com은 동영상 편집도 사이트 내에서 할 수 있어서 좋았다. 근데 .gif로 변환하는 건 너무 오래 걸려서 8282 한국인은 속이 터지는 건 어쩔 수 없다 히히...