Today What I Learned
Javascript를 배우고 있습니다. 매일 배운 것을 이해한만큼 정리해봅니다.
1. To-Do List by React
1. 지난 이틀 리뷰
- 어떻게 이틀이 지났는지 모르겠다. 하... 지난 이틀은 Mac의 '미리 알림' 앱을 본 뜬 to-do list를 만드는데 시간을 보냈다.
- 컴포넌트 구조 구상부터 create-react-app을 걸쳐 첫 to-do list를 만들었는데 데이터의 흐름을 어떻게 짜냐가 관건인 것 같아 구조 구상에 힘을 많이 들였고, 몇 개월 만에 draw를 다시 폈다. 리액트도, html/css도 초보라 힘들었던 시간들. 이제 리뷰 시작.
2. 중점적으로 익힌 내용
- 데이터 관리(crud)를 유념하며 전체 서비스 설계하기
- 기본적인 투두 리스트의 흐름(투두를 신규 생성하고, 미완료/완료 상태로 변환할 수 있고, 투두를 묶는 상위 그룹을 생성하고 수정, 삭제)를 유념하며 어떤 데이터들이 필요할지 파악하는 것이 중요했다. 투두 리스트의 경우에는 투두 내용, 투두 리스트 제목, 완료/미완료 여부(토글), 날짜 등의 데이터 관리가 필요했다.
- 컴포넌트 간 상하위 구조 그리고 각 컴포넌트가 어떻게 영향을 주고 받는지 그림을 그려가면서 설계도를 작성하는데 시간을 많이 할애하였다.
- 실제 컴포넌트로 구현하기
- 서비스 설계도를 기반으로 컴포넌트 파일을 만들고 props를 내려 받아 state를 업데이트 하고 이벤트를 핸들링 해 동적인 기능을 담은 페이지 구현을 진행했다.
3. 고전했던 부분
-
어디까지 컴포넌트로 만들 것인가?에 대한 고민이 있었다. 기본적으로 컴포넌트는 하나의 기능을 수행하고, 가능한 잘게 쪼개서 작성하여 향후 재사용성을 높이는 것을 방향성으로 알고 있다. 그럼에도 컴포넌트들을 담고 있는 컴포넌트는 필요할까? 버튼 하나지만 유의미한 기능이니 컴포넌트 형식으로 만들까? 등의 고민을 설계 시간에 많이 했던 것 같다. 결론적으로는 굵직한 역할을 하는 컴포넌트들을 먼저 만들고, 다른 서비스들 컴포넌트 모양새를 많이 보고 배워야겠다는 투두를 남겼다.
(solo day to-do 1번: 다른 페어나 react로 구현한 심플 서비스에 들어가서 구조 살펴보기) -
설계 이후 컴포넌트 작동을 시험해보면서 사용자 편의성을 위해 애초에 기획하지 않았던 추가적인 기능(투두 그룹명 변경, 투두 그룹별 색상 지정, 투두 등록 시 포커스 아웃되면서 자동 등록 처리 등)이 머리 속에서 쏟아져 나와서 곤혹스러웠다. 일단은 설계한 부분을 충실히 구현하고, 버그 처리 후 추가했으면 하는 사항과 설계도를 비교하면서 보충해야겠다.
-
css... 자바스크립트도 자바스크립트지만 css 부분이 너무 어렵다. 더듬더듬 layout을 확인하면서 구현하는데 시간을 너무 많이 소요했다. 이제는 진짜 bootstrap이나 헬퍼 기능들을 배워야겠다. (solo day to-do 2번)
참고: 6 Best ReactJS based UI Frameworks(https://medium.com/@zeolearn/6-best-reactjs-based-ui-frameworks-9c780b96236c)
4. React 렌더 방식
- 리액트 state 관리에 대해 찾던 중 페이스북, 인스타 등에서 로딩 방식에 대해 알게 되었는데 먼저 회색으로 콘텐트가 채워지지 않은 방식으로 렌더하고, 그런 다음 데이터를 받아와 뿌려주는 방식이라는 점이다.
- 사용자였을 때는 별로 느끼지 못했던 순간인데 한 번 인지한 후 계속해서 이런 화면이 눈에 띈다.
- React class형 컴포넌트 사용 시 life cycle api를 이용해 비동기적 처리를 더하거나 더는 과정이 있다고 배웠는데, 이런 페이지 렌더링은 app 컴포넌트의 state를 비워둔 후 render를 완료한 다음 componentDidMount 단계에서 api를 받아와 구현하는 것이 아닐까(물론 실제 현업은 더 복잡한 구조겠지만) 싶다.
5. React Tips
- null 에러 처리
- return list && this.state.list.title: 있다면 title 없다면 false여서 리턴하지 않는 패턴
- const list = fetchData || [] : 있다면 fetchData 없다면 빈 배열을 지정하는 패턴
- 사용자의 인풋을 믿지 말고 시스템에서 가져와서 사용하자!
- event.target도 지양하자. 이건 프로젝트 마치고 깨달아서 코드에는 미반영됨. 리팩토링 필요
- react는 immutable한 데이터 사용!!
- 배열의 push와 같은 mutable method 대신 immutable method concat이나 [...data , 추가] 형태를 사용하자.
- 데이터를 어떤 식으로 저장할 것인가? - 데이터 관리가 관건이다!
- 데이터 업데이트가 일어날 때 어떻게 업데이트된 채로 덮어씌울 것인가?
→ 전체 프로젝트 복잡도가 결정됨
2. 서비스 설계도 및 화면
1. To-do list 설계도
- 0에서부터 만드는 서비스는 처음이라 굳이 복잡하게 컴포넌트의 state와 이벤트 핸들러들 그리고 props에 대해 자세히 써보았다.
- 결론적으로 구상했던 그림에 대해서는 수월하게 코딩을 할 수 있었다.
- 다만 진행하면서 추가되는 이벤트 핸들러들이 생겼던 것 같다.
- 주요 컴포넌트 설명
- App.js: 좌측 네이게이션 영역과 우측 to-do가 담기는 영역을 담는 컨테이너이다.
네이게이션 영역과 투두 영역에 서로 영향을 주고 받는 데이터들을 state로 관리하고 있고, 해당 state를 변동시킬 수 있는 핸들러들도 method로 명시했다. - Nav.js: 검색 기능과 완료된 투두 보기 기능, 그리고 투두 그룹 리스트, 투두 그룹 생성 기능을 담고 있는 컴포넌트다.
이 컴포넌트에서는 그룹 관리에 필요한 state를 담고 있다. 그룹의 상태 변경으로 인해 투두 컴포넌트에도 영향을 미칠 수 있으나 이러한 내용들은 상위 컴포넌트인 App에서 핸들러를 props로 내려 받아 네이게이션의 state를 변경한 직후 핸들러 함수를 실행시키는 구조로 설계했다. - ToDos.js: 선택된 그룹명과 신규 투두 생성 기능 그리고 각 투두 리스트를 담는 컴포넌트이다.
2. 투두 리스트 화면
- 습작이라 부끄럽다... 그래도 이틀 고생해 일단 얼추 완성했으니 서비스 화면 공개
- 링크: https://naseriansuzie.github.io/myToDoList/
- 버그 so far found (버그 고치기: solo day to-do 3번)
- 처음 투두를 완료하기 위한 엔터 버튼 클릭 시 2개의 신규 투두란이 생김
- 그룹 이동 시 완료 체크 박스가 풀림(state에서는 상태 유지)
- 처음 설계도처럼 구현은 했으나 유저 경험이 어색해서 고칠 부분
- 검색어가 입력 되었거나 완료된 리스트 클릭 상태에서 투두 추가 버튼 삭제
- 그룹명 컬러 생성 시 처음만 랜덤으로 생성되고 그 후로는 컬러를 기억해야 함, 검색결과로 나올 때 색깔 지정 필요
- 검색이 끝나면 검색어 비우기
- 신규 투두 생성 시 인풋박스 포커스가 따라가도록 수정
- 그룹명 변경 기능
- 위의 내용을 다 하고 나면 추가하고픈 기능
- 신규 투두 생성하면서 포커스 블러 시 등록이 완료 처리
- 완료된 리스트 내에서 날짜 구분
