REST API는 어떻게 구축하나요?
이 문서에서는 API, 특히 RESTful API에 대해 소개합니다. API의 장점, 한계 및 대안을 살펴볼 것입니다. 또한 최고의 BaaS 제공업체 중 하나인 Back4app을 사용하여 REST API를 구축하는 방법도 보여드립니다.
Contents
API란 무엇인가요?
API(애플리케이션 프로그래밍 인터페이스)는 두 디바이스 또는 시스템이 서로 통신하는 방법을 정의하는 일련의 규칙입니다. API는 개발자가 만든 것으로 최종 사용자가 직접 사용하는 것이 아니라 다른 개발자나 시스템에서 사용하기 위한 것입니다. 최종 사용자는 일반적으로 소위 프런트엔드 또는 클라이언트를 통해 간접적으로 사용합니다.
API는 클라이언트와 리소스 또는 웹 서비스 사이의 중개자라고 생각할 수 있습니다. 클라이언트가 요청을 보내면 요청이 처리되고 최종적으로 리소스 또는 응답이 반환됩니다.
오늘날 API는 거의 모든 곳에서 사용됩니다. 대부분의 기업은 내부 및 공개적으로 액세스할 수 있는 여러 API를 보유하고 있습니다. 오늘만 해도 여러분은 이미 100개 이상의 API와 상호작용했을 것입니다. 예를 들어, 시간이나 날씨를 확인하거나 Facebook을 스크롤하거나 YouTube 동영상을 시청할 때 말이죠.
API와 SDK의 차이점은 무엇인가요?
위에서 언급한 바와 같이 API는 두 디바이스 또는 시스템이 통신하는 방법을 정의하는 일련의 규칙입니다. 반면 소프트웨어 개발 키트(SDK) 는 개발자가 특정 플랫폼(예: Windows, 웹, Android, iOS)용 소프트웨어를 구축하는 데 도움이 되는 도구, 라이브러리 및 문서 모음입니다.
SDK는 종종 다양한 API를 백그라운드에서 활용합니다. 이 글의 두 번째 부분에서는 실제 사례를 살펴보겠습니다.
REST란 무엇인가요?
REST(Representational State Transfer)라는 소프트웨어 아키텍처 접근 방식은 인터넷의 프레임워크를 특징짓는 방식입니다. 이는 프로토콜이나 표준을 구성하지 않기 때문에 개발자가 다양한 구현 방법을 사용할 수 있습니다. 로이 필딩은 2000년에 REST를 도입했으며, 10년 이상 웹 API를 만드는 데 있어 주요 표준으로 사용되어 왔습니다.
REST는 HTTP 프로토콜을 기반으로 하며 GET, POST, PUT, DELETE와 같은 다양한 HTTP 메서드를 사용하여 리소스를 조작합니다. 이러한 작업을 흔히 CRUD(Create Retrieve Update Delete)라고 합니다. REST는 JSON, HTML, XLT, Python, JavaScript 등 여러 데이터 형식을 지원합니다. 가장 일반적으로 사용되는 데이터 형식은 JSON입니다.
API가 RESTful로 간주되려면 다음 6가지 제약 조건에 부합해야 합니다:
- 클라이언트 및 서버 아키텍처 – 클라이언트와 서버 구성 요소는 분리되어 있어야 합니다.
- 상태 비저장성 – 서버 애플리케이션은 요청 사이에 클라이언트 데이터를 저장할 수 없습니다.
- 캐시 가능성 – 가능한 경우 클라이언트 또는 서버 측에서 리소스를 캐시할 수 있어야 합니다.
- 계층화된 시스템 – API는 중개자를 허용해야 하지만 클라이언트에는 영향을 미치지 않아야 합니다.
- 균일한 인터페이스 – 서버와 클라이언트 간의 인터페이스가 균일해야 합니다.
- 코드 온디맨드(선택 사항) – 서버가 실행 코드를 클라이언트에 보낼 수 있도록 합니다.
REST와 RESTful의 차이점은 REST는 제약 조건 집합을 가리키고 RESTful은 이러한 제약 조건을 준수하는 API를 가리킨다는 점입니다.
RESTful API는 어떻게 작동하나요?
RESTful API는 브라우저와 비슷한 방식으로 작동합니다. 가장 큰 차이점은 브라우저는 HTTP를 사용하여 서버에 웹 페이지 및 기타 리소스를 요청하는 반면, RESTful API는 HTTP를 사용하여 데이터 리소스를 요청하고 조작한다는 점입니다.
일반적인 RESTful API 호출은 다음 단계를 따릅니다:
- 클라이언트가 서버에 요청을 보냅니다.
- 서버는 클라이언트를 인증하고 요청에 대한 충분한 권한이 있는지 확인합니다.
- 서버는 요청을 처리합니다(예: 계산을 수행하고 데이터베이스에서 데이터를 가져옵니다).
- 서버가 클라이언트에 응답을 반환합니다.
- 클라이언트가 응답을 처리합니다.
단계는 API 구현에 따라 다를 수 있습니다. API 사용 방법에 대한 지침은 API 참조(또는 API 문서)에 정의되어 있습니다.
요청 구조
요청에는 다음이 포함됩니다:
| 속성 | 설명 |
|---|---|
| URI | 서버가 조작할 리소스를 정의합니다. URL에는 결과를 필터링하거나 정렬하기 위한 쿼리 매개변수가 포함될 수도 있습니다. |
| HTTP 메서드 | 서버에 해당 리소스로 수행할 작업을 알려줍니다. 예를 들어 GET은 리소스를 반환하고, POST는 새 리소스를 추가하며, PUT은 기존 리소스를 업데이트하고, DELETE는 리소스를 삭제합니다. |
| 헤더(선택 사항) | 인증 정보, 쿠키, 사용자 에이전트, 콘텐츠 유형 등 요청에 대한 메타데이터를 포함합니다. |
| 본문(선택 사항) | 요청된 작업을 수행하기 위한 추가 정보가 포함되어 있습니다. |
샘플 요청은 다음과 같습니다:
응답 구조
응답에는 다음 내용이 포함됩니다:
| 속성 | 설명 |
|---|---|
| 상태 코드 | 상태 코드는 요청이 성공했는지(2xx) 또는 실패했는지(4xx, 5xx)를 정의합니다. |
| 헤더 | 서버 시간, 콘텐츠 길이, 콘텐츠 유형 등 응답에 대한 메타데이터를 포함합니다. 또한 서버는 Set-Cookie 헤더를 사용하여 클라이언트에 쿠키를 설정할 수 있습니다. |
| 본문 | 리소스 표현을 포함합니다. 표현 형식은 요청의 Content-Type 헤더(예: application/json)를 기반으로 합니다. |
샘플 응답은 다음과 같습니다:
RESTful API의 장점은 무엇인가요?
확장성
RESTful API는 확장성이 뛰어나며 수직적, 수평적으로 모두 확장할 수 있습니다. 새로운 엔드포인트나 리소스를 추가해도 API의 성능에 미치는 영향이 최소화되므로 필요에 따라 쉽게 확장할 수 있습니다.
여러 데이터 형식
RESTful API는 클라이언트의 요청 헤더에 따라 다양한 형식의 데이터를 반환할 수 있습니다. 따라서 매우 유연하고 기존 시스템에 쉽게 통합할 수 있습니다. 데이터는 JSON, XLT, Python, HTML, JavaScript 등의 형식으로 반환될 수 있습니다.
효율성
RESTful API는 가볍고 SOAP(Simple Object Access Protocol)보다 오버헤드가 적습니다. 따라서 요청을 빠르고 효율적으로 처리할 수 있습니다. 일반적인 RESTful API는 초당 10.000~15.000건의 요청을 처리할 수 있습니다.
플랫폼 독립성
RESTful API의 또 다른 큰 장점은 서버와 클라이언트가 완전히 독립적이라는 점입니다. 따라서 개발자는 자바, 자바스크립트, 파이썬 등 여러 프로그래밍 언어로 RESTful API와 클라이언트를 구현할 수 있습니다!
쉬운 이해
REST는 HTTP를 기반으로 하기 때문에 이해하기가 매우 쉽습니다. 대부분의 개발자는 거의 확실하게 RESTful API를 한 번 이상 사용하거나 구현해 본 경험이 있을 것입니다.
RESTful API의 한계는 무엇인가요?
데이터 언더페칭 및 오버페칭
RESTful API의 가장 큰 문제 중 하나는 데이터 언더페칭과 오버페칭입니다. 오버페칭은 필요한 것보다 많은 데이터가 반환될 때 발생하고, 언더페칭은 충분한 데이터가 반환되지 않을 때 발생합니다(주로 관계를 처리할 때).
실시간 데이터 구독 없음
RESTful API는 데이터 변경 사항을 구독하는 것을 허용하지 않습니다. 즉, 클라이언트는 이를 감지하기 위해 서버를 폴링해야 합니다. 폴링은 매우 비효율적이며 불필요한 네트워크 트래픽, 지연 시간 증가, 대역폭 사용량 증가, 확장성 저하를 초래할 수 있습니다.
버전 관리 시스템 없음
RESTful API에는 내장된 버전 관리 시스템이 없습니다. 게다가 필드를 사용 중단할 수 있는 방법이 없기 때문에 시간이 지남에 따라 API를 발전시키기가 어렵습니다. 주요 API 업데이트를 릴리스할 때마다 모든 클라이언트를 수정해야 합니다.
위에서 언급한 문제를 해결하기 위해 몇 가지 REST 대안이 등장했습니다. 가장 널리 사용되는 것들로는 SOAP(Simple Object Access Protocol), GraphQL, gRPC 등이 있습니다.
RESTful 인증 방법이란 무엇인가요?
RESTful API는 엔드포인트를 보호하기 위해 다양한 인증 방법을 사용할 수 있습니다. 가장 일반적으로 사용되는 인증 방법은 다음과 같습니다:
- HTTP 인증
- API 키
- OAuth 2.0
- OpenID 연결
- JWT 인증
이러한 방법의 대부분은 클라이언트가 요청 헤더에 자격 증명 또는 API 키를 전송해야 합니다. 프로젝트를 시작할 때 다양한 인증 방법을 고려해야 합니다.
RESTful API는 어떻게 구축하나요?
이 문서에서는 Back4app을 사용하여 RESTful API를 구성하고 Next.js 프론트엔드와의 연결을 설정하는 방법을 살펴봅니다.
전제 조건
- 자바스크립트 ES6 사용 경험
- React 및 Next.js 사용 경험
- REST에 대한 기본 이해
Back4app이란 무엇인가요?
Back4app은 놀라운 BaaS(서비스형 백엔드) 솔루션입니다. 오픈 소스 소프트웨어를 사용하며 개발자가 모바일 및 웹 애플리케이션을 더 빠르게 제작할 수 있도록 다양한 기능을 제공합니다. 이를 통해 기업은 클라우드 인프라에 대한 걱정 없이 비즈니스 로직에 집중할 수 있습니다.
사용자 친화적인 대시보드와 명령줄 인터페이스를 갖춘 이 플랫폼은 Node.js, Flutter, React Native, Android, Angular 및 iOS와 같이 널리 사용되는 도구와 호환되는 소프트웨어 개발 키트(SDK)를 제공합니다.
Back4app은 모든 앱에 적합한 간단한 가격 모델을 제공합니다. 또한 신용 카드가 필요 없는 무료 플랜도 있어 개발, 테스트 및 프로토타이핑에 적합한 옵션입니다.
백4앱에 대해 자세히 알아보려면 백4앱이란 무엇인가요?
프로젝트 소개
이 글에서는 간단한 블로그 웹 애플리케이션을 구축해 보겠습니다. 웹 앱에서는 편집자가 글을 추가하고 사용자가 글을 읽을 수 있도록 할 것입니다. 앱은 백엔드(REST 기반)와 프론트엔드의 두 부분으로 구성됩니다. 백엔드에는 Back4app을 사용하고 프론트엔드에는 React with Next.js를 사용하겠습니다.
백엔드
백4앱 앱 만들기
다음 단계를 수행하려면 Back4app 계정이 필요합니다. 아직 계정이 없는 경우 로그인하거나 계정을 만드세요.
Back4app 대시보드로 이동하여 “새 앱 만들기”를 클릭하여 새 앱을 만듭니다.
“서비스형 백엔드(BaaS)”를 선택하고 사용자 지정 이름을 지정한 다음 데이터베이스로 “NoSQL 데이터베이스”를 선택합니다. 마지막으로 “만들기”를 클릭하여 앱 생성 프로세스를 시작합니다.
Back4app은 데이터베이스, 확장, 보안 등 앱에 필요한 모든 것을 준비하는 데 잠시 시간이 걸립니다. 앱이 준비되면 “데이터베이스” 보기로 리디렉션됩니다.
데이터베이스 클래스 정의
이제 데이터베이스 클래스를 정의해 보겠습니다.
다음 두 가지 클래스가 있습니다:
ArticleCategory는문서 카테고리(예: 블록체인, AI, 프로그래밍)를 나타냅니다.기사는기사를 나타냅니다. 기사에는 여러 개의 카테고리(M:N)가 있을 수 있습니다.
클래스를 만들려면 백4앱 대시보드로 이동하여 사이드바에서 “데이터베이스”를 선택합니다. 그런 다음 “클래스 만들기”를 클릭하고 이름을 ArticleCategoy로 지정한 다음 “공개 읽기 및 쓰기”를 활성화합니다.
프로덕션 환경으로 전환할 때는 ‘공개 읽기 및 쓰기’를 비활성화하고 ACL 및 CLP로 보안을 강화해야 합니다. 자세한 내용은 서버 보안 구문 분석을 참조하세요.
그런 다음 다음 필드를 추가합니다:
+-----------------------------+-----------------+--------------------+-------------+
| Data type | Name | Default value | Required |
+-----------------------------+-----------------+--------------------+-------------+
| String | name | <leave blank> | yes |
+-----------------------------+-----------------+--------------------+-------------+
| String | slug | <leave blank> | yes |
+-----------------------------+-----------------+--------------------+-------------+
| String | description | <leave blank> | no |
+-----------------------------+-----------------+--------------------+-------------+Article이라는 두 번째 클래스에 대해 동일한 단계를 수행합니다. 다음 필드를 추가합니다:
+-----------------------------+-----------------+--------------------+-------------+
| Data type | Name | Default value | Required |
+-----------------------------+-----------------+--------------------+-------------+
| String | title | <leave blank> | yes |
+-----------------------------+-----------------+--------------------+-------------+
| String | slug | <leave blank> | yes |
+-----------------------------+-----------------+--------------------+-------------+
| String | shortContent | <leave blank> | yes |
+-----------------------------+-----------------+--------------------+-------------+
| String | content | <leave blank> | yes |
+-----------------------------+-----------------+--------------------+-------------+
| Relation -> ArticleCategory | categories | <leave blank> | no |
+-----------------------------+-----------------+--------------------+-------------+좋아요, 끝났습니다.
데이터베이스 채우기
앞으로 API를 테스트할 때 작업할 데이터가 필요합니다. 계속해서 몇 가지 샘플 기사 카테고리 및 기사로 데이터베이스를 채우세요.
새 문서 카테고리를 추가하려면 사이드바에서 해당 카테고리를 선택하고 “행 추가”를 클릭합니다.
이러한 문서 카테고리를 사용하거나 직접 카테고리를 만들 수 있습니다:
+------------+------------+---------------------------------------------------------+
| name | slug | description |
+------------+------------+---------------------------------------------------------+
| Blockchain | blockchain | Blockchain, crypto & more! |
+------------+------------+---------------------------------------------------------+
| AI | ai | Artificial intelligence, LLMs, stable diffusion. |
+------------+------------+---------------------------------------------------------+ChatGPT를 사용하여 샘플 데이터를 생성할 수도 있습니다. ChatGPT에 대해 자세히 알아보려면 ChatGPT를 사용하여 앱을 구축하는 방법을 참조하세요.
기사 클래스도 동일하게 수행합니다:
+------------------+---------------+--------------+---------+-----------------------+
| title | slug | shortContent | content | categories |
+------------------+---------------+--------------+---------+-----------------------+
| Beyond Crypto | beyond-crypto | ... | ... | <blockchain.objectId> |
+------------------+---------------+--------------+---------+-----------------------+
| The Rise of AI | rise-of-ai | ... | ... | <ai.objectId> |
+------------------+---------------+--------------+---------+-----------------------+
| What is ChatGPT? | chatgpt | ... | ... | <ai.objectId> |
+------------------+---------------+--------------+---------+-----------------------+교체해야 합니다. 및 를 실제 ArticleCategory objectId로 바꿔야 합니다. 제 경우에는 SxS0yiWDij와 Hf8yBDTO79입니다 (위 이미지 참조).
REST API
백4앱의 가장 큰 장점은 데이터베이스 클래스를 정의하면 백4앱이 자동으로 REST API를 설정한다는 점입니다. 생성된 REST API를 사용하면 데이터베이스의 모든 클래스에 대해 기본적인 CRUD 작업을 수행할 수 있습니다.
REST API 콘솔
API를 테스트하려면 Back4app 대시보드로 이동하여 사이드바에서 “API > 콘솔 > REST”를 선택합니다. 그런 다음 요청 유형으로 GET을 선택하고 엔드포인트로 클래스/아카이브를 선택합니다. 마지막으로 화면 오른쪽 하단의 “쿼리 보내기”를 클릭하여 요청을 전송합니다.
이 요청은 데이터베이스의 모든 문서를 반환합니다. 비슷한 응답을 받을 수 있습니다:
{
"results":[
{
"objectId": "yEaR8K44il",
"title": "Beyond Crypto",
"slug": "beyond-crypto",
"shortContent": "...",
"content": "...",
"createdAt": "2023-04-17T14:26:19.016Z",
"updatedAt": "2023-04-17T14:26:30.922Z",
"categories": {
"__type": "Relation",
"className": "ArticleCategory"
}
},
{
"objectId": "l46nMkHElH",
"title": "What is ChatGPT?",
"slug": "chatgpt",
"shortContent": "...",
"content": "...",
"createdAt": "2023-04-17T14:27:34.931Z",
"updatedAt": "2023-04-17T14:27:42.636Z",
"categories": {
"__type": "Relation",
"className": "ArticleCategory"
}
}
// ...
]
}REST 콘솔에서는 POST, PUT, DELETE 작업도 수행할 수 있습니다. 또한 쿼리 구문 분석 매개변수를 사용하여 데이터를 필터링하고 관계를 처리하는 등의 작업을 수행할 수 있습니다.
예를 들어 ‘블록체인’ 카테고리에 속하는 글을 가져오려면 다음과 같은 where 문을 사용할 수 있습니다:
where={"categories": {
"__type": "Pointer", "className": "ArticleCategory", "objectId": "<objectId>"
}}를 를 블록체인의 objectId로 바꿔야 합니다.
쿼리 매개변수에 대한 자세한 내용은 REST API 분석 가이드를 참조하세요.
cURL
REST 콘솔도 훌륭하지만 실제 애플리케이션에서 작업할 때는 API 요청에 대해 보다 프로그래머 지향적인 접근 방식을 원할 것입니다. 사용할 수 있는 도구 중 하나는 HTTP, FTP, SMTP 등 다양한 프로토콜을 위한 명령줄 도구인 cURL입니다.
문서 카테고리를 나열하는 cURL 명령의 예는 다음과 같습니다:
$ curl -X GET \
-H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
-H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
https://parseapi.back4app.com/classes/ArticleCategory | jq“Back4app 대시보드 > 앱 설정 > 보안 및 키”에서 키를 받을 수 있습니다.
cURL을 사용할 때 보시다시피 HTTP 메서드 유형을 지정하고 애플리케이션 ID와 REST API 키를 제공해야 합니다. 또한 응답을 jq로 파이프하여 자동으로 서식을 지정하고 색상을 강조 표시할 수 있습니다.
API 참조
Back4app의 또 다른 장점은 모든 데이터베이스 클래스에 대한 API 참조를 자동으로 생성한다는 점입니다. 변경할 때마다 변경 사항이 문서에 반영됩니다.
API 참조에 액세스하려면 사이드바에서 “데이터베이스”를 선택하고 화면 오른쪽 상단의 점 세 개를 사용하여 모든 옵션을 확인합니다. 마지막으로 ‘API 참조’를 선택합니다.
API 참조에는 모든 데이터베이스 클래스에 대한 설명, CRUD 작업에 대한 지침, 샘플 요청, 응답 및 코드 스니펫이 포함되어 있습니다.
백엔드는 여기까지입니다. 다음 섹션에서는 백엔드와 통신할 수 있는 프론트엔드를 구현하는 방법을 살펴보겠습니다.
프론트엔드
위에서 언급했듯이 Next.js 13과 함께 React를 사용하여 프론트엔드를 구축하겠습니다. 일반적으로 JavaScript 프론트엔드에서 Parse 기반 백엔드에 연결하는 방법에는 세 가지가 있습니다:
- REST API(HTTP 요청 및 응답)를 사용하여
- GraphQL API 사용( 이 문서에서 다루고 있음)
- 자바스크립트 SDK 사용
마지막 또는 두 번째 마지막 옵션을 선택해야 합니다. Parse SDK를 활용할 수 있는 클라이언트 앱(예: JavaScript, Flutter, Android, iOS, Xamarin)에서는 REST API를 직접 사용하는 것을 권장하지 않습니다. Parse SDK를 사용하면 더 깔끔한 코드를 작성할 수 있고 오류 발생 가능성이 적기 때문입니다. 내부적으로 Parse SDK는 REST API를 사용합니다.
다음 앱 만들기
create-next-app 유틸리티를 사용하여 Next.js 프로젝트를 부트스트랩합니다. 터미널을 열고 다음 명령을 실행합니다:
$ yarn create next-app
√ What is your project named? ... back4app-graphql
√ Would you like to use TypeScript with this project? ... No
√ Would you like to use ESLint with this project? ... Yes
√ Would you like to use the `src/` directory with this project? ... No
√ Would you like to use the experimental `app/` directory with this project? ... No
√ What import alias would you like configured? ... @/*
Successfully created a Next.js app.다음으로 개발 서버를 실행합니다:
$ yarn devhttp://localhost:3000 으로 이동하면 Next.js 랜딩 페이지가 표시됩니다.
차크라UI
UI/UX 구축 과정을 더 쉽게 만들기 위해 ChakraUI를 활용하겠습니다. Chakra UI는 복잡하지 않고 모듈화된 사용자 친화적인 컴포넌트 라이브러리로, React 애플리케이션을 개발하는 데 필요한 모든 요소를 제공합니다.
문제가 발생하면 ChakraUI를 참조하세요 : Next.js 시작하기.
먼저 실행하여 차크라와 해당 종속 요소를 설치합니다:
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion그런 다음 _pages/app.tsx로 이동하여 다음과 같이 앱을 차크라프로바이더로 래핑합니다:
// pages/_app.tsx
import "../styles/globals.css";
import {ChakraProvider, extendTheme} from "@chakra-ui/react";
export const theme = extendTheme({});
function MyApp({ Component, pageProps }) {
return (
<ChakraProvider theme={theme}>
<Component {...pageProps} />
</ChakraProvider>
);
}
export default MyApp;차크라프로바이더를 가져오는 것을 잊지 마세요:
import {ChakraProvider} from "@chakra-ui/provider";콘텐츠 전에 색상 모드 스크립트를 로드하여 무작위로 색상이 깜박이는 것을 방지하세요. 이를 위해 _document.js를 다음과 같이 활용할 수 있습니다:
// pages/_document.js
import {ColorModeScript} from "@chakra-ui/react";
import { Html, Head, Main, NextScript } from "next/document";
import {theme} from "@/pages/_app";
export default function Document() {
return (
<Html lang='en'>
<Head />
<body>
<ColorModeScript initialColorMode={theme.config.initialColorMode} />
<Main />
<NextScript />
</body>
</Html>
);
}좋아요, ChakraUI를 성공적으로 설치했습니다.
사용자 인터페이스
이제 UI를 구현해 보겠습니다. 다음 두 페이지를 만들겠습니다:
/기사 목록을 표시합니다.// 특정 기사를 표시합니다.
색인부터 시작하세요. pages/index.js 콘텐츠를 다음으로 바꿉니다:
// pages/index.js
import {Card, CardBody, Container, Heading,
Link, Spinner, Stack, Text} from "@chakra-ui/react";
import NextLink from "next/link";
import {useEffect, useState} from "react";
export default function Home() {
const [isLoading, setIsLoading] = useState(true);
const [articles, setArticles] = useState([]);
return (
<>
<main>
<Container maxW="container.lg">
<Heading as="h1" my="4">
back4app-rest
</Heading>
{isLoading ? (
<Spinner size="lg"/>
) : (
<Stack spacing="4" direction="column">
{articles.map((article, index) => (
<Card key={index} w="100%">
<CardBody>
<Stack spacing="3">
<Heading size="md">
<Link as={NextLink} href={article.get("slug")}>
{article.get("title")}
</Link>
</Heading>
<Text>
{article.get("shortContent")}
</Text>
</Stack>
</CardBody>
</Card>
))}
</Stack>
)}
</Container>
</main>
</>
);
}- 나중에 데이터를 가져올 때 사용할
기사및isLoading상태를 준비했습니다. - 사용자 인터페이스를 디자인하기 위해 기본 ChakraUI 구성 요소를 사용했습니다.
- 모든 글을 표시하려면
글상태를 반복합니다.
그런 다음 pages/[slug].js로 이동하여 다음과 같이 변경합니다:
// pages/[slug].js
import {useRouter} from "next/router";
import {Card, CardBody, Container, Heading,
Link, Spinner, Stack, Text} from "@chakra-ui/react";
import NextLink from "next/link";
import {useEffect, useState} from "react";
export default function Article() {
const router = useRouter();
const {slug} = router.query;
const [isLoading, setIsLoading] = useState(true);
const [article, setArticle] = useState(null);
return (
<>
<main>
<Container maxW="container.lg">
<Heading as="h1" my="4">
back4app-rest
</Heading>
{isLoading ? (
<Spinner size="lg"/>
) : (
<>
{article == null ? (
<Text>This article does not exist.</Text>
) : (
<Card w="100%">
<CardBody>
<Stack spacing="3">
<Heading size="md">{article.get("title")}</Heading>
<Text>
{article.get("content")}
</Text>
<Text fontSize="sm">
Posted on {new Date(article.get("createdAt")).toDateString()}
</Text>
</Stack>
</CardBody>
</Card>
)}
</>
)}
<Text size="sm" mt="2" align="right">
<Link as={NextLink} href="/">← Go back</Link>
</Text>
</Container>
</main>
</>
);
}- 아티클을 보관하기 위해
아티클상태를 준비했습니다. - 다음 라우터를 사용하여 URL에서
슬러그매개변수를 가져왔습니다.
백엔드 통합
이 마지막 섹션에서는 프론트엔드와 백엔드를 연결해 보겠습니다.
Parse SDK를 사용하려면 먼저 설치해야 합니다. 다음 명령을 실행합니다:
$ yarn add parse @react-native-async-storage/async-storage그런 다음 페이지/_app.js로 이동하여 다음과 같이 Parse를 초기화합니다:
// pages/_app.js
const PARSE_HOST_URL = "https://parseapi.back4app.com/";
Parse.initialize("YOUR_APPLICATION_ID", "YOUR_JAVASCRIPT_KEY"); // replace me
Parse.serverURL = PARSE_HOST_URL;
export default function App({ Component, pageProps }) {
return (
// ...
);
}가져오기를 잊지 마세요:
import Parse from "parse/dist/parse.min.js";색인 페이지에서 기사를 가져오려면 Parse.Query를 사용할 수 있습니다. 데이터를 가져온 후에는 이를 문서에 저장하고 isLoading을 false로 설정할 수 있습니다:
// pages/index.js
export default function Home() {
// ...
const getArticles = async () => {
const query = new Parse.Query("Article");
setArticles(await query.find());
setIsLoading(false);
};
useEffect(() => {
getArticles();
}, []);
return (
// ...
);
}그런 다음 pages/[slug].js의 문서에 대해 비슷한 작업을 수행할 수 있습니다:
// pages/[slug].js
export default function Article() {
// ...
const getArticle = async () => {
const query = new Parse.Query("Article");
query.equalTo("slug", slug);
const results = await query.find();
setIsLoading(false);
if (results.length === 0) return;
setArticle(results[0]);
};
useEffect(() => {
getArticle();
}, []);
return (
// ...
);
}다시 말하지만, 두 파일 모두에서 Parse를 가져오는 것을 잊지 마세요.
import Parse from "parse/dist/parse.min.js";다음 개발 서버를 시작하고(아직 실행 중이 아니라면) 자주 사용하는 웹 브라우저에서 http://localhost:3000 을 방문합니다. 문서 목록이 표시되고 문서가 읽을 수 있어야 합니다.
결론
이 글에서는 API, RESTful API 및 그 장단점에 대해 알아보았습니다. 이제 간단한 RESTful API를 구축하여 프런트엔드 앱에서 연결할 수 있을 것입니다.
최종 소스 코드는 GitHub에서 확인할 수 있습니다.
이 글이 재미있었다면 GraphQL API 만드는 방법 문서도 확인해 보세요.
