회고

이벤트 위임이벤트가 발생한 요소가 아니라, 부모 요소에서 이벤트를 처리하는 기법. 이벤트가 발생한 요소에 이벤트 핸들러를 설정하는 대신, 해당 이벤트가 버블링(Bubbling)되어 부모 요소에게 전달 될 때 부모 요소에서 이를 처리한다. 즉 이벤트가 부모 요소에 위임(delegation)된다.이벤트 위임의 각기 다른 2가지 사례를 통해 이벤트 위임을 알아보자. 이벤트 위임 사례 1ul 안의 특정 li박스를 클릭 했을 때 강조 적용하기 HTML 박스 박스 박스 박스  JSul.onclick = function (e) { let li = e.target.closest("li");//(1) if (!li) return; if (!ul.contains(li)..

Dom 이벤트의 흐름1. 캡처링이벤트가 하위 요소로 전파되는 단계2. 타깃 단계이벤트가 실제 타깃 요소에 전달되는 단계3. 버블링이벤트가 상위 요소로 전파되는 단계출처: JavaScript Event Flow: Bubbling, Capturing, and Delegation Decoded!를 클릭하면 이벤트가 최상위 조상에서 시작해 아래로 전파되고(캡처링 단계), 이벤트가 타깃 요소에 도착해 실행된 후(타깃 단계), 다시 위로 전파된다.(버블링 단계).Dom 이벤트 흐름의 특징캡처링 단계를 사용하는 경우는 거의 없다. 이벤트 타겟 순서는 기본적으로 버블링이다. 이전에는 이벤트 타겟 순서가 브라우저별로 달랐지만,  W3C에서 표준 이벤트 실행 순서를 지정했다.타깃이 되는 가장 하위 요소부터 이벤트를 상위로..

Board page기기거래 외 전체 게시판 표시 페이지*Layout : RegionMenu 유기체 컴포넌트 - 현재 아이디 기반 지역 표시(pocketbase)버튼 카테고리 - 주제 클릭 시 주제목록 표시, '같이해요' 클릭 시 '같이해요'게시판 이동게시글 컴포넌트 - pocketbase에서 같이해요와 질의응답 페이지를 조인하여 출력 및 각 카테고리 양식 최적화 *Layout: Header 유기체 컴포넌트 - clickEvent를 index로 받아 한 아이콘만 클릭할 수 있게 제작 단순 게시글 표시 이미지에 빈 alt속성 부여, 텍스트와 중복되는 alt속성 삭제 조도 개선- 웹 접근성 70->100 향상BoardWith page주제 선택 시 주제에 해당하는 게시글 출력최근작성, 모집 중인 글만 확인 가능..

Throttle 장애물을 사용하여 유체의 흐름 속도를 늦추는 뜻으로, 프로그래밍에서는 특정속도로만 작업을 수행하는 것을 가리킨다. 여러 번 발생하는 이벤트를 일정시간 동안 한번만 실행한다.Debounce여러 번 발생하는 이벤트에서 지정된 시간 내의 가장 마지막 입력만 실행한다. https://www.linkedin.com/posts/sleeksky_%3F%3F%3F%3F%3F%3F%3F%3F%3F%3F-%3F%3F-%3F%3F%3F%3F%3F%3F%3F-activity-7119939361386766337-Q5tEThrottle 사용사례와 코드 예시지속적으로 업데이트 되는 다른 상태와 안정적으로 동기화할 때 사용한다. ex) 계속 화면 밑바닥과 얼마나 떨어져 있는 지 확인해야 하는 scroll이벤트의 경우..

Custom Element클래스에서 설명하는 사용자 지정 HTML 요소를 자체 방법과 속성, 이벤트 등으로 만들 수 있습니다. 사용자 지정 요소가 정의되면 내장된 HTML 요소와 동등하게 사용할 수 있습니다.HTML Dictionary은 풍부하지만 무한하지는 않기 때문에 이 선택이 좋습니다.HTML Dictionary에는 easy-tabs, sliding-carousel, beautiful-upload등이 없습니다… 우리가 필요로 할 다른 tag들에 대해 생각해봅시다.그를 특별 클래스로 정의한 다음 항상 HTML의 일부인 것처럼 사용할 수 있습니다.두 가지 종류의 사용자 지정 요소가 있습니다:Autonomous custom elements자율 사용자 지정 요소 - 추상적인 HTMLElement 클래스를 ..

1. 비동기(async) 통신의 필요성동기(Sync) 통신에서는 모든 데이터를 한 번에 전송하고 처리해야 하지만, 비동기(Async) 통신은 필요한 데이터만을 독립적으로 처리할 수 있어, 효율적으로 데이터를 변경하고 업데이트할 수 있다. 비동기 통신이 필요한 경우는 아래와 같다.Web API* 요청 (서버에 데이터를 받아올 때)]파일 읽기 (서버에 파일을 읽어와야 할 때)파일 쓰기 (클라이언트 단에서 데이터를 생성할 때 )파일 수정 (클라이언트 단에서 데이터를 수정할 때 )파일 제거 (클라이언트 단에서 데이터를 제거할 때)암호화 / 복호화예약 작업 (특정 날짜와 시간에 작업을 수행할 때)API란 Application Programming Interface의 약자로, 두 소프트웨어 시스템이 서로 상호작용할..