NomadCoders todo-list contest

Todo list 컨테스트에 참가하기 위해 시작한 바닐라 자바스킙트 프로젝트

• 대회 공지

• 대회 결과

(21년 당시 깃허브)

무려 🏆인기상에 당첨이 되었다! (치킨 감사합니다!)

이 프로젝트에 투표해주신 모든 분들께 이 자리를 빌려 감사의 말씀을 드린다.

---

프로젝트 링크

---

1. 스택

Only Javascript

서드 파티는 일체 사용하지 않았다. (노드 첨가율 0%)

2. 기능

이하는 현재 모두 구현된 기능들이다.

모든 데이터는 자동으로 LocalStorage에 저장된다.

펼치기/접기

2 - 1. 유저 🙍‍♂️

• Display name 설정(최초 1회)   미리보기

• 로그아웃(데이터 초기화)

2 - 2. 카드 📝

• 카드 생성   미리보기

• 카드 삭제   미리보기

• 카드 수정   미리보기

• 카드 검색(기준: 카드 내용)

• 카드 상태변경 ( Todo - Complete )   미리보기

• 카운트 다운(최대 24시간)

• 카드 최상단 고정 기능   미리보기

2 - 3. 해시태그 🏷

• 각 카드에 해시태그 부여 가능(개수 제한 X)   미리보기

• 해시태그 필터링   미리보기

• 태그 색 수정   미리보기

• 태그 삭제   미리보기

2 - 4. 프로필 😎

• 각종 메뉴

• Todo 진척도   미리보기

• 프로필 숨기기 가능   미리보기

  • 디바이스 높이를 고려하여 자동으로 프로필이 숨겨짐(디바이스 높이 1000px 미만 시)

2 - 5. 기타 🎸

• 언어 변경 지원(한국어, 영어)

3. 개발 비하인드

프로젝트 기간 📅

• 프로젝트 시작 👉 2021년 2월 2일

• 프로젝트 종료 👍 2021년 2월 10일

대략 일주일 남짓 걸렸다.

느낀 것

• 구현하면서 가장 힘들었던 순서는 이벤트 > 해시태그 구현 > 부드러운 애니메이션 전환 > 나머지 였다.

2년 후 느낀 점

• 지금보면 진짜 아무것도 모를 때 만든 프로젝트인데 어떻게 이런거 만들었나 싶긴 하다. 영혼을 갈아 넣었겠지?
• 이제 구현할 때 가장 힘든 순서가 거꾸로 되었는데, 열정이 넘쳤던 것 같다 ㅋㅋㅋ
• 아쉬운 부분이 굉장히 많이 눈에 띈다. UI부터 시작해서... 특히 클린 코드가 너무 부족하다. 근데 어찌 돌아가는 게 또 신기하다.

4. 문제 및 해결

🙉 카드 각각에 고유한 ID를 부여하는 좋은 방법?

LocalHost에 저장된 카드에 접근하기 위한 식별자로 각 카드 데이터에 ID를 부여하기로 했다.
그러나 ID를 어떤 기준으로 만들지 고민이 되었다.

단순하게 떠올린 생각으로는

1. ID를 중복되지 않는 1, 2, 3, 4... 로 부여하자.
2. 해시함수에 카드의 텍스트를 넣어서 나온 결과를 ID로 사용하자.

가 있었다.

그러나 이 두 방법은 전부 치명적인(?) 단점이 존재했다.

• 1번은 ID를 부여하는 구조를 효율적으로 짜게 되면 로직이 매우 복잡해진다는 것(+ 메모리도 사용해야 함), 단순하게 짠다고 하더라도 카드를 많이 생성한다면 ID의 크기가 무한히 커진다는 것.
• 2번은 같은 텍스트를 가진 카드가 존재한다면, 유일한 ID가 보장되지 않는다는 점.

이를 해결하기 위해 정말 좋은 아이디어를 떠올렸다.

✔ Salt를 이용해서 ID를 생성했다.

1. 10글자의 랜덤한 Salt를 생성했다.

getSalt: () => {
  let salt = "";

  for (let i = 0; i < 10; i++) {
    if (Math.random() > 0.5) {
      const ascii = Math.floor(Math.random() * 26) + 97;
      const c = String.fromCharCode(ascii);
      salt += c;
    } else {
      salt += Math.floor(Math.random() * 10);
    }
  }

  return salt;
},

2. Hash 함수를 만들었다. 32bit의 정수로 변환하는 함수이다.

createHash(str) {
  let hash = 0;
  let chr;

  for (let i = 0; i < str.length; i++) {
    chr = str.charCodeAt(i);
    hash = (hash << 5) - hash + chr;
    hash |= 0; // Convert to 32bit integer
  }

  return hash;
},

3. 카드 텍스트와 Salt를 결합하여 고유한 ID를 생성했다!

const toConvert = card.text + getSalt();
const id = createHash(toConvert);  // Unique ID! 

(2년 후 업데이트) salt 만들어 주는거도 사치다.

그냥 현재 시간을 ms로 변환해서 그거를 아이디로 써도 괜찮았을듯 하다..

🙉 Modal을 효율적으로 재사용하고 싶었다.

카드 생성, 카드 수정, 해시태그 필터링 등등 여러 기능에 같은 Modal을 재사용하고 싶었다.
React라면 state를 이용해 손쉽게 재사용이 가능했지만, 바닐라라 그렇기는 힘들었다.

✔ setState를 직접 만들었다.

1. modal Class에 setState 메서드를 추가했다.

setState(nextData) {
  this.data = nextData;

  ... 중략

  this.renderModal();
}

2. renderModal 메서드에서 this.data를 이용해 modal의 필요한 부분만 재렌더링한다.

renderModal() {
  const {
    title,
    ...생략,
  } = this.data;
  
  // modal의 title 재렌더링
  const $modalTitle = this.$modalContainer.querySelector(
    ".modal-content__title"
  );
  $modalTitle.textContent = title;

  ... 중략
}

🙉 랜덤한 색으로 생성되는 태그의 텍스트가 보이지 않는 경우가 생겼다.

가령, 아래와 같이 밝은 색으로 태그의 색이 설정되어 버리면 태그의 텍스트가 보이지 않았다.

이러한 경우에 텍스트의 색을 어둡게 만드는 로직을 추가할까 고민했지만,
로직이 복잡해질 것 같았고 이것이 효율적인 해결 방법이 아닌 것 같았다.

그러다 좋은 아이디어를 발견했다.

✔ 태그 생성시, 태그 배경색의 alpha 값을 의도적으로 낮은 값으로 설정한다.

이것이 매우 효과적이었던 이유가 있다.

1. 기본적으로 프로젝트는 다크모드이기 때문에, alpha 값을 낮게 설정하면 그만큼 태그의 색도 어두워진다.
2. 태그의 텍스트가 태그 배경색에 비해 상대적으로 어두워진다.

다음은 태그 배경색의 alpha값에 따른 태그의 모습이다.

alpha=1	alpha=0.6	alpha=0.2

정말 간단하게 문제를 해결할 수 있었다!

(2년 후 업데이트) HSL 컬러를 이용하여 밝은 톤으로 렌더링하면 opacity를 낮출 필요가 없다.

문제는 라이트모드에서는 어떻게 처리해야하는 것이다.
분명 opacity만으로는 한계가 있을 것이다.

그래서 생각한 해결 방법이 RGB 대신 HSL 컬러를 이용하는 것이다.

Hue 값의 범위를 전체로 두고,
Saturation의 범위를 대략 55 ~ 60%,
Lightness의 범위를 대략 75 ~ 85%

정도로 해두고 랜덤으로 렌더링하면 밝은 톤의 파스텔 색상이 나온다.

이 방법을 떠올리고, 같은 방식의 태그 생성을 이 프로젝트에 적용하였다.

🙉 'element들의 애니메이션이 끝났을 때' 를 setTimeout으로 캐치했다.

이를 적용하기 전에, 구글링을 해보니 대부분의 Stackoverflow, 블로그, 포스트 등에서 setTimeout을 사용함을 알게되었다.

예를 들어,

/* CSS */

.element {
  ... 중략
  opacity: 0;
  animation: customAnimation 0.5s linear forwards;
}

@keyframes customAnimation {
  from {
    opacity: 0;
  }
  
  to {
    opacity: 1;
  }
}

// JS

const element = document.querySelector(".element");

// 애니메이션 종료 (css와 마찬가지로 0.5초로 설정)
setTimeout(whenAnimationEnd, 500);

처럼 말이다.

그래서 당연히 이것이 정석적인 방법인줄 알고있었다.

✔ 그러나, animationend 이벤트가 존재한다.

// JS

const element = document.querySelector(".element");

// 애니메이션 종료이벤트
element.addEventListener("animationend", whenAnimationEnd);

이것을 알게된 후 멘탈이 나갈 뻔했다. 😭😭
부족한 내 검색능력을 탓했다.

---

부록. 기능 미리보기

유저 🙍‍♂️

Display name 설정

카드 📝

카드 생성 & 태그 생성

카드 수정

카드 삭제

카드 상태변경 && Todo 진척도

카드 최상단 고정

해시태그 🏷

해시태그 필터링

태그 색 수정

태그 삭제

프로필 😎

프로필 숨기기 기능 + 디바이스 높이 고려해 자동 숨기기