모듈화란? 코드를 작성할 때 코드의 재사용성과 유지보수성을 높이기 위해 모듈 단위로 코드를 구성하는 것 모듈화를 통해 코드를 분리하고 필요한 모듈만 가져와 사용하는 것이 가능 Class 모듈화 예시 class Person { constructor(name, age) { this.name = name; this.age = age; } hello() { console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`); } } export default Person; 다른 파일에서 person을 사용하고 싶으면 아래처럼 작성하면 된다. import Person from './person.js'; const person = new Pers..
브라우저 저장소란? Web Storage는 HTML5부터 추가된 기능 웹사이트의 데이터를 클라이언트에 저장할 수 있다. key-value로 데이터를 저장하고, key를 기반으로 데이터를 조회 로컬스토리지(Local Storage) 쿠키보다 더 많은 데이터를 저장할 수 있음(쿠키 4KB, 로컬스토리지 최대 5MB) 서버에 데이터를 전송할 필요가 없어서 네트워크 부하를 줄일 수 있음(클라이언트에서 사용) 데이터 만료날짜가 없어서 자동으로 삭제되지 않음 하지만 로컬스토리지에 저장된 데이터는 보안이 취약하다. 로컬스토리지에 저장된 데이터는 사용자가 직접 삭제하지 않는 이상 계속 보관됨 세션스토리지(Session Storage) 세션스토리지는 로컬스토리지랑 비슷하지만 큰 차이점이 있음 세션스토리지에 저장된 데이터..
Flex와 Grid의 차이 플렉스와 그리드는 레이아웃을 잡을 때 많이 사용된다. flex는 1차원으로 행, 열 영역 중 하나의 방향으로 레이아웃을 나눌 수 있고, Grid는 2차원으로 행, 열 영역을 동시에 나눌 수 있다. flex에 적합한 레이아웃은 아래의 이미지와 같다. 아래처럼 콘텐츠를 한 방향으로 정렬할 때 flex는 빛을 발한다. 반면 그리드는 아래처럼 좀 더 복잡한 레이아웃을 잡을 때 편리하다. grid는 flex와 달리 열과 행을 함께 나눠야할 상황에 사용하면 좋다. flex와 grid 중 어느 하나만을 고집해서 레이아웃을 잡기 보다는 각 상황에 알맞게 flex와 grid를 사용하는 것이 중요하다.
CSS 애니메이션 최적화 애니메이션 최적화는 왜 필요할까? 애니메이션을 구현하다보면 jank현상(스크롤 떨림, 지연, 끊김 등)이 나타난다. 이를 해결하기 위해 애니메이션 최적화가 필요하다. 애니메이션 최적화는 웹 사이트의 성능을 향상시킬 수 있고, 시스템을 절약하여 좋은 사용자 경험을 제공할 수 있다. 웹 브라우저의 랜더링 순서 웹 브라우저의 랜더링은 위와 같은 순서로 진행된다. 이 중에서 자세히 알아야 둬야 하는 부분은 Layout, Paint, Composite이다. 1. Layout 브라우저는 각 요소의 크기와 위치를 계산함 - width, height, margin, padding, position, display, float 등 2. Paint 브라우저가 요소의 스타일 정보를 이용하여 픽셀을 ..
폰트 preload 웹 폰트는 일반적으로 다른 리소스와 함께 다운로드 되는 경우가 많아서 성능 문제가 발생할 수 있음 이를 해결하기 위해 preload를 사용 preload를 사용하면 웹폰트를 브라우저가 미리 다운로드하기 때문에 페이지 로딩 속도가 빨라짐 (as 속성은 리소스 유형, type은 mime유형, crossorigin은 다른 도메인에서 폰트를 가져올 때 사용) preload는 페이지 성능을 개선할 수 있는 방법이지만, 폰트를 미리 다운로드 할 수 있는 만큼 많은 양의 폰트를 사용한다면 페이지 로딩 시간을 되려 증가시킬 수 있음 그리고 현재 페이지에서 사용하지 않는 폰트여도 폰트를 다운로드 할 수 있음 로컬폰트 로딩 CSS에서 폰트를 선언하게 되면 폰트를 무조건 다운로드 하게 됨 (불필요한 리소..
크로스 브라우징이란? 크로스브라우징이란 서로 다른 웹 브라우저(크롬, 사파리, 파이어폭스, 엣지 등등)에서 사용자에게 웹페이지가 동일하게 보여지는 것 혹은 작동하는 것을 의미 웹 페이지의 호환성을 해결하기 위한 것 그렇다면 크로스브라우징이 필요한 원인은 무엇일까? 브라우저 마다 랜더링 엔진이 다르기 때문 브라우저별 렌더링 엔진 (참고) 웹 브라우저의 랜더링 엔진은 HTML, CSS 및 JavaScript 문서를 받아들여서 웹 페이지를 렌더링하는 소프트웨어 (Chrome의 Blink, Firefox의 Gecko, Safari의 WebKit, Microsoft Edge의 EdgeHTML 등) 크로스 브라우징 작업 1. 웹 서비스에서 가장 높은 점유율을 가진 브라우저를 알아보기 - 구글애널리틱스나 브라우저 점..
