8시간의 사투: ‘post.render is not a function’ 오류 해결기

개발자에게 오류는 숙명이지만, 어떤 오류는 개발자를 집어삼키려 합니다. 오늘 제가 마주한 post.render is not a function과 Unable to render Content because it is undefined!라는 두 오류가 바로 그랬습니다. 이 녀석들과의 사투에 저는 꼬박 8시간을 바쳐야 했습니다.

평화로운 오후, 어둠의 서막

모든 것은 평범한 오후에 시작되었습니다. 로컬 개발 서버에서는 아무 문제 없이 잘 작동하던 블로그 프로젝트. 배포를 위해 빌드를 실행하는 순간, 터미널에 낯선 빨간 글씨가 나타났습니다. 'post.render is not a function'.

“render 함수가 없다고? 분명 getCollection으로 가져온 콘텐츠 객체에는 render() 함수가 있는데?”

처음에는 대수롭지 않게 생각했습니다. 사소한 오타이거나, 잘못된 import 문제일 거라고요. Astro 공식 문서, 스택오버플로우, 온갖 개발 블로그를 뒤지며 제시된 해결책들을 하나씩 적용해봤습니다. 하지만 오류는 요지부동이었습니다.

절망의 늪: 'Content is undefined' 너마저…

post.render 문제를 어떻게든 우회해보려 코드를 수정하자, 이번에는 더 절망적인 오류가 저를 맞이했습니다. 'Unable to render Content because it is undefined!'.

Astro.props로 post를 넘겨줬고, 페이지 컴포넌트에서 post.Content를 사용하려 했는데 Content가 undefined라니. 이건 또 무슨 소리인가. 컴포넌트 임포트 경로, getStaticPaths의 props 전달 방식, 페이지의 구조 분해 할당까지… 의심되는 모든 코드를 열고, 수정하고, 저장하기를 수십 번. 린트 오류는 쉴 새 없이 저를 비웃는 듯했습니다.

시간은 속절없이 흘렀습니다. 점심을 먹고 시작한 사투는 어느덧 저녁 8시를 향하고 있었습니다. 8시간 동안 같은 문제에 매달려있다는 사실이 믿기지 않았습니다. 지쳐가는 정신과 함께 ‘오늘은 포기해야 하나…’ 하는 패배감이 온몸을 감쌌습니다.

한 줄기 빛: 다시, 공식 문서로

거의 모든 것을 포기하려던 순간, 마지막 지푸라기라도 잡는 심정으로 Astro 공식 문서의 ‘콘텐츠 컬렉션(Content Collections)’ 가이드를 처음부터 끝까지 다시 정독하기 시작했습니다. 단어 하나하나를 곱씹으며 읽어 내려가던 중, 마침내 결정적인 문장을 발견했습니다.

getStaticPaths에서 반환된 post 객체는 페이지로 전달됩니다. 그런 다음 post.render() 함수를 사용하여 렌더링할 수 있습니다. 이 함수를 호출하면 렌더링된 콘텐츠와 메타데이터에 대한 액세스 권한이 있는 객체가 반환됩니다.

바로 이것이었습니다. 저는 getStaticPaths에서 넘겨받은 post 객체에 Content 컴포넌트가 바로 포함되어 있을 것이라 착각했던 것입니다. Content는 post를 render() 함수로 한 번 더 처리해야만 얻을 수 있는 결과물이었습니다.

마침내 동이 트다

깨달음을 얻자마자 코드를 수정했습니다. src/pages/[...slug].astro 파일의 스크립트 영역에 단 한 줄을 추가했을 뿐입니다.

// ... getStaticPaths, getCollection 등 ... const { post } = Astro.props; const { Content } = await post.render();
// 바로 이 부분!

<!-- 이제 Content를 마음껏 사용할 수 있다! -->
<Content />

떨리는 마음으로 다시 빌드 명령어를 실행했습니다. 그리고… 마침내! 오류 메시지 없이 빌드가 성공하고, 웹사이트에 정상적으로 글이 렌더링되는 것을 확인했습니다. 8시간 동안 저를 괴롭혔던 어둠이 걷히는 순간이었습니다.

삽질 요약: 저처럼 고생하지 마세요

글을 마치며

이번 8시간의 삽질은 고통스러웠지만, Astro의 콘텐츠 처리 흐름을 뼈저리게 이해하는 계기가 되었습니다. getStaticPaths, Astro.props, 그리고 render() 함수의 역할을 명확히 알게 된 것이 가장 큰 수확입니다.

이 글이 저와 같이 사소한 착각으로 인해 긴 디버깅의 늪에 빠진 분들께 작은 등불이 되기를 바랍니다. 그리고 기억하세요. 공식 문서는 언제나 가장 정확한 답을 알고 있습니다.

#8시간 #Astro빌드 #오류해결기 #개발자일상 #삽질엔딩 #뿌듯