프로젝트 회고
코드 스테이츠의 2주 프로젝트에 이어서 4주 프로젝트도 프론트 엔드를 맡았다. 달력과 관련된 라이브러리를 사용하지 않고 달력 기능을 구현하는 것이 목표 였다. 달력 기능들을 만들면서 왜 이 기술을 사용했는지, 그리고 어떤 문제를 만났는지에 대해서 정리 하려고 한다.
기본기능
우측상단 버튼으로 일간, 주간, 월간으로 페이지를 볼 수 있고, 좌측 상단 버튼을 눌러서 오늘, 이전, 다음으로 넘어갈 수 있다. 일간, 주간 화면에는 현재 시각을 표시해준다.
리덕스 사용
2주 프로젝트에 이어서 이번에도 리덕스로 상태관리를 했다. 메인 페이지의 달력 기능을 구현하기 위해서는 범위와 날짜라는 두 가지 상태가 필요했다. 사용자가 보고 싶은 날짜의 범위와 사용자가 특정 날짜를 선택하면 메인 페이지의 달력이 상태에 맞게 변한다. (기본값은 주간, 오늘로 설정했다) 이 두 가지의 상태를 조작할 수 있는 컴포넌트들이 다양하게 있는데, 다양한 컴포넌트에서 변하는 상태들을 리액트 만으로 관리 했으면 상태 전달만 하고 그 상태를 사용하지 않는 컴포넌트들이 많았을 것이다. 리덕스를 사용해서 이런 현상을 막고 편하게 상태관리를 할 수 있었다.
이벤트 타겟
우측 상단버튼을 눌렀을 때 나오는 셀렉트박스를 컴포넌트로 따로 만들었다. 클릭 했을 때 상태를 바꾸기 위해서 클릭한 엘리먼트의 벨류를 가져올 방법을 생각해야 했다. 처음에는 event.target 속성으로 텍스트를 가져와서 상태를 바꾸려고 했다.
하지만 속성을 사용할 수 없었다. 사용할 수 없는 이유를 찾기 위해서 콜손로그로 확인해 봤다.
target 속성은 클릭한 이벤트의 가장 깊은 요소를 가져왔다. 그래서 한글과 영문을 클릭했을 때 가져오는 요소가 서로 달랐다. currentTarget속성을 사용해서 해결했다. currentTarget은 클릭했을 때 이벤트가 걸려있는 요소를 가져온다. 그래서 한글을 누르든 영문을 누르든 부모에 이벤트가 걸려있어서 일관적인 요소를 가져왔다.
이벤트 중복
프로젝트에 반영하지 못한 기능이 있다. 구글 캘린더처럼 일간, 주간 화면에서 드래그로 일정을 만드는 기능을 만들고 싶었다.
기능을 만들면서 클릭했을 때 컴포넌트가 동시에 렌더링 되는 상황이 생겼다. 일정 정보를 보여주는 컴포넌트와 일정을 만드는 컴포넌트가 중복되어 발생했다. 일정 컴포넌트를 눌렀을 때는 일정의 정보만 보여 줘야 했다. 자식에 걸려있는 이벤트가 발생했을 때 부모가 가지고 있는 이벤트의 발생을 막아야 했다.
이벤트 전파를 막는 속성을(stopPropagation) 사용해서 문제 해결을 하려고 했지만 잘 되지 않았다. 프로젝트가 배포 단계로 넘어가는 시점이라서 이 기능을 새로 만드는 것을 포기했는데 너무 아쉽다.
프로젝트는 끝났지만, 이벤트 target 과 currentTarget 속성을 활용해서 이 문제를 해결해 보려고 한다.
