이전 자료
출처
•
npm init 명령을 이용하여 애플리케이션에 대한 package.json 파일을 작성하십시오. package.json의 작동 원리에 대한 자세한 정보는 Specifics of npm’s package.json handling을 참조하십시오.
npm init
JavaScript
복사
•
cmd 창에 아래의 명령어를 입력한다. (express 설치)
npm i express
JavaScript
복사
•
실행화면
•
그리고 폴더 보면 새로운 것이 생긴것을 확인할 수 있다.
•
소스코드는 아래 것으로 새로 바꾼다.
/app.js
const express = require("express");
const server = express();
server.get("/", (req, res) => {
res.send("<h1>Hello from Nodejs Express</h1>");
});
server.listen(3000, (err) => {
if (err) return console.log(err);
console.log("The server is listening on port 3000");
});
JavaScript
복사
•
실행 방법은 아래의 명령어를 입력한다.
node app.js
JavaScript
복사
•
실행화면
PS C:\Users\glory\Desktop\nodejsproject> node app.js
The server is listening on port 3000
JavaScript
복사
•
localhost:3000 을 주소창에 검색하면 아래와 같은 화면이 나온다.
HTML 연동 및 CSS 연동 및 미들웨어 사용
같은 폴더내에 아래와 같은 파일을 3개를 만든다.
/about.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>About</title><!--제목이 About이다.-->
</head>
<body>
<h1>About</h1><!--웹페이지 안에 About을 작성한다.-->
</body>
</html>
HTML
복사
/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/index.css" /><!--index.css 내용을 가져와서 내용을 꾸며준다.-->
<title>Home</title><!--제목이 Home이다.-->
</head>
<body>
<h1 class="red">This is Home</h1><!--웹페이지 안에 This is Home을 작성한다. 그리고 css 파일에 red함수를 가져와서 쓴다.-->
</body>
</html>
HTML
복사
/404.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title><!--제목으로 Document라고 쓴다.-->
</head>
<body>
<h1>Page Not Found 404</h1><!--웹페이지 안에 Page Not Found 404t을 작성한다.-->
</body>
</html>
HTML
복사
•
그리고 app.js 파일을 아래의 코드로 바꾼다.
/app.js
const express = require("express");
const server = express();
server.use(express.static(__dirname + "/public"));
server.get("/", (req, res) => {
res.sendFile(__dirname + "/index.html");
});
server.get("/about", (req, res) => {
res.sendFile(__dirname + "/about.html");
});
server.use((req, res) => {
res.sendFile(__dirname + "/404.html");
});
server.listen(3000, (err) => {
if (err) return console.log(err);
console.log("The server is listening on port 3000");
});
JavaScript
복사
•
마지막으로 public이라는 폴더를 만들고, index.css를 만든다.
/public/index.css
.red {
color: red; /*글씨를 빨간색으로!*/
}
CSS
복사
•
위의 프로그램이 돌아가는 순서는 다음과 같다.
1.
서버 실행
2.
미들웨어 거치고
3.
주소창 끝에 / 이 와서 get 하면 index.html을 쏴주고 거기에 index.css가 꾸며준다.
4.
주소창 끝에 /about 이 와서 get 하면 about.html을 쏴주고
5.
주소창 끝에 그 외것들이 오면 404 출력을 해준다.
실행화면
번외
•
404 출력을 하는 다른 웹사이트 서버 예시
구글
애플
소스가 변경될 때 마다 새로운 코드가 나오도록 Nodemon, package.json 파일 제작하기
•
아래의 명령어를 입력한다.
•
명령어
npm init --y
JavaScript
복사
•
실행화면
PS C:\Users\glory\Desktop\nodejsproject> npm init --y
Wrote to C:\Users\glory\Desktop\nodejsproject\package.json:
{
"name": "nodejsproject",
"version": "1.0.0",
"description": "",
"main": "app.js",
"dependencies": {
"express": "^4.17.1"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
PS C:\Users\glory\Desktop\nodejsproject>
JavaScript
복사
•
그러면 package.json 파일이 나오는 것을 확인할 수 있다.
•
참고화면
•
nodemon 설치
•
파일이 수정 될 때 마다 서버를 재 시작하는 불편함을 없애기 위해서 nodemon을 사용해보자
•
명령어
npm install nodemon --save-dev
JavaScript
복사
•
실행화면
PS C:\Users\glory\Desktop\nodejsproject> npm install nodemon --save-dev
> nodemon@2.0.7 postinstall C:\Users\glory\Desktop\nodejsproject\node_modules\nodemon
> node bin/postinstall || exit 0
Love nodemon? You can now support the project via the open collective:
> https://opencollective.com/nodemon/donate
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.1 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN nodejsproject@1.0.0 No description
npm WARN nodejsproject@1.0.0 No repository field.
+ nodemon@2.0.7
added 117 packages from 53 contributors and audited 168 packages in 7.447s
11 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
PS C:\Users\glory\Desktop\nodejsproject>
JavaScript
복사
•
설치 중 화면
•
package.json 파일에 nodemon 이 추가되어있는 것을 볼 수 있다.
•
scripts 부분에 "dev": "nodemon app.js" 명령문을 입력한다.
•
소스코드
/package.json
{
"name": "nodejsproject",
"version": "1.0.0",
"description": "",
"main": "app.js",
"dependencies": {
"express": "^4.17.1"
},
"devDependencies": {
"nodemon": "^2.0.7"
},
"scripts": {
"dev": "nodemon app.js"
},
"keywords": [],
"author": "",
"license": "ISC"
}
JSON
복사
•
여기까지 되었다면 앞으로 실행할 때 npm run dev 를 써서 실행한다.
•
명령어
npm run dev
JSON
복사
•
실행화면
•
파일을 새로 작성하고 저장 할 때 마다 아래처럼 초기화 된 것이 보인다.
•
실행화면
