분류 전체보기

1️⃣ Middleware 란?미들웨어(Middleware)는 말 그대로 중간에서 처리하는 코드이다. 웹 애플리케이션에서 클라이언트의 요청(Request)을 서버가 처리해서 응답(Response)을 보내는 과정 중에, 그 "중간"에서 실행되는 로직을 미들웨어라고 부른다. 📌 미들웨어가 하는 일 미들웨어는 클라이언트의 요청을 서버가 처리하기 전에 요청을 가로채서 수정하거나, 추가적인 처리를 하는 역할을 한다.예를 들어, 요청을 보낸 사용자가 인증된 사용자만 접근할 수 있는 페이지에 들어가려고 할 때, 미들웨어가 요청을 가로채고 사용자가 인증되었는지 확인한 후, 인증되지 않았다면 로그인 페이지로 리다이렉트 할 수 있다. 📌 미들웨어가 필요한 이유인터넷을 사용할 때, 클라이언트와 서버는 서로 계속해서 요청..

❓ 웹 페이지 생명주기웹 페이지의 생명주기는 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는 사용자 경험을 향상시키고, 더 나은 성능을 제공하며, 다양한 플랫..