따꿍의 프로젝트

전반적인 구조위는 Critical Rendering Path (CRP)로브라우저가 HTML -> 화면 픽셀로 바꾸는 과정 중처음 화면을 그리기까지 필요한 핵심 단계를 의미한다. (최소 렌더링 과정)DOM (Document Object Model): HTML과 다르게 JS로 조작 가능한 객체 형태이다. 이 CRP가 느리면- First Paint 늦어짐- UX 나빠짐- SEO에도 영향이 감=> Blocking(다 받아야 다음단계로 넘어감)한 CSS

한줄 정리이벤트 버블링은 이벤트가 발생한 요소에서부터 부모로 전파되며 상위요소의 이벤트 핸들러가 실행되는 현상을 뜻합니다. 브라우저의 이벤트 흐름은 캡처링 → 타겟 → 버블링 순서로 이루어지며,버블링 단계에서 자식에서 발생한 이벤트가 부모로 전달됩니다.이를 방지하기 위한 방법은 바로 e.stopPropagation()입니다. 설명안에 있는 버튼을 클릭했는데 밖의 부모의 onClick이 발동하는 경우를 보셨을겁니다. 이게 바로 Event 버블링을 고려하지 않아서 발생한 문제인데요,브라우저가 어떤 식으로 이벤트를 인식하는지 이해하면 어렵지 않은 개념입니다. 브라우저의 이벤트 DOM 트리에서 캡처링 단계에 자식까지 내려갔다가자식에서 다시 root인 html로 다시 돌아가는 버블링과정에서 이벤트를 인식해내..

한줄 정의Promise는 비동기 작업을 완수하는데 사용하는 JS 내장 객체입니다.JS 컴파일러 자체가 싱글 스레드라 자체적으로 비동기를 지원하지 않는데,이를 위해 JS는 이벤트 루프, Web API, 그리고 Task Queue를 사용합니다. 이러한 흐름에서 Promise는 비동기 결과를 다루기 쉽게 하는 객체입니다. 이러한 Promise는 3가지 단계가 있는데, 바로Pending, Fulfilled와 Rejected 단계입니다.executor 함수 안의 resolve와 reject를 통해서 상태를 변경하며, 한번 상태가 결정되면 이후에 변하지 않습니다. 처음에는 Pending(대기 상태)이고,작업이 성공하면 Fulfilled, 실패하면 Rejected 상태로 전이됩니다.이러한 Promise의 상태는 H..

스프린트 내용https://github.com/quothraven1122/13-sprint-mission-fe/issues/32 feat: create market page · Issue #32 · quothraven1122/13-sprint-mission-fe💬 기능 설명 Figma 디자인 중고마켓 페이지를 작성할 계획입니다. 🎬 작업 흐름 공통 컴포넌트 생성 버튼 생성 상품 컴포넌트 생성 검색창 생성 dropdown 생성 페이지 구성 생성 Header 작성하기 Bodygithub.com 작업 흐름- vite로 프로젝트 생성하기 (React + JS Compiler)- vite starter template 지우기- layout 만들고 header와 footer만들기 MainLayout이라는걸..