프로젝트 링크 

( 업데이트 일지 )

2021-02-11
- 프로필 활성화 / 숨기기 버튼 구현
- 디바이스 높이를 고려해 프로필 자동 숨기기

2021-02-12
- 원하는 카드 상단에 고정 가능

2021-02-13
- 새로고침시 끝낸 상태인 카드의 타이머가 돌아가는 버그 수정
- 끝낸 상태인 카드에 한국어가 적용되지 않던 버그 수정

자세한 내용은 글 하단 5번째 문단을 확인해주세요.

1. 결과물

더 자세한 내용은 상단 프로젝트 링크에 들어가서 봐주세요!

(+ 해시태그 필터링, 카드 검색, 태그 수정, 언어 변경 등등..)

2. 자기소개

안녕하세요! 풀스택 개발자를 꿈꾸는 세상에 널리고 널린 21살 대학생입니다.
웹 코딩 접한지는 작년 8월, 그러니까 대략 반년 조금 더 됬네요.

사실 웹 개발은 이전까지 관심이 없었는데 그냥 해보자는 마음으로 코코아톡 강의 듣고 생각을 갈아엎었습니다. 눈 잠깐 감았다 떠보니 유튜브 챌린지 졸업하던.... 웹 개발은 정말정말 재밌습니다!

꿈은 풀스택 개발자지만 프론트 / 백엔드 둘 중 하나를 고르라면, 무조건 프론트를 고를겁니다. 그러나 아직 리액트같은 프레임워크는 깊게 만져본적은 없습니다. 어서 배워보고 싶네요 ㅎㅎㅎㅎ

여전히 바닐라 자바스크립트가 부족하다고 생각해서 계속 바닐라만 만지고있는 중 입니다. 아마 이번 프로젝트를 마지막으로 바닐라를 떠나보내고 프레임워크의 세계로 들어갈 것 같네요!

3. 서비스 소개

프로젝트의 기본적인 디자인 베이스는 코로나 라이브 + 디스코드 입니다. 코로나 라이브의 틀과 디스코드의 색상을 조합해 설계하였습니다.

구현한 기능은 정말 많습니다. 그 중에서 핵심만 간단하게 소개해드리겠습니다.

1. 해시태그 & 해시태그 필터링 + 태그 색 변경/삭제

- 카드 생성시 해시태그를 넣어 원할 때 마다 필터링이 가능하게 구현했습니다!

- 생성한 태그의 색을 마음대로 변경할 수 있습니다! 그리고 삭제도 가능하죠.

- 해시태그 기능은 Notion에서 영감을 얻었습니다.

2. 카드 검색기능

- 생성했던 카드를 카드 텍스트를 기준으로 검색할 수 있습니다!

3. 카드 생성 / 수정 / 삭제 / 상태 변경

- 카드를 생성하고, 카드의 태그와 텍스트를 수정할 수 있으며, 당연하지만 삭제도 됩니다!

- 카드의 상태를 '할 것'과 '끝낸 것'으로 상태를 변경하게 끔 구현했습니다.

4. 언어 변경 지원(영어 <-> 한글)

- 영어와 한글이 지원됩니다!

5. 카운트 다운

- 카드 생성으로부터 얼마의 시간이 지났는지 체크할 수 있는 기능을 구현했습니다!
- 최대 제한 시간은 24시간 입니다.

6. 데이터 저장

- Todo List의 핵심인 데이터 저장 기능입니다!

- 해시태그, 카드 등등 모든 것들이 저장되고 새로고침이나 다음 번 방문시 이전에 사용했던 데이터를 그대로 볼 수 있습니다!

- 당연하지만, localStorage를 이용했습니다.

더 많은 기능과 세부사항은 상단의 프로젝트 링크에서 확인해주세요!

7. 카드 고정 기능(업데이트)

- 최상단에 원하는 카드 하나를 고정시킬 수 있습니다! 유튜브 댓글처럼요!

4. 개발 과정

프로젝트 시작은 2월 2일부터 시작했고, 마무리는 2월 10일에 마무리했습니다.

대략 일주일 남짓 걸렸네요!

이 일주일은 지옥과 천국의 반복이었습니다 ㅋㅋㅋㅋㅋ
막상 구현하고 싶은 기능은 많은데, 구현하기는 정말 복잡하고
구현이 다 된 모습을 보면 황홀했습니다.

반응형 디자인과 UI/UX 적 고려를 정말 많이했고, 이 노력이 프로젝트에 잘 담겨있는 것 같습니다!

확장성, 재사용성등을 고려해서 ES6의 module과 class를 이용해 분할정복하며 구현했고, 덕분에 코드 재사용성/확장성이 대폭으로 상승한 것을 직접 체감했습니다.

또한 모든 element들은 JS파일에서 생성해냈습니다. React처럼요.

구현하면서 가장 힘들었던 순서는

이벤트 -> 해시태그 구현 -> 부드러운 애니메이션 전환 -> 나머지

이 순서였습니다.

정말 이벤트는 끔찍하기 그지없었습니다.
cloneNode를 코드 내부에서 상당히 중요한 곳에 사용했는데, cloneNode는 이벤트리스너까지 복사되지 않는 메서드이기 때문에 전부 새롭게 이벤트리스너를 달아주어야 했습니다.

추가로 binding 문제라던지, removeEventListener의 엄격함이라던지 등등 어질어질해지는 문제가 정말 많았고 정말 많이 헤매던 기억이 선명하게 남아있습니다.

해시태그도 만만치 않게 짜증났지만, 구현하는 동안은 정말 즐겁게 구현했습니다. 오히려 해시태그는 구현이 복잡할 뿐 어렵지는 않았기 때문이었겠죠.

부드러운 애니메이션 전환은 html의 class를 이용해서 구현했습니다. 로딩중이라면 loading클래스를 달아주고, 보이지 않는 상태라면 hidden, 활성화 상태라면 active 클래스를 추가해주는 식으로 구현했습니다.

transition이나 animation을 정말 많이 사용했는데, cubic-bezier를 마스터해버린게 아닐까 모를 정도입니다.

다른 기능들은 기존에 만들어 뒀던 것을 재사용하고, 확장하는 식으로 정말 편하게 구현했던 기억이 남아있네요!

5. 앞으로의 계획

아마 몇 일은 더 이 프로젝트를 잡고 있을 겁니다.
아직 원하는 기능이 전부 만들어지진 않은 상태라서요 ㅠㅠ

( 첫 배포일: 2020-02-10 )

남은 기능은 아래와 같습니다. 차차 업데이트 해갈 예정입니다.

1. 디바이스 높이를 고려하여 자동으로 프로필 감추기 & 프로필 감추기 버튼
( 2021-02-11 배포 완료 )

- 디바이스 높이가 1000px 이하라면, 새로고침시 자동으로 프로필이 감춰집니다!

- 높이가 더 크더라도, 원한다면 감추고 다시 볼 수 있도록 구현했습니다.

- 미리보기

2. 다크모드 온/오프 기능 (현재는 다크모드만 지원)

- 일단, 현재 구현 계획에서 제외 확정. 곧 UI 내에서도 제거 예정.

- 귀찮아서가 아닙니다! ㅠㅠ

3. 카드를 상단에 고정시키는 기능
( 2021-02-12 배포 완료 )

- '할 것' 상태인 카드를 최상단에 고정시킬 수 있게되었습니다!

- 고정된 카드는 끝낸 상태로 변경할 수 없습니다.

- 이미 고정된 카드가 있다면, 해당 카드의 고정을 해제하고 새로 고정시킵니다.

- 걱정마세요. 고정된 카드 데이터도 localStorage에 함께 저장됩니다!

- 미리보기

이 3가지 기능을 전부 만들면 이 프로젝트는 완벽히 끝이 납니다!
+ 추가로 webpack이나 sass/scss를 사용해보고 싶네요! 바닐라라 못 한건 비밀

프로젝트가 끝나고나면 우선 치킨을 먹을거고요,

그 다음날부터 쉴 새없이 바로 니꼬와 저 자신을 믿고 React를 공부하러 떠날 예정입니다.

정말 공부할게 태산이지만,
공부할게 아직 많이 남아있고 더 공부할 수 있다는 생각에
정말 들뜹니다 ㅎㅎㅎ

긴 글 읽어주셔서 감사합니다!
좋은 하루 되세요!

(+ 2021-02-11 추가 )

솔직히 이 정도로 많은 개발자분들이 봐주시고 응원해주시고 칭찬해주실줄은 몰랐습니다.. 첫 배포를 마치고나서 바로 잠에 들었는데, 눈 떠보니 추천과 댓글이 어마어마하게 달려있었습니다.

제 프로젝트 봐주신 여러분들, 대댓글로 일일히 답변하고 있지는 않지만 감사하다는 말씀 드리고 싶습니다. 정말 감사합니다 ㅠㅠ