프론트엔드 개발을 위한 자바스크립트 [스터디/10기] 2주차 회고_주제편

Derek·2021년 4월 5일
0

Programmers_JS_Study_FE

목록 보기
5/6
post-thumbnail

🚨 주의 ) 정말 어마무시하게 밀린 회고입니다.

그렇다. 난 밀려버렸다. 매우 밀렸다.

하지만 너무 여기서 장황하게 다짐을 했으므로 시리즈를 끝내는 것이 도리일듯 하다.

시작.


2nd Week mission

필수 구현사항

1주차 미션에서 추가 및 삭제가 가능하도록 구현한다.

이에 대한 작은 첨언으로는 아래와 같은 내용이 존재했습니다.

즉, 정리하자면

  1. 기존 Todo App 에서 정적인 Todo Data 가 아니라 유동적으로 할 일을 추가하는 기능을 구현한다.
  2. 추가된 할 일을 삭제하는 기능을 구현한다.

이렇게 두 가지가 필수 구현사항이라 볼 수 있겠다.

보너스 구현사항 1)

TodoInput 컴포넌트화 하기

아주 중요한, 컴포넌트화 추가 구현사항입니다.

보너스 구현사항 2)

TodoCount 컴포넌트 추가하기.

보너스 구현사항 2) 와 비슷하게 TodoCount 를 컴포넌트화하여 추가합니다.

보너스 구현사항 3)

Event Delegation 기법 활용하기.

유동적으로 늘어나고 삭제되는 DOM에게 이벤트를 위임하는 보너스 구현사항입니다.

이렇게 설명해 주셨어요.

보너스 구현사항 4)

Local Storage 활용

새로고침을 해도 할일 목록이 유지되도록 구현합니다.

처음 프로그램이 시작되었을때, localStorage 를 참조하여 데이터가 있다면 렌더링을 한다. 할 일을 추가 및 삭제할때도 이 수정사항이 localStorage에 반영이 되도록 한다.


1주차 미션은 정적으로 하드코딩 된 TodoList 를 그냥 렌더링 하는 과제였다.

이번 2주차 과제는 그보단 유동적으로, 데이터를 추가하거나 삭제하고, LocalStorage 를 활용하는 쪽으로 구현을 요구받았다.

이에 대한 코드부는 다음 게시물에 정리하겠습니다.

감사합니다.

profile
Whereof one cannot speak, thereof one must be silent.

0개의 댓글