[ TIL ] 프로그래머스 DAY 15 : To Do List 만들기 ( Component + SPA 구조)

🙋🏻‍♂️

지금 정리하는 내용은 일부 오타나 잘못된 내용이 기입되어 있을 수 있습니다. 가급적 오류를 줄이겠지만 일부분 발생할 수 있다는 점 양해부탁드립니다. 잘못된 내용 수정이나 추가 설명이 필요할 때 댓글로 알려주시면 감사하겠습니다.

🍪 배운 목록

• To Do List 만들기

🍽 배운 내용 요약 및 중요한 것

함수 인자값 바로 초기화하기

ES6 이후 나온 신문법으로 함수의 인자값을 바로 정의해 넣어주어 초기값에 대한 방어 코드를 실행문 하단에 작성하지 않아도 되는 장점을 줄 수 있습니다.

const Fuc1 = (addValue = "")=>{
	this.state = {...this.state, add : addValue}
}

위처럼 인자에 바로 값을 할당하여 만일 Fuc1()로 호출했을때 오류로 이어지는 것이 아니라 {...this.state, add : ""}로 실행되어 빈값이 state에 할당될 것입니다.

이벤트 델리게이션 패턴

하위 반복되는 태그에 일일히 이벤트를 걸게되면 이벤트호출함수가 여러번 호출되어 콜스택이나 태스트큐에 많은 양의 함수가 걸려있게 됩니다.

따라서 이를 해결하기 위해 이벤트 델리게이션 패턴을 사용합니다.
먼저 해당 반복 태그를 감싸는 큰 태그를 대상으로 이벤트를 감지하고 해당 이벤트가 발생했을때 e.target으로 캡쳐링을 통해 실제 이벤트가 일어나는 대상을 찾고 더 정확히 태그를 찾기위해 closest('찾을 태그, 클래스, 아이디')를 사용해 이벤트가 발생한 곳에서 가장 가까운 타겟을 찾아 함수를 실행하고 이벤트 버블링으로 함수가 실행되도록 합니다.

이러한 패턴을 이용해 반복되는 태그마다 이벤트를 감지하는 것이 아니라 큰 단위에서 한번 감지해서 이벤트가 발생할때만 한번 실행하게 하여 함수 호출의 효율을 증가시키게됩니다.

// html
<ul class="wrap">
	<li data-target="1"></li>
    <li></li>
    <li data-target="2"></li>
    <li></li>
    <li data-target="3"></li>
    .
    .
    .
    <li></li>
    <li data-target="30"></li>
</ul>

// js
const $ul = document.querySelector('.wrap');

$ul.addEventListener("click", (e)=>{
	const $targetLi = e.target.closest('li[data-target]');
    
    const {data-target} = dataset;
    
    alert(data-target);
    // 1 or 2 or ... 30
})

낙관적 업데이트

서버와의 API 통신이 마무리되고 실 서버에 데이터가 처리된 이후 클라이언트에 UI로 그려주는 것이 아니라 미리 클라이언트에 그리고 서버에 요청을 보내 서버가 잘 작동할 것이라고 가정하고 먼저 클라이언트에 선반영하는 방식을 낙관적 업데이트라고 말합니다.

// 기본 서버 처리 이후 로직
데이터 업데이트..

서버 요청 ..

클라이언트 UI 업데이트..


// 낙관적 업데이트 로직
데이터 업데이트..

클라이언트 UI 업데이트..

서버 요청 ..

클라이언트 UI 업데이트..

🧘🏻‍♂️ 어려웠던 점 및 후기

To Do List를 바닐라JS스럽게 만들지 않고 컴포넌트화 시켜, SPA 구조로 많이 사용하는 리액트와 비슷한 형태로 만들다보니 그동안 라이브러리에 의존하여 코드를 많이 작성했고 이러한 프론트 라이브러리들이 개발자에게 많은 편의를 제공하고 있었다는 것을 알게되었습니다.

또한 위에 기술했던 몰랐던 지식에 대해 새롭게 알게되어 아직도 배울게 너무나도 많다는 것을 느꼈습니다...

🔗 참조

프로그래머스