클라이언트 - 서버 아키텍처
- 데이터 및 리소스 정보를 보관-관리하는 서버와, 해당 리소스를 요청하고 전달받아 사용하는 클라이언트로 이루어짐
- 2티어 아키택쳐라고도 불림, 클라이언트-서버-DB의 구조로 서버를 요청과 정보를 전달하는 역할만하는 3티어 아키택쳐 구조가 일반적
- 클라이언트는 플랫폼에 따라 나누어짐(ex, Web, IOS, Window..등)
클라이언트 - 서버 통신과 API
- API란 sw 인터페이스로 컴퓨터간의 통신을 위해 사용해되는 통신 프로토콜
- 클라이언트 - 서버 간의 통신은 HTTP API를 사용함
- HTTP
- URL
- 파일의 위치 정보 (scheme, hosts, url-path)를 담고 있음
사용자관리 API에는 5가지의 매소드 존재
- URI
- scheme, hosts, url-path 정보와 query, fragment의 정보까지 추가로 담고 있는 URL를 포함한 상위 개념 - 요소 정리
- URL
IP
- 인터넷 상에서는 사용하는 주소 체계 (Internet Protocol)
- IPv4
- 8bit 4덩이, 총 32bit으로 이루어진 ip를 가지며 현재 많이 고갈됨- 127.0.0.1 : 현재 사용중인 로컬 디랙토리를 가르킴
- 0.0.0.0 , 255.255.255.255 : broadcast 주소로 연결되어있는 모든 길에 전송가능
- IPv6
- 많이 고갈된 ip 문제를 해결하기 위해 등장한 프로토콜로 128bit의 ip 할당 가능
Port
: ip를 통해 pc를 접근하기 위한 통로로 중복 할당 될수 없으며, 접근한 포트가 사용중일 경우 해당 다른 포트를 할당해서 실행됨
- 사용 용도가 이미 정해진 다양한 포트가 있음(70,80,443 등)
Domain
- ip를 대신해 해당 컴퓨터 주소를 가르키는 Host명 (웹 주소)
- DNS를 사용해 ip를 DNS로, DNS를 ip로 변환해 웹서버에 요청하며 서버-클라이언트 통신을 가능하게 함
HTTP Message
- 무상태성을 가지는 서버-클라이언트의 데이터 교환 방식으로, Requests와 Respones가 있음
- 구성 요소
HTTP Requests
- start line 요소
- 수행할 작업과 방식을 담은 매소드
- 요청 주소, 도메인, 포트 등 요청 매소드에 따라 다르게 작성
- http 버전
- headers 요소
- 공통 기본 header
- 리소스 혹은 클라이언트를 설명하는 header
- body에 담긴 데이터를 설명하는 header
- body
- 2개의 헤더를 바탕으로 정보를 담은 데이터
- 여러개의 헤더를 바탕으로 여러 파트로 나누어 정보를 담은 데이터
HTTP Respones
- start line 요소
- http 버전
- 상태 code (정보 응답, 성공 응답,client error 응답, server error 응답, redirection 응답) => 요청에 대한 결과
- 상태 text => 상태 code에 대한 설명
- headers 요소
- 공통 기본 header
- 위치 혹은 서버에 대한 정보를 설명하는 header
- body에 담긴 데이터를 설명하는 header
- body
- 2개의 헤더를 바탕으로 정보를 담은 데이터
- 여러개의 헤더를 바탕으로 여러 파트로 나누어 정보를 담은 데이터
AJAX
: Javascript를 포함한 다양한 다양한 기술을 사용해 비동기적으로 서버통신하고 화면을 렌더링하는 웹 기법
-
핵심 기술
- Javascript DOM을 사용해 화면에 대한 변경이 아닌 변경된 필요한 데이터만 변경함
- Fetch를 통해 페이지 변경을 하지 않고 기존의 페이지에서 서버에 쵸청하고 데이터를 받아올 수 있음, 추가로 해당 요청이 이루지는 상황에서 비동기적으로 페이지에 대한 동작은 그대로 따로 이루어짐
-
장점
- 필요한 부분만 변경함으로 랜러링 속도 빠름
- 서버와의 통신과 화면 동작을 비동적으로 처리할 수 있음
-
단점
- History 관리가 기본적으로 제공되지 않음
- SEO 동작 방식에 따른 데이터 수집에 시간이 소요되고, 보안적인 문제 발생 우려
SSR와 CSR의 차이
-
ssr은 서버에서 csr은 클라이언트에서 렌더링한다는 차이가 존재해 사용 용도에 차이가 있
-
SEO 최적화 요구, 사용자와의 상호작용 최소
- ssr은 전체 내용이 렌더링된 상태에서 크롤러가 접근하고 csr의 경우 빈 상태에서 크롤러가 접근하기 때문에 검색 최적화에는 ssr이 유리
-
SEO 최적화 불필요, 사용자와의 상호작용 최대
- csr은 비동기적으로 변경사항을 바탕으로 필요한 부분에 대한 데이터 변경이 가능함으로 많은 상호작용이 이루어지는 페이지에 유리
공부 일기장