https://yuna-song-yuna.github.io/todolist/ 

자기소개

개발자로의 취업을 원하는 취준생입니다! 비전공이지만 제 전공보다는 개발이 훨씬 잘 맞는다는 생각에 배우게 되었습니다.

취업하고 싶습니당 ㅠㅠ 

서비스 소개

강의 보면서 따라한 투두리스트 입니다! 강의를 따라한 후 추가로 구현한 기능으로는

1. <한 일/할 일>로 영역을 구분하여 사용할 수 있는 기능

2. 한 일을 다시 todolist로 되돌릴 수 있는 기능

3. 닉네임 수정할 수 있는 기능

4. 모든 리스트를 삭제할 수 있는 기능

5. 배경사진으로 특정 사이트의 랜덤 사진을 받아오는 기능

6. 리스트가 영역보다 많아지면 스크롤이 생기는 기능

등이 있습니다. 

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

1. 할 일과 완료한 일을 따로 구분하여 화면에 표시하고 싶어서 고민을 많이 했습니다. 

db를 사용했다면 쉬웠을 텐데 local storage는 이번 강의 들으면서 처음 배웠고 어떤 식으로 해야할 지 감이 잘 오지 않아서 고생 좀 했습니다ㅜㅜㅜ key값에 todo와 doneTodo 로 나누어서 저장하여 구현하였습니다.

2. li의 id값을 설정하는데 너무 힘들었습니다.

todo와 doneTodo로 나누는 순간 id 값이 겹치면서 의도한 대로 프로그램이 돌아가지 않았습니다. 그래서 todo와 donetodo의 value 중 가장 큰 id값을 기준으로 maxId += 1 하는 방법을 생각하여 코드를 작성하였습니다. 여기까지가 제일 힘들었어요

3. 스파게티 코드란 이런 것임을 느꼈습니다.

기능을 더해 갈수록 함수가 많아지고 점점 지저분해짐을 느꼈습니다. 그래서 일단 구현을 한 다음 최대한 정리할 수 있을 만큼 정리하고 주석도 간단히 달아줬습니다. 생각보다 주석다는게 힘들더라구요. 그래도 주석을 달아놓으니 후에 진행하면서 에러가 생겼을 때 쉽게 해당 함수를 찾아갈 수 있어서 주석의 중요성도 느꼈습니다.

4. css&디자인

우선 디자인감각 1도 없어서 오히려 코드짜면서 힘들어가지고 끙끙대던 순간이 그리워 지더라고요..누군가 디자인은 이렇게 해! 라고 정해줬으면 싶었습니다ㅠ 그리고 css는 제 기준으로 javascript보다 어렵습니다...block..inline...정렬...poistion...등등...

javascript가 최고입니다.

5. 닉네임 수정하기

닉네임 수정기능은 어렵지 않았습니다. 하지만 닉네임을 어떻게 해야 바꿀 수 있을지 알려주는 알림기능을 구현하기위해 고민을 좀 했습니다. 고려했던 방법은 net notification과 mouseover였습니다. notification은 사용자가 거부하면 알림을 볼 수 없기 때문에 mouseover로 선택하였고, 어렵지 않게 만들 수 있었습니다.

6. input에서 submit실행 시 동시실행 문제 발생!

가장 마지막에 발견한 에러입니다. 닉네임을 수정하고 submit을 하였는데 닉네임과 투두리스트에 모두 등록이 되는 에러가 발생하였습니다. 고민끝에 혹시 함수 이름이 같아서 그런건가 싶어 함수 이름을 다르게 바꿔주었고 에러를 해결할 수 있었습니다.

앞으로 계획 

1. 반응형으로 수정하고 싶습니다.

노트북으로 테스트해가며 만들었기 때문에 제 노트북과 다른 해상도에서 실행할 경우 제가 원하는대로 화면이 나오지 않습니당 ㅠ 반응형으로 수정할 계획입니다.

2. 사실 이 다음으로는 무엇을 만들지 잘 모르겠습니다.. 어떤 포트폴리오를 만들어야 취업에 도움이 될 지 정확히 모르겠어서요ㅠㅠ 일단 노마드코더의 클론 코딩을 하고 리액트도 배울 예정입니다!

> 이틀동안 몰입할 수 있어서 좋았습니다. 사실 좋았던 시간보다 화가난 시간이 더 많았긴 하지만 다 끝내고 보니 약간은 뿌듯함이 있네요 ㅎㅎ 하면서 걍 욕심 버리고 쉽게 만들까 했지만 참고 하다보니 되긴 되네요! 전 혼자 공부하기보단 이런 챌린지에 도전해야 열심히 하는 사람이라 노마드코더님 덕분에 많이 배웠습니다.! 사실 미루고 미루다 이틀 전에 시작하긴 했지만요 ㅎㅎㅎ.. 

그리고 글 쓰다가 다 날렸는데 다시 들어와보니 자동저장이 되어있더라구요.감사합니다💖