챌린지 제출하자마자 후기 올리려고 했는데 차일피일 미루다가 이제야 올리네요.

노마드코더를 처음 알게된건 작년 후반이였는데 그때 한창 프론트엔드에 관심이 많아서 이것저것 찾아보다가 어떤 분이 블로그에 JS 클롬 챌린지 후기 올린 것을 보고 이거다! 하고 알게되었습니다.

작년에는 개인적인 사정이 있어서 신청 못했고 이번년도에 다시 개발 공부를 시작하면서 JS 챌린지도 같이 신청해봤습니다. JS 에 지식이 전혀 없는데도 불구하고 정말 쉽고 그리고 재미있게 설명해주셔서 초보자도 따라가기 쉬웠습니다. 강의는 챌린지 시작 이틀전부터 시작했습니다. 강의 들으면서 몰랐던 내용 공부도하고 블로그에 기록도하고 정말 너무 너무 재밌었습니다!!! 처음 일주일동안 강의 모두 듣고 졸업작품을 어떻게 디자인하고 어떤 기능을 넣을지 생각했는데 결론은 생각한 기능 모두를 구현해내지는 못했습니다. 초보자의 한계와 시간 부족으로 인해서 참 아쉬움이 많이 남았지만 그래도 끝냈으니 참 다행이라는 생각이드네요. 2주동안 하루 평균 10~13시간정도 코딩하는데 시간을 보냈는데 뿌듯하고 너무 즐거웠습니다. 만약 JS 챌린지 신청을 고민중이라면 당장 실력이 어찌됐건 먼저 신청하는 것을 추천합니다!

✨구현기능

- 환영 인사 오토타이핑

- 이름 입력 후에는 메인 홈만 노출

- 북마크(추가 버튼 누르고 북마크 추가할 수 있음)

- 프로필 (로그인 이름 표시, 소개글 수정기능)

- 미니캘린더 ( 실시간 시간 표시, 달과 요일 표시, 다음 달까지 며칠 남았는지 계산)

- 명언 (새로고침시 새로운 명언 노출, 버튼을 누르면 해당 명언이 복사)

- 해빗 트래커 ( 목표 입력 후 목표까지 남은 수를 볼 수 있음, 도넛 그래프 사용)

- 투두리스트 ( 더블 클릭 수정 기능, 완료 표시 기능, 완료 표시된 일정 수정 불가, 삭제기능, 남은 할일 개수 알려줌)

- 디데이 (디데이 존재 여부에 따른 노출되는 화면이 다름, 디데이 추가후 해당 날짜까지 남은 날짜 계산, 시작 날짜를 기준으로 진행 상황을

그래프로 확인 가능)

- 날씨 ( 날씨에 따라 배경 색깔 변화, 날씨에 따른 아이콘 변화, 날씨 이름, 온도, 최저/최고, 지역/나라, 바람, 습도, 압력 데이터 표시

- 음악 (화살표 누르면 다음 음악으로 변경, 재생/일시정지 누르면 음악 재생되고 정지, 하트로 좋아하는 노래 표시 가능)

- 뽀모도로 타이머(25분) (스타트 누르면 일시정지로 텍스트 변경, 리셋버튼 누르면 초기화)

✨ 아쉬운점

- 다크모드 : 구현은 쉬우나 적용시 디자인을 변경해야할 부분이 많아서 지움

- 캘린더 : 생각보다 복잡하고 어려워서 시도하다가 시간 없어서 못함

- 남은 할 일이나 여러 데이터를 실시간으로 반영해주고 싶어서 이것저것 시도해봤으나 기능이 생각보다 많고 코드가 너무 중복되고 더러워져서 결국에는 history.go() 를 사용함. 사용했더니 기능을 사용할 때마다 새로고침 되며, 날씨 묻는 팝업이 계속 뜨고 화면이 로드되는데 시간이 좀 걸린다는 점이 너무 아쉬웠음. 그나마 html 코드를 실행하면 실행이 빠른데 깃헙 주소로 들어가면 정말 렉이...^^ 부끄러워서 코드를 제출할까말까 정말 고민 많이 했습니다...

✨배운점

정말 너무 너무 많습니다. 강의 내용 모두 정리해서 블로그에 기록해두었는데 (비공개) 날씨 API 가져오는 기능이 제일 신기했습니다. 또한 욕심이 생겨서 이것저것 기능을 추가하다보니까 파일이 많아졌는데 나중에 최종파일에 하나씩 추가할 때마다 콘솔에 뜨는 에러보면서 정말 눈물 흘렸습니다. 에러 수정하고 파일 합치는데만 2시간 걸렸네요. 그리고 깃허브...! 마지막날 저를 눈물나게 해줬네요. 깃허브 가입 미루다가 챌린지 코드 제출 때문에 가입했는데 정말 사용법이 무진장 어려웠고 오류가 너무 많이 나서 못 올릴 뻔 했습니다... 새벽에 슬랙에 질문했는데 답변해주신 분도 너무 감사드립니다.

✨ 결과 및 기능

1. 페이지 로드시 저장된 이름이 없다면 이름을 묻는 창을 실행하고 메인홈을 숨겨줬습니다. 텍스트는 오토타이핑 기능을 추가해줬습니다.

2. 북마크 기능. 시간이 없어서 너무 대충 만들었습니다. 정말 최소한의 기능만 존재하는 북마크...
   

   

3. 프로필사진은 유저가 직접 업로드 할 수 있도록 기능을 구현하려했는데 춘식이가 너무 귀여워서 냅뒀습니다. 소개글을 블로그 처럼 수정할 수 있도록 했습니다

4. 심플캘린더. 현재 시간을 보여줍니다. 월과 일이되며 다음 달까지 남은 날짜를 자동으로 계산해서 보여줍니다.

5. 랜덤 명언! JS 챌린지 수강하면서 배운 Math.random 기능...! 다른 기능 구현하는데도 종종 써먹었습니다. 챌린지 아니였으면 이해도 못했을겁니다. 하단 버튼을 누르면 해당 명언이 복사됩니다.

   

6. 해빗트래커입니다. 목표를 추가하고 상태를 점검할 수 있습니다. 버튼을 누를때마다 그래프가 증가하며 수치가 자동으로 계산됩니다. 이거 정말 너무 오래걸렸습니다. 증가할 때마다 실시간으로 수치를 반영하기 위해 history.go() 메소드를 사용했는데... 쓰고나서는 오! 직접 하나하나 localstorage 에서 getitem 안 해도 되잖아? 하면서 정말 많이 썼는데 나중에 코드를 합치고 나니까 문제점이 보이더군요....증가될 때/감소될때마다 모든 페이지가 자동 새로고침 되면서 날씨를 다시 묻고... 배경이 바뀌고... 렉도 렉이고 그냥 너무 에러도 많은 것 같아서 이 이슈때문에 코드를 제출해야하나 정말 고민 많이 했습니다. 아예 삭제할까 생각도 들었지만 아쉬워서 추가했습니다.

   

7. 디데이프로그래스! 디데이를 입력하고 날짜를 입력하면 자동으로 남은 날짜를 계산해줍니다. 하루가 지날 때마다 퍼센트가 자동으로 계산되어 증가됩니다.

   

8. asmr ! 플레이버튼을 누르면 일시정지 버튼으로 디자인이 변경되고 음악이 실행/중지됩니다. 양 옆 버튼을 이용해 다음 노래 /이전 노래 변경이 가능합니다. 하트로 좋아하는 곡을 표시할 수 있습니다. 다른 노래를 플레이하면 현재 플레이 중인 노래도 중지되었으면 했는데 그 기능까지는 구현하지 못했습니다.

   

9. 뽀모도로 타이머입니다. 스타트버튼을 누르면 배경 색이 변경되고 스탑버튼을 누르면 중지됩니다.
   

   

10. 대망의 투두리스트. 투두리스트 만드는 것이 가장 오래걸렸습니다. 일정을 추가하고 삭제할 수 있습니다. 또한 일정을 더블클릭하면 일정을 수정할 수 있습니다. 일정을 완료표시할 수 있으며 완료 표시된 투두는 수정이 불가능합니다. 이 투두리스트도 수치를 실시간으로 반영해주기 위해서 위에 설명한 메소드를 사용했는데 하... 투두 추가할 때마다 페이지가 로드되니까 정말 렉이... 부끄럽습니다. 투두에만 정말 20시간은 넘게 투자한 것 같아요. 특히 더블클릭 후에 수정할 수 있도록 만드는 게 가장 어려웠는데 결국은 해냈지만 아쉬움이 많이 남았습니다.
    

    

🎉 최종

드디어 끝이네요!!! 처음 챌린지 시작했을때만 하더라도 querySelector 도 몰랐는데 진짜 JS 챌린지 최고입니다. 강의 모두 듣고 매일 과제랑 챌린지 & 졸업작품 같이 공부했는데 정말 재밌고 처음 시작했을 때는 프로필 만드는 것도 어려웠는데 2주가량되니까 뭔가 만들고싶다 하면 머릿속에 어떻게 코드를 짜야할지 자연스럽게 생각이 되더라고요. 너무 신기했고 JS 챌린지 아니였다면 생각조차 못했을 것 같습니다. 개인적으로 실력은 오류를 경험해야 조금씩 늘어나는 것 같습니다. 진짜 하나 만들때마다 이게 안 된다고...? 대체 왜...? 하면서 5시간 넘게 그것만 바라보고 있을 때도 있었고 단순한 기능을 하나 추가하더라도 생각보다 생각해줘야 할 부분이 많더라고요.. CSS 도 보면 쉬워보이는데 막상 코드짜다보면 이게 왜 안 먹지...? 하는 부분이 정말 많았습니다. 코드가 길어지다보니까 class 명이 겹쳐서 다른 기능인데 거기에 적용되어있는거보고 기겁했습니다. 그래도 오류가 생기니 배운점은 많네요 ㅋㅋㅋㅋ ㅠㅠ
결과물은 gif 로 보면 괜찮지만 막상 사이트 들어가서 실행하면 에러 천지에 렉이 남발해서 부끄럽네요. 하지만 만족합니다. 2주동안 모두 수고하셨고 만약 이 글을 보시는 분들 중 챌린지 수강 및 신청을 고민하시고 계시다면 당장 신청하세요! 정말 재밌고 유익한 강의였습니다 ☺️