티스토리 뷰



안녕하세요


이번 포스트에서는 Node.js 를 설치하고 개발을 편리하게 하기위한 에디터를 설치해보도록 하겠습니다!




본 포스트의 목차입니다.


[ 목차 ]

1. Node.js 란?

2. Node.js 특징

3. Node.js 설치

4. Brackets 설치

5. Brackets 플러그인 설치

6. VSCode 설치

7. Node.js 실습



(4~5번 부분은 개인 취향이기때문에 다른걸로 설치하셔도 무방합니다)


(4 + 5번 과정의 에디터보다 6번 하나를 추천합니다.)









Node.js 란? ]




말이 복잡하고 이해가 안되실겁니다.

자바스크립트는 주로 웹 브라우저에서 실행되고 있는데

Node.js는 이 자바스크립트를 웹 브라우저가 아닌곳에서 실행시켜주는 런타임(기술)입니다.

(런타임이란 프로그래밍 언어가 구동되는 환경을 의미합니다)




절대 언어 종류가 아닙니다



Node.js를 이용하여 자바스크립트로 웹 서버를 개발할 수 있고, 자바스크립트 공부를 할 수 있습니다.

이 외에도 여러가지를 할 수 있지만, 무엇을 하는지는 여러분에게 달려있습니다.





웹 브라우저에서 실행되던 자바스크립트를 이용하여 서버도 구축할 수 있습니다.

이 포스팅의 목적이 바로 웹 서버 구축입니다.




Node.js는 다른 언어들과는 조금 다르게 특징이 몇가지 있습니다.


[ 특징 ]


1. 비동기 I/O, 이벤트 기반

2. 단일 스레드

3. 확장성









[ Node.js 설치 ]



Node.js 공식 홈페이지에 접속합니다.


https://nodejs.org/ko/



LTS 버전을 다운받으시는걸 추천합니다.



다운받으시고 설치해줍니다.

설치가 완료되었으면 다음으로 진행합니다.








명령 프롬프트창을 실행하고


node -v

명령어를 입력합니다.



버전이 출력되면 정상적으로 설치된것입니다.

(사진의 버전과 여러분들의 버전이 다를 수 있습니다)






[ Brackets 설치 ]




Brackets 는 텍스트 에디터중 하나입니다.

웹 개발용도로 많이 사용하는데요, 제가 앞으로 실습 및 사용할 에디터로 선정하였습니다.


Brackets 홈페이지로 접속합니다.


http://brackets.io/





다운로드받고 설치합니다.






[ Brackets 플러그인 설치 ]


설치가 완료되었으면 실행시킵니다.



플러그인을 설치하기 위해 우측에 블럭모양 아이콘을 누릅니다.





검색창에 NodeJS를 검색합니다.


NodeJS intergration 플러그인을 설치해줍니다.


재시작을 요구하면 재시작하면 됩니다.





[ VSCode 설치 ]


https://code.visualstudio.com/


위 링크에서 다운로드 받습니다.

(Brackets 에디터를 사용하실 분들은 해당 챕터는 건너뛰시면 됩니다)



다운로드받고 설치를 진행합니다.



설치 후 실행시켜줍니다!



깔끔한 에디터창이 나왔네요!


설치가 완료되었습니다.






[ Node.js 실습 ]



기본적인 준비는 모두 마쳤습니다.

본격적으로 Node.js 실습을 해봅시다.





웹 서버를 만들고 저장할 폴더를 만듭니다.


저는 D드라이브에 Blog 라는 폴더를 만들었습니다.



상단에 있는 폴더경로를 복사해줍니다.




명령프롬프트창을 실행시킵니다.

cd 명령어로 방금 생성한 폴더로 이동시킵니다.


"cd 경로"

경로에는 위에서 복사한 경로를 집어넣으시면 됩니다.


만약 저처럼 D(또는 다른)드라이브로 이동하실거면

D: 와 같이 해당 드라이브 이름: 을 해주신 후 cd명령어를 입력하시면 됩니다.




정상적으로 이동이 되었다면


"npm init"


를 입력합니다.




프로젝트(프로그램)이름, 버전, 설명, 시작점, 명령어, Git 저장소, 키워드, 작성자, 라이센스

정보를 하나씩 물어봅니다.


입력하지 않고 그냥 엔터만 누르면 기본값으로 생성됩니다.

(기본값으로 해도 상관없음)


마지막에 Is this ok? 질문을 하는데

yes 를 누르면 완료됩니다.




위와같이 package.json 파일이 생성되었으면 됩니다.




Brackets로 아까 사용할 폴더를 열어줍니다.

( 또는 VSCode )


저는 Blog 폴더였으므로 Blog 폴더를 열었습니다.


그리고 좌측 메뉴에서

마우스 우클릭 > 새 파일 만들기 >(여러분들이 원하는 이름).js

파일을 만들어줍니다.


저는 app.js로 생성하였습니다.




생성을 마쳤으면 

app.js 에 



console.log('Hello Nodejs!!');


코드를 작성한 후 저장합니다.







Ctrl + Shift + N


단축키를 누르면 방금 생성한 app.js 파일이 실행됩니다.

아래 콘솔창에 입력한 Hello Nodejs! 가 잘 출력되었다면 완벽하게 준비완료 되었습니다.








VSCode의 경우에는 해당 단축기를 지원하지 않습니다.


Ctrl + `

(따옴표가 아닌 숫자 1옆에 있는 문자)

단축키를 눌러 터미널창을 열어줍니다.


터미널창에 node app.js 를 입력합니다.

(Node.js 실행 명령)


실행하면 결과가 바로 출력됩니다!


Node.js 명령뿐만 아니라 위의 npm 명령어도 터미널에서 진행하셔도 됩니다.




본 포스트의 목적은 개발환경 준비였습니다.



개발환경이 준비되었으므로 본격적으로 개발할 준비가 되었습니다.




감사합니다.

댓글
  • 프로필사진 비밀댓글입니다 2018.04.04 13:25
  • 프로필사진 BlogIcon 이근둥 어느부분에서 잘 안되시나요? 2018.04.09 10:22 신고
  • 프로필사진 비밀댓글입니다 2018.04.06 14:52
  • 프로필사진 BlogIcon 이근둥 맥을 써보지않아서 잘 모르겠으나 찾아본 결과로는 리눅스/윈도와 동일하게 cd 명령어를 사용하시면 됩니다 2018.04.09 10:22 신고
  • 프로필사진 비밀댓글입니다 2018.04.10 19:12
  • 프로필사진 BlogIcon 이근둥 코드 저장하고 실행하셨나요?

    해당 문제는 코드가 실행되긴 했으나 아무런 동작(출력, 등..)을 하지않고 종료된 상황입니다! 저장하고 다시 시도해보시거나 소스코드를 다시 확인해주세요!
    2018.04.12 23:52 신고
  • 프로필사진 흐엉 3개의 에러
    ×
    JSLint (1)
    1
    'console' was used before it was defined. console.log('Hello Nodejs!');
    ESLint (2)
    1
    ERROR: Unexpected console statement. [no-console] console.log('Hello Nodejs!');
    1
    ERROR: 'console' is not defined. [no-undef] console.log('Hello Nodejs!');

    똑같이 했는데 왜이런 에러가 뜨는지 모르겠습니다 ㅜㅜ
    2018.06.12 21:33
  • 프로필사진 BlogIcon 이근둥 실행시키면 오류 때문에 실행이 안되시나요?

    Brackets 플러그인 오류로 인해 정상 문법임에도 불구하고 좌측 라인 번호에 x문자와 오류가 보이긴 합니다만,, 실행에는 지장없습니다! 개인적으로는 위의 VSCode 를 사용하시는걸 추천합니다
    2018.06.13 13:44 신고
  • 프로필사진 비밀댓글입니다 2018.11.29 12:10
  • 프로필사진 BlogIcon 이근둥 에디터는 원하는걸로 사용하셔도 됩니다! 2018.12.20 13:09 신고
  • 프로필사진 이수민 npm init 명령어를 실행하면 뭔가 영문으로 막 뜨기는 하는데 자바 스크립트 파일로 app이라는 파일은 생성되고 package.json파일은 생성이 되지를 않네요....어떻게 해야 하나요?ㅠㅠ 2018.12.02 00:06
  • 프로필사진 BlogIcon 이근둥 명령어를 실행한 디렉토리에 package.json 파일이 존재하지 않나요? 경로를 다시 한 번 확인해보세요! 2018.12.20 13:10 신고
  • 프로필사진 ㅎㅇ 저도 같은 오류인데요 위에다가 아래 주석 달아 주니깐 사라졌어요 ㅠ
    근데 Hello Nodejs!!! 는 출력을 못하네요 ㅠ

    /*jslint devel: true */
    /* eslint-disable no-console */
    /*eslint no-undef: "error"*/
    /*eslint-env node*/
    console.log('Hello Nodejs');
    2018.12.28 15:47
  • 프로필사진 BlogIcon 이근둥 cmd로 node 파일명.js 명령어를 입력해도 출력 결과가 보이지 않나요? 2018.12.29 01:06 신고
  • 프로필사진 핑가 저는 실행결과는 잘 나오는데 계속 똑같이 오류표시나서 써주신거 그대로 주석다니까 사라졌는데 혹시 오류가 나는 이유 아시나요?ㅠ
    일일히 주석달기 귀찮을것같아서ㅜ
    2019.01.18 18:28
  • 프로필사진 BlogIcon 이근둥 ESLint라고 문법 체킹해주는 툴때문에 오류가 발생한 것 입니다. 위의 주석은 ESLint에서 문법 체크를 하지 않도록(무시하도록)하는 주석이라 오류가 뜨지 않습니다. 2019.01.19 01:55 신고
  • 프로필사진 BlogIcon 답은 책 속 안에 있다. console.log('hello nodejs!!');
    VS로해도 이렇게 나오네요...ㅠㅠㅠㅠ 뭐가 잘못된건가요?

    Node : 'Node' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오.
    위치 줄:1 문자:1
    + Node app.js
    + ~~~~
    + CategoryInfo : ObjectNotFound: (Node:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException
    2019.06.30 23:44 신고
  • 프로필사진 BlogIcon 답은 책 속 안에 있다. console.log('hello nodejs!!');
    VS로해도 이렇게 나오네요...ㅠㅠㅠㅠ 뭐가 잘못된건가요?

    Node : 'Node' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오.
    위치 줄:1 문자:1
    + Node app.js
    + ~~~~
    + CategoryInfo : ObjectNotFound: (Node:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException
    2019.06.30 23:44 신고
  • 프로필사진 비밀댓글입니다 2019.06.30 23:47
  • 프로필사진 비밀댓글입니다 2021.04.07 23:41
댓글쓰기 폼