날씨 가져오기를 누르면 날씨를 가져왔습니다.

외부 DB로 정보를 보낼 수도 있습니다. 요렇게 정보를 받을 수가 있다, 여기 있는 것들은 다 무료로 사용하실 수 있습니다.

API의 개념에 대해서 배워보도록 하겠습니다.

API는 어플리케이션 프로그래밍 인터페이스의 약자예요. 어플리케이션은 많이 보셨죠?

뭐 앱, 지금 사용하는 것들이 다 어플리케이션이니까.

프로그래밍은 지금 여러분들이 하고 계신 게 프로그램이죠. 그래서 얘 둘은 무슨 말인지 보통 다들 아시는데 인터페이스가 뭐냐라고 하면 이거는 좀 생소하죠.

위키백과에 있는 사전적 정의를 가져와봤습니다. 인터페이스는 서로 다른 두 개의 시스템 장치 사이에서 정보나 신호를 주고받는 접점이나 경계면이라고 합니다.

아직 어렵죠. 인터페이스가 쓰인 다른 걸 생각을 해보도록 하겠습니다.

UI라고 하면은 유저 인터페이스인데 UI는 어디서 많이 들어보셨죠?

스마트폰이나 웹에 유저와 상호작용하는 이미지, 박스, 버튼 이런 거를 UI라고 하죠.

UI라는 거를 통해서 유저랑 화면이랑 상호작용을 합니다.

API를 좀 풀어보자면 앱이 프로그래밍 언어로 상호 작용할 때 경계면, 이런 건데 경계면은 말이 좀 어렵잖아요.

이때 규칙이라고 좀 더 쉽게 표현을 할 수가 있겠습니다.

앱끼리 통신을 한다라고 했을 때 화면 프론트엔드와 백엔드 데이터를 처리하는 백엔드와 보통 통신을 많이 합니다.

이렇게 통신을 할 때 프론트엔드에서 어떤 정보를 요청하고 백엔드에서 정보를 처리해서 결과를 전달하는 요런 구조로 통신을 하는데요.

좀 더 구체적으로 풀어보자면 프론트엔드에서는 백엔드로 요청을 보냅니다.

리퀘스트라고 하는데 영어로 리퀘스트를 보내면 백엔드에서 막 로직을 처리하고 복잡한 정보를 처리해서 응답, 리스폰스라는 응답을 주게 됩니다.

리퀘스트하고 리스폰스하고 요렇게 정보를 주고 받는데 이런 규칙을 API라고 합니다.

부릅니다. 요러면 좀 API의 개념이 이해가 되시나요? 마치 유저가 막 버튼을 통해서 앱이랑 상호작용을 하듯이 어떤 프로그램들, 애플리케이션들끼리 프로그래밍 언어를 이용해서 소통을 할 때, 그때 이런 요청 응답을 하게 되는데 그거에 규칙이 API인 겁니다, 쉽게.

그러면 오픈 API는 뭐냐라고 설명드리면 오픈 API는 말 그대로 오픈을 해 놓은 겁니다.

이 백엔드를 누가 만들어 놓고 여기에 막 어떤 기능을 넣어 놨어요.

이걸 API를 통해서 공개를 해 놓으면 이걸 오픈 API라고 부르는데, 그러면 이 API가 백엔드에서 어떤 복잡한 기능을 하든지 이 기능을 프론트엔드 다른 여러 개, A라는 컴퓨터, B라는 컴퓨터, 혹은 스마트폰에서도 이 오픈 API만 있으면 여기에 어떤 정보를 요청해서 가져올 수가 있습니다.

뭐 예를 들어 이게 날씨 오픈 API다라고 하면 날씨 정보가 있겠죠.

오늘의 날씨가 이 DB에 저장되어 있다고 하면 이 컴퓨터에서 이렇게 요청하듯 날씨 정보가 날라오고 웹에서도 요청해서 받을 수 있고 핸드폰에서도 요청해서 받을 수 있고 이런 식으로 어떤 기능을 하는 접점 규칙을 제공하는 것이 API입니다.

안도 JS님 맞습니다. 기상청 API가 정확히 그겁니다. 오픈 API로 공개되어 있으면 이걸 요청해서 받아 갈 수 있다.

그럼 API는 이 앱이 프로그래밍 언어로 상호작용할 때 규칙이다 정도로 이해하시면 될 것 같습니다.

API 가이드에 따라서 요청을 보내고 응답을 받아서 그 기능을 사용할 수가 있습니다.

그러면은 API가 어떤 식으로 공개가 되는지 구체적인 사례를 보여 드리도록 하겠습니다.

얘가 프론트엔드고 백엔드라고 했을 때 어떤 요청을 보내고 응답을 받는 것에 대한 규칙이 이렇게 가이드로 나와 있습니다.

가이드가 당연히 요청을 보내야 되기 때문에 이 서버가 어디에 있다라는 주소가 필요하겠죠.

그래서 이 주소를 알려면 당연히 이 서버가 여기에 있습니다 하고 서버 주소 URL을 줄 거고요.

그럼 이 주소에 전송 방식은 이제 겟이 있고 또 포스트를 하는 방식이 있는데, 간단히 말씀드리면 겟은 주소창에 여기에 어떤 정보, 책 검색이라고 하면 책 이름이 조코딩 책 이름이 뭐 파이썬 이런 식으로 검색어 같은 걸 주소창에 넣어서 보내는 걸 겟 방식이라고 하고요.

주소창이 아니라 안 보이는 곳에 넣어서 보내는 것이 포스트 방식입니다.

그래서 이 두 개는 뭐 요런 차이가 있다 정도로 간단하게 이해를 하시면 좋을 것 같고요.

그리고 보낼 것에 펄이라는 검색어를 보내야 되고, 소트라는 거는 선택적으로 보낼 수 있고 이런 옵션들이 좀 있습니다.

그래서 요청할 때 이런 규칙에 맞춰서 요청을 해야 된다라는 규칙이 있고요.

응답에서는 어떤 식으로 응답을 주는지, 형식은 JSON이다. 보통 JSON으로 많이 주고 뭐 XML이라는 형식으로도 많이 주는데, 요즘은 JSON으로 거의 다 대부분 JSON을 줍니다.

JSON으로는 응답이 요런 식으로 날아온다라고 API 가이드가 나와 있는데, 그런 규칙이 있으면 이걸 통신을 서로 할 수가 있는 겁니다.

그래서 이렇게 통신할 수 있는 오픈 API 있고 당연히 오픈 API가 아닌 API도 있습니다.

그냥 내부적으로 쓰는 거 당연히 내가 쓰는 비밀 회원 정보 뭐 이런 거를 다 공개해 놓으면 이상하겠죠.

그래서 이거는 오픈 API도 있고 숨겨진 것도 나만 쓰는 것도 있습니다.

실제로 4주차 5주차에는 이거를 직접 만들어 볼 겁니다.

응답이 제이슨 형식으로 온다라고 했는데, 제이슨이 뭔지 설명을 드리겠습니다.

제이슨은 자바스크립트 오브젝트 노테이션이라는 약자인데 뭐 약자까지는 굳이 기억하실 필요 없고 자료의 어떤 형식이라고 보시면 됩니다.

어레이 이런 거 설명드렸고 뭐 파이썬 배우신 분들은 딕셔너리 이런 거 배워보신 적 있을 텐데 그거랑 똑같다고 보시면 됩니다.

그래서 어떤 자료형을 의미하는데요 어떤 식으로 표현이 되냐면 키와 값으로 구성된 자료형입니다.

예시를 보면 그 JSON은 항상 중괄호와 중괄호 사이에 데이터가 들어가는데요.

키, 콜론, 밸류, 콤마 이런 식으로 쭉쭉쭉 여러 개를 추가할 수 있는 게 JSON 형식의 데이터입니다.

중괄호가 있고 'JSON이 시작할 거야', 'JSON이' '끝났어'라는 걸 표시해 주는 중괄호와 중괄호가 있고 어떤 키가 있고 밸류가 있고 다음 데이터는 콤마로 연결되고 키가 있고 밸류가 있고 콤마로 연결되고 이런 식으로 연결이 됩니다.

그러면은 이름은 홍길동, 나이는 25살, 성별은 여자, 요런 식으로 연결이 돼서 자료가 넘어오는 것이 JSON 형식이라고 부릅니다.

웬만하면 응답이 이제 JSON으로 온다라고 기억해 두시면 좋을 것 같습니다.

이거를 받아서 이제 어떻게 사용하는지는 실습도 해보겠습니다.

그러면은 공개된 퍼블릭 API가 뭐가 있는지가 정리된 사이트들이 좀 있습니다.

여기서 좀 재밌는 API들을 많이 쓸 수가 있습니다.

깃허브 제가 보내드린 거에 퍼블릭 API 공개되어서 누구나 쓸 수 있도록 되어 있는 API들의 목록이 잘 정리돼서 나와 있습니다.

퍼블릭 API라고 해서 공개된 API가 어마 무시하게 진짜 많습니다.

애니메이션, 아트, 디자인, 블록체인, 비즈니스 엄청 많습니다. 동물 입양하는 뭐 이런 정보 볼 수 있는 것도 있고 고양이에 대한 사실들 뭐 이런 걸 볼 수 있는 건 별의별 API가 다 있습니다.

이 백엔드에서 처리하는 엄청난 기능들이 많기 때문에 우리는 사실상 프론트엔드만 할 줄 알아도 백엔드는 그냥 공개되어 있는 API를 쓰면은 얘네만 잘 연결해서 써도 웬만한 사이트를 다 만들 수가 있습니다.

백엔드를 거의 안 써도 된다. 왜냐하면 이렇게 기능들이 많기 때문에 그래서 이런 기능들이 이용하면 굳이 백엔드를 내 코드를 짜지 않아도 이 기능들을 잘 조합하기만 해도 충분히 좋은 사이트를 만들 수가 있습니다.

핵심적인 거 몇 개만 말씀드리면 자 API에 대한 설명을 하면서 API 사이트가 어디 있고 설명이고 어스 HTTPS CORS가 있는데, 요게 뭐냐면, 어스는 이제 로그인이 필요하다.

어떤 API 키가 있어야만 접근이 가능하다. 왜냐하면 API 공개해 놓으면 사람들이 너무 많이 요청할 수도 있잖아요.

그래서 너무 많이 요청하면 이제 서버 과부하 걸리기 때문에 키를 받은 사람만 이걸 쓸 수 있다라고 지정해 놓은 게 어 쓰고요.

노후로 돼 있는 건 키 없이도 그냥 쓸 수 있다라는 겁니다.

그리고 HTTPS는 보안 연결을 제공하냐 아니면 보안 없이 제공하냐 뭐 이런 차이고요.

CORS는 약간 복잡한데 프론트엔드 HTML 페이지에서 요청하면 오류가 나는지에 대한 요구입니다.

CORS로 막아 놓으면 약간 보안상 이런 거 해 놓는데 이게 yes인 것들은 그냥 HTML에서 생으로 요청하면은 거부 당합니다.

그래서 HTML에서 요청이 안 되는 것들이 이제 예스 표시가 돼 있고요.

No라고 되어 있는 것들은 HTML 페이지에서 요청해도 응답이 잘 날아옵니다.

그래서 요런 것들을 기억해 두시면 이제 API 원하는 걸 찾아서 쓰시기에 좋을 것 같습니다.

API 그러면 활용하는 거를 직접 한번 해보겠습니다.

예시로 뭐 날씨, 고양이 사진 뭐 이런 것들을 가져와 봤는데 이거 말고도 유용한 게 당연히 어마무시하게 많습니다.

잠깐의 예시들 몇 개만 보여 드리는 것뿐이고 더 하실 분들은 카카오 책 검색 API 하는 방법도 나와 있는데 그거 한번 해보셔도 되고 카카오, 네이버, 구글 어느 사이트나 API를 안 제공하는 사이트가 거의 없을 정도로 대형 기업들은 다 API를 오픈해서 제공하는 경우가 많습니다.

그러면 대표적인 날씨 API를 한번 이용해 보겠습니다.

깃허브의 날씨 API를 제공해서 뭐 직접 이 코드를 올려도 되고 다양한 방법으로 제공을 하는데요.

사이트에 들어가 보면 웨더 API 사용법 해 가지고 이 주소로 들어가면 날씨를 볼 수 있다고 합니다.

그리고 여기 끝에 ct라고 되어 있는데 여기 도시 이름을 넣으면은 그 도시의 날씨가 나온다고 해요.

여기 써 있죠. 이런 식으로 이그잼플에서 리퀘스트 요런 식으로 이 주소로 요청을 보내면 리스폰스가 이런 식으로 나온다.

이게 아까 배웠던 JSON 형식이죠.

템플릿 쳐 온도는 콜론 몇 도 콤마 바람은 요만큼 콤마 하고 키 밸류, 키 밸류로 되어 있죠.

이런 식으로 되어 있는 정보가 날라온다고 합니다.

그러면 여기로 들어가서요. 주소 여기에 지금 쿨이 티바 뭐 이렇게 돼 있는데 런던 날씨를 해 보도록 하겠습니다.

런던은 이렇게 입력하면은 JSON이 지금 브라우저에서도 이런 식으로 표시가 됩니다.

근데 이거를 우리의 프론트엔드에서 정보를 요청해서 받아와서 쓰는 걸 해 봐야겠죠.

그러면 코드로 어떻게 받아 오는지 구현을 해 보겠습니다.

일단은 좀 이론을 설명드리면 우리는 API라는 기술을 이용해서 API를 받아올 겁니다.

에이젝스가 뭐냐면 보통 웹사이트에서 어떤 정보 요청해 올 때 이것도 지금 이런 식으로 어떤 주소를 들어가서 입장하면은 브라우저가 새로고침이 되면서 이 정보를 받아오는 그런 구조로 되어 있죠.

근데 에이젝스를 이용하면 에이젝스는 페이지는 그대로 있는 상태에서 페이지 그대로 있는데 정보만 따로 요청해서 가져오는 형태가 됩니다.

좀 요약을 해보면 이런 화면이 있다고 했을 때 이 페이지에서 주소창 자체를 새로 고치면서 가져오는 게 아니라 일부분에서만 정보를 요청해서 API에서 정보를 받아서 요것만 이렇게 샥 따로 교체하는 거, 요게 AJAX를 이용하는 기술입니다.

그래서 에이젝스를 이용해서 정보를 처리하는 걸 해볼 거고요.

에이젝스를 요청하는 방법은 뭐 크게 세 가지 정도 있는데 더 많습니다.

사실 뭐 Axios 뭐 별거 다 있는데 그중에서 대표적인 걸 보자면 뭐 XML HTTP Request 요런 거는 되게 옛날 방식입니다.

그래서 지금은 사실 좀 잘 안 쓴다. 그러니까 이전에 2019년에 자바스크립트 다룰 때 제이쿼리를 이용했습니다.

제이쿼리도 되게 직관적으로 잘 되어 있긴 한데, jQuery를 우리는 안 쓰고 할 수 있으니까 제이쿼리를 안 쓰고 진행을 하고 있는데 Fetch가 요즘에 최근에 표준입니다.

뭐, 이 세 가지 방식이 다 어떤 정보를 요청해서 받아오는 방식이라고 보시면 됩니다.

Fetch를 그럼 이용해서 정보를 받아오는 거를 해보겠습니다.

일단 HTML 페이지를 만들었고, H1을 이용해서 날씨, 오늘의 강릉 날씨로 해보겠습니다.

API란? 개념 및 유용한 API들 소개, 날씨 API 자바스크립트 실전 활용 방법

누구나 배울 수 있는 쉬운 코딩 채널을 만들어가는 조코딩입니다. 프로그래밍에 대해 아무것도 모르더라도 개발이 가능하도록 기초부터 차근차근 쉽게 설명해드립니다. 또한, 단순히 코딩 지식을 배우는 것을 넘어서 웹, 앱, 게임 같은 결과물을 만들고 비즈니스 모델을 만들어 수익화 하거나 주식/코인 투자 자동화, 업무 자동화를 하는 등 실용적인 관점에서 코딩을 교육합니다.

비즈니스 문의
business@jocoding.net


API란? 개념 및 유용한 API들 소개, 날씨 API 자바스크립트 실전 활용 방법

API란? 개념 및 유용한 API들 소개, 날씨 API 자바스크립트 실전 활용 방법

Scripts