google.com 을 입력했을때 일어나는 과정
- google.com을 DNS(= 인터넷 전화번호부) 서버에서 검색
- 해당 도메인 이름에 해당하는 IP주소를 찾아 사용자가 입력한 URL정보와 함께 전달
- 웹 브라우저는 웹 서버에 해당 웹사이트에 맞는 HTML 문서 요청
- WAS와 데이터베이스에서 웹페이지 작업을 처리
- WAS에서 처리 결과를 웹 서버로 전송하고 웹 서버는 웹 브라우저에 HTML 문서 결과를 전달
- DOM 트리 빌드
- CSSOM 트리 빌드
- DOM 트리와 CSSOM 트리를 결합하여 Rendor 트리 생성
- Rendor 트리의 노드들에 대한 위치와 크기 계산하는 Layout 과정을 거치고
- Paint -> 화면에 실제로 그리는 작업
- google.com 이 웹 브라우저에 출력
CSR 과 SSR ?
- CSR : 클라이언트 사이드 랜더링
클라이언트 쪽에서 랜더링을 진행한다. 서버는 클라이언트에게 HTML, JS를 보내주고 클라이언트는 그것을 랜더링 한다. - SSR : 서버 사이드 랜더링
서버쪽에서 랜더링 준비를 마친 상태로 클라이언트에게 전달한다.
서버쪽에서 즉시 랜더링이 가능한 HTML 파일을 만들고 클라이언트에게 전달한다. 클라이언트는 HTML 을 즉시 랜더링하고 JS 를 다운받는 형식이다.
웹 페이지를 로딩하는 시간
첫 페이지는 CSR의 경우 HTML, CSS, JS를 모두 불러오고, SSR은 HTML, JS를 불러오기에 평균적으로 SSR이 더 빠르다.
나머지 페이지는 CSR은 이미 나머지 페이지를 가지고 있고, SSR은 첫페이지를 로딩하는 방식과 동일하기에 CSR이 더 빠르다.
SSR을 사용하는 이유중 하나는 SEO 때문인데, 검색 엔진 봇들은 HTML 파일에서 데이터를 크롤링하는데 CSR은 클라이언트에서 페이지를 구성하기 전에 HTML에는 아무 데이터도 없지만 SSR은 서버에서 페이지를 그려 보내기 때문에 HTML안에 이미 콘텐츠가 포함된 상태이다.
CORS 오류
동일한 출처의 리소스에만 접근하도록 제한하는 것이다.
출처는 프로토콜, 호스트명, 포트가 같은 것을 말한다.
https://naver.com:80 에서 https가 프로토콜, naver.com가 호스트, 80이 포트
보안상의 이유로 브라우저는 HTTP 호출을 동일한 출처로 제한했다.
오류 해결 법
1. 프록시 서버 이용 - 클라이언트가 프록시 서버를 통해 다른 네트워크 서비스에 간접적으로 접속 할 수 있게 해준다. 쉽게 말해서 서버간의 통신을 도와주는 중계 서버이다.
2. 백엔드단에서 해결하는 방법
쿠키, 세션, 웹스토리지
HTTP 프로토콜의 특징이 비연결 지향으로 커넥션이 끊기는 순간 상태 정보는 유지하지 않는다. 따라서 쿠키, 세션을 이용해서 데이터 유지를 한다.
쿠키 : 사용자가 웹 사이트를 방문할때, 클라이언트에 저장하는 작은 기록 정보 파일
ex) 방문 사이트 로그인시 아이디 비밀번호 저장, 팝업창을 통해 1주일간 보지 않기
세션 : 일정 시간(진입 ~ 종료)을 하나의 상태로 보고 상태를 유지시키는 기술
브라우저를 닫을때 삭제되기에 쿠키보다 보안이 좋다.
로컬 스토리지 : 브라우저에 반영구적으로 데이터를 저장(도메인 단위)
세션 스토리지 : 각 세션마다 데이터가 개별적 저장, 브라우저에서 여러개의 탭을 실행하면 탭마가 개별적 데이터가 들어간다.
크로스 브라우징?
브라우저는 기본적으로 국제 웹 표준으로 동작한다.
하지만 일부 브라우저에서 동작을 안하거나 다르게 동작을 할 수 있다.
HTTP란?
HyperText Transfer Protocol로 인터넷에서 데이터를 주고 받을 수 있는 프로토콜 이다.
역사
HTTP 0.9 : GET 메소드만 존재
HTTP 1.0 : HTTP 해더 개념 도입, 커넥션 하나당 요청하나 응답하나 처리 가능
HTTP 1.1 : 지정한 시간 동안 커넥션을 닫지 않음, 순차적인 여러 요청을 연속적으로 보냄
HTTP 2.0 : HTTP 메세지 전송 방식의 전환 -> 기존에는 일반 텍스트 형식에서 보내는 메세지를 frame 이라는 단위로 분할하며 바이너리로 인코딩을 한다.
GET : 서버에서 어떤 데이터를 가져와서 보여줄 때 사용, 값이나 내용, 상태를 바꾸지 않을 경우에 사용
POST : 서버상의 데이터 값이나 상태를 바꾸기 위해서 사용합니다.
Status code
2XX : 서버와의 요청 성공
4XX : 클리이언트 request의 에러
5XX : 서버 오류로 request를 수행 할 수 없음
http vs https
SSL 인증서의 유무로 사용자의 정보를 암호화 하는 것이 가장 큰 차이점이다.
https로 전환 할 경우 구글의 검색엔진 최적화(SEO)에 큰 혜택을 볼 수 있다.
SSL 인증이란?
내 서버의 주민등록증
웹 서버와 브라우저 사이의 보안을 위해서 만들어졌다.
내 사이트가 신뢰가 있는 사이트라고 인증을 하기 위한 인증서이다.
발급은 인증받은 기관에서 할 수 있다.
프로세스와 스레드
프로세스 : 메모리 상에서 실행중인 프로그램
스레드 : 프로세스 안에서 실행되는 흐름 단위
