[자바스크립트] 자바스크립트의 배경과 API, 공식 사이트

 

2004 년 AJAX : Asynchronous JavaScript and XML

비동기적으로 데이터를 서버에서 받아오고 처리할 수 있도록 도와주는 프로그램

 

2008년 구글에서 크롬이라는 JIT(just-in-time compilation) 엔진을 장착한 브라우저를 만들게 되었다.

                                               자바스크립트를 실행하는 속도가 엄청나게 빠른 엔진

 

2015년 ECMA Script6  등장:

2009년 ECMA Script5로 표준화를 시작하고 그 뒤 현재까지 표준화된 자바스크립트의 큰 틀이 되고 있음.

default parameter, class, arrow function이 이 때 정의되어 사용됨.

ECMA Script5, 6이후로 자바스크립트가 브라우저에 구애받지 않고 잘 작동하게 되어

jQuery나 dojo, mootools와 같은 라이브러리의 도움이 없이도, 자바스크립트와 웹 APIs에서 제공하는 APIs만으로도

모든 브라우저에서도 잘 동작할 수 있는 웹 사이트나 웹 어플리케이션을 만들 수 있게 되었다.   

각 브라우저마다 ECMA의 표준안을 따라가는 다양한 엔진들이 존재한다.

 

엔진의 종류(코드네임)	사용하는 웹 브라우저
V8	Chrome, Opera
SpiderMonkey	FireFox
ChakraCore	Microsoft Edge
SquirrelFish	Safari
Trident/ Chakra	IE(버전에 따라 다르게 사용)

<2021년 MDN>

 

 

 

Babel : 최신 기능(버전)의 자바스크립트로 작성한 것을 ECMA 5, 6코드로 변환해주는, 트랜스 컴파일러.

 

SPA : Single Page Application, 현재의 추세

 

node.js : ECMA의 활발한 표준화를 배경으로 강력한 자바스크립트 엔진 V8을 이용한 백엔드에서 서비스를 구현할 수 있게 만들어 줌

 

API : Application Programming Interface

 

다양한 기기에서 서버에 있는 데이터를 읽고 쓰기 위해서 서버에서 제공하는 Web API들을 이용해서 처리할 수 있다.

HTTP(s) : Hypertext Transfer Protocol 네트워크에서 기기들 간에 의사소통을 해나가는 규격사항

 

 

 

이런 Web API를 어떻게 디자인해서 만들건지 정의

 

SOAP : Simple Object Access Protocol 모든 네트워크의 요청과 반응을 HTML처럼 생긴 XML이라는 데이터 포맷에서 저장해서 주고 받았음

 

REST : Representational State Transfer 요즘 보편적으로 많이 사용됨

             서버에서 제공하는 Web API를 통해서

             Post - 새로운 데이터를 만들고,

             Get - 서버에 사용자에 대한 데이터 요청(request)하면 서버로부터 JSON이라는 파일로  받아(response) 읽고,

             Put - 데이터를 업데이트하고,

             Delete - 데이터를 삭제할 수 있는 4가지의 구성으로 되어 있음

 

 

이런 Web API 뿐만 아니라 라이브러리나 프레임워크에서 우리가 이용할 수 있는 클래스나 함수들을 API라고 부른다.

이런 외부에서 가져오는 API뿐만 아니라, 프로젝트 내부에서 쓰여지고 있는 클래스나 모듈이 있다면 그것도 각각 API라고 지칭할 수 있다.

 

내부의 구현 사항을 잘 숨겨 두고 외부에서 사용하는 사람이 필요한 것만 노출해두고, 이것을 인터페이스 API라고 부름

 

Open API(또는 Public API)란,

회사 내부에서 사용하는 Web API를 외부의 다른 개발자가 이용할 수 있도록 공개적으로 오픈한 것

 

 ex. 재미있는 GIF를 통하여 재미있는 어플리케이션을 만들어보고 싶으면,

       Giphy 개발툴에서 제공하는 SDK나 Open API를 이용해보기.

       음악을 들을 수 있는 Spotify에서도 Open API 제공하고, Developer Showcase에서 개발한 것들 볼 수 있음.

       EDAMAM의 API에서는 영양가나 레시피, 다양한 음식에 관련된 데이터베이스의 정보를 가져올 수 있음.

       APIMeme에서 top과 bottom에 text를 넣어 generate해 나만의 밈을 사용할 수 있음.

      국내 다양한 증권사에서 오픈 API 제공, 증권에 관련된 재미있는 어플리케이션을 만들어 볼 수 있음.

      카카오에서 제공하는 API로 내 어플리케이션이나 웹사이트에 재미있는 기능을 추가해 볼 수 있음.

      공공데이터 포털 data.go.kr에서도 공공 API 제공함.

 

cf. 우리가 콘솔 창에서 출력할 때, console API에서 log라는 함수를 이용하여 출력하는 것.

     이 때, console API는 웹에서 제공하는 Web API

     node.js에서도 콘솔에 출력되는 것을 보듯이, node.js와 web API 둘다 콘솔에 관련된 API가 있는 것이고,

     이 두 인터페이스가 동일하다. 

     MDN에서 Console API가 브라우저가 제공하는 Web API라는 내용을 확인할 수 있고, 함수들의 내용도 확인할 수 있다.

     웹브라우저 Dev Tool의 console 탭에서 자바스크립트를 실행할 수 있다. source 탭은 디버깅할 때 유용하게 사용 가능.

     network 탭에서는 통신되고 있는 데이터의 크기나 종류들을 확인할 수 있다.

 

 

 

!!! 자바스크립트의 공식 사이트는 

    https://www.ecma-international.org/ (개발자에게 난해할 수도 있어 다음의 모질라의 MDN 사이트를 개발자들이 잘 이용)

    https://developer.mozilla.org/en-US/docs/Web/JavaScript (최신 소식도 빠르게 올라옴)

JavaScript | MDN

    

 

 

 

1. HTML의 head 안(내부)에 JS 파일이 포함되어 있을 경우,

   위에서부터 순차적으로 HTML 파일을 브라우저가 분석(parsing HTML)한다.

   cf. 그리고, CSS와 병합하여 돔(DOM)요소로 변환한다. 

   이렇게 파싱하다 스크립트 태그를 만나면 파싱을 멈추고,

   링크가 걸린 JS을 서버에서 다운(fetching js)받고 실행(executing js)한다.

   그게 끝나면 다시 HTML parsing이 재개된다.

   이 과정 중에 js 파일이 크거나 인터넷 통신 속도가 좋지 못하거나 하면,

   사용자가 웹페이지를 보는데까지 시간이 많이 소요될 것이다.

   => 스크립트를 헤드에 포함하는 것을 권장하지 않는다 !

 

2. body의 제일 마지막 부분에 JS파일을 스크립트 태그로 링크할 경우, 

    parsing HTML을 다한 후(웹페이지가 준비되어 사용자가 컨텐츠를 볼 수 있음),

    서버에서 fetching js하고, executinh.js할 것이다.

    사용자가 기본적인 HTML 웹페이지를 빨리 볼 수 있지만, 보고자하는 웹페이지가 자바스크립트에 상당히 의존적이라면

    정상적인 페이지(자바스크립트가 잘 구동된 페이지)가 되기까지 (서버로의 요청, 반응 완료) 시간이 걸릴 수 있다.

 

3. head에 async라는 속성을 사용할 경우,

    async 자체가 불리언 값으로 true로서 선언하는 것만으로 실행되게 된다.

    parsing HTML을 하다가  async를 만나면 fetching.js를 parsing HTML와 병렬로 진행(동시에 진행)하게 된다.

    그러다 다운로드(fetching.js)가 다 끝나면 같이 진행되고 있던 pasing HTML을 멈추고 실행(executing js)하게 된다.

    실행을 마치게 되면, 나머지 HTML을 pasing하게 된다.

     body 끝에서 실행할 때보다 시간을 절약할 수 있지만,

     HTML이 다 pasing되기 전에 DOM 요소를 조작하는 것이 불가하고

    사용자가 여전히 js가 다운되기 전에 웹페이지를 보기까지 시간이 걸릴 수 있다.

    그리고 여러 개의 js 파일을 다운받을 경우 먼저 다운받아지는 순서대로 실행이 되므로, 

    자바스크립트가 정해진 순서에 의존하는 경우에는 문제가 될 수 있다. 

 

4. head에 defer라는 속성을 사용할 경우,

    parsing HTML을 하다가  async를 만나면 fetching.js를 parsing HTML와 병렬로 진행(동시에 진행)하게 된다.

    하지만, async때와 달리 js의 실행(executing js)은 parsing HTML이 다 끝난 다음에야 이루어진다.

    그리고 여러 개의 js 파일을 다운받을 경우 parsing HTML 전에 다운이 다 되어도

    parsing HTML이 다 끝난 다음에 js 파일이 순서대로 실행될 것이다.

    => 이 방법이 제일 효율적이고 안전하다 !!!

 

 

cf. 자바스크립트를 쓸 때, 맨 위에 'use strict'라고 정의해 주는 것이 좋다.

                                         굉장히 유연하고 동적인 언어라 의도치 않은 문제들이 발생할 수 있어,

                                          ECMAScript 5에 이 기능이 도입되었다 !