패키지 매니저란 프로젝트에서 종속성을 관리하고 외부 패키지를 설치, 업데이트 제거하는 도구 1. npm node.js를 설치하면 함께 제공되는 패키지 매니저 package.json파일을 사용해서 종속성 관리 npm install (npm i)로 패키지를 설치함 2. pnpm npm을 기반으로 만들어진 패키지 매니저 npm보다 빠른 설치 속도와 적은 디스크 공간 사용을 제공함 npm과 yarn의 문제점을 해결하기 위해 개발됨 ghost dependency문제를 해결해서 예상치 못한 버그를 방지함 3. yarn npm의 단점 보완을 위해서 facebook에서 만든 패키지 매니저 npm보다 나은 캐싱 매커니즘을 제공함 4. yarn-berry yarn 2.x버전부터 도입됨 (yarn의 다음세대 버전) 플러그..
https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading Lazy loading - Web performance | MDN Lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. It's a way to shorten the length of the critical rendering path, which translates into reduced page load times. developer.mozilla.org https://imagekit.io/blog/lazy-loading-images..
접근성을 고려한 모달을 코드를 작성해보았다. 모달을 열었을 때 tabindex 속성을 추가해서 모달열기 버튼을 탭키로 접근되지 않도록 했다. aria-hidden을 조절해서 스크린리더에 안읽히도록 조정했다. See the Pen Untitled by 이아름 (@aahreum) on CodePen. aira-modal = 'true' => 모달 대화 상자임을 나타냄 role='dialog' => 대화형 창 역할을 함을 나타냄 aria-labelledby='modal-title' => 모달 제목을 나타내는 요소의 ID를 참조함 aria-describedby='modal-desc' => 모달 내용을 나타내는 요소의 ID를 참조함 참고 https://developer.mozilla.org/en-US/docs/W..
참고 https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API HTML Drag and Drop API - Web APIs | MDN HTML Drag and Drop interfaces enable applications to use drag-and-drop features in browsers. developer.mozilla.org https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop File drag and drop - Web APIs | MDN HTML Drag and Drop interfaces enable web ..
인피니티 스크롤 (infinite scroll) 인피니티 스크롤은 웹사이트나 앱에서 사용자가 스크롤을 할 때 새로운 콘텐츠가 계속해서 로딩되는 방식 fetch API 사용하여 인피니티 스크롤 구현하기 로딩중... const dataContainer = document.getElementById('data-container') const loadingMessage = document.getElementById('loading-message') let loading = false let page = 1 function loadData() { if (loading) return loading = true loadingMessage.style.display = 'block' // fetch API를 사용하여 서..
