환경 : React에서 MD파일로 List 구성하기 위한 fetch 사용

포트폴리오 사이트 (hwan2272.github.io) 를 개발시 Project 란의 아이템 구성을 내부 MD파일을 불러와 구성하였다.

포트폴리오 사이트는 정적 사이트로서 api 통신 등을 하지 않는 것을 목적으로 하기 때문에, 사이트의 컨텐츠를 내부 파일들로 구성이 가능한지 고려하다가 md파일로 구성할수 있는 방법을 고안하게 되었다.

구글링 해보니 React에서는 MD파일을 불러오기 위한 방법은 일단 상단에 import 선언이 존재한다.

import 선언 후, useEffect단에서 fetch를 사용하면 내부 내용을 불러올수 있다.

import mdFile from './md파일명' // 내부 존재하는 파일을 import 할 수 있다

...

useEffect(() => {
	...
	fetch(md파일) // fetch 하여 파일을 읽고
		.then((res) => res.text) // res에서 text를 반환하면, 내용이 나오게 된다.
		.then((text) => ...
}

이 방식을 적용하여 내가 진행한 프로젝트 12개의 항목을 모두 가져와서 List를 구성하여 사용하였다.

테스트

포트폴리오 사이트는 vite + React + typescript의 환경으로 개발되어 있다.

프론트단의 코드 테스트를 위하여 @testing-library/react 와 jest , 그리고 vitest 를 적용하고 있다.

이 코드 테스트는 현재는 element의 여부를 체크하는 정도로 사용하고 있다.

예시)

...

test("Layout Element Check : [Header] : site-title", () => {
  render(<Header />);
  const headingElement = document.querySelector("h1");
  expect(headingElement).toHaveClass("site-title");
  expect(headingElement).not.toBeNull();
});

...