Java Script ?
자바스크립트(JavaScript)는 스크립트언어이다. 이 한문장이면 모든것이 설명된다.
하지만 처음 컴퓨터를 접하고, 프로그래밍을 접하고 JavaScript(이하 JS, 자바스크립트 또는 제이에스 라고 읽으면 된다.)를 접하는 사람에게는 많이 부족한 설명이다.
먼저 JS의 탄생을 살펴보면, 썬 마이크로시스템즈((Sun Microsystems)에서 개발한 Java와는 별 관계가 없는 언어이다. 단지 이름만 비슷할 뿐이다.
그에 대한 탄생배경을 정리해 놓은 좋은 영상이 있다.
(youtube:드림코딩 "자바스크립트의 역사와 현재 그리고 미래")
위 드림코딩님의 JS 정리 영상들을 본다면, JavaScript의 역사뿐만 아니라 JS를 시작하기에 도움이 되는 수많은 정보들이 같이 정리되어있다.
초보자들뿐만 아니라 개념이 잡혀있지 않은 개발자들이 본다면, JS를 이해하는데 정말 많은 도움이된다.
다시 본론으로 조금 돌아와서, JavaScript란 무엇인가?
MDN에서는 JavaScript가 뭔가요? 라는 페이지에 "스크립팅 언어 또는 프로그래밍언어" 라고 정리 해놓았다.
여기서 말하는 스크립트 언어란 응용프로그램을 제어하는 컴퓨터 프로그래밍 언어이다.
스크립트 언어를 스크립트 프로그래밍 언어라고 부르기도 한다.
그래서 JS는 간단히 스크립트 언어이다. 라고 할 수 있다.
(정말 대충 비교를 해서 설명을 해보자면, 사과(JS)가 무엇인가? 식물이다.(프로그래밍언어이다.), 사과나무에서 열리는 열매이다.(스크립트 언어이다.) 정도로 볼 수 있다.)
하지만 스크립트 언어만으로는 무언가 설명이 부족하게 느껴진다.
그 이유는 JS란 무엇인가를 검색해보면 "스크립트 언어이다."와는 다른 수 많은 말들이 따라오기 때문인데,
JS는 프로그래밍 언어이다, 인터프린터 언어이다, 등등으로 다른 언어라고 소개되어 있기도 하다.
이런 것들은 JS가 가지는 특징이라고 볼 수 있다.
여기에서는 추가적으로 자세한 설명보다 큰 구조와 그와 함께 찾아보면 좋은 것들을 간단히 적어보겠다.
1, 프로그래밍 언어
2, 인터프린터 언어
3, 객체지향
4, jQuery와 Node.js
5, ECMA international
1, 프로그래밍 언어
먼저 프로그래밍언어를 살펴보자.
JS 찾아서 이 글을 읽고 있는 그대라면, 아마도 HTML, CSS, JS 이 세가지를 같이 보고 왔을 가능성이 크다.
프로그래밍언어는 마크업 언어, 스타일시트 언어를 같이 비교의 대상에 넣을 수 있다.
간단하게 설명하자면 마크업 언어는 생성을 담당하고, 스타일시트 언어는 표현, 디자인을 담당하고, 프로그래밍 언어는 기능적 동작을 담당한다.
예를 들어 우리가 "네이버" 라는 글씨를 클릭해서 '네이버입니다.'라는 경고창(Alert)을 본다고 할 때.
"네이버" 라는 글씨를 생성하는것은 마크업 언어의 기능으로,
"네이버" 글씨를 빨간색으로 변경하는것은 스타일시트 언어의 기능으로 볼 수 있다.
그리고 "네이버" 글씨를 클릭했을 때 경고창(Alert)이 뜨는것은 프로그래밍 언어의 기능으로 볼 수 있다.
(네이버 글씨를 클릭해보자.)
2, 인터프린터 언어
인터프린터를 이해하기 위해서는 바이너리 언어(binary language), 컴파일, 런타임 등을 먼저 알아야 할 필요가 있고 생각한다. 왜냐면 바이너리 언어, 컴파일, 런타임을 알고나서야 인터프린터의 이해도에 있어서 그 정도가 완벽해진다고 생각하기 때문이다.
보통 인터프린터 언어를 설명 할 때, 컴파일 언어와 대조적으로 비교되며 설명된다.
정말 대충 설명하자면,
인터프린터 언어는 컴퓨터를 동작시킨다고 할 때, 소스 코드 한줄한줄이 바로바로 실행이 되는 언어이고
컴파일 언어는 컴퓨터를 동작시킨다고 할 때, 소스 코드가 컴파일타임을 거쳐, 프로그램이 준비 된 이후에 런타임으로 실행되는 언어라고 보면된다.
아, 무슨말인지 모르겠다??
간단히 소스코드가 실행될 때, 인터프린터는 바로바로 실행되고 컴파일언어는 준비단계 이후 실행된다. 정도로 이해하자.
3, 객체지향
보통 객체지향을 설명 할 때는, "객체지향언어(OOP, Object Oriented Programming)와 절차지향언어(PP, Procedural Programming)"로 묶어서 설명되어 있는 글이 대다수이다.
바로 간단히 설명해보면, 객체지향 언어와 절차지향 언어는 프로그램의 설계방법론중 하나라고 볼 수 있다.
그래서 본 글쓴이는 객체지향이 설계방법 중 하나이기때문에,
객체지향 언어로 말하기 보다 하나의 개념으로 객체지향 방법, 순차지향 방법이라고 보는 것이 더 옳다고 생각한다.
이제 절차지향과 객체지향에 조금 본격적으로 말해보자.
절차지향은 코딩해놓은 소스코드의 동작이 첫번째 줄부터 마지막 줄까지 순서대로 진행되는 방법를 의미하고,
객체지향은 개발자가 생성해 놓은 다수의 객체가 서로 데이터를 주고 받으면서, 동작하는 방법을 의미한다.
글로는 이해가 되지 않는다. 잘 모르겠다.
우선 이미지로 설명해놓은것을 보고 이 정도로만 이해하자.
4, jQuery와 Node.js
앞으로 JS에 대한 소스코드 예제와 함수를 찾아보게 되면,
" JavaScript 소스코드 예제 : $(div).appendChild(newDiv); " 라던가 " JavaScript 예제 :: let foo = require('foo'); " 등의 수 많은 JS 소스코드를 볼 수 있다.
여기에서 가장 큰 문제는 jQuery(제이쿼리)와 Node.js(노드제이에스)의 함수와 메소드를 사용하기 위해서는 그의 맞는 개발환경설정이 먼저 실행되어야 하고 그 다음에야 사용이 가능하다는 것이다.
jQuery와 Node.js가 JavaScript라는 말은 맞지만 정확히 표현하면 JavaScript로 만들어진 또다른 개발환경이라고 할 수 있다.
(누군가에게 사과주스를 들고가서 "사과입니까?"라고 물어본다면 "그렇다."라고 대답할 것이다. 하지만 사과를 들고가서 "사과주스입니까?"라고 물어보면 "아니다."라는 답변이 돌아온다.)
그래서 일반 JavaScript에서 쓸수 있는 함수는 jQuery에서 사용 가능하지만, jQuery가 지원해주는 jQuery함수는 개발환경의 설정없이 일반 JavaScript에서 사용할 수 없다. 사용할 시 error를 발생시킨다.
하지만 수 많은 JavaScript의 예제 소스코드들이 이런 개발환경에 대한 이해도를 전부 무시하고 있고, 그냥 JavaScript로써 사용이 가능한 것처럼 쓰여있으면서, jQuery에서만 사용가능한 것을 JavaScript로 간단히 표기해놓는다.
그래서 error가 없으면서도 error를 발생시킨다.
제일 기본적인 본연의 JavaScript로만 구현하고 동작되는 JavaScript환경을 vanilla JavaScript 라고 한다.
우리는 앞으로 JavaScript의 함수나 소스코드를 사용한다고 할 때, vanilla인지, jQuery인지 아니면 Node.js의 함수인지 살펴보면서 사용할 필요가 있다.
5, ECMA international
조금 개발에 대해 신경을 쓰고 있는 사람이라면 ECMA(이크마)는 제일 처음에 나와야 하는것이 아니였나? 싶은 생각도 들것이다.
하지만 정말 아무나 코딩을 하고 누구나 개발하는 요즘시대에 vanilla에 대한 개념도 없는 사람에게 바로 ECMA를 들고와서 설명하기란 참으로 애매하다.
프로그래밍 언어는 '언어'라는 표현이 붙어있듯이 실제 한국어, 영어, 일본어와 같은 언어처럼 문법이라는 것이 존재한다.
그래서 "나는 당신을 사랑합니다."라는 문장을 "나합니다. 당신을 사랑는"과 같이 적으면 안되듯이,
프로그래밍 언어를 사용할 때도 그 프로그래밍 언어에 맞는 언어 문법을 지켜서 사용해야 한다.
한국어의 문법을 정할 때 국립국어원같은 정해진 기관에서 문법을 정리해놓듯이,
JS의 문법은 ECMA international을 통해 그 일이 처리되고 있다.
(앞으로 JS에서 ECMA의 ES5나 ES6, ES2020같은 것을 자주 보게 될텐데, ES는 ECMA Script를 줄여놓은것이다.)
하지만 ECMA는 초보 개발자가 보기에는 좀 많이 어려워보이기도 한다.
그래서 문법에 대해서는 Mozilla Developer Network(이하 MDN, 엠디엔)의 도움을 받으면 좋다.
개인적으로 모던스크립트 또한 JS를 이해하는데 많은 도움이 되었다.
여기까지 정말 간단하게 Javascript에 대해서 알아보았다.
좀 더 궁금한 점은 댓글로 달아 놓으면, 답변을 해줄지도??
개시일 :: 2022-05-10, 17:30, Tue.
1번째 수정일 :: 2022-05-11, 15:20, Wed. (5, ECMA international 추가)
Reference
1, JavaScript의 역사에 대해서. https://www.youtube.com/watch?v=wcsVjmHrUQg
2, MDN, JavaScript란 무엇인가. https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps/What_is_JavaScript
3, 객체지향 언어. https://velog.io/@msk102948/CS스터디-객체지향-언어
4, 객체지향 언어. https://incheol-jung.gitbook.io/docs/q-and-a/architecture/undefined
5, ECMA international. https://www.ecma-international.org/
6, MDN ko. https://developer.mozilla.org/ko/
7, 모던스크립트. https://ko.javascript.info/
...