🎩1. SideBar 전격 수정
자바스크립트 프로젝트 때와 똑같이 구현하려고 했지만 지금 내 수준으로는 Header에 있는 버튼으로 SideBar를 열고닫는 기능을 도저히 만들 수가 없어서 디자인과 기능을 손보았다.
기존 기능
- 사이드바가 열린 채로 고정되어 있다가 브라우저 사이즈가 작아지면 자동으로 감춰짐
- 사이드바가 닫히면 Header에 사이드바를 열 수 있는 버튼이 드러나고(
display: none->display: block) 사이드바에는 사이드바를 닫을 수 있는 버튼이 드러남
리뉴얼한 기능
- 닫힌 채로 고정되어 있다가 상단의 토글 버튼을 누르면 열리고 닫힘
반응형 사이드바를 포기했지만 대신 모바일에서도 크기가 거슬리지 않는 사이드를 얻을 수 있었다. 여기서 오늘의 문제.
🎩1-1. 오늘의 문제1
overflow: hidden을 먹여서 사이드바 크기가 줄어들면 안에 내용물을 자연스럽게 감추려고 했는데, 사이드바 줄어든 크기만큼 내용물들이 자동으로 줄을 바꾼 다음에 overflow가 적용됐다. 쉽게 말해서 메뉴의 텍스트들이 줄어드는 사이드바에 따라 같이 찌그러지다가 사이드바가 다 닫히고 나서야 모습을 감춘 것.
허술하기는 해도 overflow는 적용되니 문제는 다른 곳에 있는 듯했다. 텍스트가 찌그러진다? 오케이 그럼 문제는 텍스트를 담은 div에 있겠지.
이 문제는 white-space: nowrap을 적용함으로써 해결했다. 사이드바의 width가 줄어드는 것을 따라 메뉴 텍스트들이 자동으로 줄바꿈하지 않고, 줄바꿈하지 않은 영역에 overflow: hidden이 적용되면서 텍스트가 찌그러지는 현상 없이 감출 수 있었다.
🎩2. Diary
하드코딩이지만 Diary 메인 페이지도 만들었다. 이전 프로젝트와 같은 구성이고 필터만 따로 추가했다. 다이어리 작성 날짜도 저장할 것이기 때문에 날짜를 기준으로 최신순과 오래된 순으로 정렬할 수 있는 필터 하나, 그리고 일기를 주제에 따라 분류할 수 있는 필터 하나 이렇게 두 개를 만들어 두었다. 한 입 크기로 잘라 먹는 리액트 강의에서 배운 내용을 응용해 보기 아주 좋을 듯.
필터 옆에 있는 버튼을 누르면 이동하는 다이어리 작성 페이지이다. form을 이용했고 중간에 글씨 크기나 굵기 등을 조절할 수 있는 툴바도 일단은 아이콘만 가져다가 버튼으로 구현은 해두었다. 예정에 없던 기능이긴 한데, 여유가 된다면 그럴싸한 에디터로 발전시켜 보는 것도 좋을 듯하다. (여담이지만 폰트 어썸에 은근 없는 아이콘이 많았다. 라이브러리를 하나로 통일하고 싶어서 다른 걸 안 썼는데 나중에는 다른 아이콘 써봐야지...)
오른쪽에는 필터로 정렬할 수 있도록 날짜와 카테고리를 선택할 수 있는 부분을 만들어 두었다. 데이터를 생성할 생각을 하니 벌써부터 떨리고 무섭군...ㅎㅎ
🎩2-1. 오늘의 문제2
열심히 만들던 중에 앞서 만들어 두었던 My Account 페이지에 오류가 생긴 것을 발견하였다. form에 있는 input에 onChange 없이 value 값을 부여했다는 내용이었는데 이런 것도 알려주는구나 싶었다. 좀만 기다리면 동적으로 만들어 줄 텐데 거참...!
전체적인 부분을 다 하드코딩한 후에 하나씩 리팩터링할 생각이라 우선은 readOnly 속성을 부여해 두었다. 오류 메시지는 사라졌지만 input창을 수정할 수 없어졌다!ㅋㅋㅋ
그리고 New post 탭에서, 제목 입력창을 만드는데 자꾸 input이 자신을 둘러싸고 있는 div를 탈출했다. width 값을 안 줬나 싶어서 width: 100%를 주고 부모 div에도 적용해봤는데 소용이 없었다. 부모 div에 padding도 적용되어 있는데 왜 이러나 싶었는데, box-sizing: border-box를 적용하니 해결되었다. 아무리 width: 100%를 주어도 input의 content 영역이 기준으로 되어 있어서 input이 div를 빠져나가는 거였나 보다.
🎩3. Wish List
Task Manager가 우선은 나한테 필요한 기능들을 만드는 게 동기부여가 될 것 같아서 잘 안 쓰는 서비스인 Data Storage를 지우고, 위시 리스트로 대체하기로 했다. Diary와 마찬가지로 필터를 넣어주었다. 필터는 컴포넌트로 분리한 다음에 최신순과 오래된순은 여기저기서 쓰이니까 그냥 두고 카테고리 영역과 버튼 부분만 props로 받을 수 있게 했다.
우선은 두 개의 Wish를 샘플로 만들어 두었는데, 위쪽은 사고 싶은 아이템(Wish)이고 아래쪽은 이미 산 아이템(Purchased)이다. 아이콘과 아이콘 배경색, 그리고 전체 배경색에 차이를 두어서 구분할 수 있게 만들었다. 오른쪽에 있는 Got it 버튼을 누르면 Wish에서 Purchased로 바꾸는 것이 목표이다. 그리고 왼쪽의 아이콘을 누르면 수정할 수 있게 만들고자 한다.
🎩3-1. 오늘의 문제3
깃크라켄에서 커밋하다가 잘못 눌러서 auto stash가 되었다. undo를 해도 안 되길래 찾아보니 변경사항을 임시저장하는 개념이라고 한다. 대신 stash 되면 unstaged, staged file에서 사라져서 Apply stash(임시 저장글 불러오기 개념)를 해줘야 원하는 대로 다시 커밋을 할 수 있다. 순간 예전 파일로 돌아가버려서 당황했지만? 알림 메시지가 시키는 대로 Apply하니 금방 원래대로 돌아왔다! 혼자 프로젝트를 만드는 동안에는 딱히 쓸 일이 없을 것 같지만, 이런 기능이 있다는 걸 알았으니 좋은 경험이라고 생각한다.
🎩4. 그 외 자잘한 수정 사항과 추가하고 싶은 부분
-
Home에 있는 웰컴 박스에 grid를 사용해서, 화면 사이즈가 작아지면 이미지가 텍스트 아래로 가게 만들었다.
-
라이브러리 말고 어설프더라도 캘린더를 직접 만들어서 Mood Tracker를 만들면 좋을 듯. 날짜를 선택한 다음에 감정을 나타내는 이모티콘을 붙이고, 간단한 감상까지 남길 수 있게 만드려면... 열심히 해야겠다^^
-
React-responsive랑 React-query 같은 게 있나 보다. 찾아보고 나중에 적용할 수 있으면 적용해야지.
-
MongoDB는 잠깐 두고 Node.js로 REST API 연습부터 하자. MongoDB는 나중에 그거 쓰는 회사 가서 배워도 될 것 같다.
-
Wish 추가랑 수정은 따로 페이지 만들지 말고 모달창으로 만들어도 될 것 같다. 한 번 찾아보자.
🎩5. 가벼운 회고
사이드바 토글 버튼 때문에 고민하면서 이거 하나도 제대로 못 만드는데 이 프로젝트 제대로 완성할 수 있을까 생각했었다. 하지만 언제나 목표를 100% 완수할 수는 없는 법이고 목표는 사실 목표일 뿐이니 깊게 생각하지 않기로 했다. 일단 할 수 있는 다른 부분부터 하나씩 하다 보면 그때 안 됐던 게 또 될 수도 있는 거고, 이런 개인 플젝은 완벽보다 완성이 먼저라고 생각한다.
그러니까 킵 고잉 해보자고~!
