개발에 도움이 되는/Web (7) 썸네일형 리스트형 Web 성능 최적화 Web 성능 최적화는 크게 Rendering 최적화와 Loading 최적화로 나눌 수 있다. 개발자 도구(F12)에 있는 Lighthouse를 이용하여 성능 테스트를 할 수 있음 - Rendering 최적화 1. HTML 최적화 1) tag안에 직접 지정하는 Inline style을 사용하지 않는다. 불필요한 코드 중복이 발생하기 쉽고, 웹페이지가 그려지는 과정 중 Layout에 영향을 미쳐 추가 Reflow를 발생한다. 2) 복잡한 DOM Tree를 지양한다. DOM Tree가 커질수록 Rendering 속도가 느려지기 때문에 불필요한 요소는 제거한다. 2. CSS 최적화 1) Reflow, Repaint 최소한으로 줄이기 브라우저 style은 Reflow(넓이, 높이, 위치 등) 후 Repaint를 .. JWT(Json Web Token) - JWT (Json Web Token) 쿠키와 세션의 단점을 보완하기 위해 나온 모바일이나 웹의 사용자 인증을 위해 사용하는 암호화된 토큰 인증에 필요한 정보들을 Token에 담아 암호화시켜 사용하는 토큰 JWT를 이용하면 유저가 자신의 데이터를 볼 수는 있는데 수정은 서버를 통해서만 할 수 있다 - JWT 구조 위 그림과 같이 header, payload, signature 세 파트로 나뉘어져있고, 각 파트는 . 으로 구분한다. 모두 Base64Url로 인코딩되어 있다. 1. header : 토큰의 타입, 서명 생성에 어떤 알고리즘이 사용되었는지 설정 { "typ" : "JWT", "alg" : "HS512" // HS512 알고리즘이 적용되어 private key를 암호화 } 2. payload :.. localStorage, sessionStorage Web Storage 객체인 localStorage와 sessionStorage는 브라우저 내에 key-value 쌍을 저장할 수 있게 해 준다. 개발자 도구(F12)에 Application 탭에 들어가면 Storage를 확인할 수 있다. 이 두 Storage는 같은 API를 가지며, key-value는 반드시 문자열이어야 한다. 쿠키와는 다르게 Web Storage 객체는 네트워크 요청 시 서버로 전송되지 않는다. 이런 특징 때문에 쿠키보다 더 많은 자료를 보관할 수 있다. 대부분의 브라우저가 최소 2MB 그 이상의 Web Storage 객체를 저장할 수 있도록 해준다. 쿠키와 또 다른 점은 서버가 HTTP Header를 통해 Storage 객체를 조작할 수 없다는 점이다. Web Storage 객체 .. DOM(Document Object Model) - DOM (Document Object Model) 스크립트 언어로 HTML 요소를 제어할 수 있도록 하는 문서 객체 모델이다. 일종의 인터페이스며, DOM은 웹사이트를 구축하는 데 사용하는 Web API이다. HTML 문서를 기반으로 Node Tree로 표현하며, HTML과 항상 동일하지 않다. 예를 들어 자바스크립트로 DOM을 조작하여 수정하여도 HTML이 바뀌는 것이 아니다. - DOM 간단 조작 1. Create : createElement으로 원하는 tag를 생성할 수 있고 할당도 가능 ex) document.createElement('div'); 2. Append : 요소에 append or appendChild ex) document.body.append(넣을 요소); 3. Read : q.. SSR(Server Side Rendering), CSR(Client Side Rendering) - SSR : 서버로부터 완전하게 만들어진 HTML 파일을 받아와 페이지 전체를 렌더링 하는 방식 - 동작 과정 1) 클라이언트는 초기 화면 로드를 위해 서버에 요청을 보냄 2) 서버는 화면 표시하는데 필요한 데이터를 얻어와 모두 적용하여 렌더링 준비를 마친 HTML과 해당 JS 파일을 전달 - 특징 1) 페이지를 이동할 때마다 위 과정을 거치기 때문에 새로고침되어 화면이 깜빡임 2) 먼저 화면을 보여주고 나서 처리하기 때문에 TTV (Time To View)와 TTI (Time To Interact) 간에 시간 간격이 존재한다. - 장점 1) 검색 엔진 최적화 (SEO) 2) 빠른 초기 로딩 - 단점 : 1) 요청 할 때마다 새로고침을 하면서 깜빡임이 생겨 UX 관점에서 좋지 않음 2) 서버 렌더링에 .. SPA(Single Page Application) - SPA (Single Page Application) : 단어를 그대로 해석하면 단일 페이지 어플리케이션이다. 서버로부터 새로운 페이지(HTML)를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자에게 더 나은 UX를 제공할 수 있다. SPA는 웹 앱에 필요한 모든 정적 리소스를 처음에 한번 다운로드한다. 페이지 간 이동 시, 페이지 갱신에 필요한 데이터만을 Json으로 전달받아 페이지를 갱신하므로 전체적인 트래픽을 감소할 수 있고, 전체 페이지를 다시 렌더링하지 않고 변경되는 부분만을 갱신하므로 새로고침이 발생하지 않는다. 위의 그림들을 보면 더 직관적으로 이해할 수 있을 것이다. - 장점 1. 자연스러운 사용자 경험(UX) : 전체 페이지를 업데이트할 필요가 없어서 깜빡거림이 안생긴.. Web browser 동작 과정 사용자가 크롬과 같은 웹 브라우저 주소창에 URL을 입력하면 이를 DNS로부터 IP 주소를 받은 뒤(어떻게 IP 주소를 받는지 보러가기), 웹서버를 통해 해당 IP의 화면에 보여줄 Data를 요청한다. 받은 Data를 이용하여 화면에 출력을 한다. 어떤 방식으로 Data를 처리하여 화면에 출력하는지 정리해보려고 한다. 우선 받은 Data(HTML, CSS, Img 등)는 웹 표준화 기구인 W3C의 명세에 따라 해석한다. - 용어 1. DOM (Document Object Model) : 파싱한 HTML 파일 내용과 구조를 자바스크립트가 이해할 수 있는 객체 행태로 변경한 것 2. CSSOM (Cascading Style Sheets Object Model) : 파싱한 CSS 정보를 객체 형태로 변경한 것.. 이전 1 다음
