[JavaScript] 자바스크립트 개요 (JS=ES) 및 npm 프로젝트 구성

html과 CSS를 학습할 때는 꽤 많은 부분에서 현재 작성중인 코드가 화면에 어떻게 출력될 것인지 고민하면서 공부를 해왔는데, 그림과 도형의 크기라던가 색상 등을 위주로 고민을 많이 했었다. 그런데 JavaScript (자바스크립트) 학습에서부는 그림과 도형보다는 대부분 데이터를 기반으로 고민을 하게 되었다. 그래서 데이터만큼은 숙달을 해야되는 개념이 되겠다. 그만큼 학습에 있어서 사고하는 방식이 급격하게 달라지기 때문에 자바스크립트 학습에 있어서 어려움을 토로하게 되는 일이 많았다. 물론 그것이 자바스크립트 라는 언어 자체의 학습 난이도도 영향이 없지 않겠지만 단순하게 자바스크립트가 어색하고 익숙하지 않기 때문에 더더욱 그렇게 느끼기 쉬운 것 같다.

 

ECMA스크립트 - 위키백과, 우리 모두의 백과사전

 

그래서 마음을 다 잡고서 자바스크립트 라는 프로그래밍 언어와 친해지기 위해서 노력을 해봐야 한다. 구글 검색에서 ECMA (에크마) 라고 검색을 해보면 ECMA스크립트 라는 것으로 여러가지 내용을 확인해볼 수 있다. 일반적으로 JavaScript를 줄여서 JS 라고 하는데 이 JavaScript의 표준 이름이 ECMAScript 이걸 줄여서 ES 라고 부른다. 사실상 서로 같은 개념 (JS = ES) 이라고 이해해도 된다. 자바스크립트의 간단한 역사를 살펴봤다.

 

 

간단하게 자바스크립트의 출시된 년도를 확인할 수 있고, 제일 먼저 초판은 1997년에 만들어졌다. 그때부터 2판~5판 까지 쭉 버전이 나오다가 6판이 나오는데, 6판 같은 경우는 2015년도에 나왔다. 그래서 자바스크립트는 2015년도부터 6판이 나오면서 굉장히 많이 인기를 끌게 되었다. 그리고 이때부터 ECMAScript는 매년 새로운 버전을 내놓기로 했고, 이때부터는 6, 7, 8 이라는 버전 대신에 년도를 붙여서 버전을 확인할 수 있다. (ex. ES2015, ES2016, ES2019) 2015년부터 매년 새로운 기능이 조금씩이나마 도입이 되고 있다는 것을 기억해두면 좋을 것 같다.

 

 

자바스크립트의 이론을 TEST 하기 위해서 사용할 npm 프로젝트를 구성해보자. 빈 폴더를 VS CODE에 열어놓은 상태에서 터미널을 열고, npm init -y 입력해서 npm 프로젝트를 시작했다. 그러면 우리 프로젝트에 바로 package.json 파일이 만들어졌다. 여기에서 다시 npm i -D parcel 입력해서 parcel 번들러를 설치해서 프로젝트를 번들했다. 이 parcel 번들러는 실제 브라우저에서 동작하는 것이 아니고, 개발 할 때만 사용하는 것이기 때문에 중간에 -D 즉, save dev를 붙여서 개발의존성 패키지로 설치를 해줬다. parcel이 위에 보다시피 2점 대 버전으로 설치가 되었다.

 

 

그러면, 이 parcel 번들러가 최초로 어떤 파일을 기준으로 해서 번들을 시작할 것인지 명시를 해야되고, 그 때 개발용 서버를 오픈하는 명령과 실제 제품화해서 배포용으로 만드는 bulid 버전이 있을 수 있는데 그것은 scripts 라는 옵션 부분에다가 작성할 수 있다. 그래서 이미 작성이 되어져있는 test 라는 scripts 부분은 제거하고, 이 부분에다 dev 라는 scripts 이름으로 parcel 명령으로 시작해서 주변에 있는 index.html 파일을 기준으로 개발 서버를 오픈하겠다고 scripts 명령을 하나 추가하고, 그리고나서 이것은 개발용으로 서버를 오픈하는 것이니까 실제 제품용으로 build 하는 build scripts도 작성을 해본다. parcel의 build 라는 명령과 함께 index.html 파일을 연결해준다.

 

 

그래서 기본적으로 개발 서버를 오픈해서 TEST 할 때는 dev 라는 명령어로 스크립트를 시작하면 되고, 실제 그것을 제품화해서 서버로 배포하는 경우에는 build 명령을 사용한다고 이해하면 된다. 그러면 이렇게 parcel 이라는 번들러를 설치해서 실행할 수 있는 구조를 만들었다. 그러면 이 parcel 이라는 번들러가 사용할 수 있는 index.html 파일도 프로젝트에 존재해야 하니까 프로젝트에 새로운 파일을 추가해서 이름을 index.html 이렇게 작성하고, 기본적인 내용을 ! (느낌표) 엔터키를 눌러서 자동완성 해준다.

 

 

그런 다음에, html 파일이 사용할 자바스크립트 파일을 연결해야되니까 title 태그 밑에 script 태그를 하나 추가하고. src 속성을 통해서 주변에 존재하는 main.js 파일을 찾아서 연결한다. main.js 파일도 존재해야 하니까 이 또한 main.js 새로운 파일을 생성해서 작성해줬다. import 라는 키워드를 통해서 현재 프로젝트에 설치한 패키지를 가져와서 사용하려면 현재 main 이라는 JavaScript 파일은 Module (모듈) 이 되는 개념이다. '모듈' 개념에 대해서 다른 포스팅에서 자세하 할 것이다.

 

 

일단 import 라는 키워드 사용할 수 있는 구조이기 때문에 main.js 파일은 '모듈'로 취급을 해야하고, 그래서 index.html 파일에 script 부분에 module을 사용하겠다 라고 하는 type을 module로 작성을 했다. 그리고 추가로 html에 body 부분에 존재하는 특정 태그를 자바스크립트로 사용하려면 이 main.js가 html 구조를 다 해석한 뒤에 동작하도록 만들어야 하고, 그 때 사용하는 속성이 바로 defer 라는 속성이다. 그래서 이렇게 script 태그에는 type="module" 속성, defer 속성, src="./main.js" 속성을 통해서 총 3개의 속성이 작성이 되어있으면 된다.

 

 

그런 다음에, body 부분 h1 태그에는 간단하게 화면의 내용이 출력된다는 것을 의미하기 위해서 Hello, World! 라고 작성을 해보았다. 그리고나서 다시 main.js 파일로 이동해서 최소한의 내용이 출력되는 것을 확인하기 위해서 console.log(123) 통해서 숫자를 한 번 출력해보자. 작성된 내용 전체를 저장해주고, 터미널 부분에서 npm run 명령을 통해서 우리가 만들어놓은 스크립트 중에 개발 서버를 오픈할 것이기 때문에 npm run dev 라고 실행해준다. 그러면 http://localhost:1234 번으로 개발서버가 열렸다고 메세지가 나온다. 그러면 브라우저를 통해서 해당하는 주소로 직접 접근을 해도 되겠고, (윈도우기준) Ctrl 키를 누른 상태에서 해당 주소 링크를 클릭하면 브라우저로 이동해서 localhost:1234로 접근을 했다.

 

 

이 상태에서 개발자 도구를 (Ctrl + Shift + C) 열면 console.log의 숫자 123이 log로 출력이 된 것을 확인할 수 있다. 화면에는 Hello, World! 가 잘 출력이 되고, 콘솔에는 숫자 데이터 123이 잘 출력이 된다면 프로젝트의 초기 상태를 잘 구성했 앞으로 진행하게 될 자바스크립트 예제는 기본적으로 현재 상태에서 출발을 할 것이니까 미리 준비해두면 좋을 것 같다.