티스토리챌린지

❓ 웹 페이지 생명주기웹 페이지의 생명주기는 HTML 문서를 로드하여 DOM 을 생성하고, 리소스(이미지, 스타일 시트 등)를 불러와 화면을 완성한 후, 페이지를 떠날 때까지 이어지는 일련의 과정을 의미한다. 🌱 주요 생명주기 단계HTML 로드 시작: 브라우저가 HTML 문서를 다운로드하고 파싱 시작DOM 생성: HTML 파싱이 완료되고 DOM(Document Object Model) 트리가 완성됨.리소스 로드: CSS, 이미지, JS 등 외부 리소스가 로드됨.페이지 인터랙션: 페이지가 사용자와 상호작용을 시작함.페이지 언마운트: 사용자가 페이지를 떠나거나 브라우저 탭이 닫히면서 페이지가 언마운트됨. 🔍 생명주기 단계별 주요 이벤트1️⃣ DOM 생성: DOMContentLoadedDOMContentL..

❓ 웹에서 이벤트를 사용하는 이유1️⃣ 이벤트란 무엇이고 왜 사용할까?웹 사이트가 처음 등장했을 때, 그 목적은 단순히 정보를 보여주는 것이었다. 하지만 시간이 지나면서 사용자와 상호작용하는 웹 애플리케이션의 수요가 높아졌다. 사용자는 단순히 글이나 이미지를 보기만 하는 것이 아니라, 직접 버튼을 클릭하거나, 스크롤을 움직이고, 데이터를 입력하는 등의 다양한 행동을 통해 웹과 상호작용하기를 원했다. 그래서 등장한 것이 "이벤트" 이다. 이벤트는 웹 페이지에서 사용자의 행동을 감지하고 그에 반응하는 메커니즘이다. 버튼을 클릭하거나 텍스트를 입력하는 등의 상호작용을 통해 웹 페이지가 즉각적으로 반응하도록 만들어준다. 예를 들어, 버튼을 클릭하면 팝업 창이 열리거나, 입력 필드에 값을 넣으면 실시간으로 해당 ..

📌 offsetHight / offsetWidth: 요소의 전체 크기offsetHeight: 요소의 전체 높이를 반환한다. 패딩과 보더를 포함한 높이로, 스크롤 바와 마진은 제외된다.offsetWidth: 요소의 전체 너비를 반환한다. 마찬가지로 패딩과 보더를 포함한 너비로, 스크롤 바와 마진은 제외된다. ✅ 예시const element = document.getElementById('target');console.log(element.offsetHeight); // 요소의 전체 높이 (패딩, 보더 포함)console.log(element.offsetWidth); // 요소의 전체 너비 (패딩, 보더 포함) 활용 예시전체 크기 계산 후 레이아웃 조정: 페이지 내에서 특정 요소의 전체 크기를 계산하고,..

🚨 문제 코드 및 오류 상황프로젝트 내에서 특정 폴더나 파일을 간편하게 참조하기 위해 alias 설정을 적용하려고 했는데, 아래와 같은 오류가 발생했다.이는 TypeScript 가 설정된 alias 를 제대로 인식하지 못해 생기는 문제였다.모듈 또는 해당 선언을 찾을 수 없습니다.​ 먼저, 나는 tsconfig.json 에서 alias 를 다음과 같이 설정했다.이렇게 설정한 후, alias 를 사용했을 때 오류 메시지가 발생했고,처음에는 설정이 잘못되었거나 Vite 와 TypeScript 간 호환성 문제라고 생각했다.// tsconfig.json{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"], "@ap..