[220128] express 모듈로 서버 시작하기, 요청헤더, 응답헤더, form과 연결하기

목록

1.   헤더란?

2.   서버시작하기

3.   요청헤더 (express 모듈 : get, post)

4.   응답헤더 (express 모듈 : send, render)

5.   form과 연결하기

 

 

---

1.   헤더란?   :   긴 텍스트로 이루어진 요청헤더, 응답헤더

브라우저가 해당 서버에 대한 htto://localhost:3000을 입력하게되면 요청을 하게된다.

'/' : 현재 연결되어있는 호스트. 아무것도 적어놓지 않았기때문에 기본(홈)주소를 뜻함

app.get('/',(req,res)=>{
	res.send(`hello world`)
}

요청을 하는 data(긴 텍스트 정보들)는 연결되어 있는 파일로 넘어오고, request가 get인 이 코드가 받게된다.

 네트워크에 접속하고 개발자도구에 들어가면 다음과 같은 값을 볼 수 있다. (맥 단축키 : command+option+c)

위에서 말했던 것처럼 요청헤더와 응답헤더 둘 다 기이이이인 정보값임을 알 수 있다.

 

 

---

 

 

2.   서버 시작하기   :   브라우저가 요청을 시작함

node server를 실행 후, 브라우저를 켜서 http://localhost:3000을 입력하는 순간, 웹서버가 반응해서 내용을 보냄.

요청헤드를 express에게 가져다 주는 것. -> express야 이거(요청헤드) 해석 해줘

항상 먼저 브라우저가 요청함. 그 후에 웹서버가 응답을 줌.

이 실행흐름이 바로 http

• http 특징 : 항상, 요청을 준 곳에 응답을 줌. 한번의 요청에는 한번의 응답을 함.
• http를 통제하는 방법 : 요청헤더, 응답헤더같은 텍스트파일을 준다.

그 후로 로컬주소와 연결된 콜백함수가 실행된다.

요청한 정보는 콜백 함수 안에 있는 req에 내용을 받아서 처리를 하게 된다.

 

 

 

---

 

 

이런 내용을 처리하기위해 설치했던 웹 프레임워크 express를 사용해보자!

express 모듈   :   get이 요청헤더를 구분하는 방법

<!-- 요청 헤더 -->
<!-- http 통신 규격 -->
GET / HTTP/1.1

Host: localhost:3000
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:96.0) Gecko/20100101 Firefox/96.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8
Accept-Language: ko-KR,ko;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Sec-Fetch-Dest: document
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: none
Sec-Fetch-User: ?1

 

1. 첫번째 줄에 있는 request가 get으로 자신과 같은가?
2. 그 뒤에 나오는 주소가 '/'로 자신과 같은가?

이 두 조건이 성립한다면 익명함수를 실행한다.

 

url을 입력하면 기본적으로 get이 request method로 설정이 되어있다.

또한 url의 queryString에 정보를 표시한다.

변수 name을 추가한 js / url에 정보를 입력한 브라우저

/?name=ingoo라고 적었을때 터미널에 나타나는 get

 

 

 

express 모듈   :   post와 get의 차이점

<!-- 요청 헤더 -->
<!-- http 통신 규격 -->
POST / HTTP/1.1

post 또한 get처럼 요청헤더에서 post가 적혀있을때 실행한다.

대신 요청내용이 url에 나타는 get과 다르게 post는 보이지 않는 부분에 있다.

요청헤더 밑에 요청내용이 한 줄 띄우고 작성되어 있는데 이 특징때문에 요청body라고 부른다.

 

이런 특징때문에 get과 post에서 요청 내용을 가져오는 방법이 다르다.

• get요청에서 정보를 받아올때는 req.query
• post요청에서 정보를 받아올때는 req.body

왜 다르게 받아올까?

post는 get과 다르게 queryString 형태를 받아들이지 못하기 때문이다.

따라서 다른 형태로 받아야하는데 그러기 위해서 다음 코드를 사용해야한다.

app.use(express.urlencoded({extended:true,}))

 

보통 post와 get의 능력은 크게 차이가 없지만 사용 용도에 따라서 암묵적으로 나눠서 사용하고 있다.

get : 보여지는 화면이 필요할때.

post : 가진 내용을 웹서버(vc)에게 전달해야할때.

 

 

 

 

---

 

 

웹서버가 응답하기

응답 : http가 요청을 하며 줬던 data(긴 텍스트 정보들)를 다시 data(긴 텍스트 정보들)로 돌려주는 행위

그 긴 텍스트 정보들 중 하나는, http의 body를 꾸며줄 내용이 속해있다.

그게 바로 위 코드블럭에서 봤던 이 코드다.

res의 여러 메소드 중 send, json, render 메소드들 중에서 눈으로 볼 수 있는 send, render 만 아마 다룰 예정이다.

res.send(`hello world`)

 

 

 

express 모듈인 send : 텍스트 자체를 응답으로 주는 행위

app.get('/',(req,res)=>{
	console.log(`요청 들어왔다!`)
}


app.listen(3000,()=>{
    console.log('hello server')
})

로컬주소로 접속할때마다 요청 들어왔다!를 띄운다.

 

 

 

express 모듈인 render : 특정 파일을 렌더링해줌

send가 작성한 그대로를 페이지에 보여준다면, render는 가지고 있는 파일을 렌더링해서 페이지에 보여준다.

그리고 render는 인자값을 2개 가질 수 있다.

• 첫번째는 렌더링할 파일을 넣는 공간
• 두번째는 응답해서 보내주는 값에 같이 넣어주는 값.

보통 두번째 인자에는 값을 여러개 보낼 수 있도록 군집형데이터(배열, 객체)를 넣을 수 있다.

res.render('board_list',{
    //응답해서 보내주는 값에다가 넣는값.
    //nunjuck를 통해서 파일간 서로 연결이 가능해졌다. 변수 공유 가능.
    list:list,
})

 

 

브라우저에게 반환하는 응답헤더

<!-- 응답헤더 -->
HTTP/1.1 200 OK

X-Powered-By: Express <!-- 이걸 만든건 express야 -->
Content-Type: text/html; charset=utf-8
Content-Length: 19
ETag: W/"13-wIMpp5fVpvaOHHIvhoFHnSi2F28"
Date: Thu, 03 Feb 2022 04:31:29 GMT
Connection: keep-alive
Keep-Alive: timeout=5

응답 인자 빼먹지 말기
<!-- 응답바디 -->

res.send를 실행하면 응답헤더를 브라우저에게 반환해준다

여기서도 첫 줄이 중요하다. 웹통신망 노드는 HTTP/1.1이고, 응답코드는 200이다. 

응답바디만 잘라내서 렌더 후, html의 body 영역을 만드는데 사용하게 된다.

 

 

응답 body

응답헤더의 가장 마지막 코드에서 한 줄 띄고 작성한 텍스트가 바로 응답바디다.

 

 

 

 

응답코드를 작성하지 않으면 생기는 일

app.get('/board',(req,res)=>{  })

계속 응답을 기다리는 표시가 뜬다.

/borad라는 주소값에 응답할 요소를 넣지 않았기 때문에 에러가 난다. 응답코드를 반드시 적자.

 

 

---

 

 

form 내용을 전송하기

여기서부터 form을 자주 사용한다. form에 대한 html 설명글은 아래 글에 정리해놓았다.

https://hancoco.tistory.com/11

[211229] url, uri, form

 

 

<form method="get" action="/board">
    <input type="text" name="page">
    <input type="submit" value="전송">
</form>

form 안에 있는 input박스를 작성하고 submit 버튼을 누른다.

input박스 안에 작성된 내용을 가지고, 요청을 get으로 인식한 후, /board로 보낸다.(/board 공간으로 요청을 보낸다)

요청한다는것 = url이 바뀐다는 것 = 내가 요청한 도메인으로 바뀐다는 것

 

hi를 누르고 전송버튼을 누르면 페이지가 바뀌면서, url 주소가 바뀐다. (브라우저가 만들어준것.)

 

 

<form method="get" action="/board">
    <input type="text" name="page">
    <input type="submit" value="전송">
</form>

아까 작성했던 코드를 기억하자.

form이 작동되면서 /board로 이동하고, 텍스트를 작성하는 input박스의 name이 page였다.

그 input박스에 hi라고 적은 결과를 브라우저가 url에 붙여서 나타낸것.

저 부분만 잘라서 출력하려면 이 코드를 사용하면 된다.

console.log(req.query)