기묘한 개발 이야기

개요 브라우저에서 웹 페이지를 렌더링 하는 과정을 알아보기 위해 해당 글을 읽고 정리한다. https://javascript.plainenglish.io/web-performance-understanding-critical-rendering-path-72283caefc1f 내용 브라우저 렌더링이란? 화면에 웹 페이지를 렌더링 하기 위해 브라우저에서 수행하는 작업 또는 단계의 시퀀스. 1. 로더(Loader)가 서버에서 리소스(HTTP, CSS, JavaScirpt) 스트림을 읽음. 2. 수신된 HTML을 파싱하여 DOM생성 3. CSS 파싱하여 CSSOM 생성 4. DOM과 CSSOM이 결합된 Render Tree 생성 - 모든 요소의 위치 및 치수(레이아웃) 계산 포함 5. 화면에 실제 픽셀을 페인팅 ..

개요 HTTP와 HTTPS의 차이점을 잘 모르겠어서 찾아보았다. https://www.freecodecamp.org/news/http-vs-https/ 해당 블로그를 읽고 정리하였고, 일부 필요한 이미지는 구글 검색으로 추가한다. HTTP vs HTTPS – What's the Difference? We interact with HTTP and HTTPS a lot in our day-to-day lives, but many people don't know the difference. Most computer users just see that the browser is telling them their application is not safe and that a hacker might want to ..

개요 현업에서도 많이 들었으나 잘 이해가 가지 않았던 CORS 가 뭔지 공부하고 해당 링크의 내용을 정리한다. https://ko.javascript.info/fetch-crossorigin#ref-400 CORS ko.javascript.info 내용 cors 란? - 브라우저에서 실행중인 스크립트에서 시작되는 cross-origin Http 요청을 제한하는 브라우저 보안 기능. - 제한한 cross-origin HTTP 요청을 하기 위해 서버의 동의가 필요함. - 동의시 브라우저에서는 요청 허용, 동의하지 않는 경우엔 브라우저에서 거절하는 메커니즘은 HTTP-header를 이용하는데 이것이 바로 CORS Cross-origin이란? 아래 3가지 중 하나라도 다른 경우를 지칭함. 1. 프로토콜 2. 도..