본문 바로가기
Next.js/이정환_Next.js

(1)이정환_Next.js_1_이론_사전랜더링vs클라이언트사이트렌더링, 실습용 백엔드 서버 세팅

by 코잼민 2025. 1. 30.

● 클라이언트 사이드 렌더링

○ 정의 : React.js의 웹사이트 프로젝트에 대해 프로그램이 작동 될때의 원리로 아래와 같이 6단계로 '유저' , '브라우저', '서버'간의 교류로 이루어진다.

● 클라이언트 사이드 렌더링 vs 사전랜더링 :

○ 사전 렌더링 정의 : 클라이언트 서버 렌더링의 FCP가 늦는다는 단점을 보완하는 렌더링 방식

○ 다음 페이지 교체 방식은 클라이언트 사이드 렌더링 방식을 채택하여, 페이지 교체 출력은 빠르게 가능해진다.

● 실습 백엔드 서버 세팅

○ 순서1_ 미리 세팅된 백엔드 서버의 github를 들어와 클론을 하든지, 다운을 받든지 하셈

https://github.com/winterlood/onebite-books-server

[GitHub - winterlood/onebite-books-server: onebite-books-server

onebite-books-server. Contribute to winterlood/onebite-books-server development by creating an account on GitHub.

github.com](https://github.com/winterlood/onebite-books-server)

○ 순서2_ 다운 받은 백엔드 파일 폴더로 VsCode 접속

○ 순서3_ 이 백엔드 파일을 사용할 서버를 선택해야함 //우리는 'supabase' + 'prisma' 스택으로 할것임 => Supabase 접속 후, 회원가입 ㄱㄱ

https://supabase.com/

[Supabase | The Open Source Firebase Alternative

Build production-grade applications with a Postgres database, Authentication, instant APIs, Realtime, Functions, Storage and Vector embeddings. Start for free.

supabase.com](https://supabase.com/)

○ 순서4_ 회원 가입 후, 'Create a new project' 탭에 들어간 후, 아래와 같이 설정한다.

★이떄, 어지간하면, 비밀번호의 소문자 + 특수문자없이 설정해라. (안그러면 나중에 힘듬)

○ 순서5_ project 생성 후, 위의 'Connect' 버튼을 누른 뒤, 'Session pooler' 항목의 안의 text를 복사한다.

○ 순서6_ 다시 VsCode에 접속 후, 백엔드 프로젝트 가장 상위에 [.env] 파일을 생성 뒤, 아래와 같이 DATABASE_URL 변수 생성후, 복사한 문자열을 "" String 형태로 대입한다.

DATABASE_URL = "postgresql://postgres.ogjzpfajpeprnbwmyoxw:[YOUR-PASSWORD]@aws-0-ap-northeast-2.pooler.supabase.com:5432/postgres"
//예시 :
DATABASE_URL="postgresql://postgres.ogjzpfajpeprnbwmyoxw:1234512345toto@aws-0-ap-northeast-2.pooler.supabase.com:5432/postgres"

§만약 password 까먹었거나, 재설정 필요한 경우, supabase 사이트 다시 들어가, 맨마지막 탭의 'project settings' > 'Database Stettings'항목의 Database password 항목으로 password 재설정 가능하다.

○ 순서7_ 다시 VsCode로 접속해, 터미널 창을 열어서, 아래의 명령어 순으로 의존성 설정

- 터미널 서버 초기화 작업 :

npx prisma generate
rm -rf node_modules package-lock.json
npm install

- supabase에다가 테이블 push하기

npx prisma db push

- supabase에 초기 데이터들 삽입하기

npm run seed

○ 순서8_ 이제 백엔드를 빌드하고, 실행해보기 => 이제 Localhost에서 api를 열고 확인이 가능해진다.

npm run build
npm run start

http://localhost:12345/api

● 참고1) 다른 방법으로 api 사이트 열어보기 : vsCode의 터미널 창에 아래와 같은 명령어 작성

npx prisma studio

● 참고2) 순서7에서 supabase와의 연동이 되지 않았을 시, 참고할 해결방법 :

Prisma가 Supabase의 PostgreSQL 데이터베이스에 연결하지 못하는 오류입니다.

🔍 가능한 원인과 해결 방법

1️⃣ Supabase 데이터베이스가 실행 중인지 확인

Supabase 데이터베이스가 일시적으로 다운되었거나 중지된 경우 발생할 수 있습니다.
✅ 해결 방법:

  1. Supabase 콘솔에 로그인
  2. 해당 프로젝트 선택
  3. Database → Status에서 DB가 정상적으로 실행되고 있는지 확인
    • Paused(중지됨) 상태라면 "Start" 버튼을 눌러 실행

2️⃣ 네트워크 문제 확인

로컬 환경에서 외부 PostgreSQL 서버(Supabase)에 접속하려면 네트워크 상태가 중요합니다.
✅ 해결 방법:

  1. 인터넷 연결 확인
  2. 터미널에서 PostgreSQL 연결 테스트
    • 응답이 오면 서버에 연결할 수 있음
    • 응답이 없으면 Supabase 서버 문제이거나 인터넷 문제
  3. ping aws-0-ap-northeast-2.pooler.supabase.com
  4. 직접 DB 연결 확인
    • psql: could not connect to server 에러가 발생하면 Supabase DB가 다운되었거나 방화벽 문제
  5. psql "postgresql://postgres.ogjzpfajpeprnbwmyoxw:junkim9612to@aws-0-ap-northeast-2.pooler.supabase.com:5432/postgres"

3️⃣ Supabase의 네트워크 및 방화벽 설정 확인

Supabase는 기본적으로 퍼블릭 데이터베이스 접근을 허용하지 않습니다.
✅ 해결 방법:

  1. Supabase 프로젝트로 이동
  2. Database Settings → Connection Pooling 확인
  3. SSL/TLS 설정 확인
    • Prisma의 DATABASE_URL에 ?sslmode=require를 추가하여 SSL 연결 시도:
    • DATABASE_URL="postgresql://username:password@host:port/dbname?sslmode=require"
    • 예시:
    • DATABASE_URL="postgresql://postgres.ogjzpfajpeprnbwmyoxw:junkim9612to@aws-0-ap-northeast-2.pooler.supabase.com:5432/postgres?sslmode=require"

4️⃣ 비밀번호가 변경되었는지 확인

만약 Supabase에서 DB 비밀번호를 변경한 경우 .env의 DATABASE_URL이 유효하지 않게 됩니다.
✅ 해결 방법:

  1. Supabase 콘솔 → Database → Connection Info에서 새로운 비밀번호 확인
  2. .env 파일의 DATABASE_URL을 최신 비밀번호로 업데이트

5️⃣ Prisma 캐시 삭제 후 재설정

기존 설정이 잘못 저장되었을 수도 있습니다.
✅ 해결 방법:

rm -rf node_modules/.prisma
npx prisma generate

6️⃣ 로컬에서 Supabase 연결 테스트

만약 로컬 환경에서 Prisma로 연결이 안 된다면,
직접 psql로 접속이 가능한지 테스트하세요.

psql -h aws-0-ap-northeast-2.pooler.supabase.com -U postgres -d postgres -p 5432

비밀번호 입력 후 접속할 수 있으면 Prisma 설정 문제일 가능성이 높습니다.

🔥 정리

  1. Supabase DB가 실행 중인지 확인
  2. 네트워크 연결 및 방화벽 문제 확인
  3. Supabase의 Connection Pooling 및 SSL 설정 확인
  4. .env에 올바른 비밀번호 및 SSL 설정 추가
  5. Prisma 캐시 삭제 후 다시 npx prisma generate 실행

이 방법들을 하나씩 시도해 보고, 그래도 문제가 있다면 추가적인 로그를 공유해 주세요! 😊🚀

● 참고3) 우리는 무료버전따리를 사용하기에, 7일이 지나면, 백엔드 서버 연동이 중단 될것임 => 다시 정지 해제 방법 :

- 최소 10분 ~ 1시간이 걸릴 수 있다.

- 복구 후, 다시 DashBoard로 들어가서 나의 project의 항목에 아래와 같이 텍스트가 나오면, 정지 풀림

저작자표시

'Next.js > 이정환_Next.js' 카테고리의 다른 글

(4)이정환_Next.js_3_Next.js_Next.js의 <Link>태그 사용 , useRouter로 nav기능 사용 //React랑 좀 다르다  (0) 2025.02.04
(3)이정환_Next.js_2_Next.js_search페이지(queryString 사용법,중첩페이지), book페이지(동적경로 페이지),catch All segment , optional catch All segment  (0) 2025.02.04
(2)이정환_Next.js_2_Next.js 초기셋팅  (0) 2025.01.31

관련글

티스토리툴바