노드JS를 설치해보자! [준비편]

노드를 개발하는데 필요한 개발 도구를 설치 해보자.

다음 포스팅에서 제공하는 샘플 코드를 실행하기 위해서는 이 포스팅의 설명에 따라서 개발 도구를 먼저 설치해야 한다.

자바스크립트가 기반인 노드는 자바스크립트로 개발할 수 있는 개발 도구라면 어떤 것이든 사용할 수 있다.

예를 들어, 이클립스(Eclipse)를 사용할 수도 잇고 텍스트 편집기인 에디트플러스(EditPlus)도 사용할 수 있다.

이번 포스팅에서는 여러 개발 도구 중 웹 개발에 많이 사용하는 브라켓(Brackets)을 설치해서 사용한다.

순서대로 하나씩 따라가보자. 절대로 어렵지 않다!

브라켓을 설치한다

▼

크롬 브라우저를 설치한다.

▼

노드를 설치한다.

① 웹 브라우저를 열고 주소창에 'bracket.io'를 입력한 후 Enter 키를 누른다. 열린 페이지 중앙에 있는 [Download Brackets] 버튼을 클릭한다.

② 설치 파일 다운로드를 물어보는 대화상자가 보이면 [저장] 버튼을 눌러 다운로드한 다음 설치 파일을 더블클릭해서 실행한다.

[Brackets Installer] 대화상자에서 [Next] 버튼을 누른 다음 [Install] 버튼을 눌러 설치한다.

(이미지는 없음... 설치 방법 간단해요!)

③ 만약 프로그램 설치 전에 소프트웨어 설치를 허용할 것인지 묻는 대화상자가 나타난다. [예] 버튼을 눌러 설치를 계속 진행한 후 설치가 끝나면 [Finish] 버튼을 클릭한다.

브라켓 설치 끝!!

크롬 브라우저 설치도 해준다!

무지 쉽다!!

설치과정 생략

브라켓 기본 사용 방법

브라켓에는 편리하게 웹을 개발할 수 있는 다양한 확장 기능이 있다. 이번에는 테마를 바꾸거나 글꼴의 크기를 바꾸는 등의 간단 사용법을 알아보자. 그리고 몇 가지 확장 기능을 설치해보자.

① 윈도우의 [시작] 메뉴에서 [Brackets] 메뉴를 찾은 후 클릭한다. 만약 방화벽 허용이 필요하다는 보안 경고 대화상자가 보이면 [엑세스 허용] 버튼을 클릭하자.

② index.html 파일 내용이 화면 가운데 있는 연한 회색의 작업 영역에 표시된다. 

보통 코드를 입력할 때 어두운 바탕을 선호하는 개발자가 많으므로 테마 색상을 바꿔보자.

테마는 눈으로 확인하는 화면 스타일이라 간단하게 바꿀 수 있다. 상단의 메뉴 중에서 [보기 -> 테마]

메뉴를 누른다.

③ [테마 설정] 대화상자가 나타나면 '현재 테마:'로 표시된 콤보박스를 눌러 'Brackets Dark'로 변경한다.

그리고 '글자 크기:' 입력 상자의 값을 18px로 수정해서 글자 크기도 조금 더 크게 변경한다. (나는 14px로 했다...)

프로젝트 폴더 만들고 브랔넷에서 프로젝트로 열기

브라켓에서 특정 폴더를 열면 그 폴더가 바로 프로젝트 폴더가 된다. 만약 다른 프로젝트 폴더를 만들었따면 그 폴더를 새로 열기만 하면 된다.

① 먼저 탐색기를 열고 윈도우의 [사용자] 폴더 안에 [brackets-nodejs]폴더를 만든다. 그리고 브라켓 화면에서 [파일 -> 폴더 열기... ] 메뉴를 눌러 조금 전에 만든 [brackets-nodejs] 폴더를 선택한다. 그러면 화면의 왼쪽 영역에 있던 파일들이 사라지고 가장 위쪽에 새로 지정한 폴더 이름만 나타난다.

이제 [brackets-nodejs] 폴더를 가리키게 되었으니 프로젝트가 변경되었다고 할 수 있다. 폴더 내용을 보여주는 화면 왼쪽을 프로젝트 영역이라고 부른다. 프로젝트 영역에서 마우스 오른쪽 버튼을 누르면 [파일 만들기], [폴더 만들기] 등의 메뉴가 나온다.

이제 간단한 자바스크립트 파일 하나를 만들어보자.

② 왼쪽 프로젝트 영역에서 마우스 오른쪽 버튼을 눌러 [파일 만들기] 메뉴를 선택한다. 프로젝트 영역에 파일 이름을 입력할 수 있는 작은 입력 상자가 표시된다. 입력 사앚에 test1.js을 입력하고 Enter 키를 누르면 새로운 파일이 생성된다.

test1.js이 현재 파일로 지정되면 가운데 작업 영역에 파일 내용을 입력할 수 있다.

작업 영역에 자바스크립트 코드를 입력하면 자동으로 코드 색상이 변경되어 표시된다. 다음 화면에 입력한 것처럼 한 줄의 코드를 입력한 후 Ctrl + S 키를 눌러 저장한다. 자바스크립트 파일은 이렇게 만들어진다.

뭐냐? 에러 왜 나냐?

입력한 글자 크기가 작다면 Ctrl키를 누른 상태에서 + 키를 눌러 크기를 한 단계씩 키울 수 있다. 반대로 글자 크기를 작게 만들고 싶다면 Ctrl 키를 누른 상태에서 -키를 누르면 된다. 이렇게 만든 자바스크립트 파일은 노드 실행 프로그램으로 실행할 수 있다. 따라서 다음 포스팅으로 노드를 설치한다.

웹 문서를 브라우저에서 미리보기

브라켓에서 웹 문서를 만들었다면 크롬 브라우저를 연결하여 실시간으로 미리보기를 할 수 있다.

① 우선 왼쪽 프로젝트 영역에서 마우스 오른쪽 버튼을 눌러 [파일 만들기] 메뉴를 선택한다. test1.html을 입력하고 Enter키를 눌러 웹 문서를 하나 만든다. 그런 다음 화면처럼 가장 단순한 태그들을 입력하고 Ctrl + S 키를 눌러 저장하자.

② 화면 오른쪽에 세로 방향으로 배치되어 있는 아이콘 중에서 번개 모양의 아이콘을 클릭하면 실시간 미리보기 기능을 실행할 수 있다. 또는 [파일 -> 실시간 미리보기] 메뉴를 눌러 실행할 수도 있다. 아이콘을 누르거나 메뉴를 실행하면 간단한 안내 문구가 나온다.

③ 실시간 미리보기를 실행할 때 오류 메시지가 표시되는 경우도 있다. 크롬 브라우저가 이미 실행되어 있거나 또는 다른 문제가 있을 경우에 나타난다. PC를 껐다 켜거나 경우에 따라서 브라켓 프로그램을 다시 설치해야 할 수도 있다.

확장 기능 설치하기

브라켓은 다양한 확장 기능을 제공한다. 이번에는 노드로 프로그램을 만들 때 유용한 몇 가지 확장 기능을 설치한다.

① 확장 기능을 사용하려면 [파일 -> 확장 기능 관리자...] 메뉴를 선택하거나 오른쪽 세로 툴바의 아이콘 중에서 블록 모양의 [확장 기능 관리자] 아이콘을 클릭하면 된다. 확장 기능 관리자를 실행하면 확장 기능의 목록이 나타나고, 그 중에서 선택하여 설치가 가능하다.

먼저 위쪽에 있는 검색창에 'Custom Work'를 입력하자. 입력한 단어를 포함하고 있는 확장 기능들이 표시된다. 그 중에서 Custom Work라는 확장 기능이 보일 것이다. 이 확장 기능을 사용하면 각각의 파일을 열 때 탭으로 표시하는 등 여러 가지 기능을 사용할 수 있다. [설치] 버튼을 클릭하여 설치한 다음 다른 확장 기능을 더 찾아보자.

② 이번에는 입력 상자에 'Icons'를 입력한다. 그러면 해당 단어를 포함하고 있는 확장 기능들이 표시되는데 그 중에서 Brackets Incons 확장 기능을 찾는다. 이 확장 기능을 사용하면 프로젝트 영역에 표시되는 파일 앞에 파일 유형별로 아이콘을 붙여준다. 이렇게 하면 파일의 유형을 좀 더 명확하게 확인할 수 있다. 역시 [설치] 버튼을 클릭하여 설치한 다음 마지막으로 [닫기] 버튼을 클릭한다.

브라켓을 다시 시작하면 각각의 파일들이 작업 영역에 탭으로 표시되고 파일 앞에는 아이콘이 붙는다.

확장 프로그램은 찾아보면 더 유용한 툴들이 많이 있다. 필요한 것이 있다면 직접 찾아보자.