[오픈소스] GraphQL 연습을
위한 보일러플레이트
Express + GraphQL + MongoDB
Express 웹서버에서 GraphQL과 MongoDB를 사용해보기 위해서 글을 찾아봤습니다. 언제나처럼 지식을 공유해주시는 다른 개발자 분의 링크가 있어서 원하는 수준의 코드를 빠르게 작성할 수 있었습니다.
제가 작성한 코드는 링크와 거의 동일합니다. 차이점은 GraphQL 코드를 작성한 방식 및 import export 연습겸 require을 의도적으로 사용하지 않은 점입니다. 사용법은 깃허브 README.md를 통해서 설명해두었기 때문에 웹개발의 경험이 있으신 분들은 README만 읽어보셔도 충분합니다. 이번 글에선 경험이 없으신 분들을 위해서 조금 더 자세하게 순서를 설명합니다.
1. 설치하기
터미널을 여시고 코드를 다운받습니다.
git clone https://github.com/joshephan/Express-GraphQL-MongoDB-boilerplate.git
모듈을 설치해줍니다.
npm install
2. MongoDB 만들기
데이터베이스는 로컬에서 진행하셔도 상관없습니다. 제 경우엔 mlab에서 샌드박스용 무료 DB를 생성해서 테스트를 진행했습니다.
mlab에서 회원가입 후 데이터베이스를 추가합니다. 아마존, 마이크로소프트, 구글 중 아무거나 선택하시고 샌드박스 타입을 선택합니다.
이후에 원하시는 리전을 선택해주고, 데이터베이스 이름을 입력합니다.
3. MongoDB 연결하기
생성이 완료되면 해당 DB를 들어가 DB에 엑세스할 수 있는 사용자를 추가합니다.
Add database user 버튼을 눌러 사용자를 추가하시면 됩니다.
4. config.json 수정하기
config.json 파일을 수정하면 준비는 끝납니다. 방금 사용자를 추가했던 아이디를 dbuser에 넣고, dbpassword에는 비밀번호를 입력합니다. uri는 표준 MongoDB URI의 @ 다음 부분을 입력하시면 됩니다.
5. 서버 작동하기
터미널에서 서버를 작동시켜봅시다.
npm run dev
웹브라우저를 켜고, localhost:4000/graphql에 접속합니다.
위와 같은 창이 나타납니다.
6. GraphQL 테스트해보기
MongoDB와 연결이 제대로 됐는지 확인해봅시다. users 쿼리를 통해 id 값만 가져와봤습니다.
여러분의 화면에선 아마 빈 객체가 리턴될텐데, 이유는 아직 DB 안에 데이터를 추가한게 없기 때문입니다. DB에 데이터를 추가, 삭제 등을 하기 위해선 graphql의 mutation을 통해 할 수 있습니다.
mutation은 좌측 상단 부분에 명령의 내용과 리턴받을 키 등을 작성해주고, 좌측 하단의 QUERY VARIABLES에 json 형태로 데이터를 작성해줍니다. 이후 화살표 버튼이나 ctrl + 엔터를 눌러 코드를 실행하면 우측과 같은 결과를 받을 수 있습니다.
7. 코드 수정
새로운 명령을 추가하거나 데이터를 GET하기 위해선 mutation과 query를 수정해주면 됩니다. graphql/index.js 파일에서 수정하실 수 있습니다. mutation은 resolver와 연결되는데, resolver에 들어가는 함수는 db 디렉토리의 user.ctrl.js와 post.ctrl.js에서 관리하실 수 있습니다.
깃허브 소스코드 링크:
