안녕하세요
이번 포스트에서는 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 공식 홈페이지에 접속합니다.
LTS 버전을 다운받으시는걸 추천합니다.
다운받으시고 설치해줍니다.
설치가 완료되었으면 다음으로 진행합니다.
명령 프롬프트창을 실행하고
node -v
명령어를 입력합니다.
버전이 출력되면 정상적으로 설치된것입니다.
(사진의 버전과 여러분들의 버전이 다를 수 있습니다)
[ Brackets 설치 ]
Brackets 는 텍스트 에디터중 하나입니다.
웹 개발용도로 많이 사용하는데요, 제가 앞으로 실습 및 사용할 에디터로 선정하였습니다.
Brackets 홈페이지로 접속합니다.
다운로드받고 설치합니다.
[ 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 명령어도 터미널에서 진행하셔도 됩니다.
본 포스트의 목적은 개발환경 준비였습니다.
개발환경이 준비되었으므로 본격적으로 개발할 준비가 되었습니다.
감사합니다.
