GOAL
웹의 구동방식을 이해
프론트엔드 웹서버
: 브라우저에 HTML,CSS,JS 정적파일을 던져주는.
자바 서블릿(Java Servlet) , nginx, apache...
WAS
; WEB APPLICATION SERVER
: 백엔드서버와 통신하여 동적파일 프론트엔드서버로 던지는.
tomcat , ...
백엔드 서버
: DB와 소통하는. API서버.
ASGI , WSGI
; Asynchronous Server Gateway Interface
: ASGI는 WSGI (비동기식) 의 상위 호환으로 web server와 프레임워크(django),
애플리케이션을 연결 해주는 Python의 표준 API
즉, 파이썬으로 개발된 앱이 웹에서 구동 될수 있도록 해주는 미들웨어.
Bjoern, Gunicorn , Cherrypy ...
관계
클라이언트(브라우저) - 웹서버 - (파이썬의경우 ASGI) - WAS서버 - API서버 - 데이터베이스
CORS
; Cross-Origin Resource Sharing
: 추가 HTTP 헤더를 사용하여 브라우저에게 한 출처에서 실행중인 웹 응용 프로그램의 다른 출처의 선택된 자원에 대한 접근 권한을 알려주는 메커니즘
FRONT
렌더링
; HTML, CSS, JS 문서가 브라우저에 출려되는 과정
1. DOM트리 생성 : 변환 -> 토큰화 -> 렉싱 -> DOM생성
2. CSSOM 트리 생성 : DOM트리 생성과정과 동일.
3. 렌더링 트리 생성 : DOM트리와 CSSOM트리를 결합하여 생성.
4. 레이아웃 : 위치와 크기의 상대적 측정값을 절대적인 픽셀로 계산.
5. 페인팅 : 렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환.
6. 리플로우 : 페인팅 완료 후 이벤트 발생으로 인해 변경되어 영향을 받는 노드에 대해서 트리생성, 레이아웃 과정 다시 수행. 하는 과정.
7. 리페인팅 : 리플로우의 변경사항을 실제로 화면에 그리기 위한 단계.
- 리플로우가 일어나면 반드시 리페인트가 일어난다.
ing,,,
referance
