Node.js / 웹브라우저 ? 섹션2 지금까지 FLOW정리 : 동작원리!!!

자바스크립트? 그냥 언어 글..

근데 그 글을 뭔가가 해석을 하고 그 글에서 원하는데로 실행이 되야함

언어 해석 ?  => 웹브라우저 / 노드 두가지로 볼수있다. <= 그래서 얘네 둘은 자바스크립트 런타임

런타임: 언어가 (지금같은 경우에는 자바스크립트가) 실행할수 있는 환경

 

근데.

웹브라우저와 노드. 역할이 다름.

 

브라우저의 역할 : 웹에 존재하는 리소스를 유저들에게 보유주기 위해서 작동 (거기에 필수로 필요한거는 HTML과 CSS 그리고 동적으로 만들기 위한 javascript ) 

그래서 브라우저는 html 을 해석해서 틀을 만들고, CSS 로 옷을 입히고 자바스크립트로 움직임을 만드는거

 

근데 잘 생각해보면 우리가 보는 웹페이지는 여러가지 데이터가 필요

 

예를 들어서 내가 유투브를 접속하면 수 많은 비디오와 해당 비디오에 대한 데이터가 다 있어야지만 그거를 화면에 표시 할 수 있다.

 

 데이터를 어디서 가지고 오냐 => 서버

 

서버에다가 리소스 (데이터)를 요청할때 여러가지 방식으로 요청을 할수 있다.

 

가장 대표적으로 http (요즘은 거의 https) 를 사용해서 요청

 

https://domain.com/resource/id 이런 형식에 맞춰서 데이터를 주는 방식을 REST API 

 

지금 말한 서버 같은 경우에는 여러가지 언어로 만들 수 있다. (파이썬, 자바, 고 언어, RUST, php, 루비, C++, 기타 등등)

여기에 자바스크립트로 서버를 만들수도 있는거

 

서버를 만들기 위해서는 browser를 사용할수 없다, 왜냐면 애초에 서버를 만들기 위해 존재하는 런타임이 아니니까

 

서버를 만들기 위해서는 nodeJS 라는 런타임을 사용

 

nodeJS 는 런타임 내가 코드를 짜서 실행을 시킬때  코드에 맞춰서 동작을 해주는거고

vscode 는 그냥 코드짜는 노트 text editior

 

종이에다가 연필로 글을 써서 나한테 읽으라고 시키면

종이가 연필과 종이가 vscode 인거고 내가 노드

 

그래서.

섹션1 때 배웠던 것들은 웹브라우저를 통해서 실행시켰던거(읽어서 보여줘~)

 

FLOW

 

vscode로 javascript 코드를 짠다 -> 파일명.js 로 저장한다 -> 터미널에서 node 파일명.js 라는 명령어로 파일을 실행 시키다

이렇게 하면 node 는 파일명.js 라는 파일을 읽고 시키는데로 동작 하는거

 

만약에 그 파일 안에 http 요청을 열심히 듣고 답해주라는 코드가 있으면 서버가 되는거고

만약에 파일안에 console.log("hi") 이런 코드 한줄 달랑 있으면 그냥 hi 한번 출력하고 끝나는거

여기서 조금더 심화돼서 들어가면 express 는 무엇인가?를 이해해야되는데  노드 자체로 이미 서버를 만들수 있다.

근데 복잡하고 코드도 많이 써야되고 그거를 쉽게 이쁘게 포장해서 사용할수 있게 만들어주는게 express

 

express 같은 경우는 node 라는 런타임에서 직접 지원하는 기능이 아니다.(네이티브 기능이 아님)

그래서 외부에서 다운 받아서 사용해야되는데 그게 바로 npm install

 

내가 브라우저에서 https://google.com 하면 그게 결국 https://google.com 에다가 GET 요청을 보내는거 그러면 google.com 이라는 주소에 있는 서버가 열심히 요청을 듣고 css 파일 html 파일 그리고 js 파일(들)으 보내줌 그러면 그거를 브라우저가 받아서 해석해서 화면에 표시

 

스프린트도 그런식으로 동작하는건데 google 같은 경우는 서버가 어디 멀리 있음 뭐 어디 미국일수도 있고 한국 어디 지하일수도 있고

근데 지금 내가 하는 스프린트는 나만 보면 되니까 내 컴퓨터에다가 서버를 하나 만들어주고 브라우저에서 내 컴퓨터에 있는 서버로 요청을 하는거 <= 브라우저가 노드에다가 요청을 하는거(브라우저는 항상 클라이언트.)서버는 서버가 될수도 있고 클라이언트도 될수 있다.

 

브라우저 작동원리. 자기전 읽고자기 !!!

 

https://bbangson.tistory.com/87

[CS] 웹 브라우저는 어떻게 작동하는가?