기능목록

TodoList

todoList 확인하기 (Netlify)

카테고리 가로스크롤

• useRef 훅을 사용하여 스크롤 할 DOM을 선택하여 해당 DOM에서 onWheel이라는 이벤트 함수를 적용해서 스크롤을 감지하여 가로로 이동하게 하였다.

카테고리 별 목표 달성시 해당 프로세스 바 채워짐

• progressBar 와 bar를 만들어 겹치게 해놓고, progressBar의 width를 카테고리에 속한 todo 중 done이 true인 것의 개수를 카테고리에 속한 todo 개수로 나누어 *100을 하여 값을 지정해주었다.

카테고리 클릭시 카테고리 별 투두 모아보기

• useState 훅을 사용하여 초기값을 전체 목록이 보이도록 ‘All’ 로 할당하고, 카테고리를 클릭할 때마다 데이터 속성인 data-value로 값을 받아온 뒤, setter 함수를 이용하여 카테고리 명으로 바뀌게 하였다. todoList는 reduce 함수를 사용하여 (filterCategory === 'All' || filterCategory === todo.category) && todo.title.includes(searchValue) 조건을 만족할때 추가하는 식으로 구현하였다.

투두 하나를 클릭 했을 때 [수정/삭제] 보이기

• 투두 위에 투명한 버튼을 만들고, 화면 밖에 Edit와 Del 버튼을 만들었다. 버튼을 클릭하여 isTaskLeft(일정이 왼쪽으로 슬라이드 되어있는지 판별)를 Toggle한다. Toggle되면 투두는 왼쪽으로 이동하고 Edit와 Del 버튼이 화면 안쪽으로 이동하도록 구현하였다. isTaskLeft && taskId === todo.id} 조건으로 className을 넣어 클릭한 값만 이동하도록 하였다. 해당 className으로 위치 값을 조정하고 transition 효과를 넣어 부드럽게 이동하도록 하였다.

투두 삭제 버튼 클릭시 삭제 하기

• [초기]: todoList.filter(todo => taskId !== todo.id) 다음과 같이 filter로 삭제 할 id가 아닌 id들을 찾고, 그 결과를 배열에 다시 넣어주었다.
• [수정 후]: 기존의 todoList를 context로 전역으로 빼면서 dispatchTodoList({ type: 'DELETE_TODO', id })로 삭제를 관리한다.

투두 수정 버튼 클릭시 수정 하기

-> navigate('edit', { state: { targetTodo: todoList[targetIndex] } })를 통해서 edit 페이지로 이동하면서, 변경을 원하는 todo 항목을 state로 전달한후 edit 페이지에서 dispatchTodoList({ type: 'EDIT_TODO', id: targetTodo.id, title, deadline, category, done: targetTodo.done })과정을 통해서 타겟 Todo만 변경하는 식으로 변경

다크모드 토글

• 상태관리를 통해 아이콘 변경 및 테마 변경

체크버튼 클릭시 취소선으로 목표 완료 표시

-> classNames 사용해서 체크버튼 클릭시 done 클래스 부여해서 todo.done이 true가 된다면 취소선 생기게 적용하였음. 선이 자연스럽게 나오도록 애니메이션 적용하였음.

검색버튼 클릭시 검색창 보이고, 키워드 별 검색 지원

-> searchValue State를 검색 키워드로 이용해서 해당 값이 변할때마다 todo.title.includes(searchValue)에서 검색 필터링(?)을 함, onChange 이벤트 발생 시 마다 재 렌더링 되는 것의 간격을 늦추기 위해 검색 함수에 디바운싱 적용하였습니다

투두 D-Day 기능

-> todo.deadline을 Date 객체에 넣어 지금 시간과 뺀 일수만 디데이로 보이도록 하였음.

Add/Edit Todo

todolist를 전역으로 변경

-> 처음 설계한 구조로는 Todo 컴포넌트에서 AddTodo 컴포넌트로 props를 전달하려면 App으로 올려서 다시 EditTdo 컴포넌트로 내려주는 작업이 필요했다. 그래서 이 참에 useContext를 써서 전역으로 todoList의 상태를 관리해보기로 결정하고, 다양한 명령을 수행하기위해 useReducer를 활용해서 전역으로 todoList및 dispatchTodoList를 context에 부여하였다.

동일한 코드가 AddTodo, EditTodo에 대부분 겹침

-> AddTodo리스트와 EditTodo리스트의 전체적인 폼(?)이 같은데 컴포넌트를 분리하여 재사용할 수 있도록 변경이 필요하다고 생각한다.

이슈

AddTodo, EditTodo에는 다크모드 적용안됨

후기

• 권은서:만난 지 일주일도 되지 않은 팀원들과 많은 커뮤니케이션이 오가고 구현된 기능들을 보니 앞으로 남은 4주가 더욱 기대된다. 평소 진행해오던 방식과는 다른 방식을 사용해 처음에는 많이 어색했으나 이 또한 취업하게 되면 겪게 될 일이기 때문에 소중한 경험이 될 것이라고 생각한다. 이 과정이 끝나기 전까지 최소한 린트와 타입스크립트에 대한 어색을 없애고 좀 더 간결하고 임팩트 있는 코드를 짜는 개발자가 될 수 있도록 최선을 다해야겠다. (우리 팀원들은 다 백수 탈출하고 개발자로서 만났으면 좋겠다.. 😀 )

• 김부건: 협업은 처음인데, 작업 단위로 커밋을 쪼개는게 중요하다고 생각했고, 기능별로는 branch를 잘 나눌 필요가 있다고 생각했다.(git branch 변환은 상당히 빠르다고 한다. 스냅샷을 이용하기 때문에?) 다음 팀 과제에서는 git의 issue 등 협업시에 유용한 기능들에 대해 좀더알아보고 활용해보고 싶다. 팀원분들이 개인의 몫을 해내는 모습이 멋있었다. 👍🏻

• 김수진: 인원이 많다보니 기능을 나누었음에도, 한 파일 안에서 작업하게 되는 경우가 생겼습니다. 두개의 파일에서 팀원 4명과 동시에 작업을 하게 되었습니다…😮 PR과 충돌파티의 공동작업을 해보며, 앞으로의 팀 작업시 도움이 될 경험을 쌓을 수 있었습니다. 어떻게 작업을 나누고 합칠지 고민할 때, 이번 팀 작업을 통해 더 좋은 분업을 할 수 있을것이라 생각합니다. Git은 공부를 더 해야겠습니다. 커밋 로그는 어디로 갔을까요… 이번에는 린트를 사용하여 코드를 작성해보며 규칙을 익힐 수 있었습니다. 짝 프로그래밍도 작게나마 해볼 수 있어 좋았습니다! 또한 팀 회의를 하며 규칙을 정해나가고 서로 도움을 주고받는 과정이 즐거웠습니다.

• 김승원: 짧은 시간이었지만 여러 경험을 할 수 있어 보람찬 시간이 된 것 같습니다. 이래서 프로젝트 경험이, 특히나 팀 프로젝트 경험이 중요한 것이구나 다시 한 번 깨닫는 시간이었습니다. 함께 구현해야할 부분을 구상하고 방법을 논의하고 컨벤션을 정하면서 혼자 하는 것 보다 더 많은 것을 생각해볼 수 있었고 린트 등을 적용 하면서 코드 스타일을 맞춰 가는 것이 고통스럽지만 즐거운 경험이었습니다. 린트 덕분에 조금씩 더 정갈해지는 코드의 모양새에 어느새 스스로 만족감을 느낄 수 있었습니다. 특히나 이번 팀 과제에서는 페어 프로그래밍과 각자 코드를 짜는 것 모두 경험해 볼 수 있어서 더욱 좋았습니다. 이후 협업에서 어떤 방식을 고려해보는 것이 좋은지 많은 생각을 할 수 있는 뜻 깊은 경험이었습니다. 앞으로의 팀 과제들도 기대가 되고 예열 하기에 좋은 과제가 아니었나 생각합니다. 조금씩 더 함께 하기에 좋은 사람으로 발전해야겠다는 다짐을 갖게 되었습니다.

• 이주이:여러명과 협업하는 것은 처음이여서 버벅거렸다. 혼자 commit push만하다가 브랜치를 새로 생성하고 PR 하는것이 미숙했다. 다른 팀원분들에게 도움을 받으며 깃과 어느정도 익숙해 진거 같다.다음 프로젝트 할때는 조금더 효율적으로 파트를 나누고 작업해야될 필요성을 느겼다.

• 김영현: 팀 단위로 작업 할 때는 기능을 나누어 구현하는 부분이 중요하다고 생각이 들었다. 그리고 내가 고민하고 있는 내용을 공유해서 모르는 문제를 해결하는 능력도 부족하다고 느껴 다음 프로젝트에서는 의사소통도 원활하게 하려고 노력하고, git과 강사님이 주신 보일러플레이트를 더 능숙하게 사용할 수 있으면 하는 바램이다.

• 유승완: 협업에서 중요한 부분들을 몸소 느끼게 되었고 다양한 코드들을 보면서 많이 배우게 되었다. 시행착오도 많이 겪은 만큼 다음 프로젝트에선 더 좋은 결과를 낼 수 있도록 노력해야겠다.

• 이상원: 팀 프로젝트가 처음이라 파트 분리 작업이 조금 미숙했다. 다음 프로젝트에선 체계적으로 파트를 분리하여효율적인 작업을 해봐야겠다.git을 잘 알지 못하는 상태에서 작업을 진행해 부건님의 많은 도움을 받았다. 브랜치와 머지를 공부해야겠다.

• 이지영:팀원분들과 협업을 하는 과정에서 서로의 의견을 솔직하게 나누었던 회의시간이 기억에 남는다. 아무것도 정해지지 않은 상황에서 무엇인가를 만들어냈다는 것이 보람되었다. 아직 첫주라 서툴지만 시행착오를 겪은만큼 다음 프로젝트는 더 수월할 것이라 생각한다. 또한 팀프로젝트를 진행하면서 eslint를 사용했다. 이제껏 써왔던 코드에 미숙한 부분이 많았음을 알게되었다. 그리고 git의 사용도 미숙했다. 온보딩 프로젝트를 하면서 익숙해지도록 공부해야겠다.

홍성우: 팀 프로젝트를 시작할 때 제일 처음하는 기능과 역할을 쪼개는 부분을 더 고민해봐야겠다고 생각했다. 같은 기능인데 코드가 다른것들을 보고, 어느 코드가 더 적합한지, 고민하는 과정을 가지는게 좋았다. git을 더 적극적으로 사용해야할것 같다.