1. 결과물 URL

결과물 URL

- Todo 생성의 경우 Modal이 나타나서 등록 할 수 있습니다.

2. 자기소개

안녕하세요. 이제 갓 1년차가 넘은 프론트엔드 주니어 개발자 입니다.

3. 서비스 소개

es6 기반으로 외부 라이브러리 사용 없이 바닐라 자바스크립트를 사용하여 만들어봤습니다.

* 로딩화면

- 폰트를 다운받아서 제공하기 때문에 로드하는데 시간이 걸립니다.
사용자에게 이 페이지가 로딩되고 있다는 것을 알리기 위해 추가하였습니다.

* 메인 화면

- Todo 및 닉네임 변경을 고민하다가, 따로 버튼을 추가하는 것이 아니라 Todo의 타이틀, description, 헤더의 닉네임을 클릭 할 경우 Textarea가 나오게끔 작업을 했습니다.

- Todo 또는 닉네임 변경을 원하면 해당 부분을 눌러 수정을 더 편하게 만들 수 있게 했습니다.

- input type="checkbox"의 경우 기존 모양이 마음에 안들어서 label을 활용하여 수정을 진행하였습니다. 그리고 완료가 된 todo의 경우 하단 블럭으로 이동하게 작업 하였습니다.

- 하단 Finished에 있는 Todo는 check를 다시 풀 경우에 Todays Tasks로 이동합니다.

- 날짜 옆에 화살표 방향이 있어서, 눌렀을 때 나타나는 해당 날짜의 todo를 보여주게 작업을 진행하였습니다.

4. 개발 과정

mvc 패턴처럼 Todo를 구현을 해보려고 했었습니다.

* Model

localStorage를 TodoApp의 database로 생각하여 localStorage로 crud를 구현하려고 했고, 이게 Model이 되었습니다.

* Controller

controller는 Model과 View를 가지고 있습니다. controller의 프로퍼티로 model과 view를 가지는 위임의 방식으로 작업을 진행했습니다. 내부 컴포넌트(모달, Todo)에서 데이터 변경 등 Model과 상호작용이 필요할 경우 이벤트를 Emitting 하여, 이 Controller에서 이벤트를 Listen 한다음 model 및 view로 처리하게끔 작업을 진행했습니다.

* View

view는 주로 그리는 로직을 담당하였습니다. Component기반으로 개발하다 보니 최대한 잘게 쪼개면서 로직을 간단히 구현해 보려고 했으나, 아직은 구현 또는 설계가 명확하지 않아 제 꾀에 속아넘어서 헤메고는 했습니다.

어려웠던점

1. 리팩토링

위와 같은 생각으로 코드를 분할하여 짜다보니, 코드가 엉망진창으로 엉켜붙은게 많았습니다. 중복되는 로직과 함수들, 크게 만들었던 기능들을 리팩토링 한다고 잘게 쪼개면서 기능이 안되는 경우가 많았습니다. 이 부분의 경우 콘솔을 한땀한땀 찍어가며 에러를 쫓아갔습니다.

2. 최적화

처음 구글에서 웹폰트를 다운받은 후 assets파일에 넣어서 netlify로 배포를 했습니다. 첫 로딩에 5초인가 걸리더라구요. 구글 웹폰트의 경우 용량이 커서 다운받는데만 4.x초가 걸렸던 거로 기억하고 있습니다.

이를 해결하기 위해 woff2로 폰트를 바꾸어 폰트의 용량을 최소화 하였습니다. 이후 네트워크 탭을 보니 각각의 자바스크립트 파일들을 다운받기 위해 개별적으로 요청을 보내는걸 보고, 웹팩을 활용하여 최적화 하면 얼마나 시간이 걸리는지 궁금해졌습니다.

최적화를 공부해야지 생각만 하다가, 직접 문제에 직면하고 이리저리 생각하는 과정이 꽤 재밌었습니다. 단순히 책, 강의만 보는 것을 넘어서 직접 무엇을 만들어보고 그 문제를 해결하면서 배우는게 좋을 것이라 생각이 들었습니다.

5. 앞으로의 계획

현재 Typescript와 React, Nest.js를 공부하고 있습니다.

현재 업무에서 바닐라 js로만 작업을 하다보니 웹 개발의 경우 많이 못하고 있어서 아쉬웠었습니다. 이를 해소하기 위해 이 사이트에서 Nest.js와 TS, React로 토이 프로젝트를 진행하고, 그 과정에서 TDD 및 여러가지를 경험하여 더 성장하는 개발자가 되고 싶습니다.

감사합니다 _