* IDE : visual studio code

* OS : windows 10 pro

 

1. node 설치 

아래의 경로에서 본인 환경에 맞는 파일을 다운로드

nodejs.org/ko/download/

 

다운로드 | Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

 

2. node 와 npm 을 전역설치

(생략) 만약, [VSC] 이 시스템에서 스크립트를 실행할 수 없... 관련 에러가 발생하면 아래 링크를 참고 ↓

 

[VSC] 이 시스템에서 스크립트를 실행할 수 없

vue 개발을 시작하기 위해 vsc 설치부터 vue 프로젝트 생성 중에 마주한 난관을 아래 링크의 은인이 구제해주셨다. 출처링크① : singa-korean.tistory.com/21 [PowerShell] VSCode 터미널 오류 : 이 시스템에서..

leesoyoun93pj1.tistory.com

 

3. Express 설치

1 > vsc 를 원하는 경로로 설정 후 오픈하고,

     프로젝트를 자동으로 생성해 줄 express-generator 를 전역설치

npm install express-generator -g

 

 

2 > 설치할 프로젝트 이름 및 파일확장자 설정

express 프로젝트이름 --view=템플릿엔진

/**** or *****/

express --view=템플릿엔진 프로젝트이름

 

템플릿 변경없이 바로 프로젝트를 생성하는 경우는  express 프로젝트이름  을 실행하면 된다.

그러나, 템플릿 종류가 많기 때문에 선택하여 사용하는 것을 추천한다.

  • Jade (기본템플릿)
  • Pug
  • EJS : Embedded JavaScript
  • Handlebars

 

3 > 프로젝트에 기본 npm 패키지 설치

cd 프로젝트명 // 프로젝트 위치로 이동
npm install

 

4 > 프로젝트 실행

// D:\Users\20201207\프로젝트명> 
npm start

localhost:3000 으로 접속하여 상단 화면이 나타나는지 확인!

 

폴더 기본구조

=========================

프로젝트명

ㄴbin

    ㄴ  www 

ㄴ node_modules

ㄴ public

ㄴ routes

ㄴ views

app.js

package-lock.json

=========================

 

추가 >

* 폴더별 역할

bin/www - 코드실행 port 

public/* - image, javascript, stylesheet 등의 웹 소스

routes/* - 라우팅 ( 애플리케이션 url 정의, 클라이언트 요청 및 응답 ) 관련 소스

views/* - 클라이언트단 ( 템플릿 ) 관련 소스 

app.js - 미들웨어 함수 관련 소스

 

* localhost:3000 이외의 port 로 접속하려는 경우

bin/www 파일을 열고, 아래의 line:15 중 '3000' 을 원하는 port 로 변경한다.

 

+ Recent posts