아날로그 API를 사용하여 개발자의 생산성 향상

우리가 전단을 개발할 때, 우리는 운 좋게도 완전한 API를 가지게 될 것이다. 비록 현실 세계에서, 대다수 때, 우리는 API가 없는 상황에서 개발된 위치에 있고, 미래에 우리가 필요로 하는 모든 기능을 사용할 수 있을 것이다.
이런 의존성을 최소화할 수 있는 몇 가지 도구가 있는데, 나는 ember 아주 좋은 것이 있다는 것을 기억한다 ember-cli-mirage.이것은 당신이 필요로 하는 기능을 제공합니다. ember 와 깊이 있게 통합되고, 기본적으로 완전한 아날로그 API를 사용하여 개발할 수 있도록 합니다. 이것은 좋은 시작 원칙이라고 생각합니다.
외부 서버에 의존하지 않고 프로그램을 실행할 수 있는 것도 좋다(비행기에서, 인터넷이 없는 여행에서, 또는 메모리가 부족한 컴퓨터에서만 여행할 수 있다고 상상해 보자).
사용자 인터페이스 개발자가 단추를 개발하기 위해 세 대의 서버를 실행하는 것을 원하지 않는다.

용례
지난 며칠 동안 우리는 비슷한 문제에 직면해 있었다.우리는 API 서명이 있는 화면을 개발하고 있지만 API는 아직 준비가 되지 않았다.
또 다른 선택은 완료될 API를 기다리는 동안 유효 로드 하드코딩을 어디에나 적용하는 것입니다.
물론, 우리는 그것으로 당신의 단추를 개발할 수 있지만, 응용 프로그램에서 요청을 실행하는 부분은 실현할 수 없습니다.또한 앞으로 시뮬레이션 데이터를 실제 API로 최대한 적게 변경하기를 원합니다.
이 해결 방안은 보기에 정확하지 않다. 특히 우리가 기억할 때 ember-cli-mirage.불행하게도, 우리는 ember-cli-mirage 다른 라이브러리와 함께 사용할 수 없습니다. 비록 우리가 제공하는 기능을 놓쳤지만.
우리가 최종적으로 얻은 해결 방안은 json-server과 route-parser 그리고 axios 요청 차단기의 조합이다.
우리의 http 클라이언트에서 우리는 axios을 호출했기 때문에 우리가 하는 첫 번째 일은 이 줄을 추가하는 것이다.

// httpClient.js
import mockApiRequestInterceptor from './mockApiRequestInterceptor';

axios.interceptors.request.use(mockApiRequestInterceptor);
// Please keep in mind that if you use axios instance, 
// you have to do it on the instance

요청 차단기를 만들었습니다

// mockApiRequestInterceptor.js
import UrlPattern from 'route-parser';
import { API_BASE_URL } from 'appConfig';

const MOCK_API_BASE_URL = 'http://localhost:3001/api';
const MOCK_URLS = [
  `${API_BASE_URL}/:user/posts/:id`
];

export default (config) => {
    if (!IS_DEVELOPMENT) {
        return config;
    }

    const matchedUrl = MOCK_URLS.find(mockUrl => {
        const pattern = new UrlPattern(mockUrl);
        return pattern.match(config.url);
    });

    if (matchedUrl) {
        config.url = config.url.replace(API_BASE_URL, MOCK_API_BASE_URL);
    }

    return config;
};

에뮬레이트된 URL은 에뮬레이트된 버전이 있는 경우 에 추가됩니다MOCK_URLS.
따라서 이 코드는 URLhttps://mycrazyserver.com/api/asantos00/posts/123에서 보낸 요청을 http://localhost:3001/api/asantos00/posts/123로 바꿔 일부 문제가 해결되었다.
그 후에 우리는 또 다른 좋은 가방json-server을 이용했다(TLDR: REST 루트를 통해 JSON 파일을 제공했다).
이 json-server 와 설정을 실행하는 npm 스크립트를 만들었습니다. (뒤에서 설명하겠습니다.)

// package.json
{
    "scripts": {
        "mock-api:serve": "json-server --watch mock-api/db.json --port 3001 --routes mock-api/routes.json"
    }
}

db.json 파일을 만들었습니다.

// mock-api/db.json
{
    "posts": [
        {
            "id": 1,
            "title": "Mocking an API with axios",
            "author": "asantos00",
            "createdAt": 1557937282,
            "body": "Lorem ipsum dolor sit amet, consectetur."
        },
        {
            "id": 2,
            "title": "Whatever post",
            "author": "asantos00",
            "createdAt": 758851200,
            "body": "Lorem ipsum dolor sit amet, consectetur."
        }
    ]
}

이것은 db.json 파일의 모든 실체에rest 단점을 자동으로 만들고db 파일의 변경 사항을 감시합니다.
앞에서 설명한 바와 같이 json-server 솔리드에 대한 REST 끝점이 생성됩니다. 즉, post 솔리드db.json가 생성되면 다음 끝점이 생성됩니다.

GET /posts - 게시물 목록 반환

GET /posts/:id - 보낸 ID

가 있는 게시물을 반환합니다.

POST /posts - 게시물 작성

PUT /posts/:id - 보낸 ID

로 댓글 바꾸기
사용자 파이프라인을 생성하는 파일은 routes.json입니다.

// mock-api/routes.json
{
  "/api/*": "/$1",
  "/:user/posts/:id": "/posts?user=:user"
}

routes 파일은 어떤 요청/:user/posts/:id이 발생하든지 간에 자동으로 생성된 노드/posts로 방향을 바꿉니다.네, json-server도 필터를 지원합니다. 저희는 여기에서 검색 매개 변수user를 사용합니다.
완성!현재, 우리 프로그램은 계속 실현된 노드에 요청을 할 것입니다.하지만 우리는 계속해서 아날로그 API로 이 페이지를 개발할 수 있다.
진정한 API를 사용하려면 MOCK_URLS 파일mockApiRequestInterceptor에서 URL을 삭제하면 됩니다.

결론
마지막으로 이 해결 방안은 절차를 개선시켜 백엔드 노드가 완성되었는지 걱정하지 않고 실제 환경에 더욱 가깝게 모든 사례를 실현할 수 있도록 도와준다.
또 다른 장점은 라이브러리에 의존하지 않는다는 것이다. http 클라이언트에만 의존하기 때문에 react 에서 backbone.js, 심지어 react-native 까지 사용할 수 있다.
만약 내가 사용한 놀라운 소스 오픈 패키지가 없었다면, 이 모든 것은 불가능했을 것이다. 이것은 단지 설명된 용례를 위해 각 부분을 통합시키는 문제일 뿐이다.
당신은 어떤 방법으로 이 문제를 해결합니까?이것은 네가 자주 만나는 것이냐?