TIL - Day 31

MyeonghoonNam·2021년 9월 13일

목록 보기

37/49

프로그래머스 프론트엔드 데브 코스 프론트엔드 과정의 기록입니다.

9월 13일 (월)

기본적인 TodoList 형태로 기능 구현 후 App 강화 적용
TodoList의 완료한 Todo 목록과 완료하지 못한 Todo 목록을 분리하여 클릭이 아닌 Drag & Drop으로 Todo를 이동시키는 동작형태로 구현
뷰의 낙관적 업데이트와 api 통신 작업을 한 번에 처리하기 위한 작업처리 큐 구현

오늘은 Vanilla JS만을 사용하여 Drag & Drop 이벤트를 다루어 TodoList App을 SPA 형태로 구현해보았습니다.

평소 구현해 보고 싶었던 Drag & Drop 기능에 대하여 구현하는 시간을 가질 수 있어서 좋았고 새로운 이벤트에 대해 배울 수 있었습니다.

Drag & Drop 이벤트의 기초 사용법을 배웠기에 더 다양한 값 들을 시험해보며 원하는 기능을 구현할 수 있도록 공부하여야겠다.

그리고 api 통신 작업의 수행 시점을 임의적으로 조절하는 작업처리 큐를 구현해보며 상황에 맞는 통신 방법을 새롭게 배우게 되어 굉장히 재미있었고 새로운 깨달음을 얻게 되었습니다.

4~6주차에 걸쳐 다른 프레임워크나 라이브러리 없이 Vanilla JS만을 활용하여 다양한 WebApp들을 만들며 학습하는 시간을 가지게 되었습니다.

이 기간 동안 JavaScript 기반의 프레임워크나 라이브러리의 동작 원리에 대한 기초 이해도를 높이는데 많은 도움이 되었습니다.

뷰에서 독립적으로 동작하는 각각의 컴포넌트들의 상태와 관계를 생각하며 설계하는 과정에 대해 많은 학습을 할 수 있었고 뷰를 선언적으로 생각하는 추상화 과정을 통해 기능 확장이 용이하고 예상치 못한 예외를 사전에 차단하는 UI 프로그래밍에 대해 학습할 수 있었습니다.

이를 통해 상태와 데이터 중심의 UI를 표현하며 이를 통해 UI의 변화를 생각하며 추적하며 다양한 WebApp들을 만들어 볼 수 있었습니다.

꾸준히 성장하는 개발자를 목표로 합니다.