ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Calendar - 프로젝트를 마치며
    프로젝트 리뷰/기초 JS로 Calendar 구현하기 2020. 5. 3. 20:00

     

     

     

     

    ※ 목차

    1. Calendar 구현 목표

    2. Calendar 코드리뷰 - HTML마크업

    3. Calendar 코드리뷰 - CSS 적용하기

    4. Calendar 코드리뷰 - JavaScript 적용하기

    5. Calendar - 프로젝트를 마치며

     

    프로젝트를 하면서 느꼈던 점

     

    구글 캘린더, 네이버 캘린더 등등 평소에 캘린더 웹앱을 사용하면서 막연히 나도 언젠간 이런 웹앱을 만들어보고 싶다는 생각을 했었습니다.

    이 캘린더를 구현할 때, 처음부터 이런 저런 기능들을 다 구현해가면서 시작하지는 않았습니다.

     

    빈 js파일을 만들고 new Date()를 통해 날짜를 받아오는 테스트 과정만 따로 진행하여 Date에 대한 메서드들을 능숙하게 사용할 수 있을 때까지 계속해서 빈 페이지에 연습했습니다.

    하나가 끝나고 나면 input으로 할일목록 제출하는 방법, 데이터 저장하는 방법, 날짜별로 데이터를 구분해서 넣는 방법 등등 진행하고 있는 프로젝트에 바로 코드로 옮기지 않았습니다.

     

    모든 과정을 진행할 때 작게 시작해서 잘 작동하는지 확인한 후, 그것을 바탕으로 프로젝트에 적용해나갔으며, 이 방법이 훨씬 더 효율적이라는 것을 많이 느꼈습니다.

    전에는 진행하고 있는 프로젝트 파일에 생각나는대로 코드를 무작정 작성해 나갔었습니다. 그게 프로그래밍을 잘 하는 것인줄 알았으니까요. 하지만 그게 아니라는 것을 이번 프로젝트를 통해 많이 느꼈습니다.

     

    왜냐하면 무작정 코드를 작성해나가는 방식만 추구하다 보면 에러가 날 때에도, 내 의도대로 코드가 작동하지 않을 때에도 어디서부터 어떻게 잘못 된 것인지 파악하기가 힘들기 때문입니다.

    하물며 능숙하게 다룰 수 있는 메서드들도 종종 헤매이는데 능숙하지 않은 메서드들을 다룬다면 원래 잘 이해하고 있던 코드들도 의심하게 될 것이고 심지어 의사코드조차 작성하기 힘들 것입니다.

     

    프로그래밍을 하는대에 있어서 안좋은 습관을 버릴 수 있는 계기가 되었고, 혼자 진행한 프로젝트도 이렇게 재밌었는데 여러명이서 같이 진행하는 팀 프로젝트를 하게 된다면 얼마나 더 재미있을까 하는 기대감도 갖게 되었습니다.

     

    프로젝트를 하면서 힘들었던 점

     

    다른 언어를 아직까지는 다뤄본 적이 없어서 자바스크립트 외의 언어에서는 어떨지 모르겠지만, 자바스크립트를 통해 캘린더를 구현하면서 힘들었던 점은 화면과 데이터를 항상 일치시켜줘야 한다는 점이었습니다.

    화면에 내가 원하는 데이터들을 받아다가 잘 그려줬으면 데이터도 알아서 눈치채고 화면과 일치시켜주면 참 좋겠는데 말이에요..

     

    첫 프로젝트라서 처음에는 하나의 함수에 모든 기능들을 다 몰아서 작성을 했었습니다. 기능별로 분리하지 않은 코드를 작성한 결과 가독성도 많이 떨어지고 재활용성도 떨어지고, 코드 작성 순서가 내가 의도하는 것과 맞지 않아서 나는 에러들도 많이 생기는 것을 경험하게 되었습니다.

     

    사실 기능별로 분리하지 않고 하나의 함수에 모든 기능들을 몰아서 작성하면 좋지 않다는 것을 알고는 있었지만 분리되지 않은 이 코드들을 다시 리팩토링하며 잘게 쪼개나가는 과정을 경험하는 것도 좋을 것같아서 시도 했던 것입니다.

     

    경험한 결과 분리하는 과정에서 많은 것을 얻을 수 있었습니다.

    변수들을 사용하는데 있어서 스코프 문제도 마주할 수 있었고, 그 문제를 해결하기 위해 어떻게 인자를 전달해야 할지, 유효범위를 어떻게 주어야 할지 확실히 개념을 잡을 수 있는 기회가 되었습니다.

    함수 실행순서에 따라 코드가 어떻게 작동 되는지도 알 수 있었고 JSON.parse 등등으로 데이터 타입에 대해서도 많은 공부가 되었습니다.

     

    보완해야할 점

     

    새로고침을 하게 되면 LocalStorage에는 데이터가 아직 잘 들어가 있는데, DATA 객체는 비워진 것을 확인하게 되었습니다.

    아마도 제가 생각 하기에는 LocalStorage에 getItem() 메서드를 사용하여 첫 로드 될 때에도 DATA 객체를 순회하며 데이터를 일치시켜주는 과정을 코드로 작성하면 가능할 것같다는 생각이 듭니다.

     

    이 외에도 앞으로 추가적으로 생각나는 기능들이 있으면 하나씩 추가해 나갈 것이며, 앞으로 공부하면서 습득한 지식들을 사용하여 더 나은 코드를 위해 계속해서 수정보완을 해 나갈 생각입니다. 시간적 여유가 생긴다면 반응형으로도 만들어 볼 계획입니다.

     

     

    프로젝트의 모든 코드들은 이 전 컨텐츠에서 링크로도 남겨두었지만 제 깃허브에 오픈하여 올려두었습니다.

    자유롭게 가져다가 사용해보시고 피드백이나 추가 기능 구현을 하시면 댓글이나 이메일로 서로 공유하면 좋겠습니다!

    제가 만든 코드가 완벽하지도, 정답인 것도 아니지만 누군가에게는 공부하는데 있어서 참고할 수 있는 자료들이 되었으면 좋겠습니다.

     

     

    마지막으로 미성숙한 제 프로젝트에 관심을 갖고 읽어주셔서 감사드리고 피드백은 언제나 환영입니다! 감사합니다 :)

     

     

     

    전체소스 보러 깃허브 바로가기 - https://github.com/HyojinLee96

    피드백 및 소스공유 메일보내기 - gywls3394@gmail.com

     

     

     

    댓글 9

Designed by Tistory.