노마드 코더 자바스크립트 챌린지 완료🎊

이번 2주간 드디어...! 처음으로 챌린지를 완수해봤습니다...!

처음 보는 화면ㅠ 감격스럽다

 

 

그 전까지는 바빠서... 시간이 없어서... 아직 잘 모르겠어.... 라는 핑계로 챌린지 시도하다가 졸업작품 내는 거에서 번번이 실패하고 말았는데..ㅎ.ㅎ.ㅎ.... 첫 성공입니다!

 

자바스크립트 챌린지는 간단했어요! (어느정도 할 줄 아니까... + 거의 지금 3트째여서 챌린지에 뭐 나오는지 알고 있었음.. 해야 하는 것은 그저 꾸준하게 완성해내는 것 뿐....ㅎ)

 

그러니 바로 챌린지 졸업작품 후기로 들어갑니다잇😚

졸업작품은 HTML, CSS, JavaScript만을 활용해서 투두리스트를 만드는 거였는데요...., CSS가 가장 어렵다! 는 느낌..? 예쁘게 만드려면 CSS를 해야하는데ㅠ 내가 원하는대로 잘하기... 쉽지 않았다.... 아직 CSS가 익숙하지 않아서 그러려나

 

디자인 조금 아쉽지만, 일단 완성해서 낸 건 이러합니다

→ https://leessunj.github.io/todo/

 

개발한 내용

컨셉은 오늘도 달린다(!)

예전 챌린지 우수 졸업작품을 볼 수 있는데, 거기서 포켓몬 엔딩마냥 완성했던게 인상적이어서...😊

그리고, 이전 떡상 프로젝트 때 시간에 맞춰서 배경색 변했는데, 그런거나 날씨 그런 거 넣으면 아주 귀여울 것 같아서...! 그런 컨셉을 갖고 시작했습니다

 

로그인 전 첫 화면

 

로그인 후 메인 화면

 

적절한 배경을 찾고 싶었는데 찾지 못해 수제 배경제작ㅋㅋㅋㅎㅎ 2D Game 검색해서 비슷한 느낌으로 그렸어요..ㅎ

그래도 lottie에서 귀여운 파일을 찾아 귀여움을 업그레이드 할 수 있었다..! 

 

 

todo / done 리스트를 한 눈에 볼 수 있다

메인 기능인 todo !

1. todo가 생기고

2. 완료하면 done리스트로 넘어가고(이때 완료 시간도 저장)

3. 삭제하면 지워진다

4. 그리고 이 모든게 localStorage에 저장되어 새로고침해도 유지된다!

5. done리스트는 다음날이 되면 전부 초기화된다! 즉, 오늘의 done리스트인셈😋

 

사실 done리스트에서 다시 todo로 넣기 기능을 넣을까 싶었다...? 근데 굳이 필수적인 기능은 아니겠다 싶어서 생략함.. 만들기엔 적절히 직관적인 버튼을 떠올리기 힘들어서...! 하려면 할 수 있긴 하다...! 

그리고 일단 그거할 시간에 완성부터 하자..가 스스로의 목표 1순위였다.

 

하는 과정에서 느낀 싸피에서 배운 것 중 하나... 우선순위를 명확히, 필수적인 것 부터 하나씩 완성하자😝

 

done리스트는 숨길 수도 있어요~

 

done리스트 숨기기는 편의기능으로 만들었는데, 오늘 다시 보니 이 상태는 저장을 안하고 있어서ㅋㅋㅋ 새로고침하면 날라가더라구요

하지만 나름 의미있는 기능이라고 생각함

 

새로고침하면 배경색이 바뀜

 

챌린지 요구사항 중에 랜덤 배경이미지가 있어서, 그냥 색으로 랜덤했습니다ㅠ 원래는 아주 큰 꿈이 있었는데..... 재료를 찾지 못했음

 

처음 구상은요, 도시 / 산 / 바다 이런 게 변하는 거임... 심지어, 그것도 lottie같은걸로 왼쪽으로 이동하며 달리는 느낌을 주고 싶었다.... 그러나 마음에 드는 적절한 이미지 찾기가...ㅠㅠ 아쉽습니다

지피티에게도 부탁해봤으나 마음에 드는 결과를 주지 않았음. 그리고 투명배경으로 달라고 하면ㅠ 저렇게 투명을 표시하는 격자형태의 투명하지 않은 이미지를 줘서 킹받아요

 

 

 

그리고 시간에 맞게 배경색에 그라데이션을 넣고 싶었음... 실제 시간에 맞게 보라/남색-> 하늘 -> 주황/노랑 -> .. 이렇게 반복되게끔...! 

 

 

배우고 느낀 점

1. 예쁘게 만드는게 어려운 이유는 CSS 때문.... 여러 가지 속성 찾아가면서 설정하려 했는데, 아직까지는 좀 헷갈리고 바로바로 못하는게 있다.....! 쓰이는 것들만 쓰일텐데, 그것만 정리해둬도 어느정도 잘 하는 사람이 되지 않을까...?

2. 목표에 따른 우선순위, 우선순위에 따른 일정관리가 중요하다! 이전에 챌린지를 계속 실패했던 건 강제성이 없던 것도 시간이 없던 것도 많지만, 더 중요한 이유는 내가 너무 욕심이 컸기 때문인 것 같기도 하다. 

차를 만드려면 조금조금씩 굴러가는 걸 만들고, 그걸 차로 발전시켜나가야 하는데, 처음부터 멋진 차를 만들고 싶으니까 디자인만 하고! 현실과 이상의 갭이 너무 크니까 중간에 시간도 부족하고 포기했던 것 아닐까....

그런 의미에서 완성한 나 자신 칭찬해요

우선 중요한 게 뭔지 파악하고, 그것부터 하나하나 해나가면 되는구나 배웠다

3. lottie파일 어떻게 쓰는지 배웠다! ㅎㅎㅎㅎ cdn으로 하나 불러와놓고 쓰면 된다...! html에 바로 불러오는 방식을 쓰기는 했는데, 배경마냥 쓰려면 js에서 다뤄야 할 것 같기는 하다. 

→ https://lottiefiles.com/blog/working-with-lottie-animations/how-to-add-lottie-animation-in-web-page-html-kr/ 참고하시라요

4. 자바스크립트와 좀 친해졌다...^_^ 그러면서 느꼈는데 자바스크립트 이 자식.. 좀 신기한 언어야.... 뭔가 내게는 자바보다는 파이썬과 더 비슷한 느낌이라고 알고 있었는데 오히려 자바와 비슷한... 근데 뭔가ㅠ 알잘딱하게 하려고 해서 으잉 이게 뭐야 싶게 되기도 하는... 그런 언어.... 일단 예상외로 있을 것 같은 함수들이 없다(!) 자바에서 구현하듯이 구현해야 하는군 배웠다ㅎ

5. git은 그냥 개발을 시작하면 미리미리 세팅하고 해야겠다... 뭔가 아쉬운 느낌? 나는 쫌쫌따리 계속 해왔는데, 깃허브에 연결할 때 깃을 연결하니까..! 그 과정이 생략된 느낌이라 조금.. 아쉬웠다. 미리미리 깃 연결해놓고, 그 과정을 기록해나가는 것이 좋은 듯 하다!

6. 자바스크립트 내에서 코드 정리... 코드 이름 짓기.... 좀 어려운 것 같다ㅋㅋㅋ 함수 이름 이런 건 괜찮은데ㅠ document에서 요소를 저장해둘때 무슨 이름이 적합할지 모르겠어... html 태그에 id 붙일 때 매번 고민...그래서 좀ㅠ 혼종 코드가 등장한 것 같다는 느낌.... kebab-case도 있고요... camelCase도 있고요.... 예..... 그렇습니다.... 뭔가 자바스크립트는 케밥이 국룰인 것 같아서 그렇게 가다가.. 코드짜다보면 카멜이 익숙해서 카멜을 쓰던 나 자신....! 혼자 개발할 때도, 어느정도 컨벤션을 정해서 하면 좋겠군 싶었다.

 

 

 

 

우와 글쓰는 중간에 진짜 완주했다고 연락왔어요!

7월 첫날부터 뭔가 성공한 기분... 뿌듯합니다🤗