Web & Server/GraphQL
GraphQL node example
vincenzo.dev.82
2024. 12. 21. 22:49
반응형
GraphQL node HelloWorld 구현
graphql-node-example
프로젝트 시작
echo "# graphql-node-example" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:vincenzo-dev-82/graphql-node-example.git
git push -u origin main
기본 구조
graphql-node-example/
├── node_modules/
├── src/
│ ├── server/
│ │ ├── resolvers/
│ │ │ └── helloResolver.js
│ │ ├── schemas/
│ │ │ └── schema.js
│ │ └── index.js
│ ├── client/
│ │ ├── react/
│ │ │ └── apollo-client-react.js
│ │ └── basic/
│ │ └── apollo-client-basic.js
│ └── utils/
│ └── logger.js
├── .gitignore
├── package.json
├── README.md
Node 확인하기
# node 버전 확인하기
node -v
# nvm 을 이용한 node 설치
nvm install node
nvm use node
적합한 npm 버전 사용
만약 Node.js 업그레이드가 어렵다면, 현재 Node.js 버전에 맞는 npm 버전을 설치하세요.
# npm 버전 확인
npm -v
# Node.js 에 맞는 최신 npm 버전을 설치합니다
npm install -g npm@latest-10
프로젝트 환경 설정
1. Node.js 초기화
# IntelliJ의 터미널(Alt + F12)을 열고 아래 명령어를 입력하여 package.json을 생성합니다:
# 이 명령어는 기본 설정으로 package.json 파일을 만듭니다.
npm init -y
2. 필요한 패키지 설치
예제 코드에 필요한 패키지를 설치합니다:
npm install apollo-server @apollo/client cross-fetch
3. 파일 생성
- 프로젝트 루트 디렉토리에 두 개의 파일을 생성합니다.
- src/server/index.js
- src/client/basic/apollo-client.js
4. 코드 작성
- Apollo Server 및 Apollo Client 코드를 각각의 파일에 구현합니다.
- src/client/basic/apollo-client.js
- src/client/react/apollo-client-react.js
프로젝트 실행
1. 프로젝트 서버 실행
# 터미널에서 아래 명령어를 실행하여 GraphQL 서버를 시작합니다.
# http://localhost:4000에서 서버가 실행됩니다.
node src/server/index.js
2. 프로젝트 클라이언트 실행
# 새로운 터미널에서 아래 명령어를 실행하여 클라이언트가 서버에 요청을 보냅니다
# http://localhost:4000에서 서버가 실행됩니다.
# basic-client
node src/client/basic/apollo-client.js
# react-client
node src/client/react/apollo-client-react.js
반응형