JavaScript란 무엇인가?
JavaScript is a dynamic, weakly typed programming languang which is compiled at runtime. It can be executed as part of a webpage in a browser or directly on any machine ("host emvironment").
- JavaScript는 런타임에 컴파일되는 동적(dynamic) 약형(weakly typed) 프로그래밍 언어이다. 이는 브라우저에서 웹 페이지의 일부로 실행될 수도 있고, (호스트 환경이라 불리는) 특정 머신에서 직접 실행될 수도 있다.
JavaScript was created to make webpages more dynamic (e.g. change content on a page directly from inside the browser). Originally, it was called LiveScript but due to the popularity of java, it was renamed to JavaScript.
- JavaScript는 (브라우저 내에서 페이지의 내용을 직접 변경하는 등) 웹 페이지를 보다 동적으로 만들기 위해 생성되었다.이것이 JavaScript가 과거에 탄생한 이유이다. 최초엔 LiveScript로 불렸으나 Java의 큰 인기에 편승하고자 JavaScript로 이름이 변경되었다.
JavaScript is totally independent from java and has nothing in common with Java!
- JavaScript는 Java와는 공통점이 없는 전혀 별개의 언어이다.
위같은 설명만으로는 JavaScript에 대한 설명이 완전히 와닿지 않을 것이다.
웹페이지의 작동방식
우리가 웹과 상호작용하는 방식
- 일반적으로 사용자가 웹페이지를 방문할때는 브라우저를 사용한다.
- 브라우저가 설치된 클라이언트인 컴퓨터, 노트북을 사용해 URL을 입력하거나 Google의 검색 결괄르 클릭해 웹 페이지를 로드한다.
- 웹페이지 첫 방문 시 요청이 서버로 전송된다.
- 해당 서버가 응답(Response)을 다시 브라우저로 반환한다.
- 이때 응답으로 가장 많이 채택되는 형태가 HTML 페이지이다.
- 응답 받은 HTML 페이지에 따라, 사용자는 자신이 원하는 기능을 요청할 수 있다. (두번째 요청으로)
- 예를 들어 방문한 사이트가 쇼핑몰이라면, 우리는 원하는 제품을 구매하는 양식을 전송하는 두번째 요청을 전송 가능하다.
- JavaScript는 이 과정들을 더욱 반응적으로 만들어준다.
- 경우에 따라 두 번째 요청에 대한 응답을 건너뛰고, 이미 로드된 페이지를 변경하고 거기에서 작업을 할 수 있게 해준다.
JavaScript 사용해보기
오늘날 우리가 방문하는 대부분의 웹사이트는 드롭다운, 오버레이 등의 흥미로운 사용자 인터렉션을 갖추고 있으며 이 모든 것들은 대부분 JavaScript로 구현된다.
- 사용자 인터렉션 예시
- 오버레이(overlay): "덮어 씌우다.", 큰 프로그램을 한 번에 로드할 수 없을 때, 프로그램을 몇 개의 모듈로 나누어 컴파일하고 필요할때마다 필요한 모듈을 메모리로 불러들이는 기법.
- ex. "모달(Modal)"창. 같은 창 내부에서 상위 레이어를 띄우는 방식
- 드롭다운(dropdown): 버튼 클릭 시 하위 메뉴가 펼쳐지는 네비게이션 바.
- 오버레이(overlay): "덮어 씌우다.", 큰 프로그램을 한 번에 로드할 수 없을 때, 프로그램을 몇 개의 모듈로 나누어 컴파일하고 필요할때마다 필요한 모듈을 메모리로 불러들이는 기법.
JavaScript의 특징
- Dynamic, weakly-typed programming language
- 동적 약형 프로그래밍 언어.
- Integerpreted, "on the fly" compiled language
- "(준비 없이)그때그때 실행되는" 해석형 컴파일 언어
- "Hosted language": Runs in different environments (e.g. in browser)
- 브라우저와 같은 여러 환경에서 실행되는 "호스팅된 언어."
- Hosted Language(호스팅된 언어): 특정 환경에서 실행되고 그 환경에서 제공하는 기능을 활용하는 언어
- 브라우저와 같은 여러 환경에서 실행되는 "호스팅된 언어."
- Most prominent use-case: Run code in a browser
- 가장 두드러진 사용 사례: 웹 페이지의 브라우저
JavaScript는 어떻게 실행되는가
JavaScript 코드를 통해 웹 페이지에 어떤 효과를 부여하는 경우, 이는 JavaScript 엔진을 기반으로 작동한다.
JavaScript Engine
- 브라우저에서 자체 엔진을 내장하고 있다.
- ex. Chrome(V8), Firefox(SpideMonkey)
- 엔진의 역할.
- 구문 해석(Parse Code)
- 머신 코드로 즉석 컴파일링 (Compile to Machine Code)
- 코드를 읽지만 반드시 실행하는 것이 아니라, 실행이 더욱 빠른 코드로 컴파일링한 뒤 머신코드를 실행한다.
- 머신 코드 실행(Execute Machine Code)
- 단일 스레드로 실행된다.
- 운영체제가 JavaScript 코드를 처리할 때, 여러 작업이 동시 시행이 가능하도록 다중 스레드로 시행하는 것이 아닌, 단일 스레드로만 진행한다.
동적 + 약형 언어
동적 언어(Dynamic, interpreted Programming Language)
- Not pre-compiled, instead parsed and compild "on the fly" (e.g. in the browser)
- 사전에 컴파일 되지 않고, "즉시(on the fly)" 구문 분석 및 컴파일 (예: 브라우저에서)
- Code evaluated and executed at runtime
- 런타임 시 평가 및 실행되는 코드
- Code can change at runtime (e.g. type of a variable)
- 런타임에 변경 가능한 코드 (예: 변수의 유형 등)
동적 해석형 언어란 미리 컴파일 되지 않았음을 의미한다. C++와 같은 언어는 개발 중 또는 개발 후, 즉 최종 사용자와 공유전에 컴파일 된다. 따라서 런타임에 실행되지 않고 변경도 불가능하다.
반면, JavaScript는 전송 중 컴파일링되므로 코드가 변경될수 있다. 물론 이미 작성된 코드가 마법처럼 바뀔수는 없고, 당연히 작성된 코드가 실행되지만, 코드 내에서 다른 프로그래밍 언어에서는 허용되지 않는 변경이 가능해진다. 예를들어, JavaScript에서는 데이터의 유형을 동적(Dynamic)으로 변경할 수 있다. 런타임(코드 실행 중)에 변수에 텍스트를 저장했다가 나중엔 숫자를 저장하는 것이 가능하다.
즉, 동적'Dynamic'이란 말은, 런타임에 분석 및 해석되어 컴파일 된다는 JavaScript의 특징이 덕분에 변수 데이터 변경 등의 변화하는 작업이 수행 가능해진다는 의미이다.
약형 언어(Weakly Typed Programming Language)
- Data types are assumed (e.g. assigned to variables) automatically
- 데이터 유형이 자동으로 유추 (예: 변수 할당)
- You don't define that some variable has to hold a certain value (e.g. a number)
- 특정 변수에 담길 값을 명시하지 않음 (예: 숫자 등)
- Data types are not set in stone but can change
- 데이터 타입이 확정(set in stone)되지 않고 변경 가능함.
다른 프로그래밍 언어는(약형이 아닌) 미리 변수가 보유할 데이터의 유형을 정의하고, 이외의 유형이 저장된 경우 오류가 발생힌다. 이와 달리 JavaScript는 유형을 명확히 정의하지 않아도 된다.
호스팅된 환경에서의 JavaScript 실행
JavaScript는 호스트 환경에서 실행된다.
- Browser-side: 가장 잘 알려진 환경. JavaScript 엔진이 내장되어 코드를 실행할 수 있다.
- others(server-side): 브라우저를 통하지 않고 컴퓨터에서 코드 실행.
Browser-side
- JavaScript was invented to create more dynamic web sites by executing in the browser!
- JavaScript는 웹 사이트에서 실행함으로써 동적 웹 사이트를 생성하기 위해 개발되었다.
- JavaScript can manipulate the HTML code, CSS, send background Http request & much more
- JavaScript는 HTML, CSS, 백그라운드 http 요청을 조작할 수 있다.
- JavaScript CAN'T access the local filesystem, interact with the operating system ect
- JavaScript는 로컬 파일 시스템 접근, 운영체제와의 상호작용이 불가능하다.
- 보안상의 이유로 로컬 파일 시스템에 접근할 수 없다. 이것이 가능하다면 브라우저에서 컴퓨터 파일을 조회하거나 삭제하는 등의 위험한 행위가 가능해진다.
- JavaScript는 로컬 파일 시스템 접근, 운영체제와의 상호작용이 불가능하다.
"Other" (e.g. Server-side)
- Google's JavaScript Engine(V8) was extracted to run JavaScript anywhere (called "Node.js")
- 구글의 JavaScript 엔진(V8)는 JavaScript를 어디서든 실행하기 위해 추출되었다.("Node.js"라고 불린다)
- Node.js can be executed on any machine and is therefore often used to build web backgends (server-side JavaScript)
- Node.js는 어떤 기계에서든 실행 가능하며, 주로 웹 백엔드를 구축하기 위해 사용된다. (서버-사이드 JavaScript)
- Node.js CAN access the local filiesystem, interact with operating system ect. It CAN'T manipulate HTML or CSS.
- Node.js는 로컬 파일 시스템에 접근 가능하며 운영체제와 상호작용할 수 있다.
- 컴퓨터에서 바로 실행되므로 로컬 파일(실행되고 있는 머신 내의 파일) 시스템의 접근과 작성 및 수정이 가능하다.
- HTML이나 CSS 코드를 조작할 수 없다.
- 로드된 웹 페이지에 직접 접근할 수 없어 브라우저 측의 HTML, CSS 코드를 조작할 수는 없다.
- Node.js는 로컬 파일 시스템에 접근 가능하며 운영체제와 상호작용할 수 있다.
JavaScript의 역사
- 1995: Netscape가 "LiveScript"를 도입 & "JavaScript"로 이름 변경
- 1996: Microsoft가 Internet Explorer에서 자체 JavaScript 버전 출시
- Microsoft등 브라우저에서 적용되는 JavaScript버전을 자체적으로 출시하면서 JavaScript 코드의 호환성 문제 발생
- 초기 JavaScript는 낮은 보안성과 오용될 수 있는 취약성으로 오버레이 팝업과 같은 광고나 스팸 형태 목적으로 주로 사용되었는데, 이는 나쁜 사용자 경험을 유발하여 언어 자체에 대한 신뢰도를 떨어뜨림.
- 1996 말: JavaScript의 표준화를 위해 ECMA 위원회에 제출됨.
- ECMA(European Computer Manufactureres Association): 여러 브라우저에서 구현할 수 있는 하나의 표준을 갖도록 JavaScript의 표준화를 담당
- 1997 - 2005 : 표준화 노력에도 불구하고 Microsoft는 표준화된 JS 버전을 지원하지 않음.
- 2006 - 2011: JavaScript 생태계에 큰 발전이 있었고, 결국 Microsoft역시 표준화 프로세스의 일부가 됨.
- 2011~: 활발히 개발되는 단계
EcmaScript
- ECMA 국제 기구 에서 관리하는 언어.
- 브라우저 공급 업체는 ECMAScript를 구현하여 JavaScript를 만들었다.
- JavaScript: 가장 유명한 ECMAScript 구현체. (그 외 ActionsCript, Jscript등이 있음)
- ECMAScript가 바로 브라우저에서 사용되는 것이 아니라, 완성된 표준화 버전인 ECMAScript를 토대로 각 브라우저에서 자체 JavaScript 엔진에 구현한다.
- 각 브라우저에는 자체 JavaScript 엔진이 있어 지원하는 정확한 기능을 정의하는 것은 각 브라우저와 브라우저에서 사용하는 엔진이다.
- ECMAScript는 브라우저 공급 업체와 함께 지금도 활발히 개발중이다.
- JavaScript는 2015, 2016년에 대대적인 개선을 통해 거의 완전히 새로운 버전으로 출시된 상태. (이때 출시된 것이 ES6)
📌 요약
ECMA 국제 기구가 ECMAScript를 통해 브라우저에서 사용할 수 있는 언어를 표준화 함. 브라우저 업체는 표준화된 언어인 ECMAScript를 기반으로 브라우저가 내장한 자체 JavaScript 엔진에 자신만의 기능을 구현함. JavaScript는 ECMAScript의 대표적인 구현체.
Reference
