고정 헤더 영역
상세 컨텐츠
본문
설치
npm에서 express module을 다운받아야 합니다.
$ npm init //json 생성
$ npm install express --save // json에 express 정보 담기
서버 열어보기
const express = require('express');
const app = express();express를 사용하면 http모듈을 따로 불러올 필요가 없습니다.
app이라는 변수(서버 메인 어플리케이션)에 express()를 할당하면
이제 이 app을 활용해 서버를 구동시킬 수 있게 됩니다.
const express = require('express');
const app = express();
app.listen(8003, () => {
console.log('익스프레스로 서버 실행!');
});포트 넘버는 3000 이상의 번호면 됩니다. (3000, 8080 등...)
이렇게 아무 내용도 없는 서버를 한 번 구동해 보도록 하겠습니다.
// pm2든 nodemon이든 npm에서 설치 권장
$ pm2 start app.js --watch
node app.js 로 실행 명령을 내려도 되지만 pm2를 다운받아 이렇게 이용하면
수정사항이 생길 때마다 노드를 껐다 켰다 하지 않아도 됩니다!
보시다시피 status가 online으로 바뀌면서 서버가 정상적으로 구동이 된 것을 확인할 수 있습니다.
아직 화면에 뭘 출력하라는 명령을 내린 적이 없기 때문에 위와 같은 상태로 뜨게 됩니다.
Cannot GET / 이라고 뜨니 url을 get 할 수 있게 설정해보도록 합니다.
화면에 내용 표기하기
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.send('한글 되니?');
});
app.listen(8003, () => {
console.log('익스프레스로 서버 실행!');
});express를 사용하지 않았을 때는 res.writeHead() 부분에 한글 관련 인코딩 옵션을 넣어줬어야 했는데
res.send() 는 자동으로 utf-8로 인코딩을 합니다.
Res Headers 부분에 Content-Type이 자동으로 설정되어 있는 걸 확인할 수 있습니다.
HTML 형식 입력하고 화면의 띄워보기
const express = require('express');
const app = express();
const html = `
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>practice</title>
</head>
<body>
<h1>한글 되네?</h1>
<h2>신기하구나.. 너란 녀석....</h2>
<form action='/'>
<b>아이디</b>
<input type="text" name="id" placeholder="ID" method="post" />
<b>비밀번호</b>
<input type="password" name="password" placeholder="PW" method="post" />
<button>확인</button>
</form>
</body>
</html>
`;
app.get('/', (req, res) => {
res.send(html);
});
app.listen(8003, () => {
console.log('익스프레스로 서버 실행!');
});
res.send()는 한 번만
res.send()는 res.write()와 res.end()의 통합 방식이기 때문에
res.send()는 한 번 밖에 사용하지 못합니다.
아래처럼 res.send()를 두 번 적으면 가장 위에 있는 코드만 적용이 되고
나머지 것들은 무시가 됩니다.
const express = require('express');
const app = express();
const html = `
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>practice</title>
</head>
<body>
<h1>한글 되네?</h1>
<h2>신기하구나.. 너란 녀석....</h2>
<form action='/'>
<b>아이디</b>
<input type="text" name="id" placeholder="ID" method="post" />
<b>비밀번호</b>
<input type="password" name="password" placeholder="PW" method="post" />
<button>확인</button>
</form>
</body>
</html>
`;
app.get('/', (req, res) => {
res.send('res.send() 두 번 써보기');
res.send(html);
});
app.listen(8003, () => {
console.log('익스프레스로 서버 실행!');
});
'프레임워크+라이브러리 > Express' 카테고리의 다른 글
| node js / express 이용하기 / 라우팅 (0) | 2020.07.30 |
|---|---|
| node js / express 이용하기 / express 미들웨어 (0) | 2020.07.30 |
| Node.js / path 모듈 (0) | 2020.07.23 |
| node js / 라우터 분기 처리 / 쿠키 수집 part 3 (0) | 2020.07.21 |
| Node. js / 라우터 분기 처리 / 쿠키 수집 part 2 (0) | 2020.07.21 |
댓글 영역