안녕하세요! 숯 같은 개발자 엄탱입니다!
오늘은 엄청나게 많은 비가 쏟아지네요.. 다들 무사히 퇴근하셨는지 모르겠습니다.
내일도 많은 비가 내린다는데 다들 무사히 출근하시길 바라겠습니다 :)
오늘은 자바스크립트에 대해서 알아보겠습니다.
자바스크립트란 무엇이며, 어떻게 탄생을 했고, 어떤 식으로 사용되는지에 대해 간략하게 준비했습니다!
자, 그럼 바로 시작하겠습니다.
자바스크립트 정의
자바스크립트는 ECMAScript 사양을 준수하는 프로토타입 기반의 프로그래밍 언어로 스크립트 언어에 해당됩니다. 스크립트 언어란 간단하게 말해 다른 응용 프로그램에 삽입되어서 동작하는 프로그래밍 언어로서, 기존에 이미 존재하는 소프트웨어(애플리케이션)를 제어하기 위한 용도로 쓰이는 언어입니다.
!!!주의!!!
나무위키에 따르면 인터프리터 언어와 스크립트 언어는 엄연히 다른 언어입니다!
인터프리터 언어는 인터프리터 방식을 사용하는 언어를 뜻하고 스크립트 언어는 이미 존재하는 소프트웨어를 제어하기 위한 용도로 쓰이는 언어입니다.
단지 스크립트 언어 용도상 인터프리터 방식이 유용하기 때문에 스크립트 언어 대부분이 인터프리터 방식을 쓰는 인터프리터 언어 일 뿐입니다.
또한, 자바스크립트는 싱글 스레드 언어이며 기본적으로는 동기적 언어 (feat.비동기)입니다.
여기서 잠깐, 자바스크립트는 '동기적 언어다', '비동기적 언어다' 라는 말들이 다양하게 들려옵니다!
도대체 자바스크립트는 동기적일까 비동기적일까요??
저는 사실 동기적, 비동기적 언어다 둘 다 맞는 말이다 라고 말씀드리고 싶습니다.
이유는 기본적으로 코드는 위에서 아래 코드 한줄 한줄 씩 해석이 되어서 프로그램이 실행이 됩니다.
그럼 기본적으로 언어들은 동기적 언어에 해당되겠죠!
그치만 자바스크립트는 싱글 스레드 언어이기 때문에 동기적인 코드만 사용하게 되면, 마치 굉장히 느리고, 상당히 렉이 걸리는것 같아 보이는 웹사이트를 만들 수 밖에 없습니다.
그렇기 때문에, 자바스크립트는 작업시간이 오래걸리는 (예를 들면, 서버에 통신하여 데이터를 불러오는 작업) 사용자가 기다리지 않아도 되는 시간이 소요되는 동작들을 비동기 동작으로 돌려서 싱글 스레드만 사용 하더 라도 사용자가 보기에 끊기지 않고 부드러운 웹사이트를 제공할 수 있는 것입니다!
그렇다면 자바스크립트는 비동기적 언어라고 표현하는게 맞을 까요??
이건 어떻게 표현하냐에 따라 다른것같습니다.
저는 그래서 '자바스크립트는 동기적 언어지만 비동기적 동작이 반드시 필요한 언어다'라고 정의하고 싶습니다!
그리고 웹 브라우저에서 주로 사용되며, 웹 브라우저에는 HTML, CSS, JavaScript가 주로 사용되는데, HTML은 뼈대, CSS는 외관(디자인), JavaScript는 동력을 위해 사용됩니다. 즉, JavaScript는 정적인 콘텐츠를 동적인 콘텐츠로 바꾸어 주는 역할을 웹 브라우저에서 맡고 있습니다.
하지만, JavaScript는 웹 브라우저 외에도 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임 환경인 Node.js를 사용해 서버 사이드 언어로도 많이 사용되어지고 있습니다.
자바스크립트 역사
저는 자바스크립트의 역사가 흥미롭게 느껴졌습니다.
자바스크립트는 1995년에 넷스케이프에서 근무하던 브랜든 아이크가 10일만에 설계한 것으로부터 시작되어졌는데, JavaScript는 처음에는 Mocha라는 이름이었고 그 후에는 LiveScript가 되고 최종적으로 JavaScript라는 이름이 되어 오늘날까지 이어지고 있습니다.
자바스크립트는 흥미롭게도 Java라는 또 다른 프로그래밍 언어를 가져와 뒤에 Script를 붙이기만 했는데요. 'Java와 구문이 유사해서 이름을 JavaScript로 명명했다'는 표면상의 이유를 대지만 실제로는 Java의 유명세를 이용해 JavaScript를 널리 알리기 위해 작명한 것입니다. (물론 무단으로 도용한 것은 아닙니다.)
자바스크립트는 여러 위기가 있었지만, AJAX, jQuery, Node.js, 구글의 V8엔진 등으로 인해 장족의 발전을 해왔습니다.
원래 자바스크립트 엔진들은 모두 실시간 인터프리팅을 하고 있었는데, 모질라에서 SpiderMonkey 엔진에 JIT컴파일 방식을 도입했습니다. 이는 자바스크립트 엔진으로는 최초로 도입한 것이고, 이때 알려진 것으로는 순수 자바스크립트 성능만 기존 버전의 20~40배에 달했습니다. 그리고 구글 역시 V8이라는 자바스크립트 엔진을 개발하면서 JIT 컴파일 방식을 도입하였고, 자바스크립트 성능이 비약적으로 향상하여 지금은 JavaScript 3D 게임 엔진도 개발되고 있다.
자바스크립트 작동 원리
JavaScript 코드는 JavaScript 엔진에 의해 해석(기계어로 변환)됩니다.
JavaScript 엔진은 JavaScript 코드를 실행하는 컴퓨터 프로그램입니다. 최초의 JavaScript 엔진은 단순한 인터프리터였지만, 모든 현대적 엔진은 JIT(Just-in-time) 또는 런타임 컴파일을 사용하여 성능을 향상했습니다.
엔진 동작 원리는 다음 포스팅에서 다루도록 하겠습니다.
클라이언트 사이드 JavaScript
클라이언트 사이드 언어로서 JavaScript 엔진은 브라우저 내부에 자체적으로 내장되어 있습니다.
다음은 클라이언트 측 JavaScript가 작동하는 방식에 대한 개요입니다.
- 웹 페이지 방문 시 브라우저가 웹 페이지를 로드합니다.
- 로드하는 동안, 브라우저는 버튼, 레이블, 드롭다운 박스와 같은 페이지 및 모든 요소를 문서 객체 모델(DOM)이라는 데이터 구조로 변환합니다.
- 브라우저의 JavaScript 엔진은 JavaScript 코드를 바이트코드로 변환합니다.
- 버튼에 대한 마우스 클릭과 같은 다양한 이벤트는 연결된 JavaScript 코드 블록의 실행을 트리거합니다. 그런 다음 엔진은 바이트코드를 해석해서 DOM을 변경합니다.
- 브라우저에 새 DOM이 표시됩니다.
서버 사이드 JavaScript
서버 사이드 JavaScript는 백엔드 서버 로직에서 코딩 언어를 사용하는 것을 의미하며, 이 경우에 JavaScript 엔진은 서버에 직접 위치합니다. 서버 측 JavaScript 함수는 데이터베이스에 액세스 하고, 다양한 논리 작업을 수행하고, 서버의 운영 체제에 의해 트리거 된 다양한 이벤트에 응답할 수 있습니다. 서버 측 스크립팅의 주요 이점은 요구 사항, 액세스 권한 및 웹 사이트의 정보 요청에 따라 웹 사이트 응답을 쉽게 사용자 지정할 수 있다는 것입니다.
오늘 준비한 내용은 여기까지입니다.
아래는 참고 사이트입니다.
https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps/What_is_JavaScript
https://ko.javascript.info/intro
https://namu.wiki/w/%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%20%EC%96%B8%EC%96%B4
https://aws.amazon.com/ko/what-is/javascript/
2022.09.01(목) 자바스크립트 정의 내용 추가 - 동기적 vs 비동기적
'언어 > JavaScript' 카테고리의 다른 글
| [JavaScript][강력 추천] slice(), splice() [엄탱][배열 내장함수#5] (8) | 2023.11.02 |
|---|---|
| 자바스크립트는 어떻게 작동하는가? - 브라우저, 자바스크립트의 동작원리 (4) | 2022.09.15 |
| 자바스크립트(JavaScript) - find(), findIndex() 배열의 내장함수 #7 [엄탱 개발일지] (2) | 2022.07.25 |
| 자바스크립트(JavaScript) - trim() string의 내장함수 #1 [엄탱 개발일지] (0) | 2022.07.19 |
| 자바스크립트(JavaScript) - 스코프(scope) 용어정리 #1 [엄탱 개발일지] (2) | 2022.07.18 |
