JavaScript 기본정리 1 (MDN Docs 참고)

1. 개념

웹페이지를 구성하는 레이어 케이크 중 세번째 층(HTML, CSS, JavaScript)이라고 볼 수 있다.

웹에서 동적인 컨텐츠 변경과 멀티미디어 사용 등의 작업을 처리할 수 있는 스크립트 언어이다.

 

 

2. APIs(Application Programming Interfaces)의 사용

API는 이미 만들어진 코드의 집합체로, 직접 만들기 어려운 부분을 미리 만들어 놓아 쉽게 구현 가능하도록 하는 프로그램이다.

 

Browser API : 웹 브라우저에 설치된 API로, 데이터를 시각화하거나 브라우저내의 복잡한 작업을 처리해준다.

예 - DOM(Document Object Model), Canvas, WebRTC …

 

이때, 실제 배포가 될 때는 해당 API가 사용자들의 다양한 브라우저 환경(버전별 Chrome, Edge, Firefox..)에서 잘 동작하는지 확인하는 Cross Brower Testsing이 필요하다.

 

Third party API : 브라우저에 내장된 기본 API가 아니라 인터넷에서 개인적으로 정보와 코드를 얻어 만들어진 API이다.

예 - Google Maps API와 OpenStreetMap API, Twitter API 등

 

 

3. 자바스크립트의 동작 타이밍

HTML, CSS가 결합되어 정적인 페이지를 형성한 후 브라우저의 자바스크립트 엔진이 동작한다. 이 때문에 자바스크립트를 이용하여 동적으로 UI를 업데이트할 수 있다(이미 만들어진 페이지를 변경하면 되므로).

 

4. 브라우저 탭간의 보안성

각각의 브라우저 탭은 독립적인 하나의 실행환경으로 동작한다. 따라서 한 탭의 JS코드는 다른 탭이나 웹사이트의 컨텐츠를 조작할 수 없다. 덕분에 한 탭에서 다른 탭에 열린 웹사이트의 정보를 가로채는 등의 보안위협에서 벗어날 수 있다.

 

5. 서버측 코드와 클라이언트측 코드

특정 웹페이지를 볼 때, 특정 코드에 대하여 어느쪽에서 처리되어 사용자에게 표시되느냐에 따라 코드가 두가지 종류로 나뉜다.

 

서버측 코드 : 서버에서 작동된 결과가 사용자의 브라우저로 넘어가 표시된다. PHP, Python, Ruby, ASP.NET, Node.js(자바스크립트의 일종)가 있다.

클라이언트측 코드 : 코드 자체를 사용자의 컴퓨터가 다운받고, 사용자의 브라우저에서 이를 처리하여 표시한다. 클라이언트측 JavaScript모듈이 대표적이다.

 

어느측이든 특정 상황에 대하여 적절한 정보를 보여주고, 컨텐츠를 지속적으로 노출/수정시킨다는 점에서 동적인 코드라고 할 수 있다.

 

 

6. 스크립트 로딩방식

HTMl요소는 순서대로 로딩되기 때문에, HTML요소가 아직 다 로딩되지 않은 상태에서 자바스크립트 코드가 로딩되지 않은 요소를 건드리면 동작에 오류가 생길 수 있다. 따라서 이를 해결하기 위해 두가지 방법을 취한다.

 

외부 자바스크립트 코드

<script src="script.js" async></script>

async 요소를 script에 설정해놓으면 HTML요소를 로딩하는 도중 스크립트를 만나도 로딩이 멈추지않고 쭉 지속된다. 따라서 script와 HTML 요소는 동시에 로딩되고 정상적으로 작동할 수 있다.

단, async가 있는 script가 여러개 있다면, 그 스크립트들 간의 로딩순서를 보장하지 않는다. 만약 해당 스크립트들 사이에서도 순서를 설정하고 싶다면 async가 아닌 defer를 사용하고 원하는 로딩순서대로 스크립트 순서를 정렬한다.

 

내부 자바스크립트 코드

document.addEventListener("DOMContentLoaded", function() {
  ...
});

위의 코드에서 자바스크립트 코드(function)는 DOMContent가 브라우저에 모두 로딩된 후에야 실행된다.

내부 자바스크립트 코드에서는 async를 사용할 수 없다.

 

-------------------------------------------------------------------------

mozilla 문서를 참고했습니다.

JavaScript