[이슈] : 타입스크립트 프로젝트에서 require.context 사용하기

 

📋 내용 : 타입스크립트 코드에서 require.context를 인식하지 못하는 문제

Building a Blog with Next.js | CSS-Tricks

next.js 기반 블로그 튜토리얼을 따라가던 중, 이 부분에서 문제가 생겼습니다.

// api/index.ts
import matter from "gray-matter";

export async function getAllPosts() {
  // 타입스크립트로 프로젝트를 구성하면 이 부분에서 빨간 줄이 그어진다.
  const context = require.context("../_posts", false, /\.md$/);
  const posts = [];
  for (const key of context.keys()) {
    const post = key.slice(2);
    const content = await import(`../_posts/${post}`);
    const meta = matter(content.default);
    posts.push({
      slug: post.replace(".md", ""),
      title: meta.data.title,
    });
  }
  return posts;
}

require.context는 웹팩이 모듈을 탐색할 때 특정 경로에 존재하는 파일을 탐색하기 위한 함수인데요, 타입스크립트 프로젝트에서 사용하기 위해서는 추가적인 설정이 필요합니다.

🛠 해결책

타입스크립트 환경의 웹팩을 설치해주고, tsconfig.json에 명시해줍니다.

npm i @types/webpack-env @types/node -D

// tsconfig.json
{
  "compilerOptions": {
	... 다른 설정들 ...
    // types에 다음 항목들을 추가해줍니다.
    "types": ["node", "webpack-env"],
}

설치가 완료되면, context가 웹팩 모듈에서 불러온 프로퍼티임을 인식할 수 있게 됩니다.