자기 전 일기를 쓰며 하루를 마무리하곤 합니다.
하지만 이전에 쓴 일기는 읽어보진 않게 되더군요. 여기에 영감을 얻어 일기 작성과 동시에 하루 전, 일주일 전, 한 달 전, 일 년 전의 일기를 볼 수 있는 일기장 애플리케이션을 만들어보고 싶었습니다.
- 하루에 일기는 하나만 작성할 수 있습니다.
- 일기의 수정과 삭제는 당일에만 할 수 있습니다. 다음날로 넘어가면 놉!
- 일기는 기본적으로 오늘, 하루 전, 일주일 전, 한 달 전, 일 년 전의 일기만 볼 수있습니다.
- 부가 기능의 캘린더 기능을 이용하면 다른 날의 일기도 확인할 수 있습니다.
HTML, SASS, JavaScript, React, TypeScript
- 데이터 필터링
DiaryList는 오늘, 하루 전, 일주일 전, 한 달 전, 일 년 전의 일기만을 보기 위해 filter 메서드를 이용해 데이터를 필터링했습니다.
처음에는 app 컴포넌트에서 데이터를 필터링 후 자식 컴포넌트로 데이터를 공유했지만 이후 캘린더 기능을 추가하게 되어 필터링된 데이터 외의 데이터도 필요하게 되어 DiaryList 컴포넌트에서 fiter 메서드를 사용하게 되었습니다.
- 일기 슬라이드
일기 리스트는 손쉽게 볼 수 있게 슬라이드 기능을 추가했습니다.
SlideWrapper라는 클래스의 article을 만들고 transform: translateX 으로 움직이는 것으로 슬라이드를 구현했습니다.
- 필터링된 데이터의 수에 따라 width와 translateX의 %가 달라지므로 styled-components 라이브러리를 이용했습니다.
- 캘린더 모드
필터링된 데이터가 아닌 전체 데이터에서 원하는 날짜에 맞는 일기를 확인할 수 있게 합니다.
react-datepicker 라이브러리를 이용해 만들었습니다.
달력의 스타일링은 개발자 모드를 열어 클래스를 확인해가며 조정했습니다.
캘린더 모드 사용 중에는 DiaryEditor를 사용할 수 없게 했습니다.
- 오늘의 기분
오늘의 기분에 해당하는 아이콘을 클릭해 일기에 담을 수 있습니다.
react-icons 라이브러리를 이용해서 아이콘을 불러왔습니다.
- 일기 작성
textarea에 일기를 작성합니다.
일기는 5글자 이상 작성해야 하며 작성하지 않고 글쓰기 버튼을 클릭시 useRef에 의해 textarea에 focus가 가게 됩니다.
줄 바꿈 문제 발생
textarea에서는 줄 바꿈이 되서 나타나지만, 일기목록에서는 줄 바꿈이 되지 않고 나타나는 문제가 발생했습니다.
이를 해결하기 위해 textarea의 value에선 줄 바꿈시 어떤 변화가 일어나는지 확인해보았고 줄 바꿈이 일어날 때마다 \n이 새겨짐을 확인했습니다.
split(”\n”) 메서드를 이용해 배열을 만들어 주었고 배열을 map 함수를 이용해 div로 감싸 반환해 해결했습니다.
시각이 불편하신 분들을 위해 각 섹션마다 헤딩 태그를 둬 설명을 달아주었습니다. 디자인상 불필요한 부분은 blind 클래스를 두어 보이지 않게 했습니다.
- 추가로 checkBox나 Radio 부분도 p태그로 설명을 작성 후 blind 클래스를 줘서 보이지 않게 했습니다.
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;모바일 및 태블릿 사이즈를 고려하기 위해 대부분의 크기를 em으로 설정했습니다.
기본 폰트 사이즈인 16px에 맞춰 em 사이즈를 설정했으며 미디어 쿼리를 이용하여 화면 크기 별로 fontsize를 14px, 12px로 낮췄습니다.
useMemo와 React.memo, useCallback을 사용해 불필요한 리렉더링을 방지했습니다.