post

posts/Web/GitHub Pages + Next.js/15-url-percent-encoding.md

@@ -0,0 +1,43 @@
+---
+title: 퍼센트(%)로 된 URL 깔끔하게 정리하기
+created: 2023-12-10 23:05:00
+tags:
+---
+
+# 배경
+
+게시판 이름은 게시글을 담은 폴더의 이름으로 설정했다. 그랬더니 띄어쓰기나 특수문자가 있을 경우 `%`가 들어간 문자로 변환이 되어버렸다.
+
+```
+paulcjy.github.io/blog/GitHub%20Pages%20+%20Next.js/12-sticky-header
+```
+
+그래서 띄어쓰기나 특수문자를 `-`로 변경해서 URL을 깔끔하게 만들고 싶었다.
+
+> 이것을 [퍼센트 인코딩][1]이라고 한다. URL에서 특정 의미를 갖는 문자를 `%`를 사용하여 인코딩한다. 인코딩이 필요한 특수문자는 `:`, `/`, `?`, `#`, `[`, `]`, `@`, `!`, `$`, `&`, `'`, `(`, `)`, `*`, `+`, `,`, `;`, `=`, `%`, ` `이다.
+
+# Contentlayer 속성 추가
+
+게시판이나 게시글의 URL은 폴더와 파일의 이름을 contentlayer의 속성으로 추가하여 만들었다. 기존에는 이름을 그대로 가져와서 속성으로 사용했기 때문에 URL을 변경하려면 이 단계에서 수정해야 했다.
+
+게시판 이름은 메뉴 이름으로도 사용해야 하기 때문에 URL용 속성과 메뉴용 속성을 따로 만들었다.
+
+```ts
+const board = post._raw.sourceFileDir
+  .split('/')[1]
+  .replace(/[:/?#\[\]@!$&'()*+,;=% ]+/g, '-')
+```
+
+폴더 이름(게시판 이름)을 가져온 뒤, 퍼센트 인코딩이 되는 문자 20개를 `-`로 변경했다. 또한, 단순히 특수문자를 `-`로만 변경하면 변경할 문자가 연속적으로 나타나는 경우 불필요하게 `-`가 반복되기 때문에 연속적인 특수문자는 전부 한 개로 치환하도록 했다.
+
+# 메뉴 변경
+
+`menu.ts`는 게시판 정보를 담당한다. 폴더 이름(게시판 이름)을 두 개로 나눠서 `name`에는 원래 문자열을 그대로 저장하고, `id`에 URL로 사용할 문자열을 저장했다.
+
+`name`은 메뉴 컴포넌트를 만들 때 사용하고, `id`는 URL을 만들 때와 게시판/게시글을 찾을 때 사용한다.
+
+# 페이지 변경
+
+`[board]/page.tsx`와 `[board]/[post]/page.tsx`에서 한 개만 사용하던 게시판 이름을 경우에 따라 `name`과 `id`로 나누어 사용하는 것으로 변경했다.
+
+[1]: https://developer.mozilla.org/ko/docs/Glossary/Percent-encoding 'MDN: Percent-encoding'

posts/Web/GitHub Pages + Next.js/16-uri-component.md

@@ -0,0 +1,32 @@
+---
+title: encodeURI와 encodeURIComponent
+created: 2023-11-20
+tags:
+---
+
+# 문제 상황
+
+게시판, 게시글의 url이 잘 작동하다가 'GitHub Pages + Next.js'라는 이름의 게시판을 만드니 작동하지 않았다. 폴더명을 그대로 url로 만들어서 url에는 인코딩 된 폴더명(게시판 이름)이 사용되었다. 그래서 게시글을 찾을 때는 게시판 이름 부분을 디코드 해서 필터 함수로 비교했는데, 콘솔에 출력해보니 결과가 다음과 같았다.
+
+`GitHub Pages + Next.js` > `GitHub%20Pages%20%2B%20Next.js` > `GitHub Pages %2B Next.js`
+
+`+`는 `%2B`로 인코딩 되었지만, 디코딩 했을 때는 그대로 `%2B`였다.
+
+# encodeURI와 encodeURIComponent의 차이점
+
+[stackoverflow: What is the difference between decodeURIComponent and decodeURI?][1]
+
+- `encodeURI`/`decodeURI`는 url 전체를 인코딩/디코딩하는 함수이다.
+- `encodeURIComponent`/`decodeURIComponent`는 url의 한 부분만 인코딩/디코딩하는 함수이다. 구분자(`;`, `/`, `?`, `:`, `@`, `&`, `=`, `+`, `$`, `#`)를 모두 인코딩/디코딩한다.
+
+따라서, `encodeURIComponent`/`decodeURIComponent`를 사용하면 위 구분자들도 전부 문자열로 취급해서 인코딩/디코딩 해버린다.
+
+# 원인
+
+`decodeURI`를 사용해서 생긴 문제였다. `decodeURI`는 구분자 `+`를 디코딩하지 않았다.
+
+# 해결 방법
+
+`decodeURI` 대신 `decodeURIComponent`를 사용한다.
+
+[1]: https://stackoverflow.com/questions/747641/what-is-the-difference-between-decodeuricomponent-and-decodeuri

posts/Web/GitHub Pages + Next.js/17-missing-param-in-generateStaticParams.md

@@ -0,0 +1,15 @@
+---
+title: '[Next.js]Error: Page ~ is missing param ~ in generateStaticParams(), which is required with output export config'
+created: 2023-11-21
+tags:
+---
+
+게시판 이름을 그대로 URL에서 사용하다보니 URL에 특수문자가 포함되는 경우가 생겼다. 특수문자가 URL에 포함되지 않을 때는 `next.config.js`에 `output: 'export'` 설정이 있든 없든 개발 서버가 잘 실행되었다. 하지만 URL에 특수문자가 들어가니 `output: 'export'` 설정을 추가한 상태로 개발 서버를 실행(`npm run dev`)하니 이런 에러가 떴다.
+
+```
+Page ~ is missing param ~ in generateStaticParams(), which is required with output export config'
+```
+
+해결하려고 시도했지만 방법을 찾을 수 없어서 개발과 배포를 분리하기로 했다. 개발 중에는 `output: 'export'` 설정을 없애고, 배포(build와 export)할 때만 이 설정을 추가했다.
+
+이렇게 하니 개발 도중에 불필요한 `/out` 폴더가 매번 생성되지 않는 점은 좋았다.

posts/Web/GitHub Pages + Next.js/18-anonymous-default-export.md

@@ -0,0 +1,25 @@
+---
+title: '[Next.js]빌드 에러: Warning Assign arrow function to a variable before exporting as module default import no-anonymous-default-export'
+created: 2023-11-23
+tags:
+---
+
+Next.js에서 `page.tsx`에 이름 없이 arrow function만 사용했다. 어차피 이름은 사용되지 않고 `export default`가 페이지 컴포넌트로 사용되기 때문이다.
+
+```ts
+export default () => {
+	return (
+		...
+	)
+}
+```
+
+개발 서버에서는 잘 작동했지만, 빌드할 때는 에러가 발생했다. no-anonymous-default-export인 것을 보니 이름을 꼭 붙여야 하는 것 같다. 그래서 이름을 붙이고 그냥 함수로 바꿨다.
+
+```ts
+export default function Page() {
+	return (
+		...
+	)
+}
+```