008 - express서버 생성
남기용 201

작업전에 먼저 VSCode에서 유용한 몇가지 확장 프로그램을 설치 하도록 하겠습니다.

  • Auto Close Tag

  • Auto Complete Tag

  • Auto Rename Tag

  • Material Design Icons Intellisense : MDI 아이콘 코딩시 아이콘을 보여주고 검색 기능도 있습니다.

  • Material Icon Theme

  • vuetify-vscode : .vue 파일 작성시 Vuetify 컴포넌트의 자동완성 기능이 추가 됩니다

Express.js 설치

express.js는 많은 Node.js 사용자들이 사용하는 웹 프레임워크 입니다. 꼭 express를 사용할 필요는 없지만 많은 사용자가 사용하므로 사용시 발생되는 이슈에 대해 자료가 많아서 좋은것 같네요

그리고 민감한 정보(환경설정파일)를 저장하기위해 dotenv도 같이 설치하고,

yarn add express dotenv

그리고 .gitignore 파일에 .env 를 추가하고 .env 파일을 작성합니다.

SERVER_PORT=4000

server 폴더를 만들고 앞으로 backend 관련 파일은 이쪽에서 작성하도록 하겠습니다.

require('dotenv').config();
const express = require('express');
const http = require('http');
const path = require('path');

// 앱 초기화
const app = express();
const port = process.env.SERVER_PORT || 3000;
const webServer = http.createServer(app);

// 정적 폴더
app.use(express.static(path.join(__dirname, "../dist")));

// 서버 리슨
webServer.listen(port, () => {
	console.log(`http://localhost:${port}`)
});

이제 노드로 실행하면 build된 내용이 브라우저에 표시 됩니다.

node로 실행을 해도 되지만 파일을 수정하면 매번 다시 실행해야 하므로 nodemon을 Global로 설치하여 nodemon으로 실행하도록 하겠습니다.

npm i -g nodemon

nodemon은 파일이 변경되어지면 자동으로 다시 실행해줍니다.

이 명령을 package.json의 scripts에 등록하여 실행 되어지도록 할께요

"start" : "nodemon server/server.js",

이제 yarn start 명령으로 서버를 실행 할 수 있고 파일 수정시 자동으로 실행되어집니다.

express env nodemon
회원로그인 후 댓글을 작성하실 수 있습니다. 로그인
© 2021 ezcode all right reserved.