회고

심화 자료구조(양방향, 단방향 연결 리스트, 이진 트리등)를 학습할 예정인데, 학습하려는 모든 자료구조에 대한 새로운 클래스를 정의하기 위해 ES2022 JavaScript의 클래스 문법에 대해 한 번 정리해 보려고 한다. ES2022 클래스 구문 개요 단방향 연결리스트, 양방향 연결리스트, 스택, 큐 등 다양한 자료 구조를 구현할 것이다. JavaScript는 이 중 어떤 자료 구조도 사전에 포함시켜서 제공하지 않는다.따라서 익숙해져야 할 것들은 다음과 같다:클래스 핵심 용어생성자(constructor) 작성new 연산자를 통한 인스턴스화클래스란 무엇인가?일반적으로, 사전에 정의된 속성 및 메서드를 이용해 객체를 생성하기 위한 청사진이다. 패턴을 만들면 객체들을 인스턴스화할 수 있다. 인스턴스화(I..

Array.from: 메서드 분석하기Array.from()이라는 메서드를 알고 있었다. 나는 이 메서드가 '문자열을 배열로 변환'하는 메서드라고 인지하고 정리해두었는데, 강의에서 나오는 코드를 보다 보니, 잘못된 정의였다는 걸 알게 되었다.Array.from()은 “유사 배열(array-like) 객체나 iterable을 진짜 배열로 바꿔주는" 메서드로 정리할 수 있고, 좀 더 내부 동작을 살펴보면 더 흥미로운 점이 나타난다.이번 글에서는 직접 공부하면서 헷갈렸던 부분(특히 this가 생성자가 된다는 설명)을 정리하고, ECMAScript 사양을 바탕으로 Array.from의 내부 동작을 해설해보겠다.1. 기본 사용법Array.from(arrayLike)Array.from(arrayLike, mapFn)..

이벤트 위임이벤트가 발생한 요소가 아니라, 부모 요소에서 이벤트를 처리하는 기법. 이벤트가 발생한 요소에 이벤트 핸들러를 설정하는 대신, 해당 이벤트가 버블링(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이벤트의 경우..