Young Blog

존중하며 버티자

애니메이션 성능

웹 애니메이션 성능에 기여하는 두 가지 주요한 요인이 있는데, 렌더링과 하드웨어 가속입니다. 렌더링은 DOM을 업데이트하고 화면에 변화를 반영하기까지 걸리는 처리 과정을 의미합니다. 이는 모든 애니메이션의 성능에 영향을 미칩니다. 하드웨어 가속은 CPU가 아닌 GPU에서 애니메이션을 실행하도록 위임하는 것입니다. 애니메이션이 메인 스레드에 의해 영향을 받…

캐시에 대해 알아보자

캐시란? 데이터나 값을 미리 복사해 놓은 임시 장소나 그런 동작을 의미합니다. 브라우저 캐시의 종류에는 메모리 캐시, 디스크 캐시가 있는데 메모리 캐시는 RAM에 저장되며 브라우저 종료 시 사라지지만 리소스를 빠르게 읽어올 수 있습니다 . 디스크 캐시는 디스크에 파일 형태로 되며 영구적입니다. 이런 캐시의 종류는 브라우저 내부의 알고리즘으로 사용 빈도나 …

🐞 플렉스 아이템의 크기가 컨테이너보다 커지는 오류

들어가며 실무를 하면서 CSS 플렉스 속성을 자주 사용하게 되는데 최근에 예상치 못한 플렉스 아이템의 크기가 플렉스 컨테이너보다 커져서 오버플로우되는 오류🐞를 목격하게 되었고 그 원인에 대해서 알아보면서 찾은 해결 방법을 공유하려고 합니다. 다음은 오류가 발생하는 상황을 재현한 코드입니다. Case 1 속성을 갖는 너비 의 메인 컨테이너에서 두 개의 아…

TypeScript 유틸리티 타입

타입 스크립트의 장점 중 하나는 기존의 타입을 이용하여 새로운 타입을 정의(type transformation)할 수 있는 유연성을 제공한다는 것입니다. 타입 스크립트는 자주 사용되는 type transformation에 대해서 전역적으로 사용할 수 있는 유용한 유틸리티 타입을 제공하고 있습니다. 유틸리티 타입에 대해 기능과 함께 어떻게 구현되어 있는지 …

npm은 어떻게 동작하는가

이 글은 How npm Works를 번역하고 정리한 글입니다. npm2와 npm3의 동작에 대해서 설명합니다. 패키지와 모듈 패키지는 에 의해 기술되는 파일이나 디렉토리를 의미합니다. npm 레지스트리에 등록되기 위해서는 파일을 반드시 포함해야 합니다. 모듈은 Node.js의 함수에 의해 로드될 수 있는 ( 디렉토리 내에 존재하는) 파일이나 디렉토리를…

textContent vs innerHTML vs insertAdjacentHTML()

어떤 요소의 text나 자식 요소에 대한 HTML 컨텐츠를 가져오고자 할 때 혹은 삽입하고자 할 때 사용할 수 있는 DOM API로는 Node.textContent, Element.innerHTML, Element.insertAdjacentHTML() 이 있다. 각 API에 대해 어떻게 동작하는지, 어떤 때에 사용하는 것이 좋은지 각각의 특징을 알아보도록…

2020 회고

2020년은 많은 것에 도전하고 경험하면서 개발자로서 성장을 이룰 수 있었던 한 해였습니다. 그래서 더 늦기 전에 경험한 것들을 잊어버리지 않도록 간단하게나마 정리해보려고 합니다. 기술적인 내용보다는 개인적인 감상을 담은 부족한 글이지만 2021년에 블로그를 열심히 하겠다는 다짐으로 용기내어 첫 글을 올려봅니다 ☺️ 미국에서 시작한 새 해 PeopleSpa…