들어가며 디자인을 할 때 여러 해상도를 대응해야 하는 것은 필수적이다. 특히나 요즘에는 너무나도 다양한 기기들이 나오다 보니 하나의 서비스를 만들 때 모바일 앱이 아닌 이상 데스크탑, 태블릿, 모바일 그리고 이 디바이스에서도 다양한 해상도를 대응해야 한다. (갤럭시 플립, 폴더···) 그래서 디자인 시스템 Foundation 영역에 들어갈 브레이크...

vscode 터미널에 git 현재 branch 표시하기 vscode 터미널 사용 시 현재 브랜치 명이 표시되지 않아 불편하다. $ touch .bash_profile $ open .bash_profile 터미널에 .bash_profile 파일을 만들어주고 열어준다. parse_git_branch() { git branch 2> /de...

스크롤 기능을 막아야 하는 상황에서 대부분은 body 에 overflow-y: hidden 을 주는 방법이 제시되지만, 그렇지 않은 경우 자바스크립트로 이를 처리해야 한다. javascript로 scroll, mousewheel, touchmove 등의 이벤트를 걸어 e.preventDefulat()로 이벤트를 막아볼 수 있겠지만, mousewhe...

브라우저 동작 원리 브라우저 로딩 과정: 파싱 > 스타일 > 레이아웃(리플로우) > 페인트 > 합성 & 렌더 프론트엔드의 성능 최적화를 확인하기에 앞서 브라우저가 어떻게 화면을 사용자에게 보여주는지를 알아야 한다. 브라우저의 동작과정부터 React까지 프론트엔드 성능 최적화 프론트 엔드 성능 최...

브라우저가 css 셀렉터를 해석하는 방법 브라우저가 css 선택자를 해석하는 방식은 일반적으로 css를 작성하는 방식과는 반대다. 브라우저는 오른쪽에서 왼쪽으로 css 선택자를 해석 한다. div p a { } 예를 들어, div p a 라는 선택자가 있다면, 브라우저는 먼저 모든 a 태그를 찾고, 그 중에서 부모 요소가 p 인 것을 찾고, 마지...

history API 브라우저는 페이지 로딩 시 세션 히스토리를 갖는다. 세션 히스토리는 페이지를 이동할 때마다 쌓이며, 이를 통해 뒤로가기 시 이전 페이지로 가거나 뒤로 간 이후 다시 앞으로 가는 등의 이동이 가능하다. 사용자가 페이지를 새로고침 하거나 뒤로가기/앞으로가기 버튼을 클릭하지 않아도, 웹 애플리케이션 내에서 프로그래밍 방식으로 페이지...

‘오늘날씨’ 입력 value 삭제 후 ‘내일날씨’ 입력을 위해 ‘ㄴ’ 입력 (‘씨’ 가 buffer로 자동입력) 한글은 자음, 모음으로 구성된다. iOS에서 input 에 있는 value를 ‘X’ 버튼 등으로 한번에 삭제하고 다시 input에 focus를 주려고 할 때, input에 입력되어 있던 문자가 한글이고, 마지막 문자가 받침이 없는 ...

imagesLoaded imagesLoaded Plugin을 사용하면 이미지의 로딩 여부를 체크하여 이벤트를 발생시킬 수 있습니다. CDN <script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script> NPM $ npm install im...

Scroll based Progress 스크롤 기반의 진행률을 나타낼 수 있는 다양한 애니메이션을 구현합니다. Progress Bar CSS scale 값 0 ~ 1 을 이용해서 progress bar를 구현합니다. const progress = document.querySelector('.progress'); const percent = docu...

immediateRender 즉시렌더, from() 및 fromTo() 트윈의 immediateRender 속성은 예상치 못한 결과가 나올 때만 알게 되는 것 중 하나입니다. 이 예상치 못한 결과는 동일한 엘리먼트에 동일한 from() 또는 fromTo() 트윈이 여러 개 설정되어 있을 때 나타납니다. GSAP 작동 방식 필수 개념 요소 from()...