1주차 미션: Vanilla-Todo

CEOS의 첫 스터디! 바닐라 js로 투두리스트 작성하기...

React로만 얼레벌레 구현해온 나는 이번 미션을 받자마자 상당히 막막했었다.

 

이번 스터디의 목표는! 다음과 같다고 한다.

 

 

미션을 진행하기 앞서, Key Questions에 대한 구글링을 진행해보았다.

 

Key Questions

 

1. DOM은 무엇인가요?

 

웹 브라우저가 HTML 페이지를 인식하는 방식.

트리 구조로 이루어진 객체이며 이 객체를 이용해 js가 html/css로 이루어진 웹페이지에 접근할 수 있다.

 

2. HTML (tag) Element를 JavaScript로 생성하는 방법은 어떤 것이 있고, 어떤 방법이 가장 적합할까요?

 

1) insertAdjacentHTML : 타겟 HTML Element의 특정 위치에 원하는 노드를 추가할 수 있다.

2) createElement : 지정한 tagName의 HTML Element를 생성하는 메서드이다.

3) Document Fragment : 브라우저에서 제공하는 인터페이스로 노드의 수정과 삭제가 가능하다.

-> 추가할 노드의 개수가 많을 경우 성능 최적화에 적절한 Document Fragment가 가장 적합하다고 생각한다.

 

3. Semantic tag에는 어떤 것이 있으며, 이를 사용하는 이유는 무엇일까요?

 

1) header : 페이지의 제목과 같은 소개 내용을 포함

2) nav : 네비게이터와 같다. 메뉴, 목차 등에 사용

3) aside : 사이드바 같은 간접적으로 문서 내용을 나타내는 경우

4) main: 말 그대로 메인

5) section: 구체적인 시맨틱 태그가 없는 문서의 독립적인 영역을 나타냄.

6) article : 게시물, 블로그 글 같은 독립적인 파트

7) footer : 페이지의 가장 아래에 주로 쓰이는 부분, 저작권 등의 내용을 포함한다.

 

사용하는 이유 )

- SEO에 최적화된 페이지를 만들기 위해

- 가독성이 좋은 코드를 짜기 위해

 

4. Flexbox Layout은 무엇이며, 어떻게 사용하나요?

 

요소를 넣을 영역 박스를 flex하게, 유연하게 늘리고 줄이면서 레이아웃을 잡는다.

 

display : flex; || display : inline-flex; 로 flex 속성을 지정한 후

 

flex-direction 속성에 방향을 가로, 세로로 지정한다.

이 때 reverse를 통해 역방향 배치도 가능하다.

( row, row-reverse, column, column-reverse )

ex. flex-direction: row;

 

justify-content 속성에 주축을 기준으로 정렬할 수 있다.

( flex-start : 좌측 기준 정렬, flex-end : 우측 기준 정렬, center : 중앙 정렬,

space-between : 일정한 간격으로 정렬, 이 때 처음과 끝 요소는 양쪽에 붙어있어야함!

space-around : 균등한 간격으로 정렬, 처음과 끝 요소의 양측에도 같은 간격 적용! )

 

과 같은 여러 속성으로 레이아웃 내 요소들을 원하는대로 정렬할 수 있다.

 

5. JavaScript가 다른 언어들에 비해 주목할 만한 점에는 어떤 것들이 있나요?

 

자바스크립트로 프론트엔드와 백엔드 개발이 모두 가능하다. 한번 배우면 여러모로 쓸모가 많다.

타입을 명시할 필요가 없어서 편하다! ( 그렇지만 오히려 디버깅에 어려운 점이 존재함... -> 타입스크립트의 중요성..! )

 

6. 코드에서 주석을 다는 바람직한 방법은 무엇일까요?

 

나만 알아볼 수 있게 쓰기 금지..

코드만 봐도 다른 개발자들이 알아볼 수 있게 클린 코드를 짜고, 주석을 최소화하는 것이 베스트이나

주석을 꼭 써야겠다면 다른 개발자들이 알아보기 편하게 간소화해서 쓰기

 

Vanilla-Todo 레퍼런스

이제 key questions도 끝났겠다.. 바닐라 js로 투두리스트를 만들어보자!!!

 

[필수 구현 기능]

• 입력 버튼과 엔터 키로 투두 추가
•  삭제 버튼 클릭 시 투두 삭제
• 투두 텍스트 클릭 시 목록간 이동
• 진행 중인 투두와 완료한 투두 목록 분리
• 진행 중인 투두와 완료한 투두의 개수 카운팅

필수 요건

• 결과 화면의 기능을 그대로 구현합니다.
• 결과 링크의 화면 디자인 그대로 구현해도 좋고, 자신만의 디자인을 적용해도 좋습니다.
• CSS의 Flexbox를 이용하여 레이아웃을 구성합니다.
• JQuery, React, Bootstrap 등 외부 라이브러리를 사용하지 않습니다.
• 함수와 변수의 이름은 lowerCamelCase로 짓습니다.
• 코딩의 단위를 기능별로 나누어 Commit 메세지를 작성합니다.

와 같은 기능을 구현해야했고, 선택 요건도 있었으나 바닐라 js 무지렁이인 나에겐 사치다..

필수 요건이라도 다 구현하자! 라는 생각으로 임했고 최종 배포 페이지는 다음과 같다.

 

https://vanilla-todo-jeeeun.vercel.app/

 

 

이게 내 투두리스트 첫 화면인데.. 보다시피 아주 simple 하다.

그래도 저 자그마한 화면 안에

 

1. 투두 리스트 추가

2. 투두 리스트 삭제

3. doing <-> done 리스트 간 텍스트 이동 가능

4. 각 목록의 투두리스트 카운트 기능

5. 투두리스트 하나 완료할 때마다 1초간 폭죽 애니메이션 효과

 

의 기능이 들어있다.!!

 

해당 페이지의 코드는

https://github.com/0909oje/vanilla-todo-16th

GitHub - 0909oje/vanilla-todo-16th: CEOS 16th Front-End 1st Study

에서 확인할 수 있다 ㅎ

 

한 주간 여러모로 고생도 많이했지만 그만큼 배워가는 것도 많았던 것 같다