클라이언트, 서버, API, HTTP, REST 등..

 

 

안녕하세요 AT SOPT 웹 YB 김시연입니다!

왕초보여서 과제를 아직 다 못하고 아티클부터 씁니다.....

과제 너무 어려워요 난 바보..

 

 

세미나 복습하면서 제가 참 기초적인 것도 모르는구나..라는 생각이 많이 들더라고요.

특히 이번 아티클을 통해 정리하고 싶은 게! 바로 API입니다...

 

진짜 많이 들어보기는 했거든요 API?

뭐 카카오 지도 API, 카카오톡 로그인 API 등...

API 완성됐나요~? 머 이런 얘기하는 것도 들어보고

 

그래서 저는 단순히 아~ 기능을 얘기하나보다! 라고 생각했는데

찾아보니 단순한 의미는 또 아닌 것 같더라고요,,?

 

아무튼! 서론이 길었습니다,, 제가 정리하고 싶은 여러 용어를 이번에 정리해보려고요.

특히 저처럼 바보인 사람도 이해하기 쉽게요!!!

 

 

먼저 웹의 기본인 .. 클라이언트와 서버 다들 알고 계신가요?

많이들 알고 있을 듯

전 사실 잘 몰랐어요 ㅎ,,,

대강 위에 그림처럼 클라이언트가 서버에 요청 보내면 서버가 응답해서 정보를 보여준다! 뭐 이 정도..

다시 한번 짚고 넘어가자면~

 

클라이언트(Client)

• 클라이언트는 서버의 서비스를 받아 사용하는 장치, 프로그램을 말합니다.

뭔가 필요해서 요청하는 쪽이 클라이언트!

 

클라이언트는 서버에서 받은 서비스를 사용하는 사용자로, 크게 장치 또는 프로그램이 될 수 있습니다.

클라이언트 장치는 최종 사용자가 웹에 사용하는데 사용하는 시스템으로, 데스크톱, 노트북, 태블릿 등을 예로 들 수 있습니다.

클라이언트 프로그램은 사용자가 웹을 통해 요청할 수 있게 해주는 프로그램으로 웹 브라우저를 예로 들 수 있습니다.

 

 

서버(Server)

• 서버는 네트워크를 통해 클라이언트에게 서비스를 제공하는 시스템입니다.

요청 받고 필요한 걸 제공하는 쪽!

 

서버는 일반적으로 클라이언트의 요청에 응답해주는 시스템으로, 무엇을 제공해 주는 입장이라고 생각하면 됩니다.

컴퓨터를 할 때 클라이언트는 웹 브라우저를 통해 정보를 보게 되는데, 이때 보는 정보가 서버에서부터 받은 것이죠!

 

일상생활 예시로 요청 -> 응답 흐름을 비유해보면,

카페 주문할 때를 생각해보자.
1. 손님이(클라이언트) 카페에서 메뉴를 고른다.
2.메뉴판을 보여준다.
3. 점원이(서버) 주문을 받는다.
4. 손님이 주문한 커피, 디저트를 점원이 제공한다.

 

 

웹에서 실제 동작 원리 예시를 들어보면!

1. 사용자가 웹 브라우저에서 www.naver.com 입력
2. 브라우저(클라이언트)가 서버에 HTTP 요청을 보냄
3. 서버는 그 요청을 받고, HTML/CSS/이미지 등으로 구성된 웹페이지를 만들어서 응답함.
4. 브라우저는 응답 받은 내용을 화면에 렌더링(표시)함

 

여기서 도메인(domain)은 인터넷 주소의 구성 요소로, 특정한 웹사이트를 식별하는 이름입니다. 도메인은 IP 주소를 사용자 친화적인 방식으로 만든 것입니다. 

 

도메인의 특징은..
도메인은 특정 웹사이트마다 고유하며, 다른 웹페이지에 동일한 이름을 사용할 수 없음. 
도메인은 도메인 이름 시스템(DNS)을 통해 브라우저에 입력된 도메인 이름을 IP 주소로 변환한다. 
도메인에는 국가도메인(ccTLD)과 일반도메인(gTLD)이 있다. 도메인 유형에는 최상위 도메인(TLD), 차상위 도메인(SLD), 세 번째 수준 도메인 등이 있다. 

도메인을 사용하는 이유
도메인은 인터넷 주소 창에 숫자로 구성된 IP 주소 대신 기억하기 쉬운 문자로 웹사이트를 접속할 수 있도록 한다. 도메인은 특정 분야(com, net, org 등)의 어떤 웹 사이트(영역)를 지칭하기 위해 의미를 확장한 단어이다. 

 

 

 

API가 대체 뭐야??

API = Application Programming Interface

API는 Application Programming Interface의 줄임말로, “다른 프로그램과 대화할 수 있게 해주는 문법이나 규칙”입니다.
쉽게 말하면 기능을 사용하게 해주는 설명서 같은 거라고 해요.

 

종류가 되게 다양한데, REST API, SOAP API, GraphQL API, JSON API, Microservice API 등이 있답니다.

ex) 자동판매기 버튼

예를 들어 자판기의 "콜라 버튼"을 누르면 콜라가 나오죠? 이 버튼이 API라고 할 수 있습니다.

고객은 자판기의 내부가 어떻게 동작하는지는 몰라도, 버튼을 누르면 콜라를 받을 수 있죠.

마찬가지로, API는 내부 코드를 몰라도 어떤 기능을 사용할 수 있게 해줍니다.

 

• API는 어떤 프로그램(=서버 등)이 제공하는 기능 목록과 사용 방법이야.
• "콜라 주세요"처럼 명확한 명령어만 있으면 기능을 가져다 쓸 수 있어!

 

HTTP란?

 

HTTP = HyperText Transfer Protocol

 

HTTP는 HyperText Transfer Protocol의 줄임말로, 웹에서 클라이언트와 서버가 통신할 때 사용하는 규칙/약속입니다.

ex) 택배 박스 포장 방식

우리가 택배를 보내려면 주소, 우편번호, 받는 사람을 정해진 형식으로 써야하죠? HTTP가 그런 느낌입니다.

클라이언트가 서버에 뭔가를 요청할 때 "요청 양식"을 맞춰서 보내야 합니다.

GET /user/1 : "1번 사용자 정보 주세요"
POST /user : "새 사용자 만들게요"

 

REST란?

REST = REpresentational State Transfer

REXT는 REpresentational State Transfer의 줄임말로, HTTP를 잘 활용해서 만든 API 스타일이라고 볼 수 있습니다.

• REST API는 "요청 방식(GET, POST 등) + 주소(URL)"만으로 기능을 표현합니다.
• 간단하고, 직관적이고, 규칙이 잘 정해져 있어요.

ex) "레스토랑 주문 시스템"

REST 표현 의미

GET /menus	메뉴판 보여줘
GET /menus/1	1번 메뉴 보여줘
POST /menus	새 메뉴 추가해줘
DELETE /menus/1	1번 메뉴 삭제해줘

 

→ 버튼 누르듯이 주소를 통해 요청하고, 서버는 그에 맞는 응답을 해줍니다!

 

개념 요약표

클라이언트(Client)	서버의 서비스를 받아 사용하는 장치, 프로그램 / 뭔가를 요청하는 쪽!	카페에서 메뉴를 고르는 손님
서버(Server)	네트워크를 통해 클라이언트에게 서비스를 제공하는 시스템 / 요청받고 필요한 걸 제공하는 쪽	카페에서 주문한 음료를 제공하는 알바생
API	기능을 쓰게 해주는 설명서, 인터페이스	자판기의 버튼
HTTP	요청을 주고받는 규칙	택배 포장 규칙
REST	HTTP를 활용한 깔끔한 API 스타일	메뉴판에 따라 주문하는 방식

 

 

 

이렇게 기본적인 기초 개념?이지만 알아야 할 만한... 그런 개념을 정리해보았습니다.

사실 쓴 다음에도 100% 알고있다고는 하기 어렵지만, 평소에 궁금했던 점이 해소된 것 같아서 좋네요!!

나중에 다시 보면서 또 개념을 익히도록 하겠습니다.

혹시!!! 틀린 설명이 있다면 꼭 알려주세요

읽어주셨다면 감사합니다~~

파이팅!

 

 

 

 

 

---

 

 

참고한 자료:

https://brunch.co.kr/@b30afb04c9f54dc/4

기획자인 내가 아직까지 API가 헷갈렸던 이유 - 이론

https://wikidocs.net/237040

1.1 서버와 클라이언트

https://velog.io/@jennyfromdeblock/%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8%EC%99%80-%EC%84%9C%EB%B2%84-%EB%B9%A0%EB%A5%B4%EA%B2%8C-%EA%B0%9C%EB%85%90%EC%9E%A1%EA%B8%B0

클라이언트와 서버 빠르게 개념잡기

 

 

 

추가로 보면 좋을 것 같은 자료:

https://12bme.tistory.com/297

[네트워크] 클라이언트/서버 통신 원리

https://and-some.tistory.com/217

[웹프로그래밍 프로젝트] 3. CSS 네비게이션 바 만들기

 

https://studiomeal.com/archives/197

이번에야말로 CSS Flex를 익혀보자

 

https://studiomeal.com/archives/533

이번에야말로 CSS Grid를 익혀보자