VS Code(Visual Studio Code) 활용한 Node js 개발환경 세팅

"최근 가장 핫한 개발환경 VS Code에 대해서 알아보도록 하자."

 

기존의 개발환경을 보자면 Python은 파이참, C와 C++은 Visual Studio, Java는 Eclipse, 웹은 아톰, Android는 Android Studio, iOS는 Xcode 등 언어별 사용하는 IDE(Integrated Development Environment) 개발환경이 각각 달랐다.

 

이중의 모바일을 제외하면 대부분의 언어는 Visual Studio Code(이하 VS Code)로 개발할 수 있다.

 

마이크로 소프트사가 개발환경을 크게 개선한 것이다.

 

 

지난시간에 설치한 Node js를 코딩을 하기위한 VS Code환경에 셋팅하는 방법에 대해 알아보도록 하겠다.

 

Node js 설치 방법이 궁금하신 분은 이전글을 읽고 오셔도 좋다.

Node js 란 무엇인가? 설치부터 활용 방법

 

먼저 VS Code를 설치해 보도록 하자.

방법은 매우 간단하다 구글에 vscode를 검색하면 아래와 같은 검색 결과가 나오는데 이중 Download 버튼을 클릭해서 다운로드 페이지로 이동하자.

만약 Download 링크가 보이지 않는다면 아래 주소로 직접 들어가보자

VSCode 다운로드 사이트

 

그러면 원하는 OS에 맞는 설치 파일을 다운로드 받을 수 있는데 Windows, Linux, Mac 중 자신의 OS 설치파일을 다운로드해서 설치하자.

 

자신의 OS가 64bit 운영체제인지 32bit 운영체제인지 시스템 사항을 확인하고 다운받으시기 바란다.

대부분의 최근 2년 사이의 PC라면 64bit 운영체제가 대부분이다.

 

설치를 완료했다면 실행했을 시 아래와 같은 개발 화면을 볼 수 있다.

New file로 하는 방법도 있지만 Open folder를 이용해서 프로젝트가 생성될 폴더를 열어보자.

 

 

이후 부터는 Node js 프로젝트를 셋팅해야 하는데 매우 간단하다.

 

해당 폴더에서 터미널 창으로 접근하여 npm install express를 입력해서 express 컴포넌트를 설치하고 express 를 입력하면

아래와 같이 해당 폴더에 프로젝트가 구성된다.

다시 VS Code의 개발창으로 넘어오면 기본 프로젝트 셋팅이 끝난것을 알 수 있다.

 

기본 구성은 셋팅이 끝났지만 서버를 구성하기위한 파일들을 다운받아야 하기 때문에

"npm install"을 입력하면 기본적으로 필요한 서버 파일들을 자동으로 다운받아 준다.

 

이후 디버그 버튼에서 "Run and Debug"를 눌러서 node.js 디버거를 실행시키거나

"Node.js Debug Terminal"을 실행시켜서 npm start를 입력하면 기본 서버가 구성된다.

 

node js 서버를 실행하였으면 이제 웹페이지를 열고 localhost:3000을 주소로 입력해보자

아래와 같이 기본 페이지인 express 웹이 열릴 것이다.

 

여기서 localhost는 주소를 의미하며, 3000은 포트번호를 의미한다.

PC 내부에서 서버를 띄우기 때문에 localhost나 127.0.0.1로 주소가 자동 할당되며 포트는 express에서 기본적으로 할당되었기 때문에 

 

Node Project 경로 /bin/www 파일의 아래 코드의 Port를 수정하면 해당 포트로 서버가 열리게 된다.

var port = normalizePort(process.env.PORT || '3000');

 

이렇게하면 기본적인 환경 셋팅과 서버 구동이 끝난 것이다.

 

이제부터는 수정만 하면 된다.

 

정말 쉬운 세상이 아닐 수 없다.

 

이제는 인터넷만 연결되고 명령어 몇번만 치면 웹서버 셋팅이 끝나니 말이다.

 

 

물론 코드를 수정하려면 어느정도 분석과 이해가 필요하겠지만 소스의 모든 부분을 이해해야 할 필요는 없으므로

수정이 필요한 부분만 이해해서 변경하면 되겠다.

 

코드의 이해도가 조금만 있다면 이것이 얼마나 편한 일인지 알게 될 것이다.

 

이렇게 간단하게 서버를 열 수 있는데 이참에 공부해서 나만의 홈페이지를 만들어 보는건 어떨까?

 

VS Code와 Node js만 있다면 아주 쉬운일이니 말이다.

 

 

무료 HTML 템플릿 사용해서 쉽게 웹페이지 만드는 방법