1장 Node.js 강의 정리 - Node.js 설치와 예제

한이음 공모전을 진행하면서 백앤드 개발을 담당하게 되었다. 서버 개발을 위해서 Node.js를 공부하는 중이고, 유튜브에서 2017 Do it! Node.js 프로그래밍(개정판)으로 공부를 진행 중에 있다. 개당 10-20분 정도 되는 양이라 짧아보이지만 강의 수가 100개라 꽤 된다. 하지만 이 강의가 다른 강의들에 비해 제일 배우기 좋다. 다시 봐도 이해가 잘될 수 있도록 강의 내용과 검색으로 부연 설명을 달 것이다.

---

Node.js 실습 개발 환경 설치와 간단한 예제 실행 

 

Chapter 1 - (1) 강의

 

Brakets 사용 (텍스트 에디터, 파일단위 구분 쉬움)

-> 개발 시 보통 이클립스를 많이 사용하나, 브라켓이 최신 버전을 사용하기에 좋아서 사용한다.

 

Node.js는 특정 도구를 사용할 필요가 없다. -> 브라켓 외에 다른 텍스트 에디터를 사용해서 개발 가능

 

Brakets 설치 -> http://brackets.io/

A modern, open source code editor that understands web design

 

하지만 나는 개발하는 팀원과 통일하기 위해서 Visual Studio Code를 사용할 예정이다.

 

Visual Studio Code 설치 -> https://code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

 

파일 저장할 폴더 생성

파일 경로: C /사용자/사용자이름폴더/개발폴더(vs_nodejs 생성)/이용폴더(NodeExample 생성)

 

간단한 예제 (js, html)

1. 생성한 파일에 간단하게 test.js 파일 작성

console.log 이용

결과

cmd 창에서 작성한 파일 확인

vscode의 터미널을 이용하여 출력

-> 작성한 문장 '안녕하세요.'가 출력된다.

 

*참고: 글자가 작을 때 컨트롤과 + 키를 누르면 커짐 (+, - 로 조절한다.)

 

Node.js 설치 ->https://nodejs.org/en/

Node.js

: Node.js에 있는 실행파일을 이용하기 위해서 설치한다.

 

2. test1.html 파일을 간단하게 작성한다.

: html 파일을 실행하기 위해서는 간단한 설치가 필요하다. (아래 참조)

 

Visual Studio Code 에서 웹페이지 실행 방법

• 좌측 하단 마켓플레이스 선택
• "open in browser" 검색 후, 설치
• .html 파일에서 ALT + B 단축키를 사용하여 웹페이지를 실행

html 파일 실행 결과

 

* 웹 페이지 실시간 미리보기 기능 ( 코드를 수정하면 바로 바로 업데이트 된 결과를 확인할 수 있다. )

: 브라켓에서는 번개 모양 아이콘을 클릭하면 되지만 vscode는 live server을 설치하면 된다.

: 설치 후 아래의 단축키를 사용한다. 

* 단축키

window : alt + L → alt + O

mac : command + L → command + O

 

 

 

1장은 이렇게 개발환경 설치로 마무리된다.