외전-웹 용어정리
서버
보통 웹 프로젝트를 만들 때는 서버를 두 개 사용한다.
하나는 웹 서버로, 웹페이지(클라이언트)가 돌아가는 서버이다. 페이지를 보여주고 클릭 이벤트 같이 클라이언트단에서 처리되는 기능을 담당한다.
쉽게 말해 리액트 프로젝트에서 작성한 코드들은 전부 웹서버에서 돌아간다고 보면 된다.
리액트 프로젝트에서 npm run dev를 하는 것이 바로 웹서버를 작동시키는 것이고, 실제 배포시에는 apache, nginx 같은 전문 프로그램을 사용한다.
웹 서버와 클라이언트를 묶어 프론트 엔드(Front-end)라 부르기도 한다. 사용자에게 보이는 작업을 담당한다는 의미이다.
다른 하나는 api 서버로, 웹페이지가 제공하는 서비스를 처리하는 서버이다. 대표적인 서비스로는 회원가입이나 검색 등이 있겠다.
이런 서비스는 방대한 양의 데이터를 처리해야 하므로 데이터베이스(DB)와는 뗄 수 없는 관계이다. 따라서 이쪽 담당자들은 SQL 같은 데이터베이스 문법도 다룰 줄 알아야 한다.
api 서버는 웹서버와 별개로 만들며, 자바(Spring), 파이썬(Flask,Django), 루비(Rails) 등 여러 언어로 만들 수 있다. 지난 시간에 node.express로 만든 서버도 api 서버에 해당된다.
일부 언어는 DB와 쉽게 연동할 수 있는 강력한 기능(ORM)을 제공하며, 사용자가 볼 수 없는 작업을 처리한다는 뜻에서 백 엔드(Back-end)라고 부르기도 한다.1
API
API는 무언가가 제공하는 기능을 뜻한다. 무언가에는 소프트웨어가 될 수도, 프로그래밍 언어가 될 수도 있다. 아무튼 사용자가 이걸 사용하여 특정 기능을 구현할 수 있으면 API라 볼 수 있는 것이다.
파이썬을 예로 들면
1
2
3
import time
print(time.time())
여기서 import time은 파이썬이 제공하는 time 라이브러리를 사용하겠다는 것을 의미한다. time 라이브러리는 시간 관련 기능을 제공하는 api라 볼 수 있다.
여기서 파이썬의 패키지/모듈 과 헷갈릴 수 있는데, 간단히 말해 라이브러리/패키지/모듈 등은 구체적인 개념, api는 추상적인 개념이라 보면 된다.
다시 말해, time 라이브러리 및 그 아래 패키지/모듈은 시간 관련 기능이라는 api를 파이썬 코드로 구현한 것이다!
REST API
REST API는 API의 한 종류로, REST 형태로 제공되는 API를 말하는 것이다.
REST 형태2가 무엇이냐면, 예전에 잠깐 언급했지만 구성을 웹 주소(URI) 형태로, 통신을 HTTP 규격으로 사용한다는 것을 의미한다.
여기서 URI와 HTTP를 간략하게 살펴보자면,
- URI에는 양식이 있다. 그냥 주소창에 아무렇게나 치면 에러 나는 것처럼 일정한 형태를 지켜줘야 한다.
- http://www.tosso.com:8080/tissi/tussu.html?key1=value1&key2=value2#tukchongjijom
- 위 주소는 모든 URI 양식이 들어있는 주소이다.
- http:// 는 통신 규격을 나타낸다.
- 보통 http://나 https://를 많이 쓴다.
- www.tosso.com은 도메인을 나타낸다.
- :8080은 포트를 나타낸다.
- :으로 시작해야 한다.
- /tissi/tussu.html은 자원 경로를 나타낸다.
- /으로 시작해야 한다.
- 참고로 위(~.html)처럼 실제 자원 위치까지 나타내는 URI는 URL이라고 한다.
- ?key1=value1&key2=value2는 파라메타를 나타낸다.
- ?으로 시작하고, &으로 각 파라메타를 구분할 수 있다.
- 파라메타는 URI를 함수라고 생각할 때 함수 인자라고 보면 된다.
- #tukchongjijom는
해쉬태그앵커(anchor)라는, 자원의 특정 지점을 나타낸다.- #으로 시작해야 한다.
- 위키백과의 ‘해당 목차로 이동’이나, 유튜브의 ‘해당 시간으로 이동’ 같은 기능은 이 앵커를 활용한 것이다.
- HTTP는 요청-응답 형식으로 소통하는 통신 규격이다.
- 클라이언트가 서버에 HTTP 요청을 보내면, 서버는 이를 처리해 HTTP 응답을 클라이언트로 보낸다.
- 이 요청과 응답은 크게 3부분으로 구성되어 있다. 각 부분의 핵심만을 살펴보자면
- 시작(Start Line): HTTP 메쏘드(요청), HTTP 응답코드(응답) 등이 들어간다.
- 메쏘드는 GET,POST 등이, 응답코드에는 200,404,501 등이 있다.
- 헤더(Header): 요청의 전체 특징이 들어간다.
- 보디의 형태(Content-Type), 인증키(Authorization) 등이 있다.
- 보디(Body): 요청의 내용이 들어간다.
- 서버에 전달할 데이터는 여기나 URI 파라메타에 넣는다.
- 시작(Start Line): HTTP 메쏘드(요청), HTTP 응답코드(응답) 등이 들어간다.
매우 자세한 설명은 여기에 백문이 불여일견. 실제 REST API를 사용하는 예제를 보자.
다음은 공공데이터포탈에서 제공하는 의약품 정보 조회 서비스이다.
이 API의 요청 URI은 다음과 같다. http://apis.data.go.kr/1471000/DrbEasyDrugInfoService/getDrbEasyDrugList
위 사이트를 보면 인증키(ServiceKey), 페이지번호(pageNo) 등 많은 요청변수가 있다.
해당 요청변수들을 적절히 조합해 uri을 다시 만들면
http://
그 다음 http 통신에 이 uri을 담아 GET 요청을 보내면 의약품 정보가 응답의 Body에 담겨서 온다.
이게 REST API를 사용하는 방법이다. 아까 파이썬의 time.time()을 예로 들면
time.time()은 요청, 받아오는 값은 응답인 것이다.
프레임웤과 라이브러리
프레임웤
일종의 개발 틀(프레임)이라고 생각하면 된다. 구조가 정해져 있어, 사용자는 프레임웤을 사용하여 개발할 때 이 구조를 따라야 한다.
뷰(Vue), 앵귤러(Angular)는 웹 클라이언트를 개발할 때 쓰이는 프레임웤이다.
라이브러리
일종의 개발 도구라고 생각하면 된다. 개발을 도와줄 뿐, ‘이 형식을 따르라’라고 사용자에게 강요하지 않는다.
리액트(React)는 대표적인 웹 클라이언트 라이브러리이다.
둘의 차이점
집을 짓는다고 생각해보자. 한 사람은 집짓기 킷트(GECK?)를 사용해 집을 짓고, 다른 사람은 톱과 도끼로 나무를 잘라 집을 짓는다.
집짓기 킷트는 빠르게 적당한 품질의 집을 만들 수 있지만 킷트에 나와있는 모양으로밖에 집을 지을 수 없다.
반면 직접 도구를 사용해 집을 지으면 아무래도 킷트보다 손이 더 많이 가고, 집짓자(者)의 솜씨에 따라 집이 정갈할지 마타즈레장이 될지 모른다. 다만 다양한 도구를 사용하여 다채로운 집을 지을 수 있고, 숙련된 집짓자는 킷트 수준으로 빠르게 집을 지을 수도 있다.
이를 프레임웤과 라이브러리에 대입해 보면, 프레임웤은 개발 형식이 정해져 있으나 그로 인해 보기 편하고 빠른 개발을 할 수 있다. 반면 라이브러리는 모래사장에 던져놓고 알아서 해라라는 식이므로 자유도는 높겠으나 익숙해지기에는 어렵겠다.
비동기 처리
서버와 클라이언트가 요청과 응답하는 방식인데, 반대말로 동기 처리가 있다. 동기 처리는 요청을 보내면 응답이 올때까지 함흥차사로 기다린다. 비동기 처리는 당연히 그 반대로 요청을 보내고 내일 하고있다가 응답이 올 때 받는다.
만일 네트워크 문제나 응답량이 매우 많아(다운로드 등) 클라이언트로 오기까지 시간이 매우 오래 걸리는 경우 비동기 처리를 사용하면 시간을 아낄 수 있다. 응답이 오는 동안 다른 일을 하고있기 때문이다.
다만 비동기 처리를 자주 쓸수록 코드 실행순서가 꼬여버리는 등 복잡한 문제가 발생할 수 있다. 또한 응답 시간은 각 요청마다 달라 데이타가 순차적으로 오지 않으므로 응답을 요청 순서대로 받아야 할 경우에는 오히려 동기 처리를 사용하는 게 더 나을 수도 있다.
프로미스
9 자바스크립트 비동기 처리 방법 중 하나이다. 요청 함수를 프로미스 객체라는 것으로 감싸 응답을 받지 못하거나 실패한 상황에서도 값을 처리할 수 있도록 해 준다.
프로미스 객체는 요청 함수의 상황에 따라 대기(응답 받는중)/이행(응답 받음)/실패(응답 못받음)라는 3가지 상태를 가지는데 각 상태별 분기를 만들어 값 처리를 하는 원리이다.