- Firefox : text (원시형태)로도 볼수가 있다. 사실상 응답 시 그 원시형태의 text를 보내주는 것이다.
#2. 그 이후에 html/css/js를 작성해주는 형태이다.
브라우저 - 개발자 도구 - Network - Response 로 가보면, 작성된 html/css/js를 볼 수 있다!
브라우저는 이 response header를 먼저 읽고 --> 다음 response인 html/css/js를 해석해서 화면에 쏴주는 것이다.
** 동기 vs 비동기
여기서 교수님이 url로 요청하는 방법이 동기이고, 코드로 요청하는 방법이 비동기라고 했다.
들은 내용을 정리하자면,
url 요청/응답 : 화면에 렌더링 된 게 전부 바뀌는 경우이다. 응답 헤더부터 시작해서 실질적으로 화면에 보여지는 html/css(+js)파일까지 (처음부터 끝까지) 다 응답해주고, 브라우저가 그걸 차례대로 읽는 거다. 즉 동기적이다.
코드로 요청/응답 : 전체 화면이 다 바뀌는 게 아니라, 세부적인 요소들만 바꾸는 경우이다. (탭을 누르면 전체 화면,틀은 그대로 인데 그 안의 누른 세부 항목만 렌더링되는 것) 세부적인 요소만 바꾸는데 굳이 응답 헤더부터 시작해서 전체 문서를 다 요청하고 응답하는것이 비효율적이니, 코드를 쪼개서 세부적인 부분을 바꿔주는 방법을 쓴다고 하는데, 차례대로 코드가 읽어지는 게 아니므로 비동기적인 부분이라고 볼 수 있다. 이런게 바로 Ajax라는데 나중에 배울 것 같다.
세세하게 express의 코드를 들여다보자
1/ require() 메소드 와 객체 형태의 app
const express = require ('express')
// node_modules (npm install express하고 나서 생긴 directory, 이 안에 express가 설치되있다)
const app = express()
// express 함수를 담은 app이라는 변수가 궁금하니 console.log를 찍어보았다.
console.log(app) // 객체 형태로 출력된다. 안에 수많은 함수들이 들어가 있다.
// 즉, express를 만든 개발자가 객체 형태로 함수를 꽉꽉 담아둔거다.
require() 메소드 : 다른 파일에 있는 내용을 가져올 때 쓰는 함수라고 기억하자. (모듈을 가져오는 함수!)
2/ app 객체 안의 메소드를 써서 server를 구동시켜보자
1- app.listen(port#,콜백함수)
첫번째 인자 : port (숫자 3000 또는 8000)
두번째 인자 : 콜백함수 작성하기
app.listen(3000,()=>{
console.log('웹서버 두근두근')
})
여기까지 코드 작성 및 저장하고 나서 node server 를 치면, 콜백함수가 실행되고 (웹서버 두근두근)
경로를 치는 커맨드실행창이 안뜨고, 어딘가에 들어와 있다.
즉, listen() 메소드로 인해 한번 시작하면 꺼지지 않는 프로그램이 된거다.
웹 서버를 구동한다는 건 꺼지지 않는 프로그램을 만든다는 거다.
우리가 인터넷을 쓸 때 시간이 정해져있지 않듯이 웹서버는 항상 준비가 되어 있어야 한다.
근데, 여기서 우린 꺼지지 않는 프로그램만 만들었지 응답을 주는 코드는 없다!
응답을 주는 코드를 이제 만들어보자.
2- app.get()
html 배울 때 나왔던 form 태그에서 method의 속성값으로 get 또는 post를 본적이 있다!
