블로그 만들기 v2
Contentlayer에서 깃허브 스타일(starry-night)로 코드블럭 하이라이트
문제 처음 마크다운 스타일을 적용할 때, Contentlayer에서 제공하는 예시를 따라 highlight.js를 이용하여 코드블럭을 하이라이팅 했다. 작동은 잘 됐지만 아쉬운 점이 있었다. GitHub Actions에 관한 글을 썼는데, workflow를 작성할 때 사용하는 yml 파일의 하이라이팅이 깃허브와 달랐다. highlight.js - yml
Utterances로 깃허브 페이지(Next.js)에 댓글 기능 만들기
Utterances 블로그에 댓글 기능을 추가하려고 알아보다가 utterances라는 좋은 앱을 발견했다. 깃허브의 이슈를 데이터베이스처럼 사용하여 댓글 기능을 사용하게 해주는 앱이다. 오픈소스이고 완전 무료이다. 백엔드가 없는 상황에 정말 딱 맞는 앱이었다. 오픈소스이다. 추적이 없고, 광고가 없다. 항상 무료. lock-in이 없다. 모든 데이터는 깃
퍼센트(%)로 인코딩된 URL 깔끔하게 정리하기
배경 게시판 이름은 게시글을 담은 폴더의 이름으로 설정했다. 그랬더니 띄어쓰기나 특수문자가 있을 경우 %가 들어간 문자로 변환이 되어버렸다. paulcjy.github.io/blog/GitHub%20Pages%20+%20Next.js/12-sticky-header 그래서 띄어쓰기나 특수문자를 -로 변경해서 URL을 깔끔하게 만들고 싶었다. 이것을 퍼센트
GitHub Actions로 배포 자동화
자동화를 시도한 이유 개발 코드와 배포 코드가 다르다보니 새로운 기능을 추가할 때마다 매번 별도로 배포를 해야 했다. 초반에는 npm run deploy만 실행하면 돼서 간단했는데, 여러 기능이 추가되면서 문제가 발생했다. /out 디렉토리를 개발 코드에 포함시켜야 한다. .gitignore로 제외하면 배포 시에도 제외되어 정상적으로 배포되지 않는다. n
[Next.js]빌드 에러: Warning Assign arrow function to a variable before exporting as module default import no-anonymous-default-export
Next.js에서 page.tsx에 이름 없이 arrow function만 사용했다. 어차피 이름은 사용되지 않고 export default가 페이지 컴포넌트로 사용되기 때문이다. export default () => { return ( ... ) } 개발 서버에서는 잘 작동했지만, 빌드할 때는 에러가 발생했다. no-anonymous-default
[Next.js]Error: Page ~ is missing param ~ in generateStaticParams(), which is required with output export config
게시판 이름을 그대로 URL에서 사용하다보니 URL에 특수문자가 포함되는 경우가 생겼다. 특수문자가 URL에 포함되지 않을 때는 next.config.js에 output: 'export' 설정이 있든 없든 개발 서버가 잘 실행되었다. 하지만 URL에 특수문자가 들어가니 output: 'export' 설정을 추가한 상태로 개발 서버를 실행(npm run de
헤더(메뉴바) 뒤로 내용이 비치게 하기 - CSS opacity, blur
투명도(opacity) opacity는 0에서 1 사이의 값을 가진다. opacity는 불투명도라는 뜻이라서 0은 완전 투명, 1은 완전 불투명을 의미한다. CSS에서는 opacity: 0의 형식으로 지정할 수 있다. 숫자도 가능하고 퍼센트(%)도 가능하다. opacity: 0.9; opacity: 90%; tailwind에서는 색상 뒤에 /를 쓰고 0~1
헤더(메뉴바) 상단에 고정하기
CSS에서 position: sticky로 설정하면 된다. tailwind에서는 className에 sticky와 top-0을 추가한다.
encodeURI와 encodeURIComponent
문제 상황 게시판, 게시글의 url이 잘 작동하다가 'GitHub Pages + Next.js'라는 이름의 게시판을 만드니 작동하지 않았다. 폴더명을 그대로 url로 만들어서 url에는 인코딩 된 폴더명(게시판 이름)이 사용되었다. 그래서 게시글을 찾을 때는 게시판 이름 부분을 디코드 해서 필터 함수로 비교했는데, 콘솔에 출력해보니 결과가 다음과 같았다.