[WEB 포트폴리오]1-2. Visual Studio Code 설치와 개발 환경 구축하기

안녕하세요 Hi Create입니다!!

이번 포스팅에서는 Visual Studio Code 설치와 개발 환경 구축, Node.js 프로젝트 시작까지 해보도록 해보겠습니다.

 

1. Visual Studio Code 설치

code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

다운로드를 누르시면 페이지가 넘어가면서 설치가 시작됩니다. 그러고나서 exe 파일을 실행하여 설치하시면 됩니다.

 

2. 개발 환경 구축하기

Visual Studio Code를 실행해주세요. 아래와 같은 화면이 나올겁니다.

여기서 에디터 부분에 'Welcome'이 나올 겁니다. 그곳이 우리가 파일을 수정할 에디터 부분입니다.

 

①번은 프로젝트의 파일과 폴더를 볼 수 있는 곳입니다.

 

'OPEN EDITORS'는 에디터에 켜져있는 파일을 목록으로 나타내는 곳이구요.

그 아래에는 현재 열려있는 프로젝트나 폴더가 나옵니다.

 

②번에서는 프로젝트나 파일 내에서 특정 문자를 찾을 때 쓰는데 별로 쓰질 않았네요;;

③번은 Source Control이라는 것인데요 이것도 크게 써본적이 없네요 ㅎㅎ

④번은 파일의 실행과 디버깅을 하는 곳입니다. 웹뿐만 아니라 파이썬 등 다른 프로그래밍도 많이 하기 때문에 그럴 때 사용하면 되겠습니다.

가장 마지막에 있는 ⑤번에서는 다양한 플러그인을 설치하실 수 있습니다.

그럼 필요한 플러그인을 설치해보겠습니다.

⑤번에서 검색창에 위 플러그인을 검색해서 Install을 눌러주시면 설치가 됩니다. 이런식으로 원할때마다 플러그인을 설치하실 수 있습니다.

⑥번에서는 파일 생성 등을 하실 수 있고 ⑦번은 현재 파일에서의 오류나 경고 개수를 보여줍니다.

 

3. Node.js 프로젝트 시작하기

그렇다면 본격적으로 Node.js 프로젝트를 생성해보겠습니다.

저는 WEB Portfolio 폴더에 Node Example이라는 이름으로 프로젝트를 생성하겠습니다.

명령 프롬프트에서 프로젝트를 생성할 위치로 이동합니다. (cd를 이용합니다.)

 

위 명령어를 실행하면 설치가 진행됩니다. 설치가 완료되면 다음 명령어를 입력합니다.

'express 프로젝트 이름 --view=ejs' 이는 express로 프로젝트를 생성하고 view 파일을 ejs형식으로 만들겠다는 것입니다.

 

그러면 밑으로 쭉 뭐가 뜨죠? 그럼 완료된 것입니다.

아래와 같이 나올 겁니다.

그럼 'cd NodeExample'을 입력하고 'npm i'를 입력합니다. 그 다음 'npm start'를 입력해주세요

아래와 같이 나오면 완료된 것입니다.

 

항상 node.js로 서버를 실행하면 이런 화면으로 나옵니다.

이제 http://localhost:3000/ 으로 가봅시다.

앞에 있는 localhost는 현재 서버를 자체로 돌린다는 뜻이고 콜론(:) 뒤의 숫자는 포트 번호를 의미합니다.

그 뒤에는 주로 파일 이름인데 프로그래머가 설정할 수 있습니다.

어쨌든 실행을 하면 다음과 같은 화면이 나오면 됩니다.

 

이번 포스팅은 여기까지 하도록 하겠습니다.

다음 포스팅에서는 bootstrap을 이용해서 메인 화면을 만드는 것을 해보도록 하겠습니다!!

감사합니다!