NodeJs(4)

👨‍💻 중요 파일 설명

app.js : node.js를 통해 서버 코드를 적어놓는 곳
restaurants.json : 식당 정보들을 저장해놓은 파일(식당들은 이름, 주소등을 가진 객체로서 저장된다.)
restaurant-item.ejs: ejs의 include 기능을 통해 restaurants.ejs의 식당 출력 내용을 묶어둔 것
404.ejs: page not found 표시하는 페이지

👨‍💻 Status Code

저번까지 잘못된 url 혹은 없는 식당 id를 찾는다면 404.ejs를 띄우는 것을 기억할 것이다.
하지만 404.ejs가 떴을 때, 개발자 도구를 통해 status code를 보면 404가 아닐 것이다.

이런 것도 error 코드와 일치시켜줘야 한다.
그 방법은 이 페이지를 출력할 때, status도 바꿔주면 되는데

res.render("404");
res.status(404).render("404");

원래 위에서 밑의 것으로 바꾸면 status도 404로 바뀌게 된다.
뭐 보이지 않는 부분이니까 크게 중요성을 못느낄 수도 있는데 이런 디테일들이 나중에 프로젝이 커졌을 때, 스파게티면 같은 프로젝트가 아니라 잘 구조화, 정리된 프로젝트로 보이게 할꺼라고 생각한다.

👨‍💻 .JS 폴더 간 상호작용

app.js에서 함수들에서 겹치는 부분들이 있다 바로

1. restaurant.json 파일에서 데이터 불러오는 코드

const filePath = path.join(__dirname,"..", "data", "restaurants.json");
const fileData = fs.readFileSync(filePath);
const storedRestaurants = JSON.parse(fileData);

2. 파일에다가 새로운 식당 객체를 추가하는 코드이다.

fs.writeFileSync(filePath, JSON.stringify((storableRestaurants)));

app.js를 간결하게 하기 위해 이 두 개의 코드를 따로 새로운'util/restaurant-data.js' 파일에 정리하려고 한다.

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

const filePath = path.join(__dirname,"..", "data", "restaurants.json");

function getStoredRestaurants() {

	const fileData = fs.readFileSync(filePath);
	const storedRestaurants = JSON.parse(fileData);
	
	return storedRestaurants;
}

function storeRestaurants (storableRestaurants){
	fs.writeFileSync(filePath, JSON.stringify((storableRestaurants)));
}

module.exports={
	getStoredRestaurants: getStoredRestaurants,
	// 다른 파일에서 사용할 이름: 이 파일에서 함수 이름
	storeRestaurants: storeRestaurants
}  

전체 코드는 이와 같은데 하나씩 살펴보자.

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

밑에서 fs와 path를 사용하기에 fs와 path를 불러와 주는 것은 당연한 일이다.

const filePath = path.join(__dirname,"..", "data", "restaurants.json")

이건 getStoredRestaurants, storeRestaurants 함수 두 개 사용하기에 전역으로 빼주었다.
그리고 util이란 파일 안에 있기에 위로 올라가서 app.js를 찾아야 한다.
그래서 상위 폴더로 올라가는 ".."을 추가한 것이다.

module.exports={
	getStoredRestaurants: getStoredRestaurants,
	// 다른 파일에서 사용할 이름: 이 파일에서 함수 이름
	storeRestaurants: storeRestaurants
}  

이게 나는 제일 흥미로웠는데, 이 파일에서 사용할 수 있는 함수들을 정할 수가 있다.
나는 다 app.js에서 사용해야 하니 모두 적었고 다른 파일에서 사용할 함수 이름과 실제 이 파일에서 함수 이름을 콜론을 두고 적어주면 된다.

자 그럼 app.js에서 이 함수들을 어떻게 불러올까?

const resData = require("./util/restaurant-data");

app.post("/recommend", function(req, res) {
	const restaurant = req.body; //object save
	restaurant.id = uuid.v4();
	const restaurants = resData.getStoredRestaurants();
	
	restaurants.push(restaurant);
	
	resData.storeRestaurants(restaurants);
	
	res.redirect("/confirm");
	
});

다른 패캐지처럼 require로 불러오되 안에 파일 경로를 넣고 함수는 가져온 객체에 .을 붙이고 함수를 넣어서 사용하면 된다.

👨‍💻 Routes 분리

한 중심 js파일에 너무 많은 routes들이 있다면, 이 또한 분리하는 것이 구조상 더 깔끔할 것이다. 그래서 그 routes들을 빼서

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

const resData = require("../util/restaurant-data");

const router = express.Router();

router.get("/restaurants", function(req, res) { 
	const storedRestaurants = resData.getStoredRestaurants();
	
	res.render("restaurants", { numberOfRestaurants: storedRestaurants.length, 
							   restaurants : storedRestaurants})
} );

router.get("/restaurants/:id", function (req, res) {
	const restaurantId = req.params.id;
	
	const storedRestaurants = resData.getStoredRestaurants();
	
	for(const restaurant of storedRestaurants) {
		if(restaurant.id== restaurantId) {
			return res.render("restaurant-detail", {restaurant: restaurant});
		}
	}
	
	res.status(404).render('404');
	
});

router.get("/recommend", function(req, res) {
	res.render("recommend");
} );

router.post("/recommend", function(req, res) {
	const restaurant = req.body; //object save
	restaurant.id = uuid.v4();
	const restaurants = resData.getStoredRestaurants();
	
	restaurants.push(restaurant);
	
	resData.storeRestaurants(restaurants);
	
	res.redirect("/confirm");
	
});

router.get("/confirm", function(req, res) {
	res.render("confirm");
} );

module.exports = router;

이런 식으로 분리해줄 수 있다.

const express = require("express");
const router = express.Router();

express는 메인 파일에서만 실행하기에 express()가 아니라 위와 같이 아웃소싱해서 사용하면 된다.

module.exports = router;

그리고 위에서도 했는이 이걸 메인 파일에서 사용할 수 있게 export 해줘야 한다.

그리고 메인 파일에서는

const restaurantRoutes = require("./routes/restaurants");
app.use("/", restaurantRoutes);

이와 같이 파일을 불러온다음 미들웨어를 통해서 이 파일을 쓱 훑게 하면 된다.
내가 훑는다는 표현을 사용한 이유는 "./routes/restaurants" 파일을 들어갔다가 해당되는 게 없으면 다시 나와서 메인 파일에서 나머지 코드를 실행하기 때문이다.

주의
코드를 옮기면서 require 해야 하는 것들 잘 챙기고 파일 상대경로 바뀌니 그것도 잘 수정해줘야 한다.

👨‍💻 Query Parameter

<form action="/restaurants" method="GET">
	<input type="hidden" value="<%= nextOrder %>" name="order">
	<button class="btn">Change Order</button>
</form>

이와 같이 html 코드에 버튼을 추가했다고 해보자.
버튼을 누르면 url 뒤에는

?order=nextOrder

이렇게 쿼리가 붙는다.(쿼리 매개변수는 항상 ?기호를 통해 "주 경로"와 분리됨)
이걸 이용해서 기능들을 만들 수 있는데, 저 버튼이 sorting을 오름차순 내림차순으로 정리하는 버튼이라면

restaurant.js에

router.get("/restaurants", function(req, res) { 
	let order = req.query.order;
	let nextOrder = "desc";
	
	if(order !== "asc" && order !== "desc") {
		order="asc";
	}
	
	if(order === "desc"){
		nextOrder="asc";
	}
	
	const storedRestaurants = resData.getStoredRestaurants();
	
	storedRestaurants.sort(function(resA, resB) {
		if((order === "asc" && resA.name > resB.name)||
		   (order === "desc" && resB.name > resA.name)){
			return 1;
		}
		return -1;
	});
	
	res.render("restaurants", {
		numberOfRestaurants: storedRestaurants.length, 
		restaurants : storedRestaurants,
		nextOrder: nextOrder
	})
} );

이런 식으로 해서

let order = req.query.order;

쿼리를 잡아서(?) 값을 가지고 기능들을 구현할 수 있다.

👨‍💻 느낀점

정말 구조화를 하니 깔끔해지는 것이 확연히 보인다.
물룬 모르는 사람들은 폴더와 파일이 늘어나는 것이 더 지저분해보일 수 있지만 폴더, 파일의 정체성와 역할을 강화시켜줌으로 더욱 보기 편하게 만드는 것이 확실히 느껴진다.
내가 혼자 프로젝트할 때도 이와 같이 깔끔하기를.. ㅎ