poodlepoodle/vanilla-todo-15th

CEOS 15th Front-End 1st Study

https://vanilla-todolist-js.vercel.app/

🔥 개요

안녕하세요. CEOS 15기 프론트 최어진입니다.
프론트 스터디 첫 과제는 <Vanilla-Todo - 라이브러리 도움 없이 HTML, CSS, Javascript로만 To-Do 리스트 만들어 보기> 였습니다. 리액트 같은 JS 기반 라이브러리를 사용할 때마다 모르는 부분은 덮어두고 편리함에만 의존하는 것 같아 찜찜했었는데 마침 좋은 기회라고 생각했습니다.

✨ 콘셉트

처음에는 dribbble에 스크랩 해 놨던 To-Do 리스트 디자인 중 하나를 골라 레이아웃을 구성해 볼까 싶었는데, 평소에 가장 많이 쓰는 To-Do 리스트가 뭘까 생각하다가 IOS의 메모 앱을 모티브로 해서 UI를 구성했습니다.

🧭 개발 순서

이러한 순서로 개발 순서를 구성했습니다.

1. 전체 화면에서 To-Do 리스트와 이를 제외한 부분의 레이아웃 나누기
2. 화면을 구성하는 요소들을 Style Sheet로 꾸미기
3. 싱글 To-Do 리스트 추가 및 삭제 기능 구현하기
4. 리스트에 속한 일정 개수 세기
5. 리스트 간 요소 클릭 시 상호 작용으로 넘어갈 수 있도록 구현하기
6. localStorage를 이용한 저장 및 불러오기 구현하기

🤬 씽킹 모먼트

(1) Style Sheet를 통해 규칙을 작성할 때의 주의할 점

어떤 효과를 주고 싶어서 그와 관련된 CSS 규칙들을 찾아보고 느낀 점 두 가지는, 적용 가능한 정말 무수한 스타일 속성들이 존재한다는 점과 오히려 너무 많아서 어떤 속성들을 줘야 할 지 고민된다는 점이었습니다.
간단하게 두 개의 상하로 나열되어 있는 요소를 살짝 띄우고 싶을 때 어떤 쪽에서 속성을 줘야 하는지, 이 상황에서는 margin 혹은 padding 둘 중 어느 속성을 주는 게 정답에 가까운지, 혹은 불필요한 속성들을 겹쳐서 사용하고 넘어가진 않았나 이러한 고민들을 하다가 일단은 첫 과제니까 무작정 써 보고 틀린 부분은 다른 분들께서 지적해 주시는 코드 리뷰를 보고 배워서 적용해야겠다고 생각하고 진행했습니다!

(2) Git Commit Message에 대한 Convention Rule

사실 Github에 저장소를 만들고 필요에 의해 첫 커밋을 남긴 게 약 6개월 전이었는데, 그 때 Commit Message에 대한 일관적인 규칙을 알고 싶어서 검색해 보다가 명령형으로 구성할 것 정도만 알고 넘어갔었습니다.
그런 와중에 1차 스터디 과제 진행하면서 멘토님들께 Commit Message 기록에 대한 우수 적용 사례나 Gitmoge 같은 유용한 툴들을 알게 되어 매우 뿌듯했습니다!
앞으로 다른 저장소를 관리하면서도 단순히 깔끔해 보이기 위함을 넘어 저장소를 공유하는 다른 개발자들과의 의사소통을 위한 Commit 기록을 남기는 방법에 대해 실마리를 많이 얻게 된 것 같아 감사드립니다 😉

🧐 KEY QUESTIONS

DOM은 무엇인가요?

DOM을 풀어 쓰면 Document Object Model입니다.
그 전까지는 단순히 HTML의 태그 및 내용 구성을 Javascript 등에서 접근해 변경하는 방법, 혹은 그 과정에서의 어떠한 구조를 말하는 용어로만 모호하게 생각했었는데 조금이나마 더 정확한 표현은 HTML 문서에 대한 인터페이스라고 나타낼 수 있지 않을까 싶습니다.

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

1. createElement

createElement 함수를 통해 새로운 Element 객체를 생성하는 경우는 가장 간단하고 쉽게 갖다 쓸 수 있게 생겼지만 내부적으로 DOM 트리를 탐색하는 데 성능 저하가 발생한다고 합니다.

2. insertAdjacentHTML

위의 createElement가 태그와 값을 노드 형태로 전달해 호출한다면, 템플릿 리터럴을 이용해 직접 태그 형태 그 자체로 삽입하는 함수인 것 같습니다.
반복되는 태그들을 생성할 때의 가독성이 좋지만, XSS 공격에 대한 보안 이슈가 있는 듯 합니다.....

3. Document Fragment

HTML 쪽에서 미리 template 태그를 만들어 두고 이를 JS에서 복사하는 방식인 것 같습니다.
매우 많은 노드들을 생성해야 하는 경우 가장 높은 성능을 가지는 방법이며 사실 생성보다 복사에 가깝다는 점에서 사용 목적이 뚜렷하게 분류될 듯 합니다.

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

Semantic Tag는 HTML5 표준 이후로 지원되는 태그들로써 태그 그 자체가 명확하게 기능을 나타낸다는 점이 특징입니다.
이를 사용하는 경우, 코드 전체의 가독성이 높아진다는 점이 주요한 장점이라고 하는데 당장 이번 과제를 수행하면서도 클래스 속성 네이밍 규칙을 둘러보고 또 헷갈렸던 경험이 있어서 유용함이 와 닿는 느낌입니다.

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

화면의 레이아웃을 각 요소 간 차지하는 비율로 구성하는 방법입니다.
부모 요소에서 display: flex;를 지정한 후 자식 요소들에서 flex: 1;, flex: 3; 등의 비율로 각 요소가 차지하는 영역을 정할 수 있습니다.
이 때, flex-direction이나 justify-content 등의 속성을 적용하면 다양한 방식의 레이아웃을 구성할 수 있습니다.

개인적으로 react native에서 레이아웃을 구성할 때 각 View마다 backgroundColor 하나씩 정해 놓고 flex 비율 조정하다 보면 머리를 꺼내놓고 코딩할 수 있어서 즐겨 쓰던 방법이었는데 이번에 과제 하면서 CSS에서 background와 background-color가 살짝 헷갈리는 관계로 좀 더 검색해 보려고 합니다.

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

지금 기준으로 Javascript가 가지는 최대 특징이라고 한다면 확장성이라는 생각이 듭니다.
뿐만 아니라, 다른 언어와 비교했을 때 실행할 수 있는 환경이 브라우저라는 점에서도 월등하게 편리한 접근성을 갖고 있지 않나 싶습니다.

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

사실 주석을 다는 올바른 방법에 대해서는 스스로 말할 수 있는 게 적다 싶어서 구글링을 통해 Clean Code의 일부 내용을 찾아봤더니, 이런 내용들이 있었습니다.

바람직한 주석 작성 습관

1. 네이밍에서 의미를 유추할 수 있는 상황에서는 굳이 무리한 주석은 달지 않기
2. 앞으로 예정된 작업을 TODO 주석으로 설명하기
3. 자칫 대수롭지 않게 넘어갈 수 있는 변수 등을 주석으로 한 번 강조하기

반면에, 바람직하지 않은 주석 작성 습관도 있었습니다.

팀원을 화나게 만들기 좋은 주석 작성 습관

1. 같은 내용을 여러 번씩이나 반복해서 주석 작성하기
2. 아무 가치도 없지만 의무적으로 해 오던 대로 의미없는 주석 달기 (ex. javadocs)
3. 힘이 쭉 빠질 정도로 너무나도 당연한 사실 주석으로 언급하기
4. 주석으로 감싼 코드

4의 경우는 이유를 듣고 보니 납득할 수 있었는데, 더 이상 가치가 없는 코드에 대해서 팀원들이 삭제에 주저할 수 있기 때문이라고 합니다.

🥲 마치며

스터디 첫 주차 과제기도 하고 전부터 해 보고 싶었던 주제였어서 할 수 있는 부분까지는 해 보고 싶었는데, 결국 localStorage 쪽에서 발생하는 버그를 잡지 못하고 그나마도 레이트로 제출하는 게 너무 아쉽습니다.. 🥲
기본적인 부분에서 너무 부족하다는 생각이 들고, 많은 분들께서 코드 지적 해 주시면 감사하게 정리하겠습니다.
감사드립니다.