[Next.js]url에 특정 문자열 삽입하기

Next.js로 블로그 프로젝트를 진행중 게시글 상세페이지에 게시물제목을 url에 포함시키고싶었다.
예를들어
http://localhost:3000/detail/1 이라면
http://localhost:3000/detail/블로그제목 이런식으로 말이다.

처음엔 게시물id값을 query로 전달한 다음 as키워드로 블로그제목을 넣어줬다.
그럼 정상적으로 http://localhost:3000/detail/블로그제목 이렇게 적용이 되는데
문제는 새로고침시 query값이 사라져서 id값으로 데이터를 불러오지 못했던 것이다.

그래서 다른 방법을 생각하던중에 내린결론은 애초에 블로그제목값으로 db데이터를 조회하는쪽으로 진행하기로 했다.

문제 1

만약 제목에 공백이나 특수문자가 들어가면 url에는 %20 이런식으로 치환되었다.
이게 보기불편해서 공백이나 특수문자를 "-"로 바꿔주었다.

아래 코드는 정규표현식을 이용하여 공백과 특수문자를 "-"로 치환한 코드이다.

changeHyphen(string) {
    // 공백과 특수문자를 "-"로 치환
    const regex = /[\s\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]+/g;
    const regex2 = string.replace(regex, '-');
    const title = regex2.replace(/-$/, '');
    return title;
  },

그리고 db에 새로운컬럼을 생성하여 "-"로 치환된 제목을 넣어주고 이값으로 db조회를 하였다.

문제 2

제목값으로 db데이터를 조회하려고보니 동일한 제목이 있을 경우 정상적으로 조회할 수가 없었던 것이다.
그래서 게시물을 등록할 때 동일한 제목이 이미 있으면 영문과숫자가 포함된 난수 6자리를 뒤에 붙여 주었다.

예를들어
제목1
제목1-3edf1q
이런식으로 되게끔 말이다.

아래 코드는 영문숫자 6자리난수 생성 코드이다.

randomStr() {
    return Math.random().toString(36).substring(2, 8);
  },

 

😂 에러

TypeError: Request path contains unescaped characters

제목값으로 api요청을 해보니 이런 에러가 발생하였다.

알고보니 주소값에 한글이 들어가서 생기는 오류라고 한다.
해결방법은 간단한데 요청 url 주소를 encodeURI() 함수로 감싸주면 해결된다!

 request.get(encodeURI(`/post/detail/${data}`)).then((res) => res.data),

이렇게 해주니 새로고침을 해도 url에 적힌 제목값으로 데이터를 조회하게되니 에러가 생기지않았다.