전체 글

❓ 웹 페이지 생명주기웹 페이지의 생명주기는 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..

❓ Lighthouse 란?Lighthouse는 Google에서 제공하는 무료 도구로, 웹 페이지의 성능, 접근성, SEO(검색 엔진 최적화) 및 Progressive Web App(PWA) 지표를 평가한다. ❗️Progressive Web App (PWA)PWA는 웹 애플리케이션의 기능과 네이티브 애플리케이션의 경험을 결합한 형태다. 주요 특징은 다음과 같다:오프라인 지원: 서비스 워커를 사용하여 인터넷 연결이 없는 상황에서도 작동할 수 있다.푸시 알림: 사용자가 웹 애플리케이션에 다시 방문할 수 있도록 알림을 보낼 수 있다.홈 화면 추가: 사용자가 PWA를 자신의 장치 홈 화면에 추가할 수 있어 네이티브 앱처럼 사용할 수 있다.PWA는 사용자 경험을 향상시키고, 더 나은 성능을 제공하며, 다양한 플랫..

❓ 연결리스트와 노드코딩테스트를 푸는 도중, 배열처럼 생긴 구조에 배열 메서드를 사용하려다가 타입 에러가 나서 확인해 보니,연결리스트라는 걸 사용해야 풀 수 있는 문제였다.그렇다면 연결리스트가 뭘까? 연결리스트는 데이터가 차례차례 연결된 일종의 체인이라고 할 수 있다.쉽게 설명하자면, 마치 기차처럼 각 칸(노드)이 다른 칸과 연결되어 있는 구조이다.하지만 배열과는 달리, 이 연결된 칸들이 메모리상에 연속적으로 배치되지는 않는다. 📌 연결리스트의 구조연결리스트는 노드들이 하나씩 연결되어 이어진 구조를 갖고 있다.head: 연결리스트의 첫 번째 노드(시작점)를 가리키는 포인터tail: 마지막 노드를 가리키는 포인터null: 마지막 노드는 더 이상 연결된 노드가 없기 때문에 마지막 노드의 next 는 nul..