3주차 과제 - TO-DO 앱 강화하기

3주차 과제

 

3주차 과제는 이번주 동안 공부한 내용들을 토대로 SIMPLE TODO LIST를 강화하는것이 과제였다. 기본적인 구현들을 되어 있었고, 추가적인 요구사항들이 있었다.

 

1. 리스트의 삭제 버튼을 추가한다.
2. 리스트를 클릭시 해당 text를 토글시킨다.
3. 해야 할 일 전체 개수와 토글이 된 완료된 할 일의 개수를 표현하는 todoCount 컴포넌트를 구성한다.
4. new 연산자 없이 호출한 경우 에러가 나도록 방어코드를 구현한다.
5. status를 갖는 곳에 validation을 추가한다.

정도가 요구사항 이었던것 같다. 컴포넌트 방식으로 구현하는것이 처음이다보니 코드를 읽는것 조차 쉽지 않았던것 같다. 그래서 처음 과제를 제출해야하는 금요일에는 거의 40% 완성된,,내가 봐도 엉망인 코드를 제출할 수 밖에 없었다. 제출기한은 지켜야 한다고 생각했기 때문에 마감까지 작성한 코드를 제출하였고, 주말 동안은 어떤 기능을 구현하는 메커니즘에 익숙해 지기 위해 강의도 신청해서 열심히 들었다. 그리고 오늘 동료분들의 코드를 참고해서 열심히 분석하기 시작했다. 올드 스쿨 마인드로,,, 정복하겠다는 생각으로 시작했다..

(해당 코드들은 데브코스 3기의 '신승준'님의 코드이다. 얼마든지 활용해도 좋다고 허락해주셨다 ㅎㅎㅎ🥹고맙습니다..)

---

 

이해력을 높이고자 수기로 천천히 따라가 보았다.

이해력을 높이고자 수기로 천천히 따라가 보았다.

 

이렇게 모든 코드들을 하나 하나 작성해가며 이해해 보려고 노력했다. 물론 이 모든 과정을 매번 반복할 수도 또 반복해서도 안된다는것을 알고 있다!! 하지만 지금은 전체적을 컴포넌트들이 어떻게 구성되고, 서로 어떻게 연결이 되는지 알아보는게 중요하다고 생각해 한 번 이해할 때 확실히 이해하자는 마음가짐으로 시도해 보았다. 결과는 대 성공이었다. 읽고 또 읽고 연결해보고 또 연결해 보았다. 3-4시간은 족히 걸린것 같지만, 이해가 되었다!!!!!!! 한 번 이해를 하고 코드들을 바라보니 자연스럽게 구조들이 보이기 시작했다.. 감격의 순간이 따로 없었다..

 

컴포넌트 구성 방식

컴포넌트는 위와 같은 방식으로 구성되어 있었고, 해당 컴포넌트에 전달되는 데이터들이 달랐다. 

//app컴포넌트의 state
{
todos: [id:'값', text:'input값', isCompleted: boolean],
totalTodoCount: '숫자값',
completedTodoCount: '숫자값'
}

위의 app 컴포넌트가 가지고 있는 데이터를 todoList에는 todos를, todoCount에는 totalTodoCount와 completedTodoCount를 데이터로 전달해 주었다. 이와 같은 방식으로 TodoList가 구현되었다. 구현한 로직은 다음과 같이 동작한다.

 

---

코드는 Github에 고스란히 push해 놓았습니다.

https://github.com/WooDaeHyun/Dev_course-second-assignment

GitHub - WooDaeHyun/Dev_course-second-assignment

---

과제를 마무리 하며

 

  우선 컴포넌트 방식으로 코드를 구성한다는 것에 엄청난 장점들에 대해서 알 수 있었습니다. 자바스크립트는 파일별로 분리를 하더라도 기본적으로 하나의 전역객체를 공유하기 때문에 변수를 설정하거나 함에 있어서 문제가 발생할 수 있는 부분들을 모듈로 분리하고(이전에 자바스크립트는 모듈이 지원되지도 않았다. 하지만 이제는 모듈을 활용할 수 있는 방법이 생겼다.)export와 import를 통해서 필요한 정보들만 주고 받아 불필요한 데이터까지 넘어가는것을 방지할 수 있었고 파일과 파일들 간의 독립성이 유지되다 보니 문제가 발생하게 된다면, 해당 파일에서만 문제를 찾아 해결할 수 있는 경우가 대부분이었다. 물론 컴포넌트 방식으로 코드를 작성하게 되면 처음에는 해당 코드를 이해하는데 분명 쉽게 이해가 될 것 같지는 않다. 하지만 이 방식이 익숙해지고 코드를 읽는 과정이 익숙한 사람이라면 매우 효율적인 방식이라는 생각이 들었다.