1. 백엔드 서버 다운로드
- 실습용 백엔드 서버 링크에 접속하여 리포지토리를 로컬에 다운로드합니다.
- 압축 해제한 폴더를 VS Code에서 엽니다.
2. Supabase
1) 회원가입
- Supabase에 접속합니다.
- Start your project - Sign up now - 원하는 방식으로 회원가입을 합니다.
- 저는 깃허브 계정과 연동시켰습니다.
- 대시보드가 나타나면 성공적으로 로그인된 것입니다.
- 이제 최대 2개의 데이터베이스를 무료로 생성할 수 있습니다.
2) 데이터베이스 생성
데이터베이스를 생성합시다.
아래 항목을 입력합니다:
- 조직: 개인 프로젝트용이므로 임의의 값을 입력했습니다.
- 프로젝트명: 'onebite-books'라고 강의대로 정했습니다.
- 비밀번호: 강력한 비밀번호 생성 버튼으로 만든 뒤 메모장에 저장해둡시다.
- 지역: (물리적 거리는 가까울수록 좋으므로) Seoul을 선택합니다.
- 데이터베이스가 성공적으로 생성되었습니다.
3) 커넥션 스트링
(1) 커넥션 스트링 확인
- 이제 백엔드 폴더와 데이터베이스를 연동하기 위해 커넥션 스트링(주소값)이 필요합니다.
- 해당 데이터베이스 화면 최상단에 있는 'Connect' 버튼을 클릭하면 알 수 있습니다.
- 'Connect to your project' 모달창이 나타납니다.
- 스크롤을 쭉 내려서 하단에 있는 'Session pooler'에 있는 스트링을 복사합니다.
(2) 환경변수 파일에 정의
- 이제 VS Code의 백엔드 폴더로 돌아갑니다.
- 폴더의 루트에 .env 파일을 생성합니다.
- 파일에 방금 복사했던 스트링을 아래와 같은 형식으로 붙여넣고 저장합니다.
DATABASE_URL=아까 복사했던 커넥션 스트링- 그런데 이 커넥션 스트링에는 '[YOUR-PASSWORD]'라는 문자열이 있습니다.
- 이 부분을 대괄호까지 모두 지우고 콜론(:)과 골뱅이(@) 사이에 아까 복사해두었던 데이터베이스 비밀번호를 붙여넣습니다.
(3) 혹시 비밀번호를 잊었다면?
- 해당 데이터베이스 프로젝트로 돌아갑니다.
- 좌측 사이드탭에 'Project Settings'를 클릭합니다.
- 하위 사이드탭이 생기고, 그 중 'Database'를 클릭합니다.
- 'Reset database password' 버튼을 통해 비밀번호를 재설정합니다.
(4) 비밀번호 노출에 주의
- 커넥션 스트링 주소값에는 우리의 데이터베이스 비밀번호가 포함되어 있기 때문에 기본적으로 외부에 노출되지 않도록 하는 것이 좋습니다.
- 특히 깃허브나 학습 블로그에 업로드할 때 비밀번호만큼은 반드시 가리도록 합시다.
4) 의존성 설치 및 테이블 생성
이제 환경설정을 마무리하기 위해 아래 커맨드를 따라 실행합니다.
npm install
npx prisma db push- 혹시
npx prisma db push커맨드에서 빨간색 오류가 발생한다면 .env 파일에서DATABASE_URL=에 오타가 있지는 않은지 확인해봅니다. - 이제 Supabase로 돌아가서 사이드탭의 Table Editor를 클릭해봅니다.
- 위의 커맨드 덕에 Book, Review 테이블이 간편하게 생성된 것을 볼 수 있습니다.
3. 초기 데이터 생성 및 서버 접속
- 이제 테이블에 초기 데이터를 넣어봅니다.
- 이미 백엔드 폴더에 이와 관련된 세팅이 되어 있기 때문에 아래 커맨드를 실행합니다.
npm run seed- Supabase 테이블을 새로고침하면 데이터가 정상적으로 들어와있는 것을 확인할 수 있습니다.
- 이제는 이 백엔드 서버를 빌드하고 실행하면 마무리됩니다.
npm run build
npm run start- 이제 백엔드 서버에 접속할 수 있게 되었습니다.
http://localhost:12345/
http://localhost:12345/api
4. 데이터 조회
- 백엔드 서버가 가동중일 때 데이터를 편리하게 조회할 수 있는 방법이 있습니다.
- VS Code에서 별도의 터미널을 연 후 아래 커맨드를 입력합니다.
npx prisma studio- 이제 모든 데이터들을 조회할 수 있는 별도의 페이지를 이용할 수 있습니다.
http://localhost:5555/
5. 주의사항
- 실습용 백엔드 서버는 Supabase를 사용하고 있습니다.
- Supabase 무료 버전은 일주일동안 접속하지 않으면 자동으로 기능이 중지됩니다.
- 기능이 중지되면 모든 API 호출이 불가능해지기 때문에 이를 복구할 수 있는 방법을 알아봅시다.
- 기능이 중지되었을 때 Supabase에서 해당 프로젝트로 이동하면 'The project @@@ is currently paused.'라는 문구가 나타날 것입니다.
- 그 아래에 있는 'Restore project' 버튼만 클릭하면 됩니다.
- 복구 소요 시간은 최소 10분에서 최대 1시간까지 걸립니다.
- 이 대기시간에 대시보드를 보면 해당 프로젝트에 'Project is restoring'이라는 안내 문구가 나타날 것입니다.
- 이 안내 문구가 사라지면 복구가 완료된 것입니다.
- 이 시간이 길게 느껴진다면 커넥션 스트링을 백엔드 서버에 다시 연결하는 것도 방법입니다.
Junior Frontend Developer