NextJS 빌드 에러NextJS에 Mysql를 사용하여, API를 통하지 않고 DB에서 직접 데이터를 가져오는 방식으로 서버 컴포넌트를 만들고 있었다. 'npm run dev'에서는 문제가 없이 잘 동작하였다.하지만, 'npm run build'를 하니 'Module not found: Can't resolve 'net', Module not found: Can't resolve tls' 에러가 나타났다. 아래는 에러 내용이다. > next build ▲ Next.js 15.2.4 - Environments: .env.local Creating an optimized production build ...Failed to compile. ./node_modules/mysql2/lib/aut..
NextJS
SSR이란 무엇인가요?SSR(Server Side Rendering)은 웹 애플리케이션의 초기 HTML을 서버에서 렌더링하여 클라이언트에 전달하는 방식입니다. 이를 통해 사용자는 초기 페이지 로딩 시 빠르게 콘텐츠를 확인할 수 있으며, 검색 엔진 최적화(SEO)에도 유리합니다. SSR의 동작 원리클라이언트 요청: 사용자가 웹 페이지를 요청합니다.서버 렌더링: 서버는 React와 같은 프레임워크를 사용하여 HTML을 생성합니다.HTML 전달: 생성된 HTML과 JavaScript 번들을 클라이언트에 전송합니다.Hydration: 클라이언트는 전달받은 HTML을 기반으로 React 컴포넌트를 활성화하여 동적 기능을 추가합니다.이 과정에서 서버와 클라이언트 간의 렌더링 결과가 일치하지 않으면 Hydration..
이전 단계에서는 **Next.js 서버 컴포넌트(Server Components)**를 통해 데이터베이스에 직접 접근함으로써 API 호출 과정 없이 빠른 데이터 로딩을 구현했습니다.이번에는 데이터가 지연될 때 사용자 경험(UX)을 어떻게 개선할 수 있는지 살펴봅니다.비동기 환경 구성: async/await 도입 및 지연 시뮬레이션better-sqlite3는 원래 동기적(synchronous) DB 라이브러리입니다. 하지만 로딩 UI 설명을 위해, 아래처럼 인위적으로 2초의 지연 시간을 추가하여 비동기 상황을 시뮬레이션합니다.lib/news.jsimport sql from 'better-sqlite3';const db = sql('data.db');// 동기 DB 접근이지만, UX 설명을 위해 비동기처럼 ..
Next.js 13 이상에서는 React 서버 컴포넌트(RSC) 덕분에, 별도의 API 서버 없이 서버에서 직접 데이터베이스에 접근할 수 있습니다.이 글에서는 SQLite와 MySQL을 예시로, 안전하게 서버 컴포넌트에서 DB를 다루는 방법과 장점을 그림과 함께 정리했습니다. 왜 별도 API 서버를 제거해야 할까?서버를 두 개 운영하는 경우, 특별한 이유(예: 마이크로서비스, 레거시 API 통합)가 없다면 불필요한 HTTP 왕복이 발생하여 성능이 떨어집니다.장점설명HTTP 왕복 제거서버 → 서버 → DB 요청 없이, 서버 컴포넌트에서 바로 데이터 조회코드 단순화데이터 로직이 한 프로젝트 안에서 관리되어 배포와 유지보수가 쉬움단, 외부 API 호출이나 마이크로서비스 구조에서는 여전히 별도의 API 서버가 ..
이전 포스트에서 useEffect를 사용한 클라이언트 측 데이터 페칭 방식을 살펴보았습니다. 이 방식은 React에서 일반적이지만, Next.js의 진정한 장점을 활용하는 최적의 방법은 아닙니다.Next.js에서는 모든 페이지 컴포넌트가 기본적으로 React 서버 컴포넌트(RSC)로 작동하며, 이를 활용하여 데이터를 서버에서 직접 가져올 수 있습니다. 이 방법을 통해 코드가 훨씬 간결해지고, 중요한 이점을 얻을 수 있습니다. 1. 서버 컴포넌트 데이터 페칭 코드 예시와 변화서버 컴포넌트 방식을 사용하면, 클라이언트 컴포넌트에서 필수였던 useState와 useEffect를 모두 제거하고 코드를 극적으로 간결하게 만들 수 있습니다. a. 코드 구조: async 키워드와 직접 fetchNewsPage 컴포..
Next.js 프로젝트에서 별도로 구동 중인 백엔드 API 서버의 데이터를 클라이언트 컴포넌트에서 가져오는 방법에 대해 알아봅니다. 이 방식은 일반적인 React 애플리케이션의 데이터 페칭 방식과 동일합니다. 1. 서버 구성 및 준비데이터를 가져오기 전에, 백엔드 서버와 Next.js 서버가 각각 별도의 터미널에서 실행 중이어야 합니다.서버실행 명령어기본 주소백엔드 API(backend 폴더에서) npm starthttp://localhost:8080Next.js(frontend 폴더에서) npm run devhttp://localhost:3000* Next.js 앱의 컴포넌트에서 백엔드 주소 http://localhost:8080/news로 요청을 보낼 것입니다. 2. 클라이언트 컴포넌트에서 데이..
해당 블로그는 Udemy Max 강사의 NextJS 강의 중 일부를 요약한 내용입니다. - https://www.udemy.com/course/nextjs-react-the-complete-guide/?couponCode=KEEPLEARNING 사용자가 "/some-route" 경로로 요청을 보냈다고 가정해보자. 순수 React에서 동작 방식 Response로 비어있는 HTML 파일과 JavaScript 코드를 전달하고, JavaScript 코드가 클라이언트에서 실행된다. JS 코드가 실행되면서 서버에서 데이터를 가져와 화면상에 무언가를 나타나게 된다. 랜더링이 클라이언트에서 시작되며, DOM 구조 이외에 필요한 모든 데이터는 클라이언트에서 다시 서버로 요청을 보내어 Load되기 때문에 시간이 걸릴 수 ..
1. 아래의 명령어를 입력하여, SQLite 패키지를 설치한다. npm install better-sqlite3 2. Root 경로에 파일을 생성하고 아래의 코드를 입력한다. 파일 이름은 "initdb.js"이라고 지었다. const sql = require('better-sqlite3'); const db = sql('meals.db'); const dummyMeals = [ { title: 'Juicy Cheese Burger', slug: 'juicy-cheese-burger', image: '/images/burger.jpg', summary: 'A mouth-watering burger with a juicy beef patty and melted cheese, served in a soft b..
바닐라 React 바닐라 React를 사용한다면 Client Component를 사용하는 것이다. React는 순수 Client 사이드 라이브러리이기 때문이다. NextJS NextJS는 풀스택 프레임워크이다. 프론트엔드뿐 아니라 백엔드를 가지고 있으며, 코드 또한 백엔드에서 실행된다. NextJS에서 모든 pages, layouts, components는 Server에서 랜더링된다. 이것이 React Server Components라고 불리는 이유이다. 서버 컴포넌트는 NextJS에서 기본 값으로 적용된다. 즉, NextJS에서 Component를 만들면 브라우저에서 실행되지 않고, 서버에서 실행된다는 것이다. 따라서 서버 컴포넌트에 console.log를 작성해보면 브라우저에서 실행되는 것이 아니기..
NextJS에서는 최적화된 이미지 컴포넌트를 별도로 제공한다. https://nextjs.org/docs/pages/api-reference/components/image Components: | Next.js Optimize Images in your Next.js Application using the built-in `next/image` Component. nextjs.org 상기 링크로 들어가보면 굉장히 많은 옵션이 존재하는데 해당 블로그에서는 필수 사용법만 정리하겠다. 기본 사용법 상기는 일반적인 img 태그 적용예시이다. 상기는 Next 이미지 컴포넌트를 적용한 예시이다. import에 'next/image'가 추가된 것을 확인할 수 있고, 'src' 구분이 삭제 되었다. 일반적으로 별도의 ..
