JavaScript 개요
JavaScript란 무엇인가?
런타임에 컴파일되는 동적 약형 프로그래밍 언어
해석형 언어이므로 전송 중에 컴파일 된다.
JavaScript는 웹페이지를 보다 동적으로 만들기 위해 생성되었다.
브라우저 내에서 페이지의 내용을 직접 변경하기 위해 만들어졌다.
동적 약형, 런타임에 컴파일되어 웹페이지를 더 동적으로 만든다.
(몇몇 프로그래밍 언어처럼 개발 중에 컴파일되는 것이 아니라 실행되기 전에 컴파일된다.
호스팅 언어이므로 여러 환경에서 실행된다.)
해석형(=즉석 컴파일링)
모든 환경에서 javascript코드는 어떻게 실행될까?
웹페이지에서 어떤 효과를 주고자할 때,
스크립트를 실행하는 환경이 브라우저인 경우,
javacript코드를 실행하려는 모든 환경에는 내장된 javascript엔진이 있다.
chrome에는 V8이라는 엔진이 내장되어 있다.
엔진의 역할 : 코드를 구문 분석하는 것, 머신 코드가 더 빨리 실행되고 머신 코드로 즉석 컴파일링을 한다.
코드를 읽기는 하지만, 반드시 실행하는 것이 아니라, 해당 코드를 머신에서 실행이 더욱 빠른 코드로 컴파일링 한 뒤 머신 코드를 실행한다.
이 모든 과정은 javascript엔진을 통해 브라우저 내에서 일어난다.오늘날의 엔진은 최적화가 많이 이루어져 있다!
엔진이 컴파일되지 않은 코드를 실행하기 시작한 후 더 빠른 실행을 시작하기 위해 이미 실행중인 코드를 컴파일할 수도 있다. 컴파일된 코드로 동적으로 전환하는 작업이 일어난다.=> 정리 : 브라우저에는 코드를 가져와서 컴파일하고 최적화하고 실행하는 내장 도구인 엔진이 있다!
JavaScript 코드 실행은 항상 운영 체제의 단일 스레드에서 진행된다.
동적과 약형?
JavaScript는 동적 해석형 언어이지만 약형 프로그래밍 언어기도 하다.
동적 해석형 언어 : 미리 컴파일되지 않았음을 의미
c++은 개발 중 또는 개발 후에 컴파일된다.
= 최종 사용자와 공유하기 전
반면 javascript는 전송 중 컴파일링이기 때문에 코드가 런타임에 평가되고 실행되고 변경될 수 있다.
(코드 내에서 다른 프로그래밍 언어에서는 허용되지 않는 일부 작업 수행 가능)ex. javascript에서는 데이터 유형을 동적으로 전환할 수 있다. 변수에 텍스트를 저장했다가 나중에는 동일한 변수에 텍스트가 아닌 숫자를 저장할 수 있다.
정리 => 동적 : 런타임에 분석 및 해석되어 컴파일이 되기 때문에 특정 작업의 수행이 가능하다. 예로 변수의 데이터를 변경할 수 있다.
수행 중 컴파일링과 해석
약형 : javascript는 변수에 숫자를 저장할 때 다른 프로그래밍 언어와는 달리 숫자라고 알리지 않아도, 데이터 유형을 명확히 저장하지 않아도 그대로 받아들인다.
데이터 유형은 고정되어 있지 않고 바뀔 수 있다.
웹페이지는 어떻게 동작하는가?
웹페이지를 방문할 때는 브라우저를 사용한다.
브라우저가 설치된 클라이언트인 컴퓨터, 노트북을 사용해 URL을 입력하거나
Google의 검색 결과를 클릭해 웹페이지를 로드한다.
(웹페이지를 처음 방문할 시 요청이 서버로 전송 ->
즉 HTML 파일이 호스팅된 웹페이지가 있는 인터넷의 컴퓨터로 전송이 되면 해당 서버가 그 웹페이지를 로드해 소위 응답이라고 불리는 것을 우리의 브라우저로 다시 보낸다.)
우리가 인터넷을 사용해 웹페이지를 방문할 때에 가장 많이 쓰이고, 보고, 사용하는 응답의 형태는 서버에서 클라이언트로 다시 보내진 HTML 페이지이다.
예를 들어, 로드된 웹페이지가 온라인 쇼핑몰이라면?
사용자는 버튼을 클릭하여 양식을 제출한다.(ex.제품 주문하기)
그러면 이 양식 제출을 서버로 보내기 위해 브라우저에서 서버로의 새로운 요청이 트리거된다.
그리고 서버는 들어온 요청을 처리하는데 데이터베이스에 주문 데이터를 저장하는 등의 처리가 되고, 처리가 완료되면 주문 확인 페이지 등의 새로운 웹페이지, 새로운 HTML 문서로 클라이언트에게 새로운 응답을 보낸다.
이런 방식으로 웹과 상호작용하고, 웹페이지가 일반적으로 작동하는 방식이다.
JavaScript는 이 과정을 더 반응적으로 만들게끔 해주며 어떤 경우에서는 두 번째 요청에 대한 응답 흐름을 건너뛰어 이미 로드된 페이지를 변경하고 거기에서 작업을 할 수 있게 해준다.
JavaScript 사용해보기
전통적인 웹페이지 형태로 서버에 새로운 요청이 보내지면 새 HTML 파일을 로드한다.
하지만 JavaScript를 활용한 오늘날 방문하는 모든 웹사이트들은 새 HTML 파일을 로드하지 않고 대신 이 정보를 기존 페이지에서 드롭다운, 오버레이 등의 흥미로운 사용자 인터랙션으로 바꿀 수 있고 이 모든 것은 JavaScript로 구현된다.
기존 페이지를 벗어나 새 HTML 코드가 다운로드되길 기다릴 필요도 없다.
더욱 빠르고, 작업이 완료될 때까지 기다릴 필요가 없는 모바일 애플리케이션과 비슷하다.
// 처음 새로운 페이지를 로드하는 코드
<a href="info/dynamic.html">dynamic</a>//기존페이지에서 오버레이하는 콛,
<a href="#" data-text="새로운 페이지 로드할 때 있는 문구" class="info-model">defer : 이 속성은 JavaScript 코드가 어떻게, 언제 실행될지를 제어한다.
<script src="assets/scripts/app.js" defer></script>호스팅된 환경에서의 JavaScript 실행
현대 브라우저엔 JavaScript 엔진이 내장되어 있어 JavaScript 코드를 실행할 수 있다.
다른 환경에서도 javascript를 실행 할 수도 있다.
ex. 서버 측, 브라우저를 통하지 않고 컴퓨터에서 코드 실행 가능
JavaScript는 웹사이트를 보다 동적으로 만들고 새 페이지를 로드하지 않고도 웹사이트의 내용을 변경할 수 있도록 브라우저에서 실행되도록 개발이 되었다.
JavaScript는 로드된 HTML 코드, CSS와 잘 어우러져서 작동할 수 있기 때문에 JavaScript를 사용해 백그라운드 Http 요청을 보낼 수도 있다. 즉 페이지를 다시 로드하지 않고, 뒤에서 요청을 보내고 데이터를 가져오는 등의 작업들을 할 수 있다.
Node.js
만일 브라우저에 엔진이 있다면 엔진을 브라우저에서 떼어내 독립적인 도구로 이용해 컴퓨터에서 다른 곳에 직접 JavaScript를실행할 수 있다는 생각에서 착안한 도구
Node.js는 어느 컴퓨터에서나 실행할 수 있고 웹 백엔드와 웹 서버를 구축하는 데에도 자주 사용된다.
Node.js는 컴퓨터에서 바로 실행되기 때문에 로컬 파일 시스템으로의 접근과 파일 작성 등의 작업이 가능하다.
따라서 브라우저 측 JavaScript와 달리 Node.js 코드는 사용자가 직접 실행해야 하는 것이지 웹페이지에 들어가면 실행되는 식으로 작동하는 게 아니다.
java vs javascript
Java와 JavaScript는 완전히 별개인 두 개의 프로그래밍 언어이다.
JavaScript는 브라우저와 다른 모든 환경에서 실행되지만 Java는 브라우저에서 실행되지 않는다.
Java는 엄격히 객체 지향적이며 강형인 언어이고 데이터 컨테이너에 저장할 데이터 종류도 정의해야 하지만, 반면 JavaScript는 굉장히 유연하다.
Java는 브라우저에서 실행되지 않지만 JavaScript는 실행이 된다.
클라이언트 사이드 vs 서버 사이드
클라이언트 사이드는 브라우저고,
Node.js도움을 받는 서버 측은 인터넷에 연결된 컴퓨터로 웹페이지를 제공할 수는 있지만 최종 사용자의 컴퓨터에서 직접 코드를 실행하지는 않는다.
클라이언트 사이드가 javascript의 기원이다.
