----- 웹 브라우저
- DOM
문서 객체 모델
XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스
DOM 구조에 접근할 수 있는 방법을 제공
-> 문서 구조, 스타일 , 내용등을 변경할 수 있게 돕는다.
- DOM, HTML의 차이점
HTML
화면에 보이고자하는 모양, 구조를 문서로 만든것
최초의 화면을 그릴때 이용한 설계도
DOM
실제로 화면에 표현된것들
설계도를 이용해서 만든 실물
화면 조작, 웹페이지를 만질 수 있다. ( 인터페이스 )
- 브라우저는 어떻게 동작하는지 ?
DOM 생성 -> CSSOM 생성 -> 렌더트리 생성 -> 렌더트리 배치 -> 렌더트리 그리기
//
브라우저의 주요 기능
사용자가 선택한 자원을 서버에 요청 -> 브라우저에 표시
- HTTP
리소스들을 서버로부터 가져올 수 있도록 해주는 프로토콜
//
HTML 문서와 같은
- 주소창에 url 입력후 어떤일이 일어나는가 ?
웹브라우저가 URL 해석 -> DNS 서버 검색 -> 브라우저와 서버의 TCP 통신 ->
웹 서버에 HTTP 요청 보내기 -> 서버에서 HTTP 응답 -> 브라우저에서 컨텐츠 표시
- REST API
자원을 정의하고 자원에 대한 주소를 지정하는 방법을 일컫는다.
자원, 행위, 표현 구성됨
--원칙
자체표현 구조
=> REST API 메시지만 보고도 쉽게 이해할수 있어야함
무상태성
=> 작업을 위한 상태정보를 따로 저장하고 관리 X
캐시 가능
=> HTTP 웹표준 그대로 사용해서 웹에서 사용하는 기존 인프라 그대로 활용 가능
클라이언트 - 서버 구조
=> REST서버는 API 제공, 클라이언트는 사용자 인증 관리
역할이 확실해지고 서로간 의존성이 줄어든다.
계층형 구조
=> REST 서버는 다중 계층으로 구성 될 수있다.
(보안, 로드 밸런싱, 암호화 계층), (PROXY, 게이트웨이) 네트워크 기반의 중간매체도 사용 가능
--디자인 가이드
URL은 정보의 자원을 표현 해야함
자원에 대한 행위는 HTTP Method로 표현
/ 계층 관계를 나타낸다
- SPA SSR 차이
--SPA
첫 요청시 한 페이지만 불러오고 페이지 이동시
현재 페이지를 동적으로 다시 작성하는 방식
장점
자연스럽고 빠른 사용자 경험
필요한 리소스만 부분적으로 로딩
컴포넌트별 개발 용이
단점
검색 엔진 최적화 어려움
초기 구동 시간이 걸림
--SSR
페이지를 이동할때마다 새로운 페이지를 요청하는 방식
// 모든 템플릿은 서버 연산을 통해서 렌더링 -> 완성된 페이지 형태로 응답
장점
검색엔진 최적화
사용자가 첫 페이지를 보는 시간이 빠름
단점
페이지 이동시 화면 깜빡임, 불필요한 템플릿 중복 로딩
서버 렌더링에 따른 부하
- CORS
서로 다른 도메인에서 자원을 요청시
출처가 달라도 자원에 접근할 수 있도록 권한을 부여해주는것
브라우저는 보안상의 이유로 교차 출처 HTTP 요청을 제한
다른 출처의 리소스를 불러오려면 그 출처에서 올바른
CORS 헤더를 포함한 응답을 반환 해야함
도메인 이름이 서로 다른 사이트간에 api 요청시
공유 설정을 하지 않았다면 CORS 에러가 발생한다.
--해결방법
request 헤더에 origin 요청한 출처
response 헤더에 Access-Control-Allow-Origin 요청한 출처
- 쿠키 세션을 사용해야하는 이유
통신이 끝나고 상태를 유지하지 않는 특징
-쿠키
클라이언트단에 저장됨
인증 유효시간을 명시해놓으면 브라우저 종료에도 인증 유지
웹 서버에 요청마다 자동으로 헤더에 쿠키를 넣어서 서버에 전송
--쿠키의 동작방식
클라이언트가 페이지 요청 ->
서버에서 쿠키 생성 ->
HTTP 헤더에 쿠키를 포함시켜 응답 ->
같은 요청을 하면 HTTP 헤더에 쿠키를 함꼐 보냄 ->
서버에서 쿠키를 읽고 이전 상태 정보를 변경 해야할때 쿠키를 업데이트하여 변경된 쿠키를 HTTP 헤더에 포함시켜 응답
--쿠키의 사용 예
방문 사이트의 로그인시 '아이디, 비밀번호 저장 하시겠습니까 ?'
쇼핑몰 장바구니
자동 로그인,
팝업 '오늘은 더이상 보지 않기' 체크,
- 세션
사용자 정보 파일을 서버측에서 관리
브라우저 종료때까지만 인증상태 유지
사용자 정보를 서버에서 관리하기 때문에 쿠키보다 보안이 우수
사용자가 많아질수록 서버 메모리를 많이 차지 => 서버 과부하 가능성
--동작방식
클라이언트가 서버에 접속시 세션 ID 발급 받음 ->
클라이언트는 세션ID 저장 ->
서버에 요청시 쿠키의 세션ID를 서버에 전달 ->
세션ID로 클라이언트 정보를 가져옴 ->
클라이언트 정보를 응답
-- 특징
각 클라이언트에 고유 ID 부여
보안면에서 쿠키보다 우수
사용자가 많아질수록 서버 메모리를 많이 차지
--세션 사용 예
로그인 ( 보안 중요한 작업 )
- 쿠키와 세션의 차이
0. 라이프 사이클
쿠키: 만료시간 전에 브라우저 종료시 정보 남아있음
세션: 만료시간 정할 수 있지만 브라우저 종료시 삭제됨
1. 정보가 저장되는 위치
2. 보안면에서 세션이 우수
3. 속도
세션은 서버에서 처리하기 때문에 쿠키가 빠름
-- 캐시
이미지, css, js 파일을 브라우저, 서버 앞단에 저장해놓고 사용하는것
- ajax
전체 페이지를 새로 고치지 않고도
페이지 일부만 데이터를 로드하는 기법
//
자바스크립트를 사용한 비동기 통신
클라이언트, 서버간에 XML 데이터를 주고받는 기술
- Web Storage
웹의 데이터를 클라이언트에 저장할 수 있는 자료구조
키/값 쌍으로 데이터를 저장하고 키로 데이터를 조회
- 웹 서버 요청마다 서버로 전송 이루어지지 않음
- 객체 정보를 저장 가능
- 용량 제한이 없다
- localStorage, sessionStorage
localStorage
영구적 보관 가능
sessionStorage
지속적으로 보관 X
현재 페이지 브라우저 컨텍스트 내에서만 데이터 유지
(같은 도메인이라도 브라우저가 다르면 서로 다른 영역)
=> 브라우저 종료시 sessionStorage 삭제됨
- 웹 접근성 웹 표준
-- 웹 표준
웹에서 표준적으로 사용되는 기술과 규칙
W3C에서 나온 권고안
=> 다양한 웹사이트가 통일된 기술로 제작되고
기기, 브라우저에서 모두 의도한대로
동작 하도록 하기 위함
-- 웹 접근성
모든 사용자가 신체적,환경적 조건에 관계없이
웹에 접근하여 이용 가능하게 하는것
장애, 고령자,
다양한기기, 운영체제, 브라우저 등
- http https 차이
1. 보안
-- http
서버에서 브라우저에 전송되는 정보가 암호화 되지 않아
데이터가 중간에 탈취 당할 수 있는 문제가 있다.
-- https
보안 소켓 계층 (SSL)을 사용해서 이 문제를 해결
2. 검색엔진 최적화
검색엔진이 https 웹사이트에 가산점을 준다.
- HTTP 상태코드 역할
100: 조건부 응답
200: 성공
300: 리디렉션 완료, 관련
400: 클라이언트 오류
500: 서버 오류