9강. Express 시작하기
이번 강의에서는 Express를 사용하여 첫 번째 웹 서버를 만들어 봅니다.
목표: Node.js의 http 모듈보다 쉽고 강력한 Express 웹 서버를 만들 수 있습니다.
1. Express란?
Express는 Node.js에서 가장 많이 사용하는 웹 프레임워크입니다.
Express를 사용하면
웹 서버 만들기
페이지 출력
API 만들기
로그인
게시판
회원관리
파일 업로드
등을 매우 쉽게 구현할 수 있습니다.
2. Express 설치
프로젝트 폴더에서 실행합니다.
npm install express
또는
npm i express
설치가 완료되면
project
│
├── node_modules
├── package.json
├── package-lock.json
└── index.js
3. Express 불러오기
const express = require("express");
Express를 사용할 준비가 완료되었습니다.
4. Express 객체 생성
const express = require("express");
const app = express();
app이 웹 서버 역할을 합니다.
5. 서버 실행
const express = require("express");
const app = express();
app.listen(3000, () => {
console.log("서버 실행 중");
});
터미널 실행
node index.js
결과
서버 실행 중
6. 첫 번째 페이지 만들기
const express = require("express");
const app = express();
app.get("/", (req, res) => {
res.send("Hello Express!");
});
app.listen(3000);
브라우저
http://localhost:3000
출력
Hello Express!
7. 여러 페이지 만들기
const express = require("express");
const app = express();
app.get("/", (req,res)=>{
res.send("메인페이지");
});
app.get("/about",(req,res)=>{
res.send("회사소개");
});
app.get("/contact",(req,res)=>{
res.send("문의하기");
});
app.listen(3000);
브라우저
http://localhost:3000/
↓
메인페이지
http://localhost:3000/about
↓
회사소개
http://localhost:3000/contact
↓
문의하기
8. HTML 출력하기
app.get("/", (req,res)=>{
res.send("<h1>Node.js 수업</h1>");
});
브라우저
<h1>Node.js 수업</h1>
HTML 태그도 정상적으로 출력됩니다.
9. JSON 출력하기
app.get("/user",(req,res)=>{
res.json({
name:"커사맨",
age:50
});
});
브라우저
{
"name":"커사맨",
"age":50
}
10. 포트번호 변경
app.listen(5000);
브라우저
http://localhost:5000
11. app.listen()
app.listen(3000,()=>{
console.log("서버 실행 완료");
});
실행 순서
Node.js
↓
Express
↓
3000번 포트 실행
↓
브라우저 접속 가능
12. req와 res
app.get("/",(req,res)=>{
res.send("환영합니다.");
});
req
→ 브라우저가 보낸 요청(Request)
res
→ 서버가 보내는 응답(Response)
13. nodemon으로 실행
nodemon index.js
또는
npm run dev
저장할 때마다 자동으로 서버가 다시 실행됩니다.
14. 실습 1
메인 페이지 출력
app.get("/",(req,res)=>{
res.send("홈페이지");
});
15. 실습 2
소개 페이지 만들기
app.get("/about",(req,res)=>{
res.send("소개 페이지");
});
16. 실습 3
회원 정보 출력
app.get("/member",(req,res)=>{
res.json({
id:"admin",
name:"홍길동"
});
});
17. 실습 4
상품 페이지 만들기
app.get("/product",(req,res)=>{
res.send("<h2>상품 목록</h2>");
});
18. 실무 프로젝트 구조
project
│
├── index.js
├── package.json
├── node_modules
├── public
│
├── routes
│
├── views
│
└── uploads
Express 프로젝트는 보통 위와 같은 구조를 사용합니다.
19. Node.js와 Express 차이
Node.js Express
실행 환경(Runtime) 웹 프레임워크
JavaScript 실행 서버 기능 제공
http 모듈 직접 사용 간단한 코드로 서버 작성
기능이 적음 다양한 기능 제공
20. 이번 강의 핵심 정리
문법 설명
require("express") Express 불러오기
express() Express 객체 생성
app.get() GET 요청 처리
req 요청(Request)
res 응답(Response)
res.send() 문자열·HTML 응답
res.json() JSON 응답
app.listen() 서버 실행
실무 팁
실무에서는 index.js에 모든 코드를 작성하지 않습니다.
예를 들어,
project
│
├── app.js
├── routes
│ ├── user.js
│ ├── board.js
│ └── product.js
│
├── controllers
├── models
├── public
└── views
처럼 기능별로 파일을 분리하여 관리합니다.
또한, 서버를 종료하려면 터미널에서 **Ctrl + C**를 누르면 됩니다.
실습 미션
다음 페이지를 모두 만들어 보세요.
주소 출력 내용
/ 홈페이지
/about 회사소개
/product 상품목록
/member 회원정보(JSON)
/contact 문의하기
이번 강의에서는 Express를 사용하여 첫 번째 웹 서버를 만들어 봅니다.
목표: Node.js의 http 모듈보다 쉽고 강력한 Express 웹 서버를 만들 수 있습니다.
1. Express란?
Express는 Node.js에서 가장 많이 사용하는 웹 프레임워크입니다.
Express를 사용하면
웹 서버 만들기
페이지 출력
API 만들기
로그인
게시판
회원관리
파일 업로드
등을 매우 쉽게 구현할 수 있습니다.
2. Express 설치
프로젝트 폴더에서 실행합니다.
npm install express
또는
npm i express
설치가 완료되면
project
│
├── node_modules
├── package.json
├── package-lock.json
└── index.js
3. Express 불러오기
const express = require("express");
Express를 사용할 준비가 완료되었습니다.
4. Express 객체 생성
const express = require("express");
const app = express();
app이 웹 서버 역할을 합니다.
5. 서버 실행
const express = require("express");
const app = express();
app.listen(3000, () => {
console.log("서버 실행 중");
});
터미널 실행
node index.js
결과
서버 실행 중
6. 첫 번째 페이지 만들기
const express = require("express");
const app = express();
app.get("/", (req, res) => {
res.send("Hello Express!");
});
app.listen(3000);
브라우저
http://localhost:3000
출력
Hello Express!
7. 여러 페이지 만들기
const express = require("express");
const app = express();
app.get("/", (req,res)=>{
res.send("메인페이지");
});
app.get("/about",(req,res)=>{
res.send("회사소개");
});
app.get("/contact",(req,res)=>{
res.send("문의하기");
});
app.listen(3000);
브라우저
http://localhost:3000/
↓
메인페이지
http://localhost:3000/about
↓
회사소개
http://localhost:3000/contact
↓
문의하기
8. HTML 출력하기
app.get("/", (req,res)=>{
res.send("<h1>Node.js 수업</h1>");
});
브라우저
<h1>Node.js 수업</h1>
HTML 태그도 정상적으로 출력됩니다.
9. JSON 출력하기
app.get("/user",(req,res)=>{
res.json({
name:"커사맨",
age:50
});
});
브라우저
{
"name":"커사맨",
"age":50
}
10. 포트번호 변경
app.listen(5000);
브라우저
http://localhost:5000
11. app.listen()
app.listen(3000,()=>{
console.log("서버 실행 완료");
});
실행 순서
Node.js
↓
Express
↓
3000번 포트 실행
↓
브라우저 접속 가능
12. req와 res
app.get("/",(req,res)=>{
res.send("환영합니다.");
});
req
→ 브라우저가 보낸 요청(Request)
res
→ 서버가 보내는 응답(Response)
13. nodemon으로 실행
nodemon index.js
또는
npm run dev
저장할 때마다 자동으로 서버가 다시 실행됩니다.
14. 실습 1
메인 페이지 출력
app.get("/",(req,res)=>{
res.send("홈페이지");
});
15. 실습 2
소개 페이지 만들기
app.get("/about",(req,res)=>{
res.send("소개 페이지");
});
16. 실습 3
회원 정보 출력
app.get("/member",(req,res)=>{
res.json({
id:"admin",
name:"홍길동"
});
});
17. 실습 4
상품 페이지 만들기
app.get("/product",(req,res)=>{
res.send("<h2>상품 목록</h2>");
});
18. 실무 프로젝트 구조
project
│
├── index.js
├── package.json
├── node_modules
├── public
│
├── routes
│
├── views
│
└── uploads
Express 프로젝트는 보통 위와 같은 구조를 사용합니다.
19. Node.js와 Express 차이
Node.js Express
실행 환경(Runtime) 웹 프레임워크
JavaScript 실행 서버 기능 제공
http 모듈 직접 사용 간단한 코드로 서버 작성
기능이 적음 다양한 기능 제공
20. 이번 강의 핵심 정리
문법 설명
require("express") Express 불러오기
express() Express 객체 생성
app.get() GET 요청 처리
req 요청(Request)
res 응답(Response)
res.send() 문자열·HTML 응답
res.json() JSON 응답
app.listen() 서버 실행
실무 팁
실무에서는 index.js에 모든 코드를 작성하지 않습니다.
예를 들어,
project
│
├── app.js
├── routes
│ ├── user.js
│ ├── board.js
│ └── product.js
│
├── controllers
├── models
├── public
└── views
처럼 기능별로 파일을 분리하여 관리합니다.
또한, 서버를 종료하려면 터미널에서 **Ctrl + C**를 누르면 됩니다.
실습 미션
다음 페이지를 모두 만들어 보세요.
주소 출력 내용
/ 홈페이지
/about 회사소개
/product 상품목록
/member 회원정보(JSON)
/contact 문의하기
#9강. Express 시작하기