1️⃣ 클라이언트와 서버
1. 네트워크 개요
Info: 💼
네트워크=> 컴퓨터와 컴퓨터간의 연결
네이버에 접속하면 뉴스와 쇼핑, 이메일등의 각종 편의 서비스를 이용할수 이유는 내 컴퓨터나 휴대폰이 네이버 회사의 컴퓨터와 네트워크로 연결되어 있기 때문이다
2. 클라이언트와 서버
네트워크로 연결된 컴퓨터는 크게 두개로 나눌수 있다.
정보를 요청해서 받는 ⇒ 클라이언트(Client)
정보를 제공해 주는 ⇒ 서버(Server)
보통 우리가 사용하는 웹, 앱은 클라이언트이고, 뉴스, 쇼핑, 상품등의 정보를 전달해주는 쪽은 서버가 된다.
우리가 사용하는 웹(앱) 서비스는 여러 서버들과 통신하고 있다.
- 웹에 접속한다는 것은
웹 서버의 웹문서(HTML,CSS,JS)를 다운 받은것. - 웹에서 보는 이미지들은
파일 서버에서 이미지를 다운받은 것. - 웹에서 로그인을 할 때는 로그인을 돕는
인증 서버와 통신을 한 것. - 앱에서 상품 정보들을 불러올 때는 상품 정보를 제공하는
API 서버와 통신을 한 것.
3. 서버의 기본 구조
우리가 사용하는 모든 프로그램은 OS(운영체제)의 관리 하에 돌아간다.
그리고 프로그램은 개발자가 개발한 결과물이다.
서버라고 부르는 것은 서버 전용 프로그램이 실행되고 있는 또 다른 컴퓨터 이고서버 전용 프로그램을 개발하는 건 백엔드 개발자의 영역 이다.
하지만 요즘 Node.js 를 사용한 서버 개발도 가능하므로 프론트엔드의 개발 지식으로도 서버개발을 할수 있다
2️⃣HTTP 통신 이해
🔗프론트엔드 개발자가 알아야하는 HTTP 프로토콜 Part 1
1. HTTP 통신이란?
- 통신프로토콜 → 네트워크 통신 시 사용하는 다양한 방식/규칙
- 통신프로토콜 종류→메일을 주고 받을 때 사용하는 SMTP, 파일을 전송할 때 사용하는 FTP …
- 그중 HTTP 는 웹 브라우저가 웹 서버와 통신을 하기 위해 생긴것.
Info: 💡 HTTP 프로토콜 통신⇒ HTTP 통신
HTTP 통신은 크게 요청(request)과 응답(response)으로 나뉨.
요청과 응답의 공통적으로 아래의 구조를 가진다
요청 라인에 URL, Method 같은 핵심 요청 정보 포함. (요청/응답 메세지 내용에 따라 정보 상이 )Header에 HTTP 관련 설정 값 포함.Body에는 통신에 필요한 데이터가 포함(옵션)
2. HTTP 요청(Request)
🐦 HTTP 통신으로 서버에게 정보 요청시 규칙
- 어떤 서버에게 요청할 것인지
URL이 있어야 한다. (요청 라인) - 어떤 방식으로 통신을 할 것인지
Method가 있어야 한다 (요청 라인)
2-1. HTTP Method
클라이언트가 서버에 HTTP 요청(Request) 시 URL 과 HTTP Method 를 지정해야 한다.
HTTP Method에 따라 서버는 어떤 요청인지를 파악할 수 있다.
많이 사용하는 Method 로는 GET, POST,PUT , DELETE … 이 있다. 🔗더알아보기
GET, POST에 대해 알아보자
Info: 💡 같은 URL 로 서버에 요청해도 method가 다르면 다른 요청으로 인식
GET 정보를 받아올 때 사용
HTTP 요청시 method를 설정하지 않으면 기본 메소드 ⇒ GET
일반적으로 서버에서 웹을 다운받을 때 GET을 사용
- 웹 서버에서 웹을 다운받을 때
- 내 상품 정보들을 받아올 때
POST 새로운 자원 생성시 사용
- 로그인을 할 때 아이디, 패스워드를 담아야 함
- 아티클을 만들 때 입력한 아티클 정보를 담아야 함
Info: 💡 GET은 정보를 읽는
READ, POST는 정보를 작성하는WRITE로 볼 수 있다.다만 서버 개발자가 어떻게 코드를 짜냐에 따라 조금씩 달라질 수도 있다.
2-2 HTTP 요청에 정보 담기
⚠ 클라이언트가 HTTP 요청을 할 때 정보를 담아야 하는 경우가 있다.
- 회원가입시 입력한 회원 정보를 서버에 전송해야 할 때
- 상품 등록시 상품 정보를 서버에 전송해야 할 때
- 로그인 시 아이디,패스워드 담아서 전송해야 할 떄
이때 Request method 에 따라 정보를 담는 방식이 다르다
[GET]
Info: 📖 www.example-url.com/resources?name1=value1&name2=value2
GET은 요청을 전송할 때 필요한 데이터를 Body에 담지 않고, 쿼리 query를 통해 전송
query는 key = value 형태
- GET 요청은 캐시가 가능하다.
- : GET을 통해 서버에 리소스를 요청할 때 웹 캐시가 요청을 가로채 서버로부터 리소스를 다시 다운로드하는 대신 리소스의 복사본을 반환한다. HTTP 헤더에서 cache-control 헤더를 통해 캐시 옵션을 지정할 수 있다.
- GET 요청은 브라우저 히스토리에 남는다.
- GET 요청은 길이 제한이 있다.
- GET 요청은 중요한 정보를 다루면 안된다. (보안)
Info: 💡 POST도 URL 뒤에 query를 붙일 수 있다.
[POST]
POST 메소드의 경우 HTTP의 Body 부분에 데이터를 담을 수 있다.
Body는 HTTP 통신에 구조적으로 데이터를 담아서 전송할 수 있게 도와준다.
주로 로그인, 상품 업로드, 결제하기 등 클라이언트의 정보를 담아서 전송시 사용됨
- POST 요청은 캐시되지 않는다.
- POST 요청은 브라우저 히스토리에 남지 않는다.
- POST 요청은 데이터 길이에 제한이 없다.
Info: 💡 GET은 Body에 데이터를 담을 수 없다.
3️⃣ HTTP 응답(Response)
서버는 HTTP 요청을 받으면 답변을 한다.
이때 HTTP 응답의 규칙으로
- 응답이 어떤 상태인지를 나타내는
Status Code가 있다 (요청 라인)
- 요청 결과를
Body에 담아야 한다.
Info: 📖
Status Code
200~ 500 번까지 있으며 서버의 응답을 의미
🔗MDN 문서
응답코드분류
200번대는 정상적으로 응답을 했을 때,400번대는 클라이언트가 요청을 잘못했을 때,500번대는 서버에서 에러가 발생했을 때
대표응답코드
- 200 : 정상적으로 응답이 됐다.
- 404 : 해당 URL 요청을 처리할 수 없다.
- 500 : 서버에서 알 수 없는 에러가 발생했다.