본문 바로가기
관리자

Programming-[Frontend]/Javascript

Javascript / API, Server 기초 개념

728x90
반응형

 

1. Server

Server프로그램의 사용자(Client)가 요청하는/요청할 데이터를 저장하고, 송·수신 하는 역할을 하는 것이다.

 

보통, Client는 서버에게 HTTP(URL) 형식으로 데이터를 요청하고 서버text, HTML, JSON 등의 형태로 Client의 요청에 응답해주게 된다.

단순히 데이터 요청, 응답만 하는 것이 아니라 client가 server에 데이터를 게시(post)할 수도 있다. 우리가 흔히 작성하는 Blog 등도 이런 방식으로 server와 통신한다고 생각하면 된다.

 

HTTP 요청은 fetch API를 통해 할 수 있다.

Javascript를 통한 날씨 정보 요청 예제를 살펴보자.

 

날씨 정보가 있는 날씨 API는 대표적인 사이트로 openweathermap.org에서 얻어올 수 있다.

https://openweathermap.org/

 

Сurrent weather and forecast - OpenWeatherMap

Dashboard and Agro API We provide satellite imagery, weather data and other agricultural services that are based on geodata. By using Agro API , you can easily power your solution based on this information. Dashboard is a visual service where you can easy

openweathermap.org

회원 가입 후, API Key를 받아야 한다.

API Key는 일반인들이 서버로 데이터를 무리하게 요청한다거나, 보안상의 이슈를 만드는 일이 없도록 개인들을 식별하고 암호화하기 위한 정보이다. 또한 API를 제공하는 곳에서 이를 이용하여 수익창출을 하기도 한다.

 

어쨌든 가입을 하고, API 탭에 들어가면 현재 날씨, 4일간의 날씨 등 다양한 API 항목을 볼 수 있다.

특정 API를 선택하여 페이지를 이동하면 아래와 같이 API를 이용할 수 있는 방법이 기재되어 있다.

 

도시 이름으로 Current weather를 조회하는 API 사용 방법

빨간색 글씨로 된 URL을 'https://' 구문과 함께 활용하여 API fetch를 할 수 있다.

({city name} 대신 Seoul, {your api key} 대신 본인이 회원 가입 시 받은 api key를 붙여넣어 주어야 한다.) 

 

1
2
3
4
5
6
7
fetch('https://api.openweathermap.org/data/2.5/weather?q=Seoul&appid=f1fa608c21e31c8d795c823346b69942')
.then(function(resp){
return resp.json();
})
.then(function(json) {
 console.log(json);
});
cs

그러면 json 형태로 서버에서 데이터를 받아옴을 확인할 수 있다.

온도가 Kelvin 단위로 표기되어 있다. 구름, 바람, 기압 등 다양한 정보를 받아온다.

 

fetch가 아닌 post의 형태로 API를 응용하면, 앞서 언급했던 서버에 데이터를 기록할 수 있게 된다.

추후에 상세히 알아보도록 하자.

 

 

 

2. API

 

API는 Application Programming Interface의 약자이다.

응용 프로그램들 간의 상호작용을 위한 데이터, 문서 등이라고 이해하면 된다.

위의 Server에서의  사례로 예를 들면, 날씨를 조회하고자 하는 사용자와 server간에 주고받는 데이터와 그 양식이 API 인 것이다.

 

다양한 유·무료 API들을 제공하는 사이트도 있다.

https://www.apistore.co.kr/main.do

 

API스토어-나의 비즈니스가 성공하는 노하우

SMS, 문자, 문자 API, SMS API, MAP, 지도, 지도 API, 보행자 경로탐색, 화물차 경로탐색, 영어 지도, 일본어 지도, 경로탐색

www.apistore.co.kr

 

728x90
반응형