코드로 우주평화

이전 글에서 우리는 노트 목록 화면에 필요한 대부분의 기능을 구현했습니다. Flutter로 간단한 노트 앱을 만들어보자 ⑦ - 노트 정렬 기능 구현하기하지만 기능 구현에 초점을 맞추다 보니 사용성이나 UI는 크게 고려하지 않았는데요. 이번 글에서는 노트 목록 화면의 UI를 리팩터링 하여 사용성을 높이고 눈에도 보기 좋은 UI로 수정해 보겠습니다. 이번 글에서 수정할 UI의 결과는 다음과 같습니다. 기존 화면과 비교하여 보여드리겠습니다. - 기존에는 하나의 노트 카드에 모든 정보가 담겨있어 어떤 내용이 중요한지 알기 어려웠습니다.- 새롭게 수정한 화면에서는 노트 내용이 가장 상단에 그리고 수정 날짜만 하단에 표시합니다.- 사용자가 노트 카드를 꾹 누르면 중요, 수정, 삭제 버튼이 표시되도록 했습니다.- 추..

이번 글에서는 지난 시간에 만든 NoteListState에 대해 테스트 코드를 작성해 보겠습니다.지난 글에서 우리는 다양한 정렬 기준과 오름차순/내림차순을 적용할 수 있는 정렬 기능을 구현했습니다. 이 과정에서 정렬 상태를 별도로 관리할 필요성을 느꼈고, 이를 위해 만든 것이 NoteListState였습니다. 다시 말해 NoteListState는 노트 목록의 검색과 정렬 상태를 관리하는 역할을 합니다. 다음은 NoteListState의 기능을 요약한 것입니다.- 검색 기능 : 검색어 입력 시 정확도 순으로 정렬하고, 검색어가 비워지면 기본 정렬(생성일 순)로 돌아간다.- 정렬 기능 : 노트를 생성일, 수정일, 중요도, 정확도 기준으로 오름차순/내림차순 정렬할 수 있다.- 상태 초기화 : 검색어와 정렬 상..

이번 글에서는 우리가 작성한 노트를 불러올 때 중요도, 생성일시, 수정일시, 나아가 노트 검색 시에는 정확도 순으로 가져올 수 있는 '정렬 기능'을 구현해 보겠습니다. 정렬 기능의 결과는 다음과 같습니다. - 기본적으로는 생성일시 내림차순 입니다.- 우측 상단 정렬 버튼을 통해 정렬 메뉴 팝업을 열 수 있습니다.- 생성일시를 다시 한 번 클릭하면 오름차순으로 정렬됩니다.- 네 번째 이미지는 중요도순으로 정렬한 모습입니다.  주요 개발 내용1. 노트 정렬 기능 추가2. 노트 목록 화면 코드 리팩터링3. 검색어 입력 시 정확도 내림차순으로 정렬4. 노트 목록 상태관리 분리 1. 노트 정렬 기능 추가노트 목록을 정렬하기 위한 정렬 기능을 추가해 보겠습니다. 정렬 기준은 생성일, 수정일, 중요도 입니다. 이 기..

이번 글에서는 우리가 작성한 노트에 라벨 속성을 추가하여 ⭐중요 표시⭐를 할 수 있도록 구현해보겠습니다.  중요 표시의 결과는 다음과 같습니다. 노트 목록 화면에 보이는 노트 카드에 별 아이콘을 추가하고 사용자가 클릭을 하면 토글이 되도록 하였습니다. 어떤가요? 굉장히 중요해 보이지 않나요? 🤭  주요 개발 내용1. 기존 노트 모델에 label 속성을 추가합니다.2. 기존 노트 목록 화면에서 노트 카드를 컴포넌트로 분리합니다.3. 노트 카드 컴포넌트에 label 수정 기능을 추가합니다.   1. 노트 label 속성 추가하기NoteLabel Enum 추가NoteLabel이라는 Enum을 추가합니다. 우선 none, important 두 가지로 정의합니다. 중요 표시를 불린 값으로 정의하지 않고 라벨En..

이번 글에서는 노트 목록 화면에서 검색 기능을 추가하는 과정을 보여드리겠습니다. 검색어를 입력하면 해당 키워드, 혹은 유사한 키워드를 포함한 노트를 즉시 필터링하여 가져옵니다. 검색 기능의 결과는 다음과 같습니다. - 기존 노트 목록 화면에 2개의 노트가 있습니다.- `안녕` 이라는 검색어를 입력하면 `안녕하세요` 노트만 표시됩니다.- `안녕하파트~` 라는 검색어를 입력하면 `아파트~ 아파트~` 노트와 `안녕하세요` 노트가 함께 표시됩니다. 세 번째 이미지처럼 검색어가 정확히 일치하지 않아도 검색되는 이유는 유사도 알고리즘을 적용했기 때문입니다.  주요 구현 내용1. 검색 바 UI 추가: TextField를 이용하여 상단에 검색 바를 추가합니다.2. 검색 로직: 검색어를 입력할 때마다 노트 리스트를 필터..

이번 글에서는 이전까지 개발한 Flutter 노트 앱에 노트 수정 기능을 추가하는 과정을 보여드리겠습니다. 기존 노트 앱에서는 수정 기능이 따로 없이 쓰기와 조회, 삭제 기능만 있었습니다. 이번에는 수정 페이지를 추가하고 수정 로직까지 구현해 보도록 하겠습니다. 수정 기능의 결과는 다음과 같습니다. - 수정 버튼을 누르면 노트 수정 화면으로 이동합니다.- 노트 수정 화면에서 내용을 수정한 후 우측 상단의 저장 버튼을 누릅니다.- 노트를 저장하면 노트 목록 화면으로 되돌아가며 내용이 수정된 노트가 보여집니다.  주요 구현 내용1. Enums: 수정 페이지 이름을 정의하는 PageName Enum 을 추가합니다.2. NoteModel: 노트 수정 시간을 나타내는 updatedAt 필드를 추가합니다.3. N..

이번 글에서는 기존의 인덱스 방식의 화면 전환을 Enum 과 GoRouter 를 사용하여 리팩터링 해보겠습니다.  GoRouter란?GoRouter는 Flutter의 네비게이션을 간편하게 관리할 수 있도록 도와주는 패키지입니다. URL 기반의 라우팅을 지원하며 화면 전환과 관련된 복잡한 과정을 간단히 처리할 수 있습니다.  리팩터링 이유기존의 탭 전환 방식에서는 네비게이션을 인덱스로 관리했는데, 이렇게 인덱스로 화면 전환을 관리하면 화면이 추가되거나 순서가 변경될 때 수정이 번거롭습니다. 배열 안에 정의된 화면의 순서를 모두 외우고 있어야 개발이 가능하죠. 그렇기 때문에 이번 글에서는 Enum 과 GoRouter 를 이용하여 각 화면을 명확히 구분하고, 경로 기반의 전환으로 더 명확하고 유지보수하기 쉬운..

지난 글에서 Provider 패키지를 이용해 노트를 쓰고 저장하고, 목록을 조회하는 간단한 노트 앱을 만들었습니다. 하지만 노트를 쓰고 '노트 조회' 화면으로 이동하면 다시 '노트 쓰기' 화면으로 돌아갈 수 없었죠. 이번 글에서는 하단 네비게이션 바를 추가하여, '노트 쓰기', '노트 조회', '설정' 화면을 언제든지 이동할 수 있도록 구현해 보겠습니다. 아래 이미지는 네비게이션 바를 추가한 결과 화면입니다.    이런 네비게이션 바를 어떻게 만들 수 있는지, 구현 과정을 하나씩 살펴보겠습니다.   1. 하단 네비게이션 바 컴포넌트 구성네비게이션 바는 앱의 공통 UI 요소이므로 어느 하나의 view 에 속하지 않고. lib/components/bottom_navbar.dart 파일에 별도의 컴포넌트로 정..

책 [유혹하는 글쓰기]에서 스티븐 킹은 자신의 어린 시절 일화를 말합니다. 필요한 것이 드라이버 하나뿐이었다면 어째서 집을 빙 돌아 여기까지 연장통 전체를 힘드게 가져왔느냐고 이모부에게 물어보았다. "그건 그래. 하지만 말이다, 스티브. 일단 여기 와봐야 또 뭐가 필요할지 알 수 있지 않겠니? 연장은 전부 다 갖고 다니는 게 좋단다. 안 그러면 뜻밖의 일이 생겼을 때 김이 빠져버리거든" 스티븐 킹은 이 일화를 말하며, 글쓰기에서도 자기가 가진 최선의 능력을 발휘하려면 연장들을 골고루 갖춰놓아야 하며, 그 연장통을 들고 다닐 수 있도록 팔심을 기르는 것이 좋다고 말합니다.  저는 이것이 비단 글쓰기뿐만 아니라, 개발에도 마찬가지라는 생각이 들었습니다. 개발자에게, 특히 1인 개발자에게는 어떤 연장들이 필요..

이전 글: 2024.10.17 - [나는 이렇게 논다/글또 슬랙 봇 개발기] - 슬랙 봇이 보낸 메시지를 수정해봅시다 이전 글에서 슬랙 봇이 보낸 메시지를 수정하는 과정에 대해 설명드렸습니다. 그런데 이는 매우 특수한 상황에 대한 수정 방법이었죠. 아마 똑같이 따라서 구현하는 일은 없을 겁니다. 그래서 이번 글에서는 훨씬 쉬우면서도 모든 슬랙 메시지에 대해 수정할 수 있는 방법을 설명드리겠습니다. (일종의 AS 글인 셈이죠~🤭) 먼저, 간단하게 요약하자면 '수정할 메시지를 가져와 고칠 부분만 직접 수정하고 업데이트하는 것'입니다. 자 그럼 구현을 시작해 볼까요? (구현은 FastAPI 를 기준으로 설명합니다) 수정할 메시지 가져오기냅다 전체 코드부터 꽂고 시작하겠습니다.@router.get( "/mess..