브라우저 동작 원리에 대해 설명하시오.
HTML, CSS 처리과정
브라우저는 서버로부터 HTML, CSS, Javascript, 이미지 파일 등을 응답받는다 HTML, CSS 파일은 렌더링 엔진의 HTML 파서와 CSS파서에 의해 파싱(Parsing)되어 DOM, SCCOM 트리로 변환되고 렌더 트리로 결합됩니다. 이렇게 생성된 렌더 트리를 기반으로 브라우저는 웹페이지에 표시합니다.
기본 동작 과정
DOM 트리 구축 위한 HTML 피싱 -> 렌더 트리 구축 -> 렌더 트리 (레이아웃)배치 -> 렌더 트리 페인팅자바스크립트 처리 과정
자바스크립트는 렌더링 엔진이 아닌 자바스크립트 엔진이 처리 합니다.
1.HTML 파서는 script 태그를 만나면 자바스크립트 코드를 실행하기 위해 DOM 생성 프로세스를 중지하고 자바스크립트 엔진으로 제어 권한을 넘김니다.
2. 제어 권한을 넘겨 받은 자바스크립트 엔진은 script 태그 내의 자바스크립트 코드 또는 script 태그의 src attribute에 정의된 자바스크립트 파일을 로드하고 파싱하여 실행합니다.
3. 자바스크립트의 실행이 완료되면 다시 HTML 파서로 제어 권한을 넘겨서 브라우저가 중지했던 시점부터 DOM 생성을 재게합니다.
참고링크 - https://it-ist.tistory.com/110
client side rendering vs server side rendering
client side rendering?
클라이언트 사이드 렌더링은 SPA로 클라이언트에서 HTML을 반환한 후에, JS가 동장하면서 데이터만을 주고 받아서 클라이언트에 렌더링을 진행하는 것입니다.
Server Side Rendering?
서버에서 렌더링을 작업하는 방식, 사용자가 웹 페이지에 접근할때 서버에 각 페이지에 대한 요청을 하며 서버에서 HTML, JS 파일 등을 다 다운로드해서 화면에 렌더링 하는 방식
client side rendering vs server side rendering
둘중 뭐가 좋다 나쁘다는 없지만 CSR은 필요한 부분만 다시 읽어들이기 때문에 SSR보다 조금 더 빠름,허나 HTML, JS파일을 읽은 후 화면에 그리는 시간까지 마쳐야 렌더링 되므로 사용자에게 보여지는 초기 구동속도가 조금 느림
SSR은 서버에서 HTML, JS 작업을 다 해주기 때문에 초기 화면 렌더링이 CSR보다 조금더 빠름, 허나 모든 요청에 필요한 부분'만' 이 아닌 새로운페이지를 렌더링 해주기 때문에 초기 페이지 후에 CRS보다 느림.
화살표 함수와 일반함수의 차이점
1. 일반 함수가 생성자로 사용될 수 있는 것과 달리 화살표 함수는 prototype 속성을 갖고 있지 않으며, 생성자로 사용될수 없습니다.
2. 화살표 함수는 스스로 this, arguments, super를 가지지 않습니다.
3. 일반 함수는 어떻게 호출되느냐에 따라 this를 결정하지만, 화살표 함수는 어떻게 선언되는가에 따라 결정됩니다.
4. 화살표함수는 스스로의 this를 갖지 않기 때문에bind(),call(),apply() 메소드를 사용할 수 없습니다.
5. 일반 함수는 bind(), apply(), call()을 사용하여 this를 설정해주어야 하고, 반면에 화살표 함수는 this가 고정되어있기 때문의 위의 세가지 메소드가 동작하지 않는다.
자바스크립트의 this란?
this는 생성자 혹은 메소드에서 어떠한 객체를 가츠킬 때 사용하는 키워드
전역 공간에서 this - window 객체
함수 내부에서 this - window 객체
메소드 호출 시 - 메소드 호출 주체
콜백에서 this - window - 하지만 this를 명시하거나 this를 바인딩해서 넘기면 그에 따른다.
생성자 함수에서 this - 인스턴스this를 쉽게 풀어쓴 글https://codinghard.tistory.com/3
’==’와 ‘===’의 차이
'=='연산자는 동등 연산자로, 피연산자가 서로 다른 타입이면 타입을 강제로 변환시켜 비교한다.
'1' == 1 // true'===' 연산자는 일치 연산자로, 두 피연산자를 더 정확하게 비교한다.
'1' === 1 //falseCSRF가 무엇이며 어떻게 하면 막을 수 있나요?
CSRF 공격(Cross Site Request Forgery)은 웹 어플리케이션 취약점 중 하나로 인터넷 사용자가 자신의 의지완 무관하게 공격자가 의도한 행위(수정, 삭제, 등록 등)를 웹사이트에 요청하게 만드는 공격입니다.
방어하는 방법은 2가지로 Referrer 검증과 Security Token을 사용하는 방법이 있습니다.
Referrer은 Back-end 에서 request의 Referrer를 확인하여 도메인이 일치하는 지 검증하는 방법 입니다.Security Token은 사요자의 세션에 임의의 난수 값을 저장하고 사용자가 요청 마다 해당 난수 값을 포함시켜 전송해, Back-end 에서 요청을 받을 때마다 세션에 저장된 토큰 값과 요청 파라미터에 전달되는 토큰 값이 일치하는지 검증하는 방법 입니다.XSS가 무엇이며 어떻게 하면 막을 수 있나요?
Corss-site Scripting (XSS)는 클라이언트측을 대상으로 한 공격이며, 웹사이트에서 의도치 않은 스크립트를 넣는 기법을 말합니다. 게시판을 포함한 웹에서 자바스크립트 스크립트 언어를 삽입해 개발자가 의도하지 않은 기능을 작동시키는 것을 말합니다.
XSS를 방지하는 법
데이터를 입력할 때, DB에 insert할 때, select할 때, 출력할 때 모두 필터를 거치게 하여 XSS 공격을 방어할 수 있습니다.
계속 추가해 나가겠습니다.
