❗️공부 중인 사람의 글입니다
✅ 웹 애플리케이션 아키텍쳐
클라이언트-서버 아키텍처
리소스를 사용하는 앱 클라이언트와 리소스가 존재하는 곳 서버를 분리시킨 형태
클라이언트와 서버는 HTTP라는 프로토콜(통신규약)을 사용하여 요청과 응답을 주고받는다.
API: 서버가 클라이언트에게 리소스를 잘 활용할 수 있도록 제공하는 인터페이스
3-tier architecture
리소스를 사용하는 앱 클라이언트,
리소스를 전달해주는 앱 서버,
리소스 저장공간 데이터베이스로 분리시킨 형태
✅ 브라우저의 작동 원리 (보이지 않는 곳)
URL
Uniform Resource Locator
네트워크 상에서 파일이 위치한 정보
scheme, host, url-path
URI
Uniform Resource Identifier
URL의 상위 개념, query와 fragment(#) 포함
일종의 북마크 기능
IP 주소
Internet protocol address
네트워크에 연결된 특정 PC의 주소를 나타내는 체계
PORT
IP주소에 접속할 수 있는 통로(채널)
22: SSH
80: HTTP
443: HTTPS
등 생략할 수 있는 미리 정해진 포트 번호가 있다. 그 외에는 URI에 반드시 포함해야 함!
Domain Name System
nslookup 도메인 주소 입력 //IP주소 찾는 명령어- 브라우저에 도메인 주소를 입력하면 -> DNS Lookup 발생
- 브라우저는 리졸버에게 IP주소를 요청한다.
- 캐시 파일에 해당 도메인 주소의 정보가 있는지 확인 -> 있으면 IP주소 즉시 반환
- 없으면 Root / TLD / 권한 있는 네임 서버들에 차례로 재귀적인 쿼리 진행하며 IP주소 찾는다 ->리졸버에 IP 주소 반환
- 리졸버는 전달받은 IP주소를 브라우저에 반환, 해당 IP주소 기록, 캐싱
✅ HTTP
클라이언트와 서버가 요청과 응답을 주고받을 때 사용하는 프로토콜
데이터가 교환되는 방식
Stateless 무상태성이라는 특징이 있다.
클라이언트와 서버의 상태를 저장하지 않기 때문에 응답이 끝나면 알 수 없다.(쿠키 등장)
HTTP Messages
Requests / Responses
- start line / status line
- HTTP headers
- empty line
- body(payload)
✅ 브라우저의 작동 원리 (보이는 곳)
AJAX
Asynchronous JavaScript And XMLHTTPRequest
웹 페이지에서 일부분만 바꿀 때 사용한다.
웹 페이지에 필요한 부분에 필요한 데이터만 비동기적으로 서버에서 받아와 브라우저에 렌더링한다.
- JavaScript DOM
- Fetch (이전에 XHR 사용)
⭐️SSR
Server Side Rendering
웹 페이지를 서버에서 렌더링한다.
SEO에 유리(네이버 블로그, 뉴욕타임즈 등)
사용자와 상호작용이 적은 경우 활용
Time To View와 Time To Interact의 시간 공백이 있을 수 있다.
⭐️CSR
Client Side Rendering
웹 페이지를 브라우저에서 렌더링한다.
페이지 새로고침x 동적으로 라우팅 관리
빠른 라우팅, 웹 앱 등에서 강력한 사용자 경험 제공
(예약사이트 등)
✅ REST API
프로젝트의 근본이자 시작 = API 문서
request data format
HOST: www.google.com
Content-Type: 요청 리소스의 데이터 유형
body = payload
resoponse data format
상태코드 외우기⭐️
200번대 성공
300번대 redirection
400번대 클라이언트 실패
500번대 서버 실패
body: 요청에 따른 응답 data가 나온다.
REST API
약속, 제약, 규칙 constraints
리소스에 대한 주소를 정하는 방법
REST의 창시자 로이필딩
리차드슨 성숙도 모델 (RMM)
2단계까지만 적용해도 좋은 디자인이라고 할 수 있다.
-
0단계. HTTP 사용
-
1단계. 개별 리소스와의 통신 준수 = 엔드포인트를 접근하려는 리소스에 따라 분리
-
2단계. CRUD 원칙에 따른, 목적에 맞는 HTTP Method 사용
POST = 고유의 주소값 id 무조건 가져야 함
POST Method의 성공 응답 상태코드 = 201 created
⭐️엔드포인트 디자인은 어떤 리소스의 상태를 변화시키는지가 중요하다!
클릭과 같은 어떤 행위X 변화시킬 리소스O
동사X 명사 사용 권장O (합의하에)
프로젝트 참여자들이 보고 이해할 수 있어야 한다.
성공/실패 여부와 이유를 응답 결과로 반환한다.
GET은 body 대신 query parameter 사용
query parameter : 필터링, 해당 값이 여러 개가 될 수도 있다
GET /39th?age=25path: 고유한 값, id을 가져올 때 사용
GET /people/young- 3단계. HATEOAS: API를 하나의 독립체로 표현
응답에 링크 포함
