오늘 한 일
- 블로그 만들기
블로그
우여곡절 끝에 어느정도 틀을 잡았다. 확실히 chakra-ui를 쓰니 빠르게 개발할 수 있었고 tailwindcss가 필요없을 것 같다. 그냥 chakra로 다 할 수 있을 것 같다.
이슈 1
remark-gfm과 contentlayer의 호환성 문제가 있었다. remark-gfm 라이브러리가 한동안 업데이트 안되다가 갑자기 저번주에 4.0.0으로 올려서 이런 에러가 뜬다.
TypeError: Cannot read properties of undefined (reading 'inTable')
처음엔 뭔지 몰라서 어디서 에러가 나는지 체크하기 위해 mdx 파일을 하나씩 지워가면서 확인했다. 백틱 쓰는 곳에서 에러나는 건 확인했는데 정확한 원인을 몰라 contentlayer 이슈 들어갔더니 나랑 같은 문제를 겪는 사람이 있었다. 이슈
이거 보고 그냥 remark-gfm을 다운 그레이드 했다.
이슈 2
빌드가 안된다.
블로그에서도 같은 이슈가 있었는데, swcMinify를 false로 두면 된다고 한다.
한글을 swc가 읽지 못해서 그런 것 같다. 그래서 swcMinify를 false로 두고 빌드했더니 빌드가 되었다.
이슈 3
next에서 제공해주는 것들(ex Image, Link 등 )을 chakra ui에서도 사용할 수 있는 chakra-ui/next-js를 사용했다.
next의 Image는 필수적으로 width, height가 들어가야하고 number 타입이어야 한다. 그럼 만약 40, 40을 넣으면 40px, 40px로 들어가는 것이다.
근데 chakra-ui/next-js의 Image에서도 동일하게 40, 40을 넣으면 40px, 40px로 들어가는 것이 아니라 40rem, 40rem으로 들어간다..
이게 css에서 chakra-sizes-40로 들어가서 그렇다. 그래서 sizes의 40을 40px로 읽히게 하려고 theme을 커스텀했는데, 이러면 chakra에서 제공하는 다른 ui 컴포넌트들이 깨져버린다. 그래서 그냥 Next의 Image를 사용하고 스타일이 필요하면 style 속성을 넣거나 fill 속성 넣어서 외부에서 스타일을 주는 방식으로 해야할 것 같다.
내일 할 일
- 블로그 퍼블리싱