엘프의 외계어 배우기
자바스크립트를 배워봅시다. - 제2화
지난 글에 이어서...
시작이 반이 아니라 설치가 반이다
자바스크립트를 배우기 위해서 필요한 것들을 설치해봅니다.
lesson 1 : node.js
우선 자바스크립트를 배우기 위해서 node.js가 설치되어 있어야 합니다. node.js는 자바스크립트를 실행할 수 있는 런타임 환경을 말한다고 하네요. 런타임 환경이란 무엇일까요? 예를 들면, 자바스크립트를 연극의 시나리오라고 한다면 그 시나리오를 가지고 연극을 할 수 있는 무대를 말합니다.
구글에서 nodejs를 검색해보았더니, Nodes.org 아래에 다운로드할 수 있는 링크가 바로 표기되어 있군요.
Nodes.org.ko에 들어가서 다운로드를 눌러보면 아래와 같이 보입니다.
'LTS'와 '현재 버전'으로 구분되어 있어요. LTS는 Long Term Support의 약자로 오랜 시간을 걸쳐 지속적으로 업데이트되고 관리되어 온 안정적인 버전을 말하며, 현재 버전은 말 그대로 가장 최신의 버전입니다. 가장 최신의 버전을 선택하면 시간이 지나면서 없어지는 기능들이 생기기도 하기 때문에 문제가 될 수 있다네요. 그렇기 때문에 자신의 컴퓨터 환경에 맞는 것을 선택하여 LTS 버전을 다운로드하는 것이 좋다고 합니다.
다운로드한 후 더블클릭하면 자동으로 실행이 됩니다. 더블클릭, 알죠? 마우스나 마우스패드를 '따닥~' 두 번 누르는 거...
자, 이제 나를 믿지 말고(컴퓨터를 못 믿는 것일지도...) 설치가 잘 되었는지 확인해봅시다. 우리가 프로그래밍 관련 이미지나 영상 등에서 많이 보았던 검은색 바탕으로 되어 있는 아래와 같은 화면이 터미널(나는 맥북을 쓰는데 iTerm이라고 되어 있다)입니다.
*잡설 : 지금 보니까 Jiyongs-MacBook-Pro라고 되어 있네요. 내가 내 이름을 잘 못 입력한 걸까요??? 뒤에는 똑바로 jiyoungkim이라고 되어 있는데...
커서가 위치한 곳에 node -v라고 입력하고 엔터를 누르면 됩니다. -v라는 것은 버전을 확인하라는 의미입니다. 즉, 컴퓨터에 깔려 있는 node의 버전을 확인하라는 뜻입니다. node의 버전을 확인하면 제대로 설치가 되어 있는지 알 수 있겠죠.
v8.11.1
nodejs.org에서 LTS 버전을 다운로드할 때 표기되어 있던 버전과 같은 버전임을 확인할 수 있습니다.
지금까지 설치 과정이나 혹은 nodejs에 대해서 조금 더 알고 싶은 부분이 있다면 nodejs.org 에서 확인하기 바랍니다. 물론 영어로 쓰여 있습니다. 이 기회에 영어 공부도 할 겸...
여기서 잠깐! 프레임워크와 라이브러리의 차이를 아는가? 프레임워크와 라이브러리의 차이는 ‘강제성’에 있다. 프레임워크는 필요한 것들을 가져와서 정해진 규칙에 따라서 사용하겠다고 약속된 것들이라면 라이브러리는 그것들을 선택적으로 사용할 수 있는 것들이다.
node 설치 시 일반적으로 자동으로 함께 설치되지만 nodejs를 사용하기 위해서 필요한 npm(node package manager)이 있는지 터미널을 통해서 확인해봅니다. npm은 자동으로 라이브러리나 패키지를 관리해주는 역할을 합니다. [npm](https://www.npmjs.com/)
nodejs를 확인했던 방법과 같이 터미널에서 npm -v를 입력한 후 엔터를 치면 됩니다.
lesson 2 : atom 에디터
자, 이제 자바스크립트 코드를 기록(입력) 하기 위한 에디터가 필요합니다. 컴퓨터에게 이야기를 하기 위해서 코드를 작성하려면 에디터가 필요한데 종류가 굉장히 많더군요. 그중에서 자신에게 맞는 것(편리하다거나 보기 좋다거나 혹은 예쁘다거나)을 선택하면 됩니다. 우리는 atom이라는 에디터를 사용하기로 했습니다.
atom 에디터로 결정한 이유에 대해서 무료이고, 지속적으로 관리가 되기 때문이라고 멘토가 말하였습니다. 그럼, 이제 atom을 설치해봅니다. (아무리 설치가 반이라지만 오늘 수업시간 중에 필요한 것들을 모두 설치하는 것이 불가능할 듯한 슬픈 예감이...)
구글에서 atom을 검색한 후 atom.io로 들어가서 download를 누릅니다.
atom을 에디터로 사용하는 데 있어서 도움이 되는 몇 개의 플러그인(plug-in)을 설치해보도록 합시다. 플러그인은 꼭 설치해야 하는 것은 아니지만 추가하여 사용하면 훨씬 보기 좋고 편리하며 효율적으로 코딩할 수 있게 해주는 것들입니다.
lesson 3 : 플러그인
캡틴 팡요 님의 블로그 글 [아톰 필수 플러그인 – Captain Pangyo](https://goo.gl/R9G616)을 참고하여 설치합니다. (멘토가 참고 글의 링크를 줬는데 아는 분의 블로그라서 어찌나 반가웠는지 모릅니다.) 이 중에서 모두 설치할 필요는 없고, seti ui, beautify, pegments 세 가지만 사용합니다.
각각에 대해서 알아봅시다.
Seti UI
우선 Seti UI는 코드를 컬러풀하게 만들어주는 플러그인입니다. 코드가 컬러풀하면 좋은 점은 오류를 찾아내기 쉬워진다는 것이라고 하네요. 의외로 .를 찍어야 하는 곳에 ,를 찍는 실수를 많이 한다고 하네요. 일단 저는 보기 좋은 떡이 먹기도 좋다고 생각합니다.
Beautify
코드 들여 쓰기 등을 자동으로 조정해주는 플러그인입니다. 아울러 괄호를 표기할 때도 {를 입력하면 자동으로 }를 보여주는... 한 마디로 편하게 코딩할 수 있고 또 잊지 않을 수 있도록 도움 주는 플로그인이네요.
Pigments
이 플러그인은 웹 페이지(화면)를 구성할 때 색상 설정에 도움을 줍니다. 웹 페이지에 색상을 추가하려면 코드에 색상 번호를 입력해야 하는데 이를 직관적으로 볼 수 있도록 색상 번호에 바로 색상을 적용해주는 플러그인입니다. 이런 기능으로 인해 색상 번호를 모두 외울 필요가 없어지겠죠? (그러고 보니 인쇄물을 출력할 때 색상 차트를 보면서 색상 번호를 입력해줬던 기억이 나네요.)
이제, 이 세 가지 기능을 추가해봅시다.
다운로드한 atom을 실행시킵니다. 다음과 같은 화면이 보일 것입니다.
우리가 추가해야 하는 플러그인을 설치하기 위해서 Install a Package를 선택합니다. Filter packages by name이라고 쓰인 곳에 우리가 설치하고자 하는 플러그인의 이름을 넣습니다.
제일 먼저 seti ui를 넣었는데 아무것도 나오질 않습니다.
당황하지 말고, 왼쪽에 theme를 선택합니다. seti ui는 플러그인 중에 패키지에 연관된 플러그인이 아니라 테마에 연관된 플러그인이란 의미인 듯합니다.
다행히 바로 딱 나타납니다. 이제 install을 누르면 됩니다. (나는 이미 인스톨이 되어 있어서 Uninstall이 표시되네요. 저 자리에 여러분은 Install이 나올 거예요.)
같은 방법으로 Beautify와 Pigments도 인스톨합니다.
덧붙임!
플러그인을 추가하는 다른 방법! 왜인지는 모르겠지만 프로그래머들은 이 방법을 더 선호하더군요.
atom을 연 후 첫 화면에서 Preferences…를 선택합니다.
다음 화면에서 Install을 선택하고 오른쪽에 설치하고자 하는 플러그인의 이름을 칩니다.
우리가 찾는 플러그인이 나타나지 않는다면 이전과 같이 당황하지 말고 Themes를 선택합니다. 기본 설정이 Packages로 되어 있기 때문입니다.
이후 다른 플러그인들의 설치도 같은 과정을 거칩니다.
자, 그럼 오늘 수업은 여기까지!
이렇게 첫 수업에서 설치 과정만 정리를 했는데도 시간이 꽤 걸리네요. 그럼에도 아직 한 가지 설치가 더 남았다는...
그럼 다음 시간에는 남은 한 가지(Express라고 기억합니다)를 추가 설치한 후 본격적인 코딩을 시작하겠습니다. 우후훗~
Tip 나만의 공부 방법
수업 시간에는 수업에 집중하며 화면을 녹화하고, 중요한 내용은 메모한다.
수업 후 2~3일 내로 기억을 되새기며 수업 내용을 복습한다. 그때 필요한 화면의 캡처도 해둔다.
그 후 녹화한 화면을 다시 보면서 빼먹은 내용, 불과 2~3일 만에 잊어버린 내용 등을 추가로 정리한다. 이때 열심히 들었으나 이해가 안 가거나 기억이 안 나는 내용 등은 표시해 두었다가 멘토에게 다시 물어본다.
정리가 모두 마무리되면 수호랑 인형을 앉혀 두고 공부한 내용을 설명해주며 녹음/녹화 등을 진행한다.
