들어가기에 앞서

JavaScript는 객체 기반의 동적 스크립트 언어이고, *절차지향(procedural)언어입니다. 주로 웹 브라우저에서 사용되나 Node.js와 같은 프레임워크를 사용하면 서버 프로그래밍에도 사용할 수 있습니다.

• 절차지향(procedural)언어: 소스 코드를 한 줄씩 해석한 뒤 다음 소스 코드로 넘어가는 언어.

JavaScript는 절차지향(procedural)언어이기에 동시에 2가지 이상의 소스 코드를 실행 시킬 수 없다는 단점이 있었습니다. 그렇기에 개발자들은 비동기를 개발하였습니다.

비동기

특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 수행하는 자바스크립트의 특성입니다. 즉, 2개 이상의 소스가 동시에 실행되게 만드는 것을 비동기라 합니다.

Promise(프로미스)

JavaScript에서 제공하는 몇몇 함수는 비동기로 실행됩니다. 예를 들어 API요청 함수의 경우 비동기로 실행됩니다. 그러면 API 데이터를 전부 받기 전, 데이터를 전부 다 받고 실행되어야 할 소스 코드가 동시에 실행 되어 예기치 않은 에러가 날 수 있습니다. 이 때 다시 비동기를 동기(한 줄씩 차례대로 소스 코드를 해석하는 것)로 돌려야 할 필요성이 있습니다.

fetch("https://api.bithumb.com/public/ticker/BTC_KRW")
        // 응답값이 함수의 첫번째 argument 매개변수에 값이 들어옵니다.
        .then(function(res){ // 응답값이 들어온 다음 실행될 함수입니다.
            return res.json() // 실행될 함수의 소스 코드입니다.
        })
        .then(function(result){ // 3번째 줄의 함수가 실행되고 난 뒤 실행되는 함수입니다.
            openingPrice.innerText = result.data.opening_price;
            closingPrice.innerText = result.data.closing_price;
        })

위 형식으로 사용합니다.

then은 영어로 그 다음, 이후라는 뜻을 가지고 있습니다.

API

전에 HTTP는 쉽게 말해 서버와 클라이언트가 HTML를 주고 받을 때 쓰는 프로토콜이지만, 현대는 HTML뿐만이 아닌 다른 여러 기능들을 주고 받을 때에도 이용됩니다. 이 때 HTTP 프로토콜을 이용하여 API도 서버와 클라이언트가 서로 주고 받을 수 있습니다.

클라이언트는 API에서 원하는 주문(기능이나 데이터 등등)을 HTML과 함께 서버에게 요청합니다. 그럼 서버는 확인하고 요청받은 주문과 HTMl 함께 응답합니다.

실제 예를 들자면 빗썸에서는 현재 비트코인의 시세를 알 수 있는 API를 제공해주고,

네이버에서는 파파고의 번역 기능 API를 제공해주고 있습니다.

그 밖에도 아닌 옥션,인터파트 등 쇼핑몰들에서는 상품을 업로드하는 API, 팔지 않는 상품을 삭제하는 API, 상품을 수정하는 API, 주문 내역을 확인하는 API등 다양한 API들이 있습니다. 개발자는 필요한 오픈 API기능을 찾아서 사용할 수 있습니다.

JSON

중괄호{}로 감싸진 키와 밸류가 쌍으로 이루어진 모습으로 되어있습니다. JavaScript에서 파생되어 JavaScript의 구문(특히 오브젝트)과 비슷한 부분이 많지만, JSON은 언어 독립형 데이터 포맷입니다. 인터넷에서 자료를 주고 받고, 표현하기 위해 데이터를 구조화 해놓은 하나의 데이터 형태입니다. 요즘 API는 대부분 JSON형태로 이루어져 있습니다.

XML(EXtensible Markup Language)

XML은 *SGML의 단순화된 부분집합으로, 다른 많은 종류의 데이터를 기술하는 데 사용할 수 있다. 즉 XML 또한 데이터를 구조화 해놓은 하나의 데이터 형태라고 할 수 있습니다. XML은 주로 다른 종류의 시스템, 특히 인터넷에 연결된 시스템끼리 데이터를 쉽게 주고 받을 수 있게 하여 HTML의 한계를 극복할 목적으로 만들어졌습니다. HTML과 비슷하게 태그로 감싸진 모습입니다.

SGML(Standard Generalized Markup Language): 컴퓨터용 전자 문서의 작성에 관한 국제 표준 규약. 시스템 환경에서 정보 손실 없는 저장, 전송, 처리가 가능하도록 국제 표준화기구(ISO)에서 정함.

AJAX(Asynchronous Javascript And XML)

AJAX는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있습니다. AJAX를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있습니다.