준비¶

노드 설치¶

노드(node.js)는 자바스크립트 프로그램을 실행시킬 수 있는 프레임워크입니다.

Git 설치(선택사항)¶

깃(git)은 파일 및 프로젝트 버전을 관리할 수 있는 프로그램입니다.

깃 사이트에서 다운받아 설치합니다.

Visual Studio Code 설치¶

자바스크립트 에디터는 어떠한 텍스트 에디터를 사용해도 상관없습니다. 그중에서 편리하게 자바스크립트 코드를 작성하고 실행할 수 있는 프로그램인 비주얼 스튜디오 코드(vscode)가 있습니다. 이곳에서 다운받아 설치합니다.

HTML과 CSS¶

자바스크립트를 배우기 위해서는 먼저 HTML과 CSS에 대한 사전 지식이 필요합니다.

자바스크립트 실행¶

자바스크립트 프로그래밍은 다음과 같은 방법을 이용해 실행할 수 있습니다. 웹브라우저(크롬, 파이어폭스, 엣지 등)를 이용해 실행하는 방법과 노드를 이용해서 실행하는 방법이 있습니다.

웹브라우저에서 실행¶

자바스크립트는 태생이 웹브라우저를 위해서 만들어졌기 때문에 웹브라우저에서 사용하는 HTML과 잘 어울리도록 설계되었습니다. 따라서 HTML 안에 자바스크립트 코드를 작성해서 실행할 수 있습니다.

HTML 파일 안의 자바스크립트¶

다음은 HTML body 안에 자바스크립트 코드를 중간에 삽입하여 웹페이지 출력을 제어하는 코드입니다. 다음 내용을 code_in_body.html로 저장하고 웹브라우저에서 열면 h1 태그 이 부분이 대체됩니다.가 스크립트에서 출력한 겁니다.로 대체됩니다.

<!DOCTYPE HTML>
<html>
  <head>
    <title>HTML에서 스크립트 실행</title>
  </head>
  <body>
    <h1>이 부분이 대체됩니다.</h1>
    <script>
      document.getElementsByTagName('h1')[0].innerHTML = "<p>스크립트에서 출력한 겁니다.</p>"
    </script>
  </body>
</html>

자바스크립트 파일¶

HTML 파일 안에서 자바스크립트 파일을 불러와 실행시킬 수 있습니다.

app.js 파일에 다음과 같은 내용을 입력하고 저장합니다.

let msg = "안녕하세요.";
console.log(msg);

app.html 파일을 만들어 다음과 같은 내용을 입력하고 저장합니다. 여기서 app.html과 app.js 파일은 같은 폴더에 있어야 합니다.

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML에서 스크립트 실행</title>
    <script src="app.js"></script>
  </head>
  <body>
    <h1>HTML 헤드에서 자바스크립트 실행</h1>
  </body>
</html>

app.html 파일을 클릭하여 크롬 웹브라우저에서 결과를 확인합니다. 크롬 브라우저의 F12를 눌러 Console 탭 부분을 확인하면 안녕하세요라는 결과가 출력이 된 것을 확인할 수 있을겁니다.

노드에서 실행¶

에디터를 이용해서 자바스크립트 프로그램을 작성한 후 명령창에서 노드 명령어를 이용하여 실행할 수 있습니다.

위에서 작성한 app.js 파일이 있는 폴더에서 명령창을 실행합니다. 그리고 다음과 같이 입력하면 원하는 결과가 출력됩니다.

node app.js

ES6 이상 실행¶

node 에서 es6 문법 대부분을 사용할 수 있지만 아직 모든 문법을 사용할 수는 없습니다. 대표적으로 import, export 문법입니다. 따라서 ES6 import 문법을 사용하려면 다음과 같이 바벨(babel)을 이용하여 코드를 es6 버전으로 바꾼 후 실행해야 합니다.

프로젝트 생성¶

먼저 프로젝트 폴더를 만듭니다. 만일 package.json 파일이 없는 상태라면 다음과 같이 만듭니다. 이것은 단순히 파일 package.json을 하나 만들어 프로젝트 형식을 같도록 합니다.

npm init -f

바벨(babel) 설치¶

바벨은 자바스크립트 코드를 지정된 버전으로 변환하는 도구입니다.

babel-cli는 babel 명령어를 명령줄에서 실행할 수 있습니다.

npm install --save-dev @babel/core @babel/cli

preset 설치¶

@babel/preset-env는 자바스크립트 es6 문법을 바벨 기존 설정을 이용해서 노드가 실행할 수 있는 버전으로 자동으로 변경할 수 있도록 합니다.

npm install --save-dev @babel/preset-env

babel-node 설치¶

바벨노드는 변환된 코드를 실행까지 한꺼번에 할 수 있게 합니다.

babel-node를 이용해서 명령줄에서 컴파일을 자동으로 하고 실행까지 할 수 있습니다.

npm install --save-dev @babel/node

자바스크립트 파일 실행¶

실행하고자 하는 하는 파일이 있는 폴더에 들어가서 스크립트 파일을 실행시킬 수 있습니다. 여기서는 main.js 파일을 실행시킨다고 가정했습니다.

npx babel-node --preset=env main.js

preset을 package.json 파일에 지정해 놓으면 기본값으로 package.json 파일의 내용으로 컴파일 합니다. 즉, 명령줄에서 --preset=env 부분을 생략할 수 있습니다.

npx babel-node main.js

다음은 package.json 파일 예제의 일부입니다.

"devDependencies": {
  "@babel/cli": "^7.2.3",
  "@babel/core": "^7.4.0",
  "@babel/node": "^7.2.2",
  "@babel/preset-env": "^7.4.2"
},
"babel": {
  "presets": [
    "@babel/preset-env"
  ]
}

npx <명령어>는 명령어를 노드 패키지 중에서 명령어를 찾아서 실행시킵니다. 자세한 사용법은 여기를 참조하세요.

바벨을 이용해서 변환된 코드를 보려면 다음과 같이 합니다.

npx babel --preset=env main.js

디버그(Debug)¶

VSCode 이용 디버그¶

코드 변환 설정¶

ES5 파일에서 ES6 파일로 변환시키는 작업을 합니다.

package.json 파일 안에 스크립트 부분에 다음과 같이 compile 부분을 삽입합니다.

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "compile": "babel LearningJS/ --out-dir LearningJS/.compiled --source-maps --watch"
},

babel은 babel 명령어를 사용하겠다는 뜻이고 LearningJS는 폴더 이름으로 그 폴더 아래에 있는 모든 *.js 파일을 --out-dir 옵션 뒤에 있는 폴더 LearningJS/.compiled 폴더로 컴파일해서 놓겠다는 뜻입니다. 모든 폴더 이름들의 위치는 package.json 파일을 기준으로 상대적 위치입니다. --source-map 옵션은 ES5, CommonJS 파일과 ES6 파일간의 소스의 위치를 대응시키기 위한 것이고 --watch 옵션을 사용하면 소스 변경시 마다 변경된 파일만 자동으로 재빌드합니다.

VSCode 디버깅 설정¶

vscode에서 디버그 탭을 누른 후 초록색 실행 버튼 오른쪽에 있는 설정 버튼(기어 아이콘)을 누릅니다. 다음과 같은 launch.json 파일이 하나 생성됩니다.

{
  // IntelliSense를 사용하여 가능한 특성에 대해 알아보세요.
  // 기존 특성에 대한 설명을 보려면 가리킵니다.
  // 자세한 내용을 보려면 https://go.microsoft.com/fwlink/?linkid=830387을(를)  방문하세요.
  "version": "0.2.0",
  "configurations": [


    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}\\ClassOop\\protoChange.js"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Current Program",
      "program": "${file}",
      "outFiles": [ "${workspaceFolder}\\.compiled\\**\\*.js" ]
    }
  ]
}

name은 실행 버튼에 표시될 이름으로 적당히 지정하면 됩니다. program은 실행될 파일을 의미하는 것으로 디버그 실행 버튼(초록색 버튼)을 누르면 실행될 파일입니다. ${file}은 현재 열려 있는 파일을 의미합니다. outFiles는 변환된 자바스크립트 파일의 위치를 의미합니다. 만일 다른 형식으로 변환되었다면 변환된 파일이 위치한 곳을 지정합니다. 위의 코드변환설정 부분에서 package.json 파일에 --out-dir에 지정했던 위치를 적어주면 됩니다.

위에서는 두 개의 디버그 설정을 했습니다. 첫번째는 작업폴더(workspaceFolder) 아래 ClassOop\protoChange.js 파일만을 디버그할 수 있는 설정입니다.

두번째 설정은 작업폴더 밑에 .compiled 폴더 아래에 있는 모든 js 파일들을 디버그할 수 있는 것입니다.

디버그 실행¶

디버깅 실행은 디버그 탭을 눌렀을 때 나오는 초록색 버튼을 눌러주면 됩니다. 누르기 전에 중단점(break point)를 미리 설정해야 합니다. 중단점 설정은 파일 왼쪽 부분으로 마우스를 움직이면 중단점(빨간색 점)을 설정할 수 있습니다.

참조 사이트

모질라 자바스크립트 첫걸음 https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps
LearningJavaScript: Learning JavaScript Data Structures and Algorithms by Loiane Groner - Third Edition
AdvancedJavascript: Advanced JavaScript by Zachary Shute Publisher: Packt Publishing Release Date: January 2019 ISBN: 9781789800104

준비¶