Next.js로 생성한 프로젝트에 MongoDB 호스팅 데이터베이스를 연결했는데, 아래와 같은 오류가 발생하였다.
"Module not found: Can't resolve 'child_process'" 에러는 일반적으로 프론트엔드 코드를 실행할 때
Node.js 전용 모듈인 'child_process'를 사용하려고 할 때 발생한다.
보통 'child_process'는 서버 측에서 외부 프로세스를 실행하거나 시스템 명령을 실행할 때 사용되는데,
나는 프론트엔드 코드에서 이를 사용하려고 했고, 이를 대체할 수 있는 다른 방법을 찾아서 해당 부분을 수정해야 하는 것.
프론트엔드 코드와 DB를 연결하려고 했으니, API 라우팅을 사용하여 API 엔드포인트를 만들고, 프론트엔드에서는 해당 엔드포인트를 호출하여 데이터를 가져오는 방법으로 해결할 수 있었다.
'child_process'를 사용하는 코드를 수정하여 에러를 해결한 후, 프론트엔드에서 해당 API를 호출하여 데이터를 가져오도록 수정하면 된다.
*오류 해결 과정
원래 코드를 보면, 나는 List 컴포넌트에서 위 처럼 db 연결을 시도하고 있었다.
하지만 앞서 말했듯이 데이터를 가져오는 부분을 수정하여 API를 통해 데이터를 가져오도록 변경해야 했다.
1. 우선, pages 폴더/ api 폴더 밑에 posts.js 파일을 만들어 API 엔드포인트 코드를 작성했다.
req, res 파라미터를 받아 MongoDB의 forum이라는 이름의 데이터베이스 연결을 시도하고,
내가 필요한 데이터가 저장된 post 콜렉션을 불러와 해당 데이터를 변수에 담았다.
데이터를 가져오지 못 할 시 에러 로그를 띄우도록 했다.
2. 다시 List 컴포넌트에서는 Next.js의 getServerSideProps를 사용하여 서버에서 데이터를 가져오는 방법을 사용했다.
다시 한 번 DB 데이터를 불러오는 코드를 작성하고, posts라는 변수에 담아 List 컴포넌트에 props로 넘겨주었다.
3. 코드 수정 후, 콘솔 창에 posts 로그를 찍어본 결과, 아래 처럼 정상적으로 데이터를 받아 왔다.
Next.js를 시작한 지 얼마 안 돼서 그런지 문법이나 버젼 등 자잘한 곳에서 다양한 오류를 마주하고 있다.
React를 나름 오래 공부해서 Next.js 또한 익숙하다고 생각했는데, 숙련도 이슈로 꽤나 헤맸다.
또한 MongoDB도 처음 써 봐서 이번 오류를 해결하는데 꽤 애를 먹었고.. 그래도 꾸준히 방법을 찾아 해결하면서 이해도를 높여가고 싶다. 힘든 하루였지만 잘 마무리 해서 다행~
댓글