👨‍💻 npm 정리

• npm init -> package.json 생성
• npm install express -> express 설치(서버 구축을 간단하게 도와줌)
• npm install nodemon -> 파일에 내용이 변경되면 자동으로 서버를 재시작 해줌
  package.json 파일에서 "scripts" 부분에서 test .. 내용은 필요없으니 제거하고

  "start": "nodemon app.js"

  를 넣으면 터미널에서

  npm start

  를 치는걸로 app.js를 노드몬으로 실행이 가능하다.
  

👨‍💻 express 정리

	const express = require('express');

	const app = express();

	app.get("/", function(req, res) {
	res.send("<h1>Hello World</h1>")
	})

	app.listen(3000);

저번 강의에서는 이제 send를 통해서 html코드를 직접 써서 보내는 비효율적인 방법을 사용했는데 이제는

	app.get("/", function(req, res) {
	const htmlFilePath = path.join(__dirname, "views", "index.html");
	res.sendFile(htmlFilePath);
	})

	app.get('/restaurants', function(req, res) {
	const htmlFilePath = path.join(__dirname, "views", "restaurants.html");
	res.sendFile(htmlFilePath);} )

직접 파일을 보내는 형식, views 폴더의 restaurant.html 파일을 직접 보내는 형식으로 교체했다.

	<a href="restaurants.html">
   	    <a href="/restaurants">

원래는 위의 것에서 밑의 것의 형식들로 바꿔줬는데, 이러면 절대경로를 생성한다. 즉 원래 도메인 뒤에 href를 삽입하고 이동하는 것이다. 원래 있던 홈페이지가 domain 뒤에 다른 라우터가 삽입되어 있더라도 그 라우터를 빼고 href를 삽입하고 이동한다.

지금까지는 website에서 오는 요청을 처리하는 GET이었다면 이제는 서버쪽으로 보내는 정보를 처리하는 POST를 알아보자

app.use(express.urlencoded({extended: false}));

css,js 파일을 부르는 요청 처리처럼 web에서 오는 정보들에 접근하기 위해 위의 코드를 작성해준다.

app.post("/recommend", function(req, res) {
	const restaurant = req.body; //object save
	const filePath = path.join(__dirname, "data", "restaurants.json");
	
	const fileData = fs.readFileSync(filePath);
	const storedRestaurants = JSON.parse(fileData);
	
	storedRestaurants.push(restaurant);
	
	fs.writeFileSync(filePath, JSON.stringify((storedRestaurants)));
	
	res.redirect("/confirm");
	
});

그리고 recommend에서 정보가 왔을 때(식당 관련 정보 객체가 올 예정) 변수에 저장하고 data 폴더에 있는 'restaurants.json'파일에 저장하는 형식으로 코드를 짜고 website에서는 /confirm 페이지로 넘어가도록 했다.
여기서 중요한게 이게 html의 form에서 오는 정보들일텐데, html의 form에

<form action="/recommend" method="POST">

와 같이 연결(?) 작업을 꼭 해주고 또한 restaurants.json 파일에 빈 대괄호 [] 적어놓는 것도 잊지 않아야 한다.

👨‍💻 문제

강의에서 npm install을 치면 node_modules과 package-lock.json 파일이 생성된다고 하는데 나는 package-lock.json만 생성이 된다.

=> npm install 이란??

2가지로 나누어 볼 수 있다.

1. 패키지 명을 명시해 특정 패키지를 설치하는 동작
   npm intall express
   npm install nodemon

과 같이 특정 패키지명을 명시해서 특정 패키지를 설치할 수 있다.

2. "package.json"파일에 의존하여 설치
   package.json 파일에서 어떤 패키지를 설치하여 하여하는지 확인하고 설치하는 것

강의에서는 npm install을 사용했기에 2번 케이스에 해당될텐데 그러면 내가 package.json파일을 제대로 안가져왔을 가능성이 있다.

그럼에도 오류가 떴다. 강의를 보니 package.json파일이 밖에 나와있던데 나는 폴더 안에 집어넣어놓은게 오류의 원인이었다. 해결:)

goorm ide의 Node.js 컨테이너에서 작업을 하고 있는데, 그 안에서는 html 파일이 안열린다....

아무래도 구름에서는 node.js랑 html/css/js랑 스택이 다르니까 그런 것 같은데.. 음 내가 모르는게 있는 걸까 아님 구름ide의 한계일까?

강의에서는 live-server를 통해서 html을 여는 것 같아서 npm을 통해서 live-server를 설치했다.

npm install -g live-server

로 처음에 설치할려고 했는데, 이렇게 하니까 'deprecated'라고 뜨면서 package.json 파일에 추가가 되지 않아서

npm i live-server

로 설치하니까 똑같이 'deprecated' 뜨기는 했는데 결과적으로 package.json 파일에 추가가 되었다.

그 이후 index.html의 디렉토리로 이동해서 터미널에서

live-sever

를 입력하여 http://127.0.0.1:8080 라는 사이트를 받아서 들어갔지만 또 안된다... 하하하하하핳ㅎㅎㅎ

서버의 호스팅 설정이 localhost 또는 127.0.0.1 이라면 0.0.0.0 으로 수정해보세요.
라고 구름에 나와있기는 한데.. 애초에 node.js 컨테이너여서 호스팅 설정이 아니라 그냥 포트 설정만 할 수 있지 않나 싶긴한데.. 하핳

우선 live-server로 여는 방식이 쉽지 않을 것 같아서 나의 스승님 Mr.gpt께 조언을 구했다.

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
// 클라이언트에게 index.html 파일 제공
res.sendFile(__dirname + '/frontend-site/index.html');
});

app.listen(port, () => {
console.log(Server is listening at http://localhost:${port});
});

js 파일에서 서버를 만들고 서버에서 html을 여는 방식인데 ... 된다! 근데 css,js 다 날라가고 html만 켜진다!....

웹사이트에서 f12를 누르고 확인을 해보니 뭐

'Refused to apply style from because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.'

이런식으로 떠서 확인해보니 경로문제니 경로 앞에 /를 붙여야 하니 이런 것들을 해봤는데도 안돼서 이건 버리기로 강의가 더 중요하니까:)

강의에서 알려줬다. 하핳핳하
원래 html을 부르고 html에서 다시 css, javascript, img 등의 파일을 다시 요청(부르는)하는 형태이다.
그런데 app.js(서버 코드 적어논 파일)에 이런 요청을 다루는 라우트에 대한 코드가 전혀 없기 때문이다.
이에 대한 해결책으로는 html,css,js,img 코드가 dynamic이 아니라 static이라는 가정하에 app.js에

app.use(express.static("public"));

이 코드를 추가함으로서 가능하다. public이라는 폴더(이름 마음대로 해도 ㄱㅊ)에 css,js,img와 같이 html을 로드했을 때 추가적인 요청을 보낼 파일들을 모아놓고 위의 코드를 추가하면
public의 파일을 달라는 요청을 했을 때, static이면 제공을 해준다.

👨‍💻 느낀점

요즘 좀 나태해진 것 같고 집중도 잘 안됐다. 근데 글로 정리하면서 개발하면 집중이 잘되기에 앞으로는 매일 글 한 개씩을 쓰는 걸 목표로 하는게 어떤가 싶다.(물룬 휴가 제외:)
오늘 html 로드하는 문제로 많은 시간을 써서 진도를 많이 못나간게 아쉽긴 하지만 개발이 됬든 뭐가 됬는 배움에 있어서 어려운 문제, 안되는 문제를 붙잡고 늘어지는 것도 필요하다고 생각하기에 오늘 공부에 만족한다. 내일도 글이 올라오기를...