[목차]
- Javascript?
- Javascript 입문
- Node.Js
1. Javascript?
본래는 웹페이지 상에서 HTML과 CSS만으로는 처리하기 힘든 동적인 요소들을 구현하기 위해 탄생한 언어. ES6을 기점으로 어도비社의 플래시가 몰락하고 자바스크립트가 웹 환경을 구성하는 표준 언어가 되면서 지금은 그 인기와 위상이 크게 올라갔다.
먼저 프로그래밍 언어는 크게 두 종류로 구분된다.
-
객체지향 :
C++,Java등 -
함수형 :
Python
이 중에서 객체지향 언어는 공통적으로 결과물을 출력하기 전에 '컴파일' 과정을 거쳐야 한다.
컴퓨터에 입력된 2진수 소스코드 ▶ 컴파일링(해석) ▶ 출력
(쉽게 말해 컴파일러는 코드를 해석해주는 번역기 역할을 한다.)
만약 100줄의 코드를 작성했다면 그 전체 파일을 통으로 번역기에 넣어서 한꺼번에 해석하는 식이다.
반면 파이썬과 같은 인터프리터 기반의 언어는 작성중인 코드를 한 줄씩 읽어들여서 그 때마다 바로바로 해석하고 결과물을 출력한다.
그리고 '자바 스크립트'는 어디에도 해당하지 않는 '프로토타입' 언어이다. 기본은 인터프리터 방식을 따르지만 필요에 따라 컴파일 과정을 거치기도 하기 때문. (다른 개발 언어들도 버전이 올라감에 따라 그 경계가 흐려지는 추세이다.)
함수형, 객체지향, 프로토타입 등의 용어에 관해서는
그 의미와 차이에 대한 공부를 좀 더 깊게 한 뒤에 제대로 다뤄보고자 한다.
2. Javascript 입문
자바스크립트를 통해 화면에 Hello World!라는 문구를 띄워보자.
크롬의 개발자모드(F12) → 콘솔탭에 들어가서
console.log('Hello World!')
를 입력하면 그 즉시 콘솔창에 Hello World!가 출력된다.
(인터프리터 방식)
다음으로 VSCode를 열어서 public / JS디렉토리 속에 index.js 파일을 만들고 이와 연결지을 html 파일 안에
<script src="./public/JS/index.js" type="text/javascript"></script>
위 코드를 삽입해보자.
(<style>태그와 방식 동일. type="text/javascript"은 생략해도 무방하다. )
index.js 파일 안에
console.log ("hello world!1")
console.log ("hello world!2")
console.log ("hello world!3")
console.log ("hello world!4")
console.log ("hello world!5")해당 태그를 입력하고 브라우저를 새로고침하면
콘솔창에 괄호 안의 문구가 차례대로 출력되는 것을 확인할 수 있다.
3. Node.Js
초기에는 많은 개발자들에게 천대받았던 자바 스크립트였지만 지속적인 버전업으로 사용성이 좋아지고 관련 스킬들도 점차 발전하면서, 더는 웹브라우저 상에서만 쓰기에는 아까운 언어가 되었다.
그런데 자바스크립트는 이름에서 알 수 있듯이 독립적인 개발 언어가 아닌 '스크립트' 언어이다. 이러한 스크립트 언어는 특정 프로그램 안에서만 동작하기 때문에 자바스크립트 또한 '웹브라우저' 안에서만 동작을 한다. 바꿔 말하면 웹 브라우저가 없다면 자바스크립트의 기능을 쓸 수 없다는 뜻이다.
Node.JS는 웹브라우저에 종속적인 자바스크립트를 윈도우를 포함한 여러 OS 환경에서 꺼내 쓰기 위해 일반 어플리케이션 프로그램처럼 실행시켜주는 '런타임'이다. 여기서 런타임은 프로그래밍 언어가 동작되는 '환경'을 말하는데 크롬, 파이어폭스같은 웹브라우저 역시 자바스크립트의 런타임의 일종.
