nextjs 블로그만들기과정 -2 mdx 파일 오류 해결하기

issue

어쩌다보니 윈도우와 맥 둘다에서 블로그만들기를 작업하고있었는데 생각치 않은 오류가 발생했다...!
콘솔로 확인해보니 문제가 발생한 부분은 getAllPostsPath 부분이였다.

문제 1.
윈도우에서 작업했을때는 파일 경로가 예를들어 'posts/2022/12/06/test.mdx'로 잘 나왔는데 맥에서 확인해보면 절대경로가 posts앞에 다 생기는 오류. 그래서 slug와 일치하지 않는 문제
아마도 유닉스계열과 윈도우 계열의 운영체제가 달라 생기는 문제 같았다.
문제 2.
경로가 역슬래시 'posts\2022\12\06\'로 호출

기존코드

export async function getAllPostsPath():Promise<Slugs[]>{
  const postPaths = sync(`${POST_PATH}/**/*.mdx`);
  const paths = postPaths.map((postPath) => {
      return{
          slug: path.replace(/\\/g, '/').replace('.mdx','')
      }
  })
}

원래의 기존코드에서는 해당되는 모든 파일들을 읽어와서 처리해준뒤 slug를 해당 파일들에 넣었던 코드인데 여기서도 역슬래시가 나와서 replace메서드를 사용했었다.

경로가 맞지 않는 이슈가 있어서 바꾼코드는 이렇다 !

수정된 코드

	export async function getAllPostsPath(): Promise<Slugs[]> {
      try {
        const postPaths = globSync(`${POST_PATH}/**/*.mdx`);

        return postPaths.map((filePath) => {
          let relativePath = path.relative(POST_PATH, filePath);
          // 2023/08/test.mdx 
          // 2023/08/blog.mdx
          relativePath = relativePath.replace(
            new RegExp("\\" + path.sep, "g"),
            "/"
          );
          relativePath = relativePath.replace(/\.mdx$/, "");
          return {
            slug: `posts/${relativePath}`,
          };
        });
      } catch (error) {
        console.error("path error", error);
        return [];
      }
    }

path.relative ?

• 어떤 경로를 기준으로 다른 경로의 상대 경로를 알고싶은 경우에 사용한다.
• node.js의 path 모듈인 relative(from,to) 메서드는 두개의 파일 경로를 인자로 받아서 첫번째경로('from')에서 두번째 경로('to')로 가는 상대적인 경로를 계산한다.

const path = require('path');

const fromPath = '/home/user/project';
const toPath = '/home/user/project/src/index.js';

const relativePath = path.relative(fromPath, toPath);

console.log(relativePath); // src/index.js

예시코드로 'home/user/project'에서 '/home/user/project/src/index.js'로 가는 상대적인 경로를 계산하고 src/index.js 가 출력된다.

const BASE_PATH = "/posts";
const POST_PATH = path.join(process.cwd(), BASE_PATH);

POST_PATH는 /posts를 기준으로 전체파일들의 경로를 읽어와주고 (from) ,두번째 인자는 globSync로 파일패턴을 사용해서 mdx파일을 찾아준다(to).

음 posts디렉토리에 내가 만든 전체 파일의경로를 읽어와서 mdx파일들을 찾아준다는 뜻이다.
relativePath를 출력해보면 현재 있는 폴더가 출력되어 결론적으로 내가 원하는 상대적인 경로를 얻을수있는것 같다.

path.join과 glob패키지에서 제공하는 sync및 globSync에 차이에 대해 정리를 해보자면

path.join과 sync및 globSync 의 차이

• path.join은 단순히 경로를 결합하는데 사용된다. 파일을 찾거나 검색하지 않는다.
• globSync 및 sync는 파일 패턴을 사용해 파일을 찾거나 검색한다.

결론적으로 relativePath의 결과물에서 역슬래시를 replace해주고 역슬래시 이슈에 대해서는 정규표현식을 사용해 파일 경로에서 운영체제에 따라 다른 경로 구분자를 모두 슬래시('/')로 변경해준다.

  relativePath = relativePath.replace(
    new RegExp("\\" + path.sep, "g"),
    "/"
  );

마지막으로 .mdx확장자를 빈 문자열로 대체해 제거해주기만 하면 된다.!

다행이 오류 없이 파일 경로들을 잘 가져와서 이슈들을 텍스트해결했다. 휴 ㅎ
콘솔과 함께한 오늘이였다 ㅎ 휴