넥스트3 [Next.js] Module not found: Can't resolve 'child_process' 오류 원인 및 해결 Next.js로 생성한 프로젝트에 MongoDB 호스팅 데이터베이스를 연결했는데, 아래와 같은 오류가 발생하였다. "Module not found: Can't resolve 'child_process'" 에러는 일반적으로 프론트엔드 코드를 실행할 때 Node.js 전용 모듈인 'child_process'를 사용하려고 할 때 발생한다. 보통 'child_process'는 서버 측에서 외부 프로세스를 실행하거나 시스템 명령을 실행할 때 사용되는데, 나는 프론트엔드 코드에서 이를 사용하려고 했고, 이를 대체할 수 있는 다른 방법을 찾아서 해당 부분을 수정해야 하는 것. 프론트엔드 코드와 DB를 연결하려고 했으니, API 라우팅을 사용하여 API 엔드포인트를 만들고, 프론트엔드에서는 해당 엔드포인트를 호출하여 .. 2024. 2. 28. [Next.js] 페이지 라우팅 웹 사이트를 구성할 때 홈 화면 뿐만 아니라 주제에 따라 여러 페이지를 이동하게끔 만드는 것이 일반적인 특징이다. 이번 포스팅에서는 Next.js에서 페이지를 이동하는 라우팅 방법에 대해 설명 해보려고 한다. *페이지, URL 만들기 우선 기본 웹사이트 주소는 http://localhost:3000 이다. 쇼핑몰 웹사이트를 만든다는 가정 하에 상품 목록 페이지를 따로 만들려고 한다. localhost:3000/list 라는 주소를 입력받거나 바로 이동할 시에 페이지를 띄우게끔 설정해보자. 1. pages 폴더 밑에 내가 만들 URL 이름의 폴더를 만든다. (localhost:3000/list를 입력했을 때 생성되는 페이지라면 list라는 폴더를 만든다.) 폴더를 만듦과 동시에 해당 이름의 URL이 생성되.. 2024. 2. 26. [Next.js] Next.js 설치와 세팅 Next.js는 프론트엔드 + 백엔드 까지 풀 스택 개발이 가능한 프레임워크로 잘 알려져있다. 나는 React로 프론트엔드 기능과 UI 코드를 짜고 Spring Boot로 만든 백엔드 서버와 연동하는 방식의 프로젝트를 경험하였는데, Next.js를 새롭게 배워보면서 서버 사이드 렌더링과 풀 스택 개발 경험을 쌓기로 하였다. 우선, 서버 사이드 렌더링이 왜 필요한가? 묻는다면 React나 Vue 라이브러리를 활용한 클라이언트 사이드 렌더링 사용시 요즘 많은 앱과 웹사이트들 처럼 UI 디자인이 예쁘고 부드러운 사이트는 만들 수 있지만 첫 페이지 로딩 속도 저하, 검색 노출 어려움 같은 단점이 존재한다. 이는 상업적인 이익을 내야하는 웹사이트에는 치명적이라고 볼 수 있다. 서버 사이드 렌더링을 사용하면 서버에.. 2024. 2. 26. 이전 1 다음
