프론트엔드 개발

Webpack과 Bundle.js Webpack은 css,js,file 등을 하나의 파일로 만드는 만큼 용량이 클 수 밖에 없습니다. 어떻게 이 용량을 줄일 수 있는 지 알아보겠습니다. 성능 측정 PageSpeed Insights 측정 도구 Tool: @next/bundle-analyzer cmd yarn add @next/bundle-analyzer next.config.js const withPlugins = require('next-compose-plugins') const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: process.env.ANALYZE === 'true', }) module.exports = withPlugin..

웹 폰트를 무작정 가지고 올 때는 CDN을 이용하여 폰트를 가져오고 있었습니다. 매번 폰트를 가져오기 위해서 CDN 네트워크 통신을 하게 되는 점과, 웹 폰트를 가져올 때의 UX를 개선시킬 수 있을까 하는 고민을 했습니다. 이용하는 cdn 서버가 가깝지 않다면? 처음 웹에 들어갔을 때 폰트가 없어졌다가 생기는 것과같이 불편하게 보여진다면? cdn 서버가 멀게 되면 폰트를 직접 다운로드하여서 사용하면 네트워크 비용을 줄일 수 있지 않을까?라는 생각을 했고, 브라우저에서 렌더링 차단 처리 방식을 이해하여 웹 폰트 최적화하는 방법을 알고 적용시키고자 합니다. 웹 폰트의 사용 방법 naver D2의 글에서는, 웹폰트의 기본 사용방법을 설명합니다. CSS의 @font-face 규칙 font-family: 사용할 ..

전 글에서 쿠키와 세션에 차이점을 알아보았다. 이번에는 직접 함수를 구현하여, Javascript로 쿠키를 읽어보고, 생성 및 삭제를 알아보겠다. 쿠키 저장 function setCookie(name, value, day) { const date = new Date(); date.setTime(date.getTime() + day * 24 * 60 * 60 * 1000); document.cookie = name + '=' + value + ';expires=' + date.toUTCString() + ';path=/'; }; 쿠키 읽기 function getCookie(name) { const value = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|..

오늘날 대부분의 기기는 초당 60회의 빈도로 화면을 새로 고칩니다. 실행 중인 애니메이션이나 전환이 있거나 사용자가 페이지를 스크롤 중이면, 브라우저가 기기의 새로고침 빈도에 일치하여 각 화면 새로고침에 대해 하나의 새 그림이나 프레임을 제공해야 합니다. 각 프레임에는 16ms 가량의 시간만 할당됩니다(1000ms/60 = 16.66ms). 하지만 실제로 브라우저는 실행 준비를 해야 하므로 10ms 내에 모든 작업을 완료해야 합니다. 이 제한 시간을 충족하지 못하면 프레임 속도가 떨어지고 화면에서 콘텐츠가 떨리게 됩니다. 이러한 현상을 버벅거림 현상이라고 하며 사용자에게 거부감을 줍니다. 이러한 현상이 어디서 발생할 수 있는지 알아보고, 어떻게 해결하면 좋을지 이번 시간을 통해 보겠습니다. 브라우저는 C..

브라우저는 웹 페이지에 필요한 리소스를 내려받고 해석한 뒤, 다운로드, 파싱, 스타일, 레이아웃, 페인트, 합성으로 나뉘는데 단계마다 어떤 일이 발생하는지 알아보겠다. 브라우저에서 웹 페이지를 로드하면 가장 먼저 HTML 파일을 다운로드한다. 파싱은 다운로드한 HTML을 해석하여 DOM 트리를 구성하는 단계이다. 파싱 중 , , 를 발견하면 각 리소스를 요청하고 다운로드한다. HTML 또는 리소스에 CSS가 포함된 경우에는 CSSOM 트리 구성 작업도 함께 진행한다. 크롬 브라우저 Rendering Path HTML Parser DOM: Document Object Model - Document = HTML, well-formed XML - ObjectModel = Data + Method Javascr..

왜 쿠키와 세션을 쓰게 된 걸까? client와 server는 항상 연결되어 있는 상태가 아니라 요청(request)과 응답(response)의 반복으로 데이터를 주고받는다. 서버는 사용자를 기억하지 못하는데, 이는 HTTP가 다음과 같은 특성을 따르기 때문이다. - connectless(request -> response -> 연결 종료) - stateless(no connect -> no memory) 이를 해결하기 위해 쿠키와 세션을 사용하게 되었다. 쿠키(cookie) 클라이언트 측 로컬 브라우저에 저장되는 Key-Value쌍의 작은 데이터 이후 클라이언트가 데이터를 요청 시, header에 쿠키를 넣어 서버에 보내게 되고, 서버가 쿠키를 읽어 사용자 식별. 로그인 정보가 쿠키에 담겨 있다면, 더..

form.fordate.org/#/test 회사에서 만든, 서비스 중 하나에서 예시를 들어봤다. 네트워크 탭에서, F5를 누르면 하단에는 종합정보 좌측부터 다운로드 요청갯수 : 23 requests 수신한 데이터 크기 : 2.8MB 웹페이지 총 크기: 2.9MB 다운로스 소요시간: 8.97s DOM Tree 구조를 그리는데 걸리는 시간: 2.51s 웹페이지 렌더링 완료시간: 3.03 s 다운로드 크기와 페이지 크기가 서로 다른 이유 웹 서버가 압축된 리소스를 전송했기 때문에,