◆ 렌더링 방식
- 렌더링(Rendering)은 웹 브라우저가 서버로부터 받아온 HTML, CSS, JavaScript 등의 문서를 해석하여 브라우저에 출력하는 것을 의미합니다.
- 브라우저가 HTML, CSS, JavaScript를 이용하여 사용자에게 보여지는 최종적인 화면을 만들어내는 과정을 렌더링이라고 합니다.
◆ 렌더링 단계
- 파싱(Parsing)
- 서버로부터 전송된 HTML, CSS, JavaScript 등의 문서를 해석하는 과정입니다.
- 이 과정에서 브라우저는 마크업 언어를 이해하고, DOM(Document Object Model) 트리와 CSSOM(CSS Object Model) 트리를 생성합니다.
- 레이아웃(Layout)
- DOM 트리와 CSSOM 트리를 이용하여 문서의 레이아웃을 계산합니다.
- 이 과정에서는 브라우저 창 내에서 요소의 위치와 크기, 블록의 배치 등을 결정합니다.
- 페인팅(Painting)
- 레이아웃 단계에서 계산된 결과를 이용하여 사용자에게 최종적으로 보여지는 화면을 그리는 과정입니다.
- 이 과정에서는 브라우저에 픽셀을 그리는데, 픽셀은 특정 색상, 투명도, 위치, 크기 등의 속성을 가지고 있습니다.
◆ SSR(Server Side Rendering)
- 백엔드가 화면을 만드는 방식
- 서버 측에서 HTML, CSS, JavaScript 등의 리소스를 이용하여 초기 로딩 시점에 브라우저에게 HTML을 전달하고, 브라우저는 이를 받아서 렌더링을 수행합니다.
- 장점
- 서버에서 최초 렌더링을 하기 때문에 초기 로딩 속도가 빠르다.
- 검색 엔진 최적화(SEO)가 용이하다.- 초기 로딩 이후에는 브라우저에서 필요한 데이터만을 요청하므로, 전체적인 성능이 향상될 수 있다.
- 사용자가 페이지를 요청할 때마다 서버에서 새로운 HTML을 생성하기 때문에 새로운 데이터를 불러와도 렌더링 시간이 짧습니다.
- 단점
- 브라우저에서 최초에 렌더링하는 HTML의 양이 많아진다.- 사용자가 페이지를 이동할 때마다 서버로부터 새로운 HTML을 받아와야 하므로 네트워크 요청이 많아진다.
◆ CSR(Client Side Rendering)
- 프론트엔드가 화면을 만드는 방식
- 요즘 스타일의 렌더링 방식
- 브라우저 측에서 HTML, CSS, JavaScript 등의 리소스를 모두 다운로드한 이후에 브라우저에서 렌더링을 수행합니다.
- 장점
- 사용자가 페이지를 요청할 때마다 새로운 데이터를 불러와도 렌더링 시간이 짧습니다.- 한번 로드되면, 서버에서 데이터를 불러오지 않고도 동적으로 변경된 데이터를 불러올 수 있으므로 빠른 응답성을 제공할 수 있습니다.
- 단점
- 페이지를 처음 로드할 때 JavaScript 파일을 다운로드하고 실행하기 때문에 초기 로딩 속도가 느리다.
- javascript 기본 이벤트 방지
1) inline script에서는 return false로 차단이 가능
2) 모듈형 script에서는e.preventDefault();로 차단이 가능 - jQuery 기본 이벤트 방지
-> 둘다 가능
◆ 동기(synchronous)와 비동기(asynchronous)
- 프로그래밍에서 데이터를 주고받는 방식을 말한다.
◆ 동기(synchronous)
- 데이터 전송 시, 송신 측과 수신 측이 서로의 타이밍을 맞춰야 하는 통신 방식입니다.
- 요청을 보낸 후 응답이 올 때까지 대기하고 다른 작업을 수행하지 않습니다.
- 정해진 시간에 데이터 전송: 송신 측과 수신 측이 서로의 클럭 신호를 맞추어, 데이터 전송을 정해진 시간에 수행합니다.
- 전송 속도의 예측 가능성: 클럭 신호에 의해 동기화되므로, 전송 속도를 예측하고 계획할 수 있습니다.
- 오버헤드 발생 가능성: 클럭 신호를 유지하기 위해 추가적인 리소스가 필요할 수 있으며, 전송 중지 시간이 발생할 수 있습니다.
- 전송 지연: 데이터 전송 과정에서 송신 측과 수신 측이 동기화되어야 하기 때문에 지연이 발생할 수 있습니다.
- 전화 통화, FTP 파일 전송
◆ 비동기(asynchronous)
- 내가 가진 데이터를 화면 변경 없이 사용자가 접근 할 수 있도록 하는 것.
- 데이터를 가지고 오는 방식이므로 서버를 해킹 당할 수 있다.
- 데이터 전송이 독립적으로 이루어지며, 이벤트나 콜백 함수를 통해 데이터를 처리합니다.
- 이를 통해 대기하는 시간을 최소화하고 다른 작업을 수행할 수 있는 시간을 늘릴 수 있습니다.
- 무작위 시간에 데이터 전송: 송신 측과 수신 측이 서로의 타이밍을 맞추지 않기 때문에, 데이터 전송이 무작위 시간에 이루어질 수 있습니다.
- 자원 활용의 효율성: 송신 측과 수신 측이 독립적으로 동작하므로, 전송 지연이나 대기 시간 없이 다른 작업을 수행할 수 있습니다.
- 전송 속도의 예측 어려움: 동기 통신과 달리, 비동기 통신은 전송 속도를 예측하기 어려울 수 있습니다.
- 데이터 무결성 관리: 데이터 전송 순서를 보장하기 위해 추가적인 관리
아이디 중복검사
댓글 등록/조회/수정/삭제
좋아요
팔로우
즐겨찾기
장바구니
-
http의 기본 Port : 80
-
https의 기본 Port : 443
-
다른 출처로 인해서 비동기 통신이 이루어지지 않을 경우
1) 호스트와 포트를 맞춘다.
2) 다른 출처여도 사용할 수 있도록 허용한다.
(교차 출처 허용)
- CORS를 허용해야 한다면 @CrossOrigin 어노테이션을 추가한다.
-
주소
: 프로토콜/호스트/포트가 같아야 같은 주소이다.
Backend Developer