Node.js 및 ExpressJS로 간단한 웹 애플리케이션을 빌드하는 방법 알아보기
Express와 Node.js는 전 세계의 많은 애플리케이션에서 사용되는 인기 있는 콤보입니다. 이 튜토리얼은 간단한 웹 서버를 구축하여 Node.js 및 Express를 시작하는 데 도움이 됩니다.
서버는 다른 사람이 액세스 할 수 있는 HTML 페이지를 제공합니다. 기사가 끝나면 다음에 대한 기본 지식을 갖게 됩니다.
전문가 팁 : 튜토리얼에서 코드를 복사하지 마십시오. 더 잘 배우려면 코드를 직접 작성하십시오. 더 이상 고민하지 않고 바로 뛰어 들자!
프로젝트 생성 및 초기화
튜토리얼의 첫 번째 단계는 프로젝트를 위한 빈 폴더를 만드는 것입니다. 일반적인 방법으로 생성하거나 다음과 같이 터미널에서 생성 할 수 있습니다.
mkdir express-server
cd express-server이제 빈 프로젝트가 있으므로 다음 명령을 실행하여 초기화 할 차례입니다.
npm init -y위의 명령은 package.json 파일을 만들고 기본값으로 초기화합니다. 필드를 수동으로 채우려면 -y 플래그를 제거하고 지시 사항을 따르십시오.
Express 추가
초기화 된 Node.js 프로젝트가 있지만 지금까지 Express에 대한 트랙이 없습니다. 따라서 프로젝트에 Express를 추가하는 다음 단계로 이동합니다. Node.js에서는 npm install packageName을 실행하여 패키지를 설치합니다.
따라서 최신 안정 버전의 Express를 추가하려면 다음 명령을 실행하십시오.
npm install express이제 Express가 설치되었으므로 package.json 파일은 다음과 같습니다.
{
"name": "express-server",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.17.1"
}
}Express가 "종속성"아래에 나열되어 있기 때문에 성공적으로 설치되었음을 알 수 있습니다. 이제 다음 단계 인 서버 생성으로 넘어가겠습니다.
Express 서버 생성
계속 진행하기 전에 웹 서버용 JavaScript 파일을 만들어야 합니다. 터미널에서 다음 명령을 실행하면 됩니다.
touch index.js파일을 열고 다음 행을 작성하여 시작하십시오.
const express = require('express');
const app = express();이 두 줄은 무엇을 하고 있습니까?
경로 생성 및 특정 포트에서 수신
간단히 말해서 경로는 사람들이 액세스 할 수 있는 끝점을 나타냅니다. 경로는 HTTP 동사 (예 : GET, POST 등)와 연결되며 URL 경로를 사용합니다. 또한 엔드 포인트에 액세스 할 때 호출되는 함수를 받습니다.
파일에 다음 코드를 작성하십시오.
app.get('/', (req, res) => {
res.send({ message: 'Hello WWW!' });
});위의 코드를 분석해 보겠습니다.
따라서 사용자가 귀하의 홈페이지 (localhost : 3333)에 GET 요청을 하면 화살표 함수가 호출되고 "Hello WWW!"가 표시됩니다.
서버가 작동하는 마지막 단계는 "수신기"를 설정하는 것입니다. 응용 프로그램에 대한 특정 포트를 설정해야 합니다. JavaScript 파일 끝에 다음 코드를 작성하십시오.
app.listen(3333, () => {
console.log('Application listening on port 3333!');
});서버를 시작하려면 listen 메소드를 호출해야 합니다. 또한 포트 번호 (3333)를 원하는 번호로 바꿀 수 있습니다!
브라우저에서 앱에 액세스
애플리케이션을 시작하려면 터미널에서 node index.js를 실행하십시오. 이 튜토리얼에서 선택한 이름은 index.js입니다. 그러나 app.js 또는 원하는 이름을 지정할 수 있습니다!
이제 서버가 실행 중이므로 브라우저에서 액세스 할 수 있습니다. http://localhost:3333/으로 이동하면 다음 메시지가 표시됩니다.
Node.js + Express 웹 서버 설정을 완료했습니다! 다음 섹션에서는 JavaScript, CSS, HTML, 이미지 등과 같은 정적 자산을 설정합니다.
정적 자산
응용 프로그램은 현재 너무 좋아하지 않습니다. 약간의 구조와 스타일링으로 더 멋지지 않을까요? 하지만 어디에 추가해야 합니까?
이 섹션에서는 HTML, CSS, 자바 스크립트 및 이미지와 같은 정적 애셋을 설정하고 제공하는 방법을 알아 봅니다.
경로 모듈 가져 오기
첫 번째 단계는 "경로"모듈을 애플리케이션으로 가져 오는 것입니다. "경로"는 기본적으로 Node.js와 함께 제공되기 때문에 아무것도 설치할 필요가 없습니다.
파일 맨 위에 다음 행을 작성하십시오.
const path = require('path');그런데 왜 이 모듈이 필요합니까? "path"모듈을 사용하면 정적 자산을 제공하는 데 필요한 절대 경로를 생성 할 수 있습니다. 애플리케이션에 경로를 정의하기 전에 다음 코드 줄을 추가합니다.
app.use(express.static(path.join(__dirname, 'public')))path.join은 두 개의 인수를 사용합니다.
연습으로 콘솔 path.join (__ dirname, 'public')에 인쇄하여 결과를 확인하십시오.
지금까지 서버는 다음과 같아야 합니다.
const path = require('path');
const express = require('express');
const app = express();
app.use(express.static(path.join(__dirname, 'public')))
app.get('/', (req, res) => {
res.send({ message: 'Hello WWW!' });
});
app.listen(3333, () => {
console.log('Application listening on port 3333!');
});public 생성 및 자산 추가
다음 단계는 "공용"폴더를 만들고 일부 자산을 추가하는 것입니다. 다음 명령을 실행하여 빈 폴더를 만들고 변경할 수 있습니다.
mkdir public
cd public이제 HTML, CSS 및 JavaScript를 추가 할 빈 파일을 만들어 보겠습니다. 터미널에서 다음 행을 실행하십시오.
touch app.js
touch index.html
touch styles.cssapp.js는 매우 간단하게 유지합니다. 작동 여부를 확인하기 위한 경고 만 표시합니다. 따라서 app.js를 열고 다음 줄을 추가합니다.
alert('it works');마찬가지로 styles.css도 단순하게 유지합니다. 작동하는지 확인하기 위해 배경색을 파란색으로 설정하겠습니다. styles.css에 다음 코드를 추가하면 됩니다.
html {
background-color: blue;
}마지막으로 홈페이지에 표시 할 수 있도록 HTML을 작성해야 합니다. index.html 파일을 열고 다음 HTML 코드를 추가합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/app.js"></script>
<link rel="stylesheet" href="/styles.css">
<title>My server</title>
</head>
<body>
<h1>My server</h1>
<p>Server built with Node.js and Express</p>
</body>
</html>위의 코드를 작성한 후 한 단계 더 남았습니다! 다음 섹션을 참조하십시오.
HTML 파일 제공
거의 완료되었습니다. 남은 것은 HTML 코드를 제공하는 것입니다. 그렇게 하려면 서버 코드가 있는 index.js 파일로 이동해야 합니다. 파일을 열고 다음 코드를 작성하십시오.
app.get('/', (req, res) => {
res.sendFile(`${__dirname}/public/index.html`);
});Node.js 및 Express를 처음 사용하는 것이 아니라면 sendFile 메서드가 어떻게 되었는지, 왜 render 메서드를 사용하지 않는지 물어볼 수 있습니다. 엔진 (예 : Pug, EJS 등)을 사용하지 않기 때문에 render 메서드를 사용할 수 없습니다. 따라서 사람들이 홈페이지에 액세스 할 때 HTML 파일을 다시 보냅니다.
서버 코드의 최종 버전은 다음과 같습니다.
const path = require('path');
const express = require('express');
const app = express();
app.use(express.static(path.join(__dirname, 'public')))
app.get('/', (req, res) => {
res.sendFile(`${__dirname}/public/index.html`);
});
app.listen(3333, () => {
console.log('Application listening on port 3333!');
});이제 http://localhost:3333으로 이동하면 파란색 배경의 웹 페이지가 표시됩니다. 물론 귀찮은 팝업을 닫은 후.
위의 이미지는 화면에 표시되어야 하는 내용을 보여줍니다!
결론
기사 끝까지 축하합니다. 이제 간단한 웹 애플리케이션이 생겼을 것입니다.
등록된 댓글이 없습니다.
