Rendering ·
[Optimization] Lighthouse 분석을 통한 사이트 성능 최적화
이전 포스트에서 이미지를 최적화 하는 방안에 대한 내용을 학습하였습니다. 이번엔 Chrome 에서 제공하는 Lighthouse 의 분석을 토대로 차근차근 최적화를 진행해보도록 하겠습니다. Lighthouse 는 Google Chrome 에서 재공하는, 웹앱의 품질 개선에 도움을 주는 자동화 도구 입니다.
hippo/devloghippo/devlogRendering ·
이전 포스트에서 이미지를 최적화 하는 방안에 대한 내용을 학습하였습니다. 이번엔 Chrome 에서 제공하는 Lighthouse 의 분석을 토대로 차근차근 최적화를 진행해보도록 하겠습니다. Lighthouse 는 Google Chrome 에서 재공하는, 웹앱의 품질 개선에 도움을 주는 자동화 도구 입니다.
Rendering ·
우리가 웹 사이트를 운영하면서 가장 중요한건 사용자가 체감하는 유저경험일 것입니다. 속도 그리고 번들사이즈 등 다양한 요소들이 최적화가 필요한 부분이고 이에 대해 필자가 운영하고 있는 사이트에 대해 최적화를 진행해 보았습니다.
Browser ·
회사 프로젝트에서 Deep Link 와 관련된 구현에 대한 과제를 맡게 되었다. 이에 진행하는 과정과 전체적인 기술 내용을 세부적으로 알아본다. URL 링크 의 일종인 딥링크는 우리가 일상생활에서 흔하게 볼 수 있다.
Rendering ·
브라우저 동작과정에 대해서 그동안 공부해왔던 모든 것들을 최종적으로 정리해본다. 렌더링 해당 포스팅은 네이버 D2 블로그 관련 내용을 토대로 정리하였습니다.
Browser ·
3번의 CORS 포스팅의 마지막이다. 이제 최종적으로 "우리는 CORS를 어떻게 해결하면 될까?" 에 대해서 작성해 보려 한다.
Browser ·
앞선 포스팅에서 CORS가 무엇이고 왜 개발자가 어떤 부분을 고려해야 하는지에 대해서 정리해보았다. 이제 실제로 CORS가 어떤 프로세스로 진행되는지를 자세하게 확인해 보도록 한다.
Browser ·
시스템을 운영하면서 아래와 같은 오류를 다들 한번쯤은 보았을 것이다. 웹 개발을 하다보면 CORS 정책 위반으로 인해 에러가 발생하는 경우가 종종 있었다.
Browser ·
Awesome Icon에서 우리는 다양한 icon들을 무료로 사용 가능하다. URL : https://fontawesome.com/
Rendering ·
과거와는 다르게 모던 애플리케이션을 다루는 서비스회사에서 Single Page Application 의 형태로 서비스를 개발하고 있다.
Browser ·
프론트엔드는 공부하면 할수록 알고싶어지는게 너무 많은것 같다. 이번엔 브라우저에서 화면이 그려질때 즉, HTML 을 읽어내려갈때 <script> 태그를 만날때 진행되는 과정에 대해서 기록해본다. 우리가 흔히 웹 어플리케이션을 만들고 화면이 렌더링 되는과정에서 동적인 화면을 만들기 위해서 Javascript 호출이 필요하다.
Browser ·
실무에서 Vue.js 라는 SPA 개념의 프레임워크를 사용하면서 가상돔에 대한 궁금증이 생겼다. 가상돔은 무엇이며 왜 사용해야할까? 간단하게만 정리해 보았다. 앞선 포스팅에서 브라우저가 그려지는 과정에 대해서 공부한적이 있다.
Browser ·
실제 현업에서 Cookie 와 Session 의 사용은 매우 빈번한것 같다. 로그인, 팝업 등 다양한 서비스에 사용되는 기술인 만큼 기록을 해두는것이 좋을것 같다. HTTP 프로토콜 환경은 두가지 특성을 갖는다. connectionless
Rendering ·
현 회사에서는 VUE.js 로 모바일 프론트를 개발하고 운영하고 있다. 나름 SPA 시스템을 운영하고 있다고 생각하던 찰나, Vanilla JS 로 SPA 페이지를 구현하는 과제 문제를 풀게되었다.
Browser ·
Javscript 혹은 css 로 특정 값에 대한 이벤트를 먹이는 경우가 많다. 이때 정규식을 쓰면 좋은데 자주쓰는 것들을 익히기 좋은 사이트가 있어 기록해논다.
Browser ·
DOCTYPE 은 브라우저에게 해당 페이지가 HTML 로 작성된 문서임을 알려준다. 즉, 이 문서가 HTML 임을 브라우저에게 알려준다.
Browser ·
사용자 인터페이스 : 우리가 브라우저에서 볼수 있는 주소표시줄, 버튼 등 사용자가 컨트롤 할 수 있는 부분 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이 동작을 제어 렌더링 엔진 사용자가 요청한 URI 를 브라우저 엔진 으로부터 받아 서버에 요청한다.
Browser ·
Document : 우리가 알고 있는 HTML 의 전체 코드로 이해하면 되고 각 태그들을 객체로 이해하면 된다. DOM tree 의 최상위 객체이다. 위 이미지에서 보이 듯이 우리는 Document 라는 모든 HTML 코드를 가지고 있는 요소아래 각 태그들을 객체로 이해하면 된다.
