항해99 👩💻12일차 TIL
🎉오늘의 한 일🎉
1. 드디어 주특기 주차가 시작되었다! 😆 이번 새로운 팀에서는 내가 팀장이 되었다. 팀원분들과 으쌰으쌰하면서 다같이 개인과제를 잘 진행해나가야겠다 : ) 화이팅 !!!
2. 오늘은 Node.js 2주차 강의를 들으면서 다양한 개념에 대해 공부하였고, VScode에 환경설정을 했다.
🐣 Today I Learned 🐣
⭐HTTP의 이해
- 데이터를 주고받는 양식을 정의한 "통신 규약"중 하나가 HTTP이다 (통신 규약: Protocol).
- 매우 범용적인 양식을 가지고 있어 전 세계에서 제일 널리 쓰이는 통신 규약이다.
- 여기서 말하는 통신규약이란, 컴퓨터끼리 데이터를 주고 받을때 정해둔 약속을 의미한다.
- HTTP라는 통신 규약을 이용하여 서버나 클라이언트(브라우저)끼리 의사 소통을 할 수 있다.
- HTTP에서는 언제나 Request, Response라는 개념이 존재한다.
- 서버와 브라우저의 관계
1) 브라우저는 서버에게 자신이 원하는 페이지(URL등의 정보)를 요구(Request)한다.
2) 서버는 브라우저가 원하는 페이지가 있는지 확인하고, 있다면 해당 페이지에 대한 데이터를 싣어 반환(Response)해준다. 없다면 없는 페이지에 대한 데이터를 반환한다(일반적인 웹 서버 기준).
3) 브라우저는 서버에게 전달 받은 데이터를 기반으로 브라우저에 그려준다.
- HTTP의 구성요소
1) Method 설명
- GET : 이름 그대로 어떤 리소스를 "얻을 때" 사용된다. 브라우저는 기본적으로 사용자가 웹 서핑을 한다고 가정하므로 모든 요청은 "GET" 메서드를 사용해서 서버에 요처을 보낸다.
- POST : 웹 서버에 데이터를 "게시"할 때 사용하는 게 일반적이다.(ex : 회원가입, 게시글 작성, 댓글 작성)
2) Header 설명 (추가 데이터, 메타 데이터)
- 브라우저가 어떤 페이지를 원하는지
- 요청 받은 페이지를 찾았는지
- 성공적으로 찾았는지
이러한 사례 외에도 아주 다양한 의사 표현을 위한 데이터를 모두 Header필드에 넣고 주고 받는다.
3) Payload 설명 (데이터, 실질적인 데이터)
- 서버가 응답을 보낼 때에는 항상 Payload를 보낼 수 있다.
- 클라이언트(브라우저)가 요청을 할 때에도 Payload를 보낼 수 있다. 그리고 "Get method를 제외하곤 모두 Payload를 보낼 수 있다"는게 HTTP에서의 약속이다.
⭐ 웹 서버의 이해
1) 웹 서버란?
- 웹 서버는 인터넷을 통해 HTTP를 이용하여 웹상의 클라이언트의 요청을 응답해주는 통신을 하는 컴퓨터이다.
- 오늘날 우리가 자주 사용하는 이메일이나 웹사이트 등 대부분의 인터넷 사용은 웹서버를 통해 우리가 사용할 수 있게 되어있다.
2) 웹 서버의 기본 동작 원리
- 브라우저를 통해 HTTP request로 웹 사이트를 웹서버에 요청한다. 이후 웹서버는 요청을 승인하고 HTTP response를 통해 웹사이트 데이터를 브라우저에 전송한다. 마지막으로 브라우저는 서버에서 받아온 데이터를 이용해 웹사이트를 브라우저에 그려내는 일을 한다.
⭐ Express.js로 웹 서버의 이해
- Express란 Node.js로 서버를 빠르고 간편하게 만들 수 있게 도와주는 웹 프레임워크이다.
- 오늘날 가장 많은 Node.js 웹서버가 Express.js 프레임워크를 통해 개발되었다.
- Express.js는 웹서버 자체가 아닌 Node.js를 위한 웹 프레임워크로 웹 서버를 구현하기 위해 사용되는 것이다.
⭐ 미들웨어의 이해
1) 미들웨어의 기본 개념
- 웹 서버에서 요청을 받을때 가끔 모든 요청에 대해 공통적인 처리를 하고싶은 경우가 생길 수 있다. 이럴 때 미들웨어를 사용하여 웹 서버의 요청/응답에 대해 공통적으로 관리가 가능하다.
- 예를 들어, 모든 요청에 대해서 로그를 남겨 확인하고 싶은 경우나, 승인된 사용자만 API에 접근할 수 있게 만들고 싶을때도 사용될 수 있다.
- 이러한 기능적인 부분 외에도 아주 기본적인 미들웨어로, 브라우저가 보낸 데이터를 우리가 쉽게 사용할 수 있게 바꿔주는 미들웨어도 존재한다.
- 여러개의 미들웨어가 겹치는 경우, 첫번째 미들웨어부터 순차적으로 진입하게 된다.
# 미들웨어와 유사한 모듈이라는 개념을 가지고 있는 Apache, Nginx 라는 웹 서버가 있다.
보안 연결 방법인 HTTPS를 지원하기 위해서는 https 모듈을 추가하고, 모든 요청과 응답을 기록하고 싶다면 로깅을 해주는 모듈을 추가하면 된다.
# Express.js 에서의 미들웨어
app.use(express.urlencoded({ extended: false }));
app.use(express.json());
- urlencoded : form-urlencoded라는 규격의 body데이터를 손쉽게 코드에서 사용할 수 있게 해주는 미들웨어이다.
- json : JSON이라는 규격의 body데이터를 손쉽게 코드에서 사용할 수 있게 도와주는 미들웨어이다.
이 외에도 다양한 미들웨어가 존재한다.
# Express.js에서 미들웨어 작성해보기
app.use((req, res, next) => {
// 필요한 코드
});
위에 형태에서 req, res, next는 각자 역할을 지니고 있는 인자(Parameter)이다.
1) req : 요청에 대한 정보가 담겨있는 객체이다.
- HTTP Headers, Query Parameters, URL 등 브라우저가 서버로 보내는 정보들이 담겨있다.
2) res : 응답을 위한 기능이 제공된다.
- 어떤 HTTP Status Code로 응답 할지, 어떤 데이터 형식으로 응답 할지, 헤더는 어떤 값을 넣어 응답 할지 다양한 기능을 제공한다.
3) next : 다음 스택으로 정의된 미들웨어를 호출한다.
- 작성해주지 않으면 무한루프에 걸린다.
🍧느낀점🍧
다양한 개념들을 깊이있게 공부하면서 개발에 대한 이해의 폭을 넓혀나가자! 💪