[통신/json] 별도 서버 API 구축/구현 없이 간단하게 json 데이터 가져오기

javascript, vue 등.. 웹 프로그래밍이나 Android 앱 개발 학습을 새로 진행할 때 마다,
실무에 도움이 되는 서버와의 통신 구현 부분을 실습이 반드시 나타납니다.

 

예전에 저는 서버 관련 지식이 부족했고, 관련 지식이 생긴 후에도 당장 테스트 가능한 api가 없어서 이론만 보고 넘어가는 경우가 많았습니다.😥
이럴 때 간단하게 서버로 부터 내가 원하는 데이터형식에 맞게 json 데이터를 호출 할 수 있는 방법을 안내하고자 합니다.

 

바로 gist를 이용한 방법입니다.

gist란?

GitHub와 다르게 Gist는 모든게 무료입니다.
단일 파일만 관리 가능하므로, 블로그 내 소스코드, 로그, 메모 등 간단히 작성할 때 사용하면 좋습니다.

방법

1. gist에 json 데이터 올리기

로그인 후,
https://gist.github.com/ 에 접속하면 간단한 파일 하나를 git 서버에 올릴 수 있는 입력창이 나타납니다.

 

이곳에 내가 원하는 json데이터를 작성해주고 [제목].json 형식으로 파일을 저장해줍니다.
저는 실습 중인 Vue TODO APP의 초기 데이터를 생성해주었습니다.

2. 호출하기

원하는 json 파일의 Raw를 클릭해줍니다.

Your gists에 들어가면 gist를 조회할 수 있습니다.

그럼 아래 사진과 같이 json 결과 화면으로 이동됩니다.

이제 이 url을 복사하여 호출하면 아래 json 파일을 얻으실 수 있습니다.

Raw를 클릭하여 json 파일을 웹사이트로 띄운 화면

결과

Post man 호출 결과

이제 코드 상에서 url를 호출해 실습해보세요!

// SAMPLE TODO 데이터 호출
initList(context) {
    axios.get('https://gist.githubusercontent.com/lmjing/0370b7392cf67fb9e500ff2c231b819a/raw/dc58261437377981bed2663f81e0d0448125ce77/TodoItems.json')
        .then((response) => {
            if (response.status === 200) {
                context.commit('setList', response.data || []);
                console.log(response);
            } else {
                console.log('error');
            }
        })
        .catch((error) => {
            console.log(error);
        });
}