웹 개발과 API 개요

김주언·2022년 7월 5일
0

WEB - Basic

목록 보기
1/10
post-thumbnail

1. 웹개발이란?

최근의 웹의 구조는 아래와 같습니다.

프론트엔드에서 각종 기능을 구현합니다. 이 때 기능이란 데이터 처리에 대한 기능을 제외한 거의 대부분의 기능을 일컫습니다. 좋아요 누르기, 커서 모양 변환 등 사용자와 상호작용하는 다양한 기능들을 프론트엔드에서 구현합니다.

백엔드에서는 데이터 처리에 관한 모든 기능을 수행합니다. 데이터베이스와 연동되어 저장된 데이터를 찾아주거나 수정, 삭제할 수 있는 기능을 수행합니다. 로그인 / 회원가입 요청에 대한 처리, 게시글 작성, 피드에 글 목록 나타나게 하기 등의 기능을 백엔드에서 수행하는 것입니다.

프론트엔드와 백엔드는 서로 밀접한 연관이 있기 때문에 일정한 규칙을 가지고 데이터를 주고받게 됩니다. 프론트엔드는 사용자와 직접 맞닿아 있으며 사용자에게 화면을 보여주고 어떠한 행동을 하도록 유도합니다.

이러한 작업을 위해서 백엔드로부터 적절한 데이터를 받아와야 하고, 따라서 프론트엔드는 백엔드에게 데이터를 요청합니다. 요청을 받은 백엔드는 프론트엔드에게 해당 요청에 맞는 응답을 하게 됩니다. 응답의 결과로는 프론트엔드가 필요로 했던 데이터일 수도 있고, 에러 메세지일 수도 있습니다.



2. API

Application Programming Interface

API는 일련의 명령, 함수, 프로토콜, 객체로 구성되어 있으며, 프로그래머는 API를 이용해서 소프트웨어를 생성하거나 외부 시스템과 상호작용할 수 있습니다.

본질적으로 API는 인터페이스이며 프로그램과 외부 시스템 사이에 있는 일종의 장벽입니다.

그리고 우리는 API가 규정한 규칙들을 이용해서 외부 시스템에게서 데이터를 요청하는 것입니다. 만일 외부 시스템이 그들의 API에 설정한 모든 요구조건에 맞춰서 요청을 구조화했다면 해당 시스템은 적절하게 요청자에게 응답할 것이고 요청한 데이터를 줄 것입니다.하지만 규칙을 따르지 않으면 요청은 무효화됩니다.

데이터를 제공하는 웹사이트들을 일종의 식당이라고 생각하면 쉽습니다.
그리고 이 웹사이트의 자원이 되는 데이터는 식당 뒤에 있는 주방이라고 생각할 수 있습니다. 직원이 아닌 우리 일반인은 식당에 가서 냅다 주방에 들어가 식료품을 털 수는 없습니다.

버거킹에 가서 바로 주방으로 들어가서 패티를 찾고 번을 찾아서 만들어 먹는다...? 그럴 수는 없겠죠.. 식당에는 메뉴가 있고 이 메뉴는 고객과 식당 사이의 일종의 인터페이스 역할인 것입니다. 메뉴는 고객이 주문할 수 있는 것과 없는 것을 알려주니까요

고객은 버거킹에서 와퍼, 감자튀김 등을 받을수는 있지만 주방에 들어가서 감자고로케를 달라고 할 수는 없습니다.

본질적으로 API가 이와 동일합니다. API는 가게의 메뉴판인 것입니다

즉, API는 데이터가 있는 웹사이트 같은 외부 시스템과 상호작용하기 위해 사용자가 할 수 있는 모든 걸 의미합니다


JSON 데이터

아무튼 API는 결국 시스템간에 데이터를 주고 받겠다는 소리입니다. 그렇다면 데이터를 어떤 양식에 맞춰서 보내겠다고 서로간에 약속을 안 해두면 어떻게 될까요?

조별과제를 하는데, 누구는 데이터를 한글파일에 적어서 보내고 (이러면 맥은 곤란하죠), 누구는 데이터를 PPT 파일로 보내고, 또 다른 누구는 데이터를 엑셀파일로 보내면 어떻게 될까요? 그 팀은...

아무튼 그래서 양측 시스템이 잘 알고 있는 데이터 양식을 정해두는 겁니다.

JSON은 원래는 자바스크립트를 위해 만들어졌지만 나중에는 인터넷을 통해 데이터를 전송하는 거의 표준에 가까운 방식이 되었습니다. 그 이유는 아주 간단합니다

여러분이 파이썬 딕셔너리 같은 걸 보시면, 예를 들어 옷장이 있다고 합시다. 마치 여러분이 이케아에 가서 좋아하는 옷장을 발견했는데 여러분은 그대로 집에 가져가고 싶지는 않습니다. 차에 들어가지도 않을 겁니다. 어떡하죠?

그래서 이케아는 평평한 팩을 판매합니다. 모든 조각들이 평평하게 놓여 있고 여러분은 집으로 가서 스스로 조립하면 됩니다. 그게 JSON이라고 보시면 됩니다

JSON은 작고 공백이나 들여쓰기가 많이 없습니다. 그냥 ""를 사용해서 무엇이 키이고 무엇이 값인지, 무엇이 개별 키-값 쌍인지 나타냅니다.

그래서 JSON은 인터넷을 통해 빠르게 전송될 수 있습니다. 아주 작고 평평하기 때문입니다.

그럼 여러분이 이 JSON을 받으면 이걸 재조립해서 여러분이 사용하는 언어에 따라 원본 파이썬 딕셔너리로 만들거나 자바스크립트 객체로 만들 수 있습니다.

드라이버를 이용해서 이케아 가구를 조립하는 것과 같다고 할 수 있죠




2.1 API 엔드포인트와 API 호출

2.1.1 API 엔드포인트

API 엔드포인트는 API의 핵심 개념 중 하나입니다. API 엔드포인트는 어떤 특정 위치라고 생각하면 됩니다. 앞서 설명한 것처럼, 만일 우리가 특정한 외부 서비스에서 데이터를 얻으려면 그 데이터가 저장된 위치를 알고 있어야 합니다.

예를 들면 은행에서 돈을 찾으려면 은행이 어디에 있는지, 주소가 어디인지 알아야 하는 것과 같습니다. 그리고 API 용어로 말하자면 그게 바로 API 엔드포인트인 것! 보통은 그냥 URL입니다

그래서 만약 여러분이 암호화폐 데이터를 얻으려면 api.coinbase.com 을 이용할 수 있습니다. 이 URL이 바로 Coinbase 데이터를 찾을 수 있는 위치, 즉 엔드포인트인 것입니다.

이 API 요청은 마치 은행에 가서 돈을 인출하려는 것과 같습니다. 사이트의 금고에서 어떤 데이터를 인출하려는 것과 동일합니다.. 만약에 아무나 은행에 가서 아무런 제약도 없이 필요한 만큼 돈을 인출할 수 있다면..? 큰일납니다

그래서 은행에는 은행 직원이 있습니다.

직원이 창구에 있어서 “뭐 도와드릴 게 있나요? 뭘 하려 하시나요?”라고 묻고 내가 마음대로 혼자 금고에 가지 못하게 막습니다. 걍 들어가려고 하면 경찰을 부르기도 하겠죠. 이 은행 점원이 마치 API 같은 역할을 수행하는 것입니다.

API는 여러분과 외부 시스템 사이 또는 여러분과 은행 금고 사이의 인터페이스입니다. 여러분은 이 직원에게 여러 요청을 할 수 있습니다.

물론 돈을 인출할 수도 있어요. 그러려면 물론 신분증을 확인해야 하고 계좌번호가 있는지 확인해야 하고, 아무튼간에 직원분은 아주 많은 확인을 할 것입니다.

하지만 여러분은 은행에 가서 은행 점원에게 어떤 형태의 인증도 필요하지 않은 것을 요구할 수도 있습니다. 예를 들면 개점 시간이 언제냐고 물을 수 있습니다. 그리고 이건 웹사이트의 API를 이용해서 웹사이트에 있는 약간의 데이터를 얻는 아주 아주 간단한 요청을 하는 것과같다고 할 수 있습니다.

2.1.2 API 호출하기


http://open-notify.org/
캐간단한 API를 사용해봅시다.국제 우주정거장 현재 위치 API입니다
이 API의 엔드포인트는 http://api.open-notify.org/iss-now.json

보시다시피 JSON 형태로 출력물을 리턴하게 되는데요
여러분이 이 API에 요청을 하려면 인터넷을 사용해야하는데, 물론 브라우저를 이용해서 요청할 수도 있습니다. 그 엔드포인트 즉 URL을 주소창에 붙여 넣고 엔터 키를 치면 결과물이 JSON 형태로 리턴되는 걸 보실 수 있습니다

이걸 새로고침하면 이 엔드포인트에 새로 요청을 하게 되고 약간 다른 데이터가 리턴됩니다, 왜냐면 ISS가 실제로 아주 빠르게 하늘에서 움직이고 있기 때문이죠 그래서 매번 여러분은 상당히 움직인 모습을 보실 수 있습니다.



2.1.3 API request

# 요청을 보내기 위한 라이브러리 임포트 
# 패키지 설치 필요함
import requests 

response = requests.get(url= "http://api.open-notify.org/iss-now.json")
print(response)

requests 패키지로 우리는 get()이라는 메소드를 호출해보려고 합니다

이건 우리가 엔드포인트로부터 우리가 원하는 데이터를 얻도록 도와줄 겁니다

엔드포인트는 URL이라는 인자에 들어가고요

이제 거기서 데이터를 받았다면 해당 데이터가 리턴될 것입니다. 우리는 response라는 새로운 변수 안에 그걸 잡을 수 있습니다

이제 이 response를 프린트해볼까요?

여기까지 우리는 파이썬 코드 안에서 맨 처음으로 API 요청을 했습니다. 그렇지만 우리가 response를 프린트했을 때 우리가 브라우저 안에서 직접 요청했을 때와 같은 JSON 데이터가 보이지 않습니다. 대신에 여기에 숫자 200이 프린트되어 있습니다

이 숫자는 응답코드죠

이 response를 어떻게 다루는지 더 자세히 알아보고 이 응답 코드가 정확히 어떤 의미인지

알아보겠습니다



profile
학생 점심을 좀 차리시길 바랍니다

0개의 댓글