코딩 없이 10분 만에 REST API/Graphql 서버 개발하기
--
스타트업에서 가장 중요한 건 빠르고 값싸게 비즈니스 모델을 실험하는 것입니다. 그리고 비즈니스 모델이 검증되면 재빠르게 제품을 만들어 내야 하죠. 최소한 알파버전으로라도 런칭을 해야 하니까요.
그래서 저는 값싸고 빠르게 개발하는 방법에 언제나 관심을 가지고 있습니다. 그래서 저는 프론트엔드의 영역에서는 웹과 앱을 모두 만들어 낼 수 있는 리액트를 선택했죠. 마찬가지로 서버 개발을 빠르고 쉽게 할 수는 없을까? 라는 의문을 가지고 있었습니다.
사실 API 서버 개발을 위한 프레임워크나 라이브러리는 수두룩하게 많습니다. 하지만 제가 항상 힘들었던 것은, 리소스를 편리하게 관리할 백 오피스, 즉 관리자 웹 사이트를 만드는 것이었습니다. 그래서 nodejs로 API 서버와 관리자 페이지를 한 번에 만드는 툴을 열심히 찾아보게 되었죠.
수많은 구글링 와중에 괜찮아 보이는 녀석을 발견했습니다! strapi라는 라이브러리인데요, headless CMS를 표방하고 있는 프로젝트 입니다.
간단하게 특징을 살펴보면
- 관리자 페이지 제공 — 컨텐츠 관리, 모델링
- RESTful API 및 Graphql 사용 가능
- 다양한 DB연동 — mongo, postgresql, mysql 등
- 커스터마이징 — 원하는 로직으로 코드 수정
- CLI 제공 — API 생성 과 같은 기능을 CLI로 제공
와 같은 기능들이 있습니다. 제가 항상 고민했던 관리자 페이지를 제공해 주고, 원하는 대로 코드를 수정하여 로직을 커스터마이징 할 수 있다는 것이 큰 장점으로 다가왔습니다. 그리고 프론트엔드 개발을 10배 빠르게 만들어주는 graphql 을 사용할 수 있다는 점도 장점입니다.
그럼 바로 strapi를 활용해서 간단한 커뮤니티 사이트의 API 서버를 만들어 보도록 하겠습니다.
1. 데이터베이스 생성하기
API 서버를 생성하기 전에 strapi에서 사용할 데이터베이스를 생성해야 합니다. 안타깝게도 strapi는 데이터베이스를 자동으로 생성해주지는 않기 때문에 따로 DB를 생성하겠습니다.
도커를 사용하셔도 좋지만 이번 튜토리얼에서는 조금 더 편리하게 mlab의 mongodb를 사용하도록 하겠습니다.
먼저 mlab에 접속하신 후에 무료 DB를 생성하기 위해 계정을 만들어 주세요.
계정을 만드시고 로그인이 되셨으면, 새로운 mongodb를 배포하실 수 있습니다. 화면 우측 상단의 Create New 버튼 클릭 후, 원하는 클라우드 플랫폼을 선택하신 후, SANDBOX 플랜을 선택해 주세요.
그 다음 DB의 리전을 선택해 주세요.
그 다음 데이터베이스 이름을 설정할 수 있는데요, 커뮤니티 사이트용 DB이기 때문에 community라는 이름으로 지정했습니다. 여러분이 원하는 데이터베이스 이름으로 작성해 주세요.
데이터베이스가 성공적으로 생성되었습니다! 그런데 DB에 접근하기 위해서는 데이터베이스 계정을 생성해야 합니다.
Users 탭을 선택하신 후, Add database user버튼을 클릭하시면 새로운 계정을 생성하실 수 있습니다. 여러분이 원하는 내용을 계정을 생성해 주세요. 저는 admin이라고 지었어요.
2. Strapi 생성하기
이제 데이터베이스는 성공적으로 생성했으니, 본격적으로 strapi를 활용해서 API서버를 만들어 보도록 하겠습니다.
API 서버를 만들기 위해서는 strapi를 통해 프로젝트를 새로 생성해야 합니다. 여러분의 터미널을 여신 후에 다음의 명령어로 strapi를 설치해 주세요.
nodejs v10, npm v6 이상이 설치되어 있어야 합니다.
npm install strapi@alpha -g설치가 완료 되었으면 다음 명령어를 통해 strapi가 정상적으로 설치 되었는지 확인해 볼께요.
strapi -v위의 명령어를 입력해서 3.0.0-alpha.x 와 같은 버전 이름이 나타난다면 성공적으로 설치되었다는 것을 알 수 있습니다!
이제 프로젝트를 담을 디렉토리로 이동하신 후 다음의 명령어를 통해 새로운 strapi 프로젝트를 생성하겠습니다.
strapi new my-community
위의 명령어를 실행하면 Strapi CLI가 여러가지 질문을 하게 됩니다. 이 때, 여러분이 mlab에서 생성한 DB정보를 입력하면 됩니다.
mlab에서 DB를 생성하면 다음과 같은 주소를 확인 할 수 있는데요:
ds113495.mlab.com:13495/community이 주소에서 확인할 수 있듯이, 여러분이 만든 DB 정보와 계정 정보를 다음과 같이 CLI에 입력하면 됩니다.
Choose your main database:
> MongoDBDatabase name:
> CommunityHost:
> ds113495.mlab.com // DB 주소의 호스트+srv connection:
> falsePort (It will be ignored if you enable +srv):
> 13945 // DB 주소의 포트Username:
> admin // mlab에서 생성한 계정 usernamePassword:
> ********* // 계정 패스워드
Strapi 프로젝트가 성공적으로 설치 되었으면 서버를 바로 실행 해보도록 할께요! 프로젝트 디렉토리로 이동 하신 후 strapi start 명령어를 실행하시면 됩니다.
3. 관리자 페이지 접근하기
로컬 머신에서 위의 방법으로 Strapi 서버를 실행하셨으면, localhost:1337/admin 에 접속하여 관리자 페이지에 접근할 수 있습니다. 처음 실행하여 접속하게 되면 다음과 같은 화면이 나타납니다.
여러분의 서버의 루트 관리자 계정을 생성을 안내하고 있네요! 항목을 입력하여 바로 계정을 만들어보도록 하겠습니다.
계정을 생성하고 나면 위와 같이 관리자 페이지에 접근하게 됩니다. 이제 본격적으로 커뮤니티 사이트를 위한 API를 개발해보도록 할께요!
4. DB 모델링
저희가 예시로 든 커뮤니티는 간단한 구조로 되어있습니다. 마치 DC 인사이드와 비슷하다고 생각하면 될 것 같아요. 게시글을 작성할 수 있는 게시판(board)이 있을 테고, 각 게시판 별로 글(post)를 작성하게 되고, 글마다 댓글(comment)을 달 수 있을 겁니다.
그러면 필요한 것은 네 개의 모델이 되겠네요. User, Board, Post 그리고 Comment 입니다. 각각의 속성은 다음과 같습니다.
User
- username
- posts* // Post : User = M : 1
- comments* // Comment : User = M : 1Board
- title
- posts* // Post : Board = M : 1Post
- title
- content
- user* // Post : User = M : 1
- board* // Post : Board= M : 1
- comments* // Comment : Post = M : 1Comment
- content
- user* // Comment : User = M : 1
- post* // Comment : Post = M : 1
위와 같이 모델을 구성하면 기본적인 커뮤니티 앱을 만들 수 있습니다.
Strapi에서는 관리자 페이지에서 모델링을 할 수 있습니다. 모델의 이름을 정의하고, 속성 이름과 자료형을 UI로 정의하면, 그에 맞춰 자동으로 API를 생성해주죠. 저희도 위의 모델에 맞춰 바로 만들어 보도록 하겠습니다.
먼저 좌측 메뉴 리스트에서 콘텐츠 타입 빌더 메뉴에 접근하고 콘텐츠 타입 추가 버튼을 클릭합니다.
그 다음 Board 모델을 만들기 위해 이름 필드에 board를 작성하고 저장 버튼을 눌러주세요.
그 다음 필드 추가 버튼을 눌러서 Board 모델에 필요한 필드를 추가해 봅시다.
일단 Board의 title 속성을 문자(string) 자료형으로 추가했습니다. 그 후 저장을 눌러 모델을 생성해 주세요.
위와 같은 방법을 통해 이번에는 Post 모델을 생성해 봅시다.
먼저 기본적인 자료형을 가지는 title과 content 속성을 추가하고, 각각 문자(string)과 텍스트(text) 로 지정했습니다.
그런데 Post 모델은 Board, User, Comment와 관계를 가지기 때문에 이들 모델과의 관계를 설정해야 합니다.
필드 추가 버튼을 클릭한 후, 관계 자료형을 선택해 주세요. 그러면 위와 같이 다른 모델과의 관계를 설정할 수 있습니다.
이와 같은 과정을 통해 board와 user 속성을 추가로 작성하고 모델을 저장하세요.
Strapi는 프로젝트를 생성할 때 User 모델을 기본적으로 생성합니다. 여기에서는 Strapi가 만들어 낸 User 모델을 사용했습니다.
지금까지의 과정을 통해, 저희가 위에서 설계한 모델대로 Board, Post, Comment 모델을 추가로 생성할 수 있습니다.
모델을 전부 작성하면 위와 같이 설계 되었음을 확인할 수 있습니다!
5. API 사용하기
Strapi는 위와 같은 방법으로 모델링을 하게 되면 자동으로 API 엔드포인트를 만들어 내고 그 로직을 처리하는 컨트롤러를 자동으로 생성합니다. 따라서, 위의 방법으로 모델링을 하셨다면 바로 API를 사용하실 수 있습니다!
API를 사용하기 전에 간단하게 데모 데이터를 만들어 보도록 하겠습니다. 게시판, 포스트 그리고 댓글들을 직접 작성해 보세요. 데이터는 관리자 페이지 왼쪽 메뉴 리스트에 각 모델에 맞는 Content Type 메뉴에서 추가할 수 있습니다.
본격적으로 API를 사용하기 전에 각 모델별로 API 권한을 설정해야 합니다. 관리자 페이지에서 역할 & 권한 메뉴에서 설정할 수 있습니다.
Strapi는 세 가지로 권한을 나누어 놨습니다. Administrator, Authenticated 그리고 Public입니다. Administrator는 말 그대로, 관리자 사용자의 역할입니다. Authenticated는 가입하여 로그인 한 사용자(token을 제공한 사용자)의 역할이고, Public은 로그인 하지 않은 사용자의 역할 입니다.
저희는 게시판과 그 게시물에 대한 조회는 Public 역할에서도 할 수 있도록 변경해야 해요. 그래야 로그인하지 않은 사용자도 게시물과 댓글을 볼 수 있을 테니까요.
Public 역할 페이지에 접근하시면 위의 화면과 같이 해당 역할이 각 모델에 대해 가지는 권한을 설정할 수 있습니다. Public은 조회만 가능하게 할 것이기 때문에 Board, Post, Comment에 대해서 count, find, findone 권한을 부여해 주세요. 그 다음 좌측 상단의 저장 버튼을 클릭해 주세요.
그 다음 바로 API에 요청을 생성하여 데이터를 받아보도록 하겠습니다. 여러분의 브라우저에서 http://localhost:1337/posts에 접근해 보세요.
제가 아까 작성한 데모데이터를 위와 같이 확인할 수 있네요. /posts 위치에 GET 요청을 생성했더니, DB에 저장된 모든 게시물들의 데이터를 응답하는 것을 확인할 수 있습니다. 이와 같이 리소스들을 조회하는 API가 생성되었다는 것을 확인 할 수 있죠.
조회 API 뿐만아니라 생성, 업데이트 그리고 삭제 권한을 부여해서 실험할 수 있습니다. postman같은 도구를 사용해서 API를 실험해 보세요! API 요청에 대한 자세한 내용은 strapi 문서에서 확인해 보세요.
6. GraphQL 사용하기
Strapi에서는 기본으로 제공하는 RESTful API 뿐만 아니라 GraphQL를 활용할 수도 있습니다.
먼저 관리자 페이지에서 마켓 플레이스 페이지에 접근해 주세요. 해당 페이지에는 Strapi에서 사용할 수 있는 여러가지 플러그인들을 확인할 수 있습니다. 목록 중에서 GRAPHQL 플러그인 항목의 다운로드 버튼을 클릭 해 주세요. 클릭 후에 조금만 기다리면 설치가 완료됩니다.
설치가 완료되었으면 http://localhost:1337/graphql 에 접근해서 graphql playground에 접근 할 수 있습니다.
여기에서도 마찬가지로 쿼리를 작성하여 데이터를 요청할 수 있죠. 좌측 영역에 다음과 같은 내용으로 쿼리를 작성하고 실행 해 보세요.
query {
boards {
title
posts {
title
content
comments {
content
}
}
}
}
위와 같이 요청한 쿼리의 내용과 구조에 맞춰 데이터가 응답 되는것을 확인할 수 있습니다.
정말 손쉽게 graphql을 적용했네요!
정리하며
Strapi 라이브러리를 사용하면 빠르게 기본적인 서버 개발을 마칠 수 있었습니다. 물론 실제로 프로덕션에서 활용하기 위해선 코드를 직접 수정하여 커스터마이징 해야겠지만, 간단하게 데이터를 처리할 API 서버를 만들 수 있었습니다. 또, 백엔드 시스템에 익숙하지 않은 경우에 UI를 활용하여 모델링을 하는 것도 나쁘지 않은 사용자 경험이라고 생각합니다.
저는 곧 리액트 강의를 하게 되는데, 그 때 Strapi를 통해 직접 서버를 구축하고 그 위에 프론트 앱을 작성하는 컨텐츠를 작성해보려 합니다. 아무래도 쉽고 빠르게 API 서버를 만들 수 있으니까요!
긴 글 읽어주셔서 감사합니다 😁
