[기초 이론] What is the JavaScript doing on WebPage?

웹 페이지에서 JavaScript는 어떤 일을 하는가

브라우저가 웹 페이지를 불러오면 브라우저는 코드(HTML, CSS, JavaScript)를 실행 환경(브라우저 탭)에서 실행한다. 원자재를 가져와서 상품을 생산하는 공장처럼 생각할 수 있다.

 

JavaScript는 웹 페이지에서 복잡한 프로그래밍 기능을 구현할 수 있다. 예를 들어 DOM (Document Object Model) API를 통해 HTML과 CSS를 동적으로 수정, 사용자 인터페이스를 업데이트하는 일에 가장 많이 쓰인다. 참고로 웹 페이지의 코드는 보통 문서 상에 나타나는 위에서 아래로 나열되는 순서 그대로 불러와 실행한다. 수정하려는 HTML과 CSS 코드보다 JavaScript를 먼저 불러와 실행하면 먹히지 않을 수 있다. 

→ 브라우저는 HTML의 index.html을 제일 먼저 읽는다.
→ HTML에서 head에 CSS 파일을 link하고, body의 최하단에 JavaScript 파일을 script 해야 하는 이유

인터프리터와 컴파일러

프로그래밍에서 인터프리터와 컴파일러라는 단어는 명백히 구분된다. 인터프리터를 사용하는 언어에서는 코드를 위에서 아래로 실행하고, 코드 구동 결과는 즉시 반환return된다. 즉 브라우저에서 JavaScript 코드를 실행하기 전에 다른 형태로 변환될 필요가 없다. 코드는 프로그래머가 읽을 수 있는 형태로 입력되고, 별도의 처리 없이 그대로 실행된다.

 

반면, 컴파일러를 사용하는 컴파일 언어에서는 컴퓨터가 코드를 실행하기 전에 다른 형태로 변환(컴파일)해야 한다. 예를 들어, C/C++ 에서는 코드를 컴파일러로 기계 언어로 변환하여, 그 결과를 컴퓨터가 실행한다. 프로그램은 프로그램의 원본 소스 코드에서 생성한 이진 형식(바이너리)로 부터 실행된다.

 

JavaScript는 가볍고, 인터프리터를 사용하는 프로그래밍 언어다. 웹 브라우저는 기계 언어로 변환하는 것이 아닌 JavaScript 코드를 원문 텍스트 형식으로 입력받아 실행한다. (기술적으로 스크립트의 실행과 동시에 소스 코드를 더 빠르게 실행할 수 있는 이진 형태로 변환, 최대한 높은 실행 속도를 얻는 방법인 JIP 컴파일이라는 기술로 성능을 향상시키기는 하지만) 컴파일을 먼저 해놔야하는 것이 아닌 런타임에 일어나는 인터프리터 언어로 분류 된다.

클라이언트 사이드 코드와 서버 사이드 코드

웹 개발에서 클라이언트 사이드 코드는 사용자의 컴퓨터에서 동작하는 코드로 웹 페이지를 방문했을 때 브라우저가 페이지 내의 클라이언트 사이드 코드를 다운로드하고 실행하여 화면에 띄운다. 바로 이 과정에서 다루는 것은, 정확히는 클라이언트 사이드 JavaScript 다.

 

반대로 서버 사이드 코드는 서버에서 동작하는 코드로 그 실행 결과를 브라우저가 다운로드해서 화면에 띄우게 된다. 이 방식을 사용하는 웹 언어는 PHP, Python, Ruby, ASP.NET, 그리고... JavaScript가 있다! JavaScript는 브라우저 뿐만 아니라, 많은 사람들이 사용하는 Node.js 환경처럼 서버 사이드 언어로도 사용할 수 있다. 알면 알수록 더 매력적인 JavaScript ㅋㅋ 

동적 코드와 정적 코드

클라이언트 사이드 JavaScript와 서버 사이드 언어들 모두 동적이라는 단어로 설명할 수 있다. 동적인 이유는 웹 페이지/웹 앱의 서로 다른 상황에 서로 다른 화면을 보여줄 수 있고, 필요하면 새로운 컨텐츠를 생성할 수 있기 때문이다.
- 서버 사이드 코드는 서버에서 새로운 콘텐츠를 생성 (데이터베이스에서 데이터를 가져오는 등) 한다.
- 클라이언트 사이드 JavaScript는 클라이언트의 브라우저 내에서 새로운 컨텐츠를 생성 (새로운 HTML 표를 생성하고, 서버에서 받아온 데이터로 채운 후, 사용자가 보고 있는 웹 페이지에 표시) 한다. 
두 맥락 내에서 동적의 의미는 약간 다르지만, 그럼에도 서로 연관되어 있으며 두 방법을 보통 함께 사용한다.

 

동적으로 바뀌지 않는 내용을 포함하지 않는 웹 페이지를 정적인 페이지라고 한다. 정적인 페이지는 항상 같은 콘텐츠만 보여준다.