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

외부 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


조코딩 JoCoding

API는 어플리케이션들이 프로그래밍 언어로 상호 작용할 때의 규칙을 의미하며, 오픈 API를 통해 다양한 기능을 쉽게 활용할 수 있다.

프론트엔드 개발자는 공개된 API를 사용하여 백엔드 코드 없이도 웹사이트를 구축할 수 있으며, 날씨 API나 결제 API 등을 활용한 예시가 제시되었다.

CORS 오류와 같은 문제 해결 방법과 유용한 API 목록을 통해 API 활용을 장려하고, 나만의 웹사이트 제작을 제안한다.

API는 Application Programming Interface의 약자로, 애플리케이션과 프로그래밍 언어가 상호 작용하는 **인터페이스, 즉 규칙**을 의미합니다. 프론트엔드와 백엔드가 정보를 주고받을 때, 요청(request)과 응답(response)을 통해 통신하며, 이 과정에서 사용되는 규칙이 바로 API입니다.

오픈 API는 공개적으로 사용 가능한 API를 말합니다. 백엔드의 다양한 기능들을 API 형태로 개방하여, 어떤 프론트엔드(컴퓨터, 스마트폰 등)에서도 해당 기능에 접근하고 정보를 가져올 수 있도록 합니다. 예를 들어, 오픈 날씨 API를 통해 날씨 정보를 요청하고 받을 수 있습니다.

⚙️ API 사용 방법: 요청과 응답

API를 사용하려면 서버 주소(URL)가 필요하며, 전송 방식으로는 GET과 POST가 있습니다. GET은 주소창에 정보를 입력하여 요청하는 방식이고, POST는 주소창에 정보가 노출되지 않는 방식입니다. 응답은 주로 **JSON 형식**으로 제공됩니다.

JSON은 JavaScript Object Notation의 약자로, 키(key)-값(value) 쌍으로 이루어진 데이터 구조입니다. 예를 들어, {"name": "홍길동", "age": 25}와 같이 표현됩니다. API 응답은 이러한 JSON 형식으로 제공되어, 데이터를 쉽게 파싱하고 활용할 수 있도록 합니다.

GitHub에는 다양한 공개 API 목록이 정리되어 있으며, 애니메이션, 예술, 디자인, 블록체인, 비즈니스 등 다양한 분야의 API를 무료로 사용할 수 있습니다. 예를 들어, 동물 입양 정보나 고양이 관련 API 등이 있습니다.

API 사용 시 로그인 필요성이 있는 경우가 있습니다. 이는 API를 공개했을 때 과도한 요청으로 서버 과부하가 걸리는 것을 방지하기 위해, API 키를 발급받은 사용자만 사용하도록 제한하는 것입니다. 키 없이 사용할 수 있는 API도 있습니다.

날씨 API를 사용하여 특정 도시의 날씨 정보를 가져오는 방법을 예시로 설명합니다. AJAX 기술을 사용하여 웹 페이지 새로고침 없이 특정 정보만 요청하고 업데이트할 수 있습니다. Fetch API를 통해 간단하게 날씨 정보를 요청하고, JSON 형식으로 응답받아 화면에 표시할 수 있습니다.

JavaScript fetch를 사용하여 API 요청을 보내고, then() 메서드를 통해 응답을 처리합니다. JSON 데이터를 파싱하여 필요한 정보(예: 온도)를 추출하고, document.getElementById를 사용하여 HTML 요소에 해당 값을 삽입하여 화면에 표시합니다.

버튼 클릭 시 날씨 정보를 가져오는 기능을 구현할 수 있습니다. 버튼에 onClick 이벤트를 연결하고, 해당 이벤트 발생 시 getWeather 함수를 실행하여 날씨 정보를 업데이트합니다. 또한, 입력 필드를 만들어 도시 이름을 입력받아 해당 도시의 날씨 정보를 실시간으로 표시하는 기능도 구현할 수 있습니다.

📧 프론트엔드만으로 데이터베이스 활용하기

프론트엔드 개발만으로도 공개 API를 활용하여 다양한 기능을 구현할 수 있습니다. 예를 들어, form 태그와 API를 연동하여 이메일 주소와 메시지를 외부 데이터베이스로 전송할 수 있습니다. 이를 통해 백엔드 데이터베이스 없이도 간단한 데이터 수집 기능을 구현할 수 있습니다.

Naver, Kakao, Google과 같은 대기업 및 공공 데이터 포털에서 제공하는 유용한 API들을 소개합니다. 결제 API(예: IM Port)를 통합하여 온라인 결제 기능을 쉽게 구현할 수 있으며, 채널톡 API를 사용하여 실시간 상담 기능을 웹사이트에 추가할 수 있습니다.

CORS(Cross-Origin Resource Sharing) 에러는 보안상의 이유로 발생하는 접근 제한 문제입니다. 이 경우, 프록시 서버를 사용하여 API 요청을 우회하거나, CORS 설정을 변경하여 문제를 해결할 수 있습니다. CORS 관련 에러 해결 방법은 온라인 검색을 통해 쉽게 찾을 수 있습니다.

🚀 API 활용, 나만의 웹사이트 만들기

다양한 API들을 활용하여 자신만의 웹사이트를 만들어 보세요. 유용한 API를 찾아 통합하고, 자신만의 독창적인 서비스를 구축할 수 있습니다. API를 자유롭게 활용하여 다양한 웹사이트를 쉽게 만들 수 있습니다.

API는 무엇이며, 애플리케이션 프로그래밍 인터페이스의 약자인데, 여기서 '인터페이스'의 개념을 UI(사용자 인터페이스)와 비교하여 설명해 줄 수 있나요?

백엔드와의 통신에서 프론트엔드가 정보를 요청하고 백엔드가 응답하는 과정, 즉 '요청과 응답'의 규칙이 API라고 설명되었습니다. 이 과정에서 '겟(GET)' 방식과 '포스트(POST)' 방식의 주요 차이점은 무엇인가요?

JSON 형식의 데이터는 키-값 쌍으로 구성된다고 설명했는데, 예시로 제시된 '이름: 홍길동, 나이: 25, 특기: [농구, 도술]'과 같은 데이터에서 '도술'이라는 값을 가져오려면 어떻게 접근해야 하는지 구체적인 방법을 설명해 줄 수 있나요?

오픈 API를 활용하여 날씨 정보를 가져오는 실습에서, `Fetch` 함수를 사용하여 API를 호출하고 응답 데이터를 처리하는 과정이 어떻게 이루어졌는지 단계별로 설명해 주세요.

무수히 많은 공개된 API를 효율적으로 활용하기 위해 `Auth`, `HTTPS`, `CORS`라는 세 가지 요소를 고려해야 한다고 언급했습니다. 이 요소들이 각각 어떤 의미이며, API 사용에 어떤 영향을 미치는지 설명해 줄 수 있나요?

API는 Application Programming Interface의 약자이며, 프로그램 간의 정보 교환 규칙을 의미함.

프론트엔드와 백엔드 간의 요청(request)과 응답(response) 규칙이 API에 해당함.

오픈 API는 공개적으로 사용 가능한 API를 의미하며, 다양한 프론트엔드에서 백엔드의 기능에 접근 가능하게 함.

API 사용을 위해서는 서버 URL 주소, GET/POST 등의 전송 방식, 요청 시 필요한 검색어 및 옵션 등이 필요함.

GET 방식은 주소창에 정보가 표시되고, POST 방식은 정보가 숨겨져 전송됨.

API 응답은 주로 JSON 형식으로 제공됨.

JSON은 key-value 쌍으로 이루어진 데이터 구조이며, JavaScript의 객체와 유사함.

GitHub에서 다양한 오픈 API 목록을 찾을 수 있으며, 이를 활용하여 프론트엔드 개발만으로도 좋은 웹사이트를 만들 수 있음.

API 사용 시 로그인 필요 여부, HTTPS 보안 연결, CORS 문제 등을 고려해야 함.

날씨 API, Kakao Book Search API 등 다양한 API 활용 예시가 존재함.

날씨 API를 이용한 데이터 수신 및 활용

날씨 API를 통해 특정 도시의 날씨 정보를 JSON 형식으로 받아올 수 있음.

AJAX 기술을 사용하여 웹 페이지 새로고침 없이 API로부터 데이터를 가져올 수 있음.

Fetch API를 사용하여 날씨 정보를 요청하고, JSON 형식으로 응답받아 HTML에 표시하는 방법을 설명.

Fetch API 사용법 및 then() 메서드를 이용한 응답 처리 방법을 설명.

JSON 데이터에 접근하여 특정 키에 해당하는 값을 추출하는 방법을 설명.

JSON 데이터 내의 특정 키 값을 가져오는 방법 예시 (이름, 나이, 특기 등).

추출한 날씨 데이터를 HTML 요소에 삽입하여 화면에 표시하는 방법을 설명.

JavaScript를 사용하여 HTML 요소의 내용을 변경하고 API에서 가져온 데이터를 삽입하는 방법.

버튼 클릭 시 날씨 정보를 가져오는 기능을 구현하는 방법을 설명.

POST 방식의 API 사용법과 다양한 옵션 설정 방법을 간략하게 언급.

도시 이름을 입력받아 해당 도시의 날씨를 표시하는 기능을 구현하는 방법을 설명.

페이지 새로고침 없이 API를 사용하는 방법과, 버튼 클릭 없이 자동으로 날씨 정보를 표시하는 방법을 설명.

백엔드 없이 API를 활용한 데이터 저장

간단한 폼(form) 태그와 API를 사용하여 데이터를 외부 데이터베이스에 저장하는 방법을 설명.

폼 태그를 사용하여 이메일 주소와 메시지를 전송하고, 외부 API를 통해 데이터를 저장하는 예시를 보여줌.

다양한 유용한 API 소개 및 CORS 문제 해결

Naver, Kakao, Google 등의 API와 결제 API(IM Port), 상담 API(Channel IO) 등 유용한 API들을 소개.

무료 API 활용 시 주의사항 (사용량 제한 등) 및 CORS 문제 해결 방법 제시.

CORS 에러 발생 시 프록시 서버를 구축하여 해결하는 방법을 간략하게 설명.

API를 자유롭게 활용하여 자신만의 웹사이트를 만들어 볼 것을 권장하며 마무리.