Node.js Express

Yongjun Park·2022년 9월 15일

OSAM express node.js

2022 OSAM 해커톤

목록 보기

6/11

2022 OSAM 해커톤 사전 온라인 교육에서 배운 내용입니다.
모르는 내용만 발췌하여 정리한 것이기 때문에 내용의 연결성이 부족한 점 양해 부탁드립니다.

npm install express

웹 서버

정적 페이지와 동적 페이지

Web Server와 WAS의 차이 | 👨🏻‍💻 Tech Interview

정적 페이지 : 바뀌지 않는 페이지 ex) HTML, CSS, JS, image, video
동적 페이지 : 인자에 따라 바뀌는 페이지 ex) JSP/Servlet

웹 서버 예제 (template engine도 활용)

const express = require("express");
const path = require("path");

const app = express();

// static 폴더 : 정적 파일 모음
const publicPath = path.join(__dirname + "./static");
app.use(express.static(publicPath));

// templates 폴더 : hbs 모듈을 이용하여 템플릿 html 파일 작성
const viewPath = path.join(__dirname + "./templates");
app.set("view engine", "hbs");
app.set("views", viewPath);

app.get("", function(req, res) {
//	res.send("Hello World");
	res.render("index", {
		title: "Hello World",
		contents: "Hello World Body"
	});
});

app.listen(3000), () => {
	console.log("Server is online on port 3000");
});

<html>
<head>
	<title>{{title}}</title>
</head>
<body>
	<h1>{{contents}}</h1>
</body>
</html>

app.use(express.static())

사실… 이걸 배우고 벙쪘다. 2년 전에 생활코딩 Node.js 강의를 듣고, Express 없이 한번 웹페이지를 만들어보자! 라는 생각으로 짜다가 포기한 적이 있었다. 그때 포기한 이유가 바로 정적 파일을 일일이 연결시켜주는게 매우 귀찮아서였다. 그때 이 기능을 알았더라면…

예를 들어, localhost:3000/images/cat.jpg 로 접근한다면, __dirname + static/images/cat.jpg 를 찾아서 자동으로 보내준다.

app.set()

app.set('view engine', 'hbs') : hbs를 template engine으로 쓰겠습니다.
app.set('views', viewPath) : view 파일이 모여있는 곳은 viewPath 입니다.

API 서버 - Github 유저 정보를 불러오기

// 위의 파일에서 수정된 부분만 작성
require("isomorphic-fetch");

app.use(express.json());

app.get("/github", async function(req, res) {
	const response = await fetch(`https://api.github.com/users/${req.query.user}`);
	res.json(await response.json());
});

app.user(express.json());

http://localhost:3000/github?user=yopark 의 형식으로 호출해야 한다.

MongoDB 사용해보기

데이터를 Table 말고 Document(JSON) 기반으로 저장한다.

Connect

npm install mongodb

// connect.js

const { MongoClient } = require("mongodb");

const url = "MongoDB에 가입해서 개인 url을 받으세요";
const client = new MongoClient(url);

async function main() {
	await client.connect(); 
	console.log("Connected successfully to server");

	return "done.";
}

main()
	.then(console.log) // res => console.log(res)
	.catch(console.error)
	.finally(() => client.close());

Create

// connect.js

const { MongoClient } = require("mongodb");

const url = "MongoDB에 가입해서 개인 url을 받으세요";
const client = new MongoClient(url);

async function main() {
	await client.connect(); 
	console.log("Connected successfully to server");

	const db = client.db("oss"); // db명
	const collection = db.collection("documents"); // table명

	const insertResult = await collections.insertMany([
		{ a: 1 },
		{ a: 2 },
		{ a: 3 }
	]);
	return insertResult;
}

main()
	.then(console.log) // res => console.log(res)
	.catch(console.error)
	.finally(() => client.close());

Select

// 위 파일에서 insertMany 함수 부분 대신 사용하며, 
// 나머지 내용은 모두 같다. 

const findResult = await collection.find({}).toArray();
console.log("Found documents => ", findResult);

const filteredDocs = await collection.find({ a: 3 }).toArray();
console.log("Found documents filtered by { a: 3 } => ", filteredDocs);

Update

const updateResult = await collection.updateOne({ a: 3}, {$set: { b: 1} });

**$set 을 넣지 않으면 document를 통째로 바꾸는 것! 주의**
$set을 사용하면, 같은 키는 업데이트되고, 없던 키는 추가된다.

Delete

const deleteResult = await collection.deleteMany({ a: 3 });

Yongjun Park

추상화되었던 기술을 밑단까지 이해했을 때의 쾌감을 잊지 못합니다