[TIL] 첫 React 백엔드 연동

해당 글은 hoops 프로젝트 테스팅을 위해 클라이언트를 서버와 연동하는 과정을 기록했습니다.
프론트엔드 React/Apollo GraphQL, 백엔드 Node.js/Express/PostgreSQL을 활용하는 프로젝트로, 변수가 많은 연동 작업인 만큼 해당 글의 방식은 참고만 하되, 항상 옳은 방법이 아님을 미리 알려드립니다.

DB 생성

1. pgAdmin4(PostgreSQL)를 실행하고 비밀번호 입력 후, Servers > Databases 우클릭

2.  Create > Database > 아무 이름 입력 > Save해서 DB 생성

백엔드 Repository 연동

1. 백엔드 repository를 최신 상태로 git clone 해주고 IDE로 열어준다

2. 가장 상위 폴더에 .env 파일 생성하고 다음 내용 넣고 저장 (프로젝트마다 상이함) 

# Environment variables declared in this file are automatically made available to Prisma.
# See the documentation for more detail: https://pris.ly/d/prisma-schema#using-environment-variables

# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server and MongoDB (Preview).
# See the documentation for all the connection string options: https://pris.ly/d/connection-strings

DATABASE_URL="postgresql://postgres:(PostgreSQL 비밀번호)@localhost:5432/(아까 생성한 DB 이름)?schema=public"
PORT=4000
SECRET_KEY=(프로젝트마다 상이함)
USER=(프로젝트마다 상이함)
PASSWORD=(프로젝트마다 상이함)
AWS_KEY=(프로젝트마다 상이함)
AWS_SECRET_KEY=(프로젝트마다 상이함)
S3_BUCKET_NAME=(프로젝트마다 상이함)

3. 다음 명령어 입력

npm install
# y누르겠냐고 뜨면 누르기
npx prisma init
npm run migrate
# migrate 이름은 아무거나 입력
npm run dev

4. 에러! 'babel-node'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.'

노드의 버전이 너무 높아서 생기는 에러이다. ('node --version'을 입력해 버전을 확인해주자)

아래 글을 참고해 노드의 버전을 임의로 낮춰주자

[Node.js] windows에서 노드 버전 변경 - downgrade/upgrade

v12.14.1로 설정해서 해당 오류를 해결했다

 

+++

그래도 실행이 안된다면 다음 방법들을 시도해보자

4-1. node modules 폴더를 삭제하고 'npm install' 재실행 후 'npm run dev'

4-2. package.json 파일의 'scripts 부분의 preinstall'과 마지막 'resolutions 부분'을 제거하고 'npm install' 후에 다시 그대로 넣고 한번 더 'npm install' 이후 'npm run dev'

    "preinstall": "npx npm-force-resolutions",
    
   "resolutions": {
    "fs-capacitor": "^6.2.0",
    "graphql-upload": "^11.0.0"
   }

5.  IDE 새 창을 열어서 프론트엔드에서 'npm start' 실행 ~ http://localhost:3000/에서 백엔드가 연동된 상태로 열린다

Prisma Studio

첫 실행을 위해 필수적인 데이터들(관리자 계정 등)이 필요할 수 있는데, 이 경우 Prisma Studio를 직접 실행해 데이터를 조작할 수 있다

 

1. cmd 창에서 cd '백엔드 저장소 경로'를 입력해 이동 후 'npx run studio' 입력

 

예시

2. http://localhost:5555/에서 Prisma Studio를 통해 임의로 데이터 조작

 

회원가입 후 가입 승인 및 관리자 권한을 임의로 조작했다

첫 React 백엔드 연동 성공!