ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Calendar 구현 목표
    프로젝트 리뷰/기초 JS로 Calendar 구현하기 2020. 5. 3. 02:45

    ※ 목차

    1. Calendar 구현 목표

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

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

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

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

     

    구현된 최종 캘린더 이미지

     

    Calendar 전체 이미지

     

     

    구현한 계기

     

    평소에 자주 사용하던 구글캘린더를 보고 편리함을 느꼈고, 구글캘린더와 비슷한 캘린더를 만들어보고 싶다는 생각을 하게되었습니다.

    또한 지금까지 학습해온 html/css/JavaScript를 복습겸 잘 학습해왔는지 점검하기 위해서 프로젝트를 시작하게 되었습니다.

     

     

     

    html/css/JavaScript 를 사용하면서 각 파트에서 얻어갈 지식들

     

    1. html

    시멘틱 마크업을 이해하고 사용할 수 있으며, 각 태그들을 의미에 맞게 사용할 수있고 각 태그들에 class, id를 부여할 때 css 적용을 어떻게 할 것인지, 공통된 class를 만들어서 어떻게 하면 재활용 가능한 css를 작성할 수 있을까에 대하여 고민을 하며 태그들과 class,id를 부여했습니다. 또한 자바스크립트로 태그를 만들어서 삽입해야 하는 경우가 있고 각각 고유의 id 값이 필요한 태그들은 미리 생각하여 id값을 섣불리 부여하지 않고 class만으로 해결할 수 있는 방법을 먼저 생각하였습니다.

     

    2. css

    중복되는 요소들에 대한 스타일은 한 클래스에 넣어줌으로써 중복을 줄이고, reset.css 파일을 만들어 불필요한 기본 css를 미리 제거해주었습니다. position 사용을 아무 곳에나 다 사용하지 않고 꼭 필요한 부분에만 주었고, 버튼에 들어갈 간단한 X표시 같은 것은 아이콘을 따로 다운로드하여 사용하지 않고 css의 ::after, ::before 속성을 사용하여 배치하였습니다.

     

    3. JavaScript

    화면과 데이터를 항상 일치시켜주는 작업에 고민을 많이 하였습니다.

    하나의 함수안에 모든 코드들을 다 작성하지 않고, 각 할일별로 함수를 나누어서 재활용성을 높혀주는 것에 중점을 두었고, 달력의 날짜별로 이벤트를 등록하는데 각 요소마다 모두 이벤트를 걸지않고 이 요소들의 부모태그에 한번만 이벤트를 걸어두고 이벤트캡쳐링을 이용하였습니다.

    지금은 각 날짜들이 담긴 태그 요소들이 많지 않지만 만약 이 태그들이 수백가지라면 각 요소들마다 하나씩 이벤트를 걸어주는 것보다는 캡쳐링을 사용하여 부모태그에 한번만 걸어두는 것이 성능면에서도 더 좋을 것같다는 생각이 들어서 이번 프로젝트에 적용하게 되었습니다.

     

    함수를 어디서 어느 순서로 호출해야 하는지, 데이터를 다룰 때에는 배열과 객체중 어떤 방식으로 넣어야 데이터를 읽어올 때 편리할지 등등에 대하여 많이 고민하였고 실제로 여러가지 방법을 써보기도 했습니다.

    아직 데이터를 어딘가에 저장하는 방법을 학습하지 않았기 때문에 데이터를 보관할 수 있게 하기 위해서 LocalStorage를 공부하게 되었고 만들어둔 데이터 객체를 받아와 LocalStorage에 저장하는 것까지 구현하게 되었습니다.

     

     

     

     

    프로젝트에 대한 간단한 설명은 이 정도로 해두고 이 캘린더를 구현하기 위해서 어떻게 코드를 작성하였으며, 데이터는 어떻게 저장이 되는지에 대해서 코드와 사진, GIF 등을 이용하여 하나하나씩 다 코드리뷰를 할 예정입니다.

     

    코드리뷰까지 마치고 나면 이 프로젝트를 하면서 느꼈던 점, 어려웠던 점, 보완해야할 점 등등을 블로깅 하며 회고하는 시간도 갖도록 하겠습니다.

     

     

    이 외의 나머지 코드들은 제 깃허브에 모든 소스들을 오픈하여 올려두었으니 궁금하신 분들은 아래의 링크로 가셔서 확인하시면 되겠습니다.

     

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

    다음주제 바로가기 - Calendar 코드리뷰 - HTML마크업

     

    댓글 0

Designed by Tistory.