Copy Coding

이번에는 개인적으로 사용법이 친숙한 eclipse를 이용해 개발환경을 설치해 보도록 하겠습니다.

- eclipse 설치

node.js용 eclipse를 설치 하기위해 Eclipse 다운로드에 접속 합니다.

대표적인 프로그램만 리스트 되어있어서 상세 다운로드 페이지로 이동해야 합니다.

이미지 하단 [Download Packages]를 클릭하면 다양한 패키지가 나옵니다.

처음부터 https://www.eclipse.org/downloads/packages/ 이걸 사용할걸 그랬군요.

제가 찾는 건 Windows용 64bit 인데 각자 운영체제에 맞추어 다운로드 합니다.

이클립스는 설치를 안해도 되는 장점 때문에 다운로드가 완료되면 압축을 풀고

사용하려는 디렉토리로 옮겨 주기만 하면 됩니다.

그리고 작업용 workspace 디렉토리도 하나 생성해 둡니다.

이제는 eclipse를 설치한 디렉토리로 돌아가서 eclipse를 실행합니다.

그리고 작업 디렉토리를 [Browse…] 버튼을 이용하여 위에서 만들어둔 workspace로 변경합니다.

이제 생성되는 모든 파일은 이곳에서 관리를 합니다.

[Launch] 버튼을 눌러 잘 뜨는지 확인합니다.

- node.js plug-in 설치

설정은 대충 되었고 이제 장을 볼 시간입니다. 시장에 가볼까요?

[Help] > [Eclipse MarketPlace…]를 선택해서

Eclipse Marketplace에서 검색 키워드로 node를 입력하고 검색을 합니다.

node를 찾았네요. install을 합니다.

파일들을 잘 다운로드 하고 있네요.

설치할 내용을 선택하고 확인해 달라는군요. 걍 다하라고 합니다.

[Confirm]을 클릭 합니다.

Licenses에 동의하고 [Finish] 버튼을 누르면 설치가 진행 됩니다. 잠시 커피 한잔.

- node.js 설치 확인

설치가 완료되면 eclipse를 재시작 합니다.

File > New > Other…를 열어봅니다.

어? node가 보이질 안는군요.

노트북에서는 한번에 되었는데, 데스크 탑에서는 설치가 잘 안되었습니다.

그래서 다시 장에 가서 node를 다시 설치 합니다.

다시 설치를 하니 이번에는 설치 중에 팝업이 두기 나오는데 계속 설치를 진행 합니다.

노트북에서는 처음 설치할 때 위에 나온 팝업 2개가 나왔습니다.

이 팝업이 안나오고 설치가 되면 잘못 설치가 된것입니다.

그냥 한번 더 설치 하세요.

다시 한번

File > New > Other…를 열어봅니다.

eclipse가 재시작 되고 이제야 node가 나타났습니다.

아무래도 컴퓨터 마다 환경을 타는 것 같습니다.

설치도 되었고 프로젝트를 하나 만들어 볼까요?

지겹겠지만 한번더

File > New > Other…

Node를 확장시켜서 Node.js Project를 선택하고 [Next >] 버튼을 선택 합니다.

Project name 은 편하게 작성하시고 나머지는 기본으로 하고 [Finish]를 선택 합니다.

저는 Test  라고 했습니다.

프로젝트가 생성 되었습니다.

이제 프로젝트에 파일을 하나 추가합니다.

파일명을 HelloWorld.js 로 하겠습니다.

파일에 간단한 출력을 작성 합니다.

파일에 console.log("Hello World!");를 입력합니다.

파일이 만들어 졌습니다.

실행을 해볼까요?

HelloWorld.js 파일명에 마우스를 놓고 우클릭 > Run As > Node Application을 클릭 합니다.

짜잔!!

만약 위와 같이 결과를 볼 수 없고 오류가 발생하는 경우가 있습니다.

js 파일을 만들고 위와 같이 실행을 했는데 오류가 발생 한다면?

파일을 못찾는다는 군요. 아. “node”라는 프로그램을 실행하지 못하겠다.

node.js를 설치하지 않아서 이거나 잘못 설치 된 것 입니다.

node.js 설치하기를 보면서 간단하게 설치 하시고 다시 실행 해보기 바랍니다.

이제 설치가 되었으니 코딩을 시작 하세요.

- copy coding -

node.js 개발을 위한 편집기를 소개합니다.

Visual Studio에서 제공하는 code의 설치 방법에 대해 간략히 설명 합니다.

Visual Studio Code 다운로드

사이트에 들어가면 무료로 다운로드를 받으실 수 있습니다.

운영체제가 윈도우가 아니라면 [Download for Windows] 우측을 눌러 필요한 파일을 다운 받습니다.

오늘 다운받으니 버전은 VSCodeUserSetup-x64-1.28.1.exe 입니다.

다운받은 파일을 실행을 해서 설치를 합니다.

[실행] 버튼을 클릭 합니다.

[다음] 버튼을 클릭 합니다.

이거 또 괜히 만드는 듯한 느낌이 오네…

계약에 동의함을 선택하고

[다음] 버튼을 클릭 합니다.

설치 위치를 선택합니다.

저는 C:\가 60GB 짜리라 공간이 얼마 안 남아 D:\에 설치 합니다.

메뉴 폴더를 설정합니다.

[다음] 버튼을 선택 합니다.

특별히 설정할게 없어서 저는 기본으로 두고

[다음] 버튼을 선택 합니다.

설치를 위한 환경설정이 완료 되었습니다.

[설치] 버튼을 눌러 설치를 진행 합니다.

설치가 잘 진행 되고 있습니다.

설치가 완료되었습니다.

[마침] 버튼을 선택하여 설치를 종료합니다.

code가 실행된 화면입니다.

단순 깔끔하네요.

설치 메뉴얼이 또 욕먹게 생겨서 뭐 하나 해보겠습니다.

Start에 있는 New file을 선택하면 편집화면으로 넘어갑니다.

스크립트를 하나 작성합니다.

아는게 없어서

console.log("Hello World!");

를 적어봤습니다.

코드를 작성했으면 저장을 해야겠죠.

상단 메뉴에서

File > Save As …를 선택해서 파일로 저장을 합니다.

파일형식을 JavaScript(*.js,…)로 설정하고 저장 합니다.

저는 HelloWorld.js로 저장 했습니다.

이제 콘솔 창을 하나 열어서 파일이 있는지 확인을 하고

node HelloWorld.js [엔터]

하면 Hello World!가 찍힙니다.

그렇습니다.

Visual Studio Code는 에디터라 실행은 console에 가서 해줘야 합니다.

그래도 일반 텍스트 편집기 보다는 한가지 편한게

요렇게 자동완성 기능이 있습니다.

다음에는 eclipse로 한방에 실행을 할 수 있도록 해보겠습니다.

- copy coding -

요즘 사용 하는 곳이 점점 늘어나는 것 같아 뭔가 궁금해서 설치를 해보았습니다.

node.js 설치는 너무 간단해서 간략히 설명 드립니다.

node.js 사이트에 접속을 합니다.  

https://nodejs.org/ko/

안정적인 버전이 좌측에 있습니다. 계속 버전이 갱신 되겠지만 좌측에 있는걸 다운 받습니다.

운영 체제가 윈도우가 아니면 하단에서 [다른운영체제]를 클릭 합니다.

다운 받는동안 눌러 봤습니다. 운영체제 별, bit별로 정리되고 소스도 공개 되어있네요.

이제 다운받은 파일을 설치해 보겠습니다.

node-v8.12.0-x64.msi 파일을 실행 합니다.

[실행] 버튼을 클릭 합니다.

[Next] 버튼을 클릭 합니다.

I accept the terms in the License Agreement를 체크하고

[Next] 버튼을 클릭 합니다.

설치 위치를 변경하려면 Change…로 다른 디렉토리를 선택 하고

[Next] 버튼을 클릭 합니다.

마음에 안드는게 있으면 빼버리고

[Next] 버튼을 클릭 합니다.

설치 관련 설정이 끝났다는군요.

[Install]을 클릭해서 설치를 진행 합니다.

설치가 잘 진행 되네요.

설치가 끝났답니다.

[Finish]를 클릭 합니다.

정말 설치가 잘 되었는지 확인하기 위해 command 창을 하나 열고

node를 치고 엔터…

진짜 잘 설치 되었네요.

- copy coding -