What is Node JS
NodeJs = 크롬 V8 자바스크립트 엔진으로 빌드 된 자바스크리트 런타임

브라우저 밖에서 돌아가는 자바스크립트

VSCode는 HTML, CSS, JS, NodeJS로 만들어짐

What is NPM
npm은 자바스크립트 언어를 위한 패키지 매니저입니다.
npm은 기본적으로 nodeJS와 같이 설치됨
npm을 사용하면 다른 누군가가 이미 만들어 높은 패키지를 가져다 쓰기 정말 쉽다.

Your First Node JS Project
Json: 프로그래머가 파일에 정보를 저장하기 위해 만든 방식 중 하나
nodeJS 프로젝트를 만들 때 가장 먼저 만들어야할 파일 -> package.json

git init
git remote add origin url
npm init

package.json이 만들어짐
main이 뭐냐면 프로젝트의 대표 파일이 뭔지 알려주는거임
index.js 만들기
2개의 파일만으로 프로젝트 시작함

Installing Express
우리가 만들고 배포한 package를 다른 사람들이 설치하면 main을 사용할거임
main 지우기

"scripts":{
"win": "node index.js"
},
추가
npm run win 하면
Hello NodeJs!

요점은 콘솔에서 너가 만든 scripts를 쓸 수 있음
우리가 실행하는 모든 명령어는 package.json이 있는 곳에서 실행해야함

npm i 설치하고 싶은 package이름
npm i express

node_modules에는 npm으로 설치한 모든 패키지가 저장될거임
dependencies는 express가 작동되려면 필요한 패키지들을 말함
express가 의존하고 있는 패키지들도 다른것들에 의존하기 때문에 많은 것들이 설치됨

package lock 뭐시기랑 modules 파일 삭제하기

Understanding Dependencies
npm i
npm은 똑똒해서 package.json안에 dependencies봐서 그 안에 있는 모듈들을 알아서 설치한거임 그래서 package.json이 중요하다는거임
우리 프로젝트를 동작시킬 때 필요한 모듈들이 어떤건지 정보를 담고 있어
node_modules 이런거 너무 heavy하니까 친구한테 보낼떄도 그냥 dependencies만 있다면 친구가 프로젝트를 열어서 npm i만하면 필요한 걸 다 설치해줌
project를 공유하고 싶으면 package.json과 index.js만 보내주면 됨

package-lock.json은 너의 패키지들을 안전하게 관리해줌
패키지가 수정 됐는지 해시값으로 체크해주고 정말 안전해

node_modules가 깃허브에 올라가지않게 숨길거임
.gitignore 파일 만들고 /node_modules

npm install을 할 때는 package.json을 꼭 닫고 실행하삼

<depencencies가 프로젝트를 구동시키는데 필요한 모듈이다-!>

The Tower of Babel
nodeJS는 우리가 작성한 자바스크립트를 이해할거임
아직 nodeJS가 이해하지 못하는 최신 JS 코드가 있음
babel is js compiler.
babel은 우리가 작성한 최신 js를 compile 해줄거임
우리가 작성한 최신 JS를 nodeJS가 이해할 수 있는 JS로 바꾸는거임

바벨 설치
nodeJS를 위한 babel을 사용해야함
npm install --save-dev @babel/core
package.json 파일은 그냥 txt 파일이기에 내용을 수정하고 저장해도 큰 문제가 안됨

dependencies는 프로젝트가 작동하기 위해 필요한 것들
devDependencies는 개발자에게 필요한 dependencies ex)nodemon

npm i @babel/preset-env --save-dev

preset은 babel을 위한 엄청 거대한 플러그인
우리가 사용할 건 최신 js를 쓸 수 있는 preset-env

Nodemon
npm i @babel/core @babel/node --save-dev

"dev": "babel-node index.js"를 package.json에

npm run dev

nodemon은 우리가 만든 파일이 수정되는 걸 감시해주는 패키지
파일이 수정되면 nodemon이 알아서 재시작 해줌
"dev": "nodemon --exec babel-node index.js"

babel 설정을 하기 위해 babel.config.json을 만들면 됨
nodeJS로 코드를 실행하지 않고, babel-node 사용
npm run dev를 매번 실행하고 싶지 않아서 nodemon을 설치함

Quiz
1.What is NodeJS? Is JavaScript outside of the browser.
2.JavaScript comes installed inside of the browser.
3.Before NodeJS where could we use JavaScript? On the frontend only.
4.NPM is installed along with NodeJS.
5.What is the purpose of NPM? We use it to share and download JS packages. NPM = Node Package Manager
6.Where do we put information about our NodeJS project?package.json
7.What does the npm init command do? It helps us create a package.json.
8.In the package.json the ‘author’ field is required for the project to run. No
9.In the package.json the ‘description’ field is required for the project to run. No.
10.What does the npm run hi command do? It runs the 'hi' script from package.json
11.npm i and npm install are the same command.
12.How can I install a package named ‘lodash’ from NPM into my project?
npm i lodash
13.What is the node_modules folder? Is where the downloaded packages will be saved.
14.The developer has to create the node_module folder manually. No.
15.What is a “dependency” on package.json? A package that our project needs to run.
16.Developers have to add dependencies manually to package.json. No.
17.After we do npm i express what will happen? 'express' will be downloaded to the node_modules folder.
18.What does npm i do compared to npm i express? "npm i" will download the "dependencies" and "devDependencies" in our package.json
19.Do we need to share the node_modules folder when working on a team? NO
20.Is it a good practice to upload the node_modules folder to Github.NO
21.What happens if we delete the node_modules folder accidentally? We can reinstall the packages using "npm i"
22.What does Babel do? It takes sexy code and turns it into compatible code.
23.What is the difference between devDependencies and dependencies? A devDependency is a package that our developer needs to code.
24.devDependencies and dependencies go to the node_modules folder.
25.How can we move a package from dependencies to devDependencies?
We can just cut + paste. package.json is just text.

Your First Server
1.express에서 express를 import 해와야함
import express from "express";

2.express application 만듦
const app = express();

서버는 항상 켜져있는 컴퓨터, request를 listening 하고 있음
만약 google.com을 간다면 지금 google.com에 request를 보낸거임
내 서버는 listening하고 있음

한마디로 서버는 24시간 내내 온라인에 연결된 컴퓨터
그리고 request를 listening하고 있음
google.com에 접속하기 위해 요청하면 이게 request.
카카오톡에 메시지를 보낸다 이것도 request
내가 서버에게 메시지를 보내면 서버는 나에게 응답을 보냄
서버와 상호작용을 하는 모든 일들. 서버는 그걸 listen
서버는 너의 행동을 listening하고 있어야됨.서버는 너를 기다리고 있음.

3.서버가 사람들이 뭔가를 요청할 때까지 기다리게 해야됨
app.listen()으로 말이지!
listen에 callback 있음

callback은 기본적으로 서버가 시작될 때 작동하는 함수
콜백하기 전에 서버에게 어떤 port를 listening할 지 얘기해 줘야함

port는 컴퓨터 문이나 인터넷 창 같은 것!

보통은 서버를 시작했다면 localhost를 통해서 접속할 수 있음
localhost:4000

const handleListening = () =>
console.log(Server listening on port http://localhost:${PORT} 🚀);

app.listen(PORT, handleListening); //외부 접속 listen
ctrl + c 하면 서버 죽음
서버 종료하면 localhost가 접속을 거부

가고자하는 문은 url을 통해 선택됨 이런 모든 문들을 routes라고 부름

Get REQUESTS
/ 서버의 root, 페이지
예를 들어 google.com에 접속한다면, google.com === google.com/
GET은 HTTP method.
HTTP는 우리가 서버와 소통하는 방법, 서버가 서로 소통하는 방법
많은 방법 중 하나지만, 가장 안정적이고, 오래되고, 처음 사용된 방식

유저들이 여기에 접속하려고 할 때, http request를 만들어 보내는 거임
사실 직접 만드는건 아니고, 브라우저가 대신해서 http request를 만들어줘
http request는 말하자만 웹사이트에 접속하고 서버에 정보를 보내는 방법

GET 방법은 GET THIS PAGE(페이지 가져와) 같은 의미
웹사이트에 접속할 때 너가 직접 접속하는게 아니라 웹사이트에게 '이봐~ 나한테 너네 홈페이지 갖다 줘!' 라고 얘기하는 거임
웹사이트가 너(브라우저)에게 오게 하는거
다시 말하면 웹사이트에 접속할 때 브라우저가 너를 어디론가 데려가는게 아님
브라우저는 너를 대신해서 웹사이트를 request하고 페이지를 가져다 주는거

get은 request의 여러 종류 중 하나
request: 유저가 뭔가를 요청하거나, 보내거나, 네게 무슨 행동을 한다, 그게 request
사용자가 원하는 걸 요청할 때, 사용자가 직접 GET REQUEST하는게 아님
브라우저가 get request를 보내는거
브라우저가 홈페이지를 request.

GET / -> 브라우저가 우리 서버의 ROOT로 get request를 보내고 있다

홈(root page)으로 get request를 보낸다면, 반응하는 callback을 추가할거임
app.get("/", () => console.log("Somebody is trying to go home."));

===

const handleHome = () => console.log("Somebody is trying to go home."));
app.get("/", handleHome); //express가 handleHome을 호출하는것

이제 서버는 get requests에 반응할 수 있다는 걸 알아 근데 계속 로딩만 ...

request는 뭐냐면, 브라우저가 '나 이 URL 좀 가져다줘'라고 하는거임
근데 응답은 안해주네,,

client에 브라우저가 있다고 생각하면 되나봄

Responses
Though setting up .get("URL", "GET handler function") will handle a Get request, it will not respond to a GET reqeust.
In order to make a server respond to a user's GET request, you need to modify the EventHandler function into an arrow function. Then, make the response argument .end() or .send() as below:
const handleHome = (req, res) => {
return res.send("I still love you.");
};
The first argument inside GET handler function is usually named "req," it takes in a request object.
The second argument is usually named "res," and it takes in a response object.
res.end() will end the response without returning anything; res.send() will return an input to the user's browser. For this particular example, the user will see a string "I still love you." on their browser when they request for a home ("/") URL page to a server.
express에는 두개의 object가 있음
request, response

request를 종료 시키는 방법들이 있는데 그 중 하나

const handleHome = (req, res) => {
    return res.end();
};

다른 방법

const handleHome = (req, res) => {
    return res.send("I still love you");
};

Recap
express에서 가장 중요한 부분은, 방금 본 application

-request
-response
-Router; handler로 url 정돈,

브라우저가 request하고 응답하는거임
응답해주지 않으면 브라우저는 계~~속 기다림

request 받으면 응답해야한다!

브라우저는 서버에게 페이지를 request하는거야
그럼 서버가 이 request를 받아들이고, 브라우저에게 그래 홈페이지를 가져가도 조아~ 하고 누군가 홈페이지에 오려고 하면 서버는 handleHome 함수를 실행시키는거임
근데 이 함수는 뭔가를 return 해줘야함. 브라우저가 뭔가를 요청했는데, 서버가 응답하지 않으면 브라우저는 계속 기다릴거임.

challenge
(1) import express from "express": Express 서버를 만들기 위해 express 모듈을 불러옵니다.

(2) const app = express()

express()로 익스프레스 어플리케이션을 생성합니다.
참고 링크
(3)

app.get("/", (req, res) => res.send("<h1>Home</h1>")): / url

로 get 요청(request)을 보내면, 그에 대한 응답으로 "

Home

"을 /로 보내어 HTML을 반환하는 GET 라우트입니다.

(3-1) app.get(path, callback)

GET 메서드는 콜백 함수를 사용하여 지정된 경로로 HTTP GET 요청을 보냅니다.
참고 링크
따라서 각각의 경로(/, /about, /contact, /login)를 지정하여 GET 라우트를 작성하면 됩니다.
(3-2) res.send()

HTML을 반환하기 위해, HTML을 보낼 수 있는 res.send() 응답 메서드를 사용합니다.
참고 링크
따라서 각각의 GET 라우트에 res.send(“

태그

”)
를 사용하여 HTML을 보내면 됩니다.
(4) 동일한 방법으로 나머지 라우트도 작성합니다.

app.get("/about", (req, res) => res.send("<h1>About</h1>"))
app.get("/contact", (req, res) => res.send("<h1>Contact</h1>"))
app.get("/login", (req, res) => res.send("<h1>Login</h1>"))

(5) app.listen(() => "Listening!✅")
app.listen()을 사용하여 express 서버를 시작합니다.
(참고) 보통 포트를 따로 설정하지만, 여기에서는 블루프린트로부터 임의의 미사용 포트를 할당받기 위해 포트를 생략했습니다. 참고 링크

우린 request를 받게 될거임. 브라우저가 requests를 보낼거고,
root page를 가져달라는 request를 받으면, 우리는 응답 해주는거임

이렇게 브라우저와의 상호작용

Middlewares
middleware

브라우저가 뭔가를 request하면, 서버는 거기에 응답해준다.
middleware는 requset와 response 사이에 있음.
브라우저가 request한 다음, 그리고 너가 응답하기 전. 그 사이 middleware 존재
모든 middleware는 handler고, handler는 middleware임.
handler 대신 controller라고 할게 즉 모든 controller은 middleware
원래 controller에는 두개의 argument 말고 하나 더 있음
next!
next argument는 몰까? next는 다음 함수를 호출해줘
모든 controller가 middleware가 될 수 있다!

get은 path를 필요로 함, path는 URL이고

handler에는 다수의 handler를 사용할 수 있음
middleware는 request에 응답하지 않음 request를 지속시키는 것일뿐
middleware는 작업을 다음함수에게 넘기는 함수임. 응답하는 함수가 아님
middleware는 필요한 만큼 만들 수 있음

app.use는 global middleware를 만들 수 있게 해줌 = app 전체에 어떤 url에서도 사용할 수 있도록 할 수 있음
모든 route에서 이 함수를 사용하는거임
모든 handler, 구성요소들에는 req,res,next가 있음

app.get("/", logger, handleHome);
middleware는 왼쪽에서 오른쪽으로 실행됨
먼저 route가 있고, 첫 번째 함수가 실행되고, 만약 이 logger가 next()를 호출하면(응답하기시러), 다음은 handleHome이 실행됨
응답하면(return) next()는 실행되지않는거지 ㅇㅇ !
관습적으로 응답을 해주는 마지막 controller에는 next를 안 씀

Recap
package.json은 node.js 관련 정보를 담는 방법
그냥 text기 때문에 뭘 넣어도 상관없음
왜 port를 쓰는가? 서버는 네 컴퓨터 전체를 listen 할 수 없기 때문이다!

서버가 건물이야. 가고자하는 문은 url을 통해 선택됨

express() 첫 번째 인수는 request object로 기본 설정되어있고 두번째는 response object.

컨트롤러는 전달받은 request를 처리하고 response를 전달하기 위한 콜백함수이다.

app.get("/", methodLogger, routerLogger, home);
app.get("/login", methodLogger, routerLogger, login);

굳이 이렇게 써?
app.use(methodLogger, routerLogger);
app.get("/", home);
app.get("/login", login);

순서 중요! 연결은 위에서 아래로 가고,

미들웨어 4개를 만드세요.

URL Logger: 이 미들웨어는 방문 중인 URL을 기록(log) 해야 합니다.

Time Logger: 이 미들웨어는 요청(request)의 년, 월, 일을 기록해야 합니다.

Security Logger: 이 미들웨어는 프로토콜이 https이면 secure이라고 기록하고, 그 외의 경우 insecure라고 기록해야 합니다.

Protector Middleware: 이 미들웨어는 사용자가 /protected로 이동하려고 할 경우 이동하지 못하도록 해야 합니다.

import express from "express";

const app = express();

const URLLogger = (req, res, next) => {
  console.log("Path: ", req.path);
  next();
};

const timeLogger = (req, res, next) => {
  const now = new Date();
  console.log(
    `Time: ${now.getFullYear()}.${now.getMonth() + 1}.${now.getDate()}`
  );
  next();
};

const protectorLogger = (req, res, next) => {
  if (req.path === "/protected") {
    return res.send("<h1>Error</h1>");
  }
  next();
};

const secureLogger = (req, res, next) => {
  if (req.protocol === "https") {
    console.log("Secure");
  } else {
    console.log("Insecure");
  }
  next();
};

app.use(URLLogger, timeLogger, secureLogger, protectorLogger);
app.get("/", (req, res) => res.send("<h1>Home!</h1>"));
app.get("/protected", (req, res) => res.send("<h1>Protected</h1>"));

app.listen(() => `Listening!✅`);

참고 https://velog.io/@aubepluieh3/Youtube-Clone