1. 결과물 URL + 캡쳐 이미지 2~3장

https://paeon2021.github.io/todo-tab/

https://paeon2021.github.io/todo-EN/ (English version)

2. 자기소개

안녕하세요. 🌝

스스로를 프리랜서로 고용하고 있는 자영업자입니다. 가끔 편집디자인도 하고, html과 css로 홈페이지를 수차례 만들어 본 경험도 있는데요, 그래서 한 평면 공간에 여러 요소들이 균형있게 제자리를 찾게하는 레이아웃은 언제나 좋아하는 작업 중에 하나입니다.

본격적인 코딩은 항상 배우고 싶었지만 능력과 시간이 안되어서 항상 지나치기만 하다가 작년 노마드코더와 니꼬샘 강의를 발견한 뒤로 재미를 붙여서, 많은 시간은 아니지만 조금씩 배우고 있습니다.

사실 홈페이지 만들며 자바스크립트를 배워보려 시도하기도 했고 매번 어느 선에서 막혀서 그 언어를 잘 익히지 못하고 계속 포기를 했었습니다. 이번 투두 리스트 강의의 경우도 작년에 듣고 조금 따라서 만들어 보았었는데요, 그때도 시간, 날씨, 배경 이미지 등 부분은 어느정도 수월하게 따라갔지만, 특히 투두 리스트 작성하고 로컬 스토리지에 저장하고 보여주고 지우고 다시 저장하고 하는 과정이 잘 이해가지 않아 그냥 코드만 따라쓰다가 말았었고, 이번에도 여전히 이 부분에서 많이 막혀 고생했네요.

우연하게도 얼마전에 새해를 맞아 기분전환도 할 겸, 평소 작업 더 수월하게도 할 겸, 자주가는 웹사이트등을 정리해 html&css로 만들어서 브라우저 기본 화면으로 쓰려고 만들고 있었는데요, 이 기회에 여기에 투두 리스트로 기능을 더해보고 싶어서 참여하게 되었습니다.

3. 서비스 소개

(1) Twofold To-Do List : 매일 할일 + 짧은 메모의 두 가지 투두 리스트

- 매일 할일 리스트를 작성후 완료했으면 클릭하여 취소선을 그어 표시되게끔 만들었습니다.

- 상대적으로 덜 중요한 짧은 투두 리스트는 아래에 메모장 느낌으로 기록, 삭제하게 만들었습니다.

(2) Random Greetings :

- 이름을 입력하면 랜덤으로 여러 언어로 인사말이 출력됩니다.

- 이름 다음에는 작업 열심히 하라고 북돋는 짧은 문구와 이모지가 랜덤으로 나옵니다.

- 브라우저 타이틀에도 이름과 인사말이 표시되게 했습니다.

(3) Simple Layout : 매일 보는 편안한 레이아웃

- 바탕화면은 여행하며 찍은 사진들 중 보기 편한 사진 넷을 골라 넣어 랜덤으로 가운데에 배치되어 나오게 했습니다. 화면을 줄이거나 늘려도 사진 비율이 깨지지 않게 했고, 이미지가 커서 다운되는 시간이 걸리기에 다운이 완료되면 나타나게 하는 기능도 넣었습니다.

- 할일 목록 리스트는 한눈에 보이는게 편하여서 옆으로 나란히 정렬하였고요, 매일 할 일을 클릭하면 취소선과 함께 눈에 덜 띄게 변합니다.

- 모바일 화면에서도 깨지지 않고 가운데에 잘 정렬되게 배열하였습니다.

(4) Clock, Calendar, Geolocated weather : 강의에서 배운 내용대로 했습니다.

- 그 중 날짜는 한국식, 미국식, 유럽식이 순서가 다 달라서 숫자만 있으면 헷갈리기에 달을 숫자가 아니라 Jan. Feb...과 같이 축약 영단어로 변경해 넣었습니다.

4. 개발 과정 (어려웠던 점과 해결방법)

- 매일 할 일을 클릭했을 때 strikethrough 표시하고 또 한 번 다시 클릭하면 해야할 일로 다시 되돌리기, 그리고 이를 저장하기 :

이 부분은 여러모로 제가 이 투두 리스트 만들며 가장 어려워 한 부분입니다. ㅜㅠ 해결하기 위해 헤메는 과정 기록은 너무 길어져서 따로 https://paeon2021.github.io/todo-tab/process.txt 에 남겼습니다. 

- 브라우저 크기가 변해도 바탕화면 이미지 비율 유지하는 것, 그리고 이 이미지를 화면 가운데에 정렬하는 부분에서도 많이 검색하며 시도를 해보았는데요, css에서 object-fit: cover; 으로 가로세로 크기 정해서 해결할 수 있었습니다.

5. 앞으로 계획

- 지금 투두리스트의 업그레이드: 즐겨찾기 목록 입력할 수 있게 만들어 페이지 위로 호버하면 자주가는 웹사이트 리스트가 보이는 기능이 있었으면 좋겠다는 생각이 듭니다.

- 홈페이지와 관련해서 필요하고 만들고 싶은 기능 중에 하나는 이메일 입력하면 뉴스레터 등록되는 페이지도 만들어보고 싶습니다. 입력된 이메일을 어떻게 저장하는지, db는 어떻게 사용하는지 모르는 것 투성입니다.

- 파이썬 더 배우기. 이번에 파이썬 챌린지 하며 많이 배웠습니다. 작업중에 반복되는 간단한 클릭노가다 스크래핑 과정 하나를 이번에 파이썬 코드로 짜서 비서로 잘 삼고 있습니다. ㅎ 가끔 오류나면 또 수정해줘야하지만요. 이번 투투리스트 만들며 자바스크립트를 써보니 정말 파이썬 언어는 단순하고 깔끔해서 코딩하는데 집중이 더 잘 되는게 느껴지네요. 또 3blue1brown 채널을 가끔 즐겨보는데요, 그 시뮬레이션을 만드는 정도까지는 너무너무 멀어보이지만, 어느 정도 원하는 것들을 작게 구현할 수 있는 정도를 바라보며, 틈틈이 공부하고 싶습니다.

-Go 배우기. 파이썬보다 더 빠른 그 정체가 궁금합니다. 지금 파이썬으로 짠 비서가 좀 느린 감이 있어서 Go로 다시 짜보고 싶네요. 올해 언젠가 시간내서 니꼬샘 강의 들으며 배우고 싶습니다.

긴 글 읽어주셔서 감사합니다. 모두들 새해 복받으세요! 🐾