전체 글 반응형 198 렌더링 최적화방법 렌더링 최적화 방법 1. 인라인 스타일 사용하지 않기 인라인 스타일은 가독성을 해칠 뿐 아니라 수차례 리플로우를 발생시킵니다. 그에 반해 외부 스타일을 사용할 경우 한 번만 리플로우를 발생합니다. 2. 작업 그룹핑 DOM 요소의 정보를 요청하고 변경하는 코드는 같은 형태의 작업끼리 묶어 실행시키는 것이 좋습니다. function popChange() { let width = document.getElementById("pop1"). style.width; document.getElementById("pop2"). style.width = width; let height = document.getElementById("pop3"). style.height; document.getElementById("po.. 2021. 8. 26. CSS 스타일 인라인스타일/내부스타일시트/외부스타일시트 이란? CSS 스타일 적용 3가지(인라인 스타일/내부 스타일시트/외부 스타일시트) 방법 인라인 스타일 / 내부 스타일 시트 / 외부 스타일 시트는 스타일 시트의 내용이 어느 곳에 위치하느냐에 분류됩니다. 인라인 스타일(Inline Style) - HTML 파일 태그 안에 직접 지정하여 사용합니다. - 태그에 직접 스타일을 지정할 때 용이합니다. - HTML과 섞여 있으므로 인라인 스타일을 많이 사용할 경우 가독성 하락 및 유지보수가 용이하지 않습니다. Ex) 좋은 하루 내부 스타일 시트(Internal Style Sheet) - HTML 파일 안에 별도의 영역으로 스타일을 정의합니다. 일반적으로 사이에 style을 적용합니다. - 태그를 사용하여 지정합니다. - HTML 페이지 안에 위치하므로 영향을 주는 범위.. 2021. 8. 25. CSSOM(CSS Object Model) 이란? CSSOM(CSS Object Model) 이란? 웹 사이트를 브라우저 상에 표현할 때 서버로부터 받은 정보를 브라우저가 렌더링 엔진을 통해 파싱 하는데 이때 두 가지 요소를 파싱 하는데 하나는 HTML 또 하나는 CSS입니다. 이때 HTML을 파싱 하여 자료를 구조화한 것을 DOM이라 하고 CSS 내용을 파싱 하여 자료를 구조화한 것을 CSSOM이라 합니다. 즉 DOM처럼 CSS의 내용을 해석하고 노드를 만들어 트리 구조로 만든 것을 CSSOM이라 합니다. CSSOM이 트리구조인 이유 어떻게 본다면 CSS는 트리 구조일 필요가 없습니다. DOM의 경우 태그 별로 위아래가 이미 존재하고 문서 구조화를 통해 다양한 작업을 수월하게 할 수 있습니다. 하지만 스타일은 위아래가 없는데 트리 구조라는 게 이상합니.. 2021. 8. 24. 렌더링 이란? 렌더링 이란? 렌더링이란 서버로부터 HTML 파일을 받아 브라우저에 보여주는 과정입니다. 브라우저는 서버로부터 HTML 문서를 받습니다. 그리고 브라우저의 렌더링 엔진은 HTML문서를 파싱 해서 DOM트리를 만들어 줍니다. 그다음 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱 하여 CSSOM(CSS Object Model) 트리를 만들어 줍니다. 그 결과 인라인으로 들어가 있는 스타일 속성이 우선순위를 가지게 됩니다. 다음으로 DOM트리와 CSSOM을 결합하여 렌더링 트리를 형성합니다. 이때 화면에 드러나지 않는 head 태그나 display 속성에 none 값이 할당된 요소는 렌더 트리에 포함되지 않습니다. 다음은 기기의 뷰포트 내에서 노드들의 정확한 위치와 크기를 계산하는 과정이 진행됩니다. 이.. 2021. 8. 23. CSRF(Cross-Site Request Forgery)는 무엇일까요? CSRF(Cross-Site Request Forgery)란? CSRF는 크로스 사이트 리퀘스트 변조라고 하며 한 문장으로 정리하면 '웹 애플리케이션 유저인 자신이 의도하지 않은 처리가 실행되는 취약성 또는 공격 수법'이라고 할 수 있다. 즉, 사용자가 자신의 의지와는 무관하게 공격자의 의도한 행위를 특정 웹사이트에 요청하게 하는 공격이라고 할 수 있습니다. CSRF에 의한 피해 이용자가 의도하지 않은 처리 실행: 로그인한 이용자만 허가되어 있는 페이지가 로그인 안 한 유저에게도 노출되는 현상 등 CSRF를 방지하는 방법 Form 페이지의 반환 시에 토큰을 부여 1. 예를 들어 처음 게시판에 글을 쓰는 화면을 표시할 때 서버가 클라이언트에 대해 특정한 문자열인 토큰을 발급합니다. 2. 실제로 글을 쓸 때.. 2021. 8. 12. XSS(Cross-Site Scripting)는 무엇일까요? XSS(Cross-Site Scripting)란? 먼저, XSS란 '유저가 웹 페이지에 접속하는 것으로 올바르지 않은 스크립트가 실행되는 취약점 또는 공격 방법'을 말합니다. 사이트 간 스크립팅으로 웹 앱에서 많이 나타나는 취약점의 하나이며, 웹 사이트의 관리자가 아닌 일반 유저가 웹 페이지에 악성 스크립트를 삽입할 수 있는 취약점입니다. 출처: https://www.nascenia.com/why-cross-site-scripting-is-detrimental-and-how-to-prevent/ XSS에 의한 피해 공격자에 의해 올바르지 않은 로그인 유저의 Cookie가 공격자에 손에 넘어가는 것으로 Cookie 내에 있는 유저의 세션 정보가 공격자에 의해 사용되는 것으로, 유저를 사칭하여 서비스를 이용.. 2021. 8. 11. 이전 1 ··· 6 7 8 9 10 11 12 ··· 33 다음
