🎈 프로그래머스 데브코스 3주차

3주차에는 간단한 TodoList App을 만들었다. HTML으로 화면을 그리는게 아니고 JS만으로 화면도 그리고 TodoList 기능도 만들었다. 처음으로 JS만으로 DOM 조작을 통해 화면을 그리려고 하니 흥미로웠다. append(), createElement(), innerHTML 등 DOM 관련 명령어들을 사용해 보았다.

Week3 - Day 1.

TodoList를 만들기 전에 컴포넌트 방식으로 생각하는 법을 학습했다. TodoList, TodoForm, TodoCount 등 다양한 기능을 컴포넌트화해서 하나의 파일에 하나의 기능을 수행할 수 있도록 서로 의존성을 줄이는 작업을 했다.

컴포넌트 방식으로 생각하기, Local Storage

Week3 - Day 2.

간단하게 TodoList를 컴포넌트화하고 API를 받아와 뿌리는 것을 학습했다. 비동기적으로 데이터를 처리했다. Promise와 Promise의 다양한 내장 함수들, async와 await을 학습했는데 따라 써보기만 해보고 제대로 이해하고 쓰는 상태가 아닌 것 같다. 책을 읽으면서 Promise와 비동기에 대해 다시 복습해야겠다.

Module, 비동기 다루기 callback, Promise, async, await

Week3 - Day 3.

3일차에는 fetch를 이용해 API를 조금 더 쉽게 불러오는 방법을 배웠다. 전날에는 xmlhttprequest를 통해 불러왔다면 오늘은 fetch를 이용해 불러왔는데 fetch가 훨씬 깔끔하고 눈에 보기 좋았던 것 같다.

fetch, fetch API

Week3 - Day 4.

4일차에는 history API를 사용해보았다. history API를 이용하면 화면의 깜빡임 없이 SPA처럼 동작할 수 있도록 화면이동을 그려보았다. pushstate, replacestate, popstate등을 사용해 보았다. Notion cloning 때 써볼 계획이다.

history API, pushstate, replacestate, popstate

Week3 - Day 5.

5일차에서는 1~4일차동안 배운 것을 토대로 Todo App을 만들어 보았다. userList도 만들어 user마다 Todo를 연결해주고 새로고침해도 화면이 유지되는 등 다양한 기능들을 구현해보았다. 많은 양의 코드를 적다보니 이해하지 않고 넘어간 부분은 주말을 이용해 다시 복습해야겠다.

Todo App 만들기

3주차 회고

3주차는 JS로만 만들어야하는 Todo List 과제를 수행했다. 처음에는 막막했던 부분들을 하나하나 채워나가면서 JS만으로 어플리케이션을 만들 수 있겠다는 확신도 생긴 한 주였다. 아직 부족하고 수정해야하는 부분이 많지만 차근차근 고쳐나가면서 발전한 나의 모습을 보고싶다.