[React] Redux 라이브러리 사용해서 Notes 앱 만들기 1📒

이미지도 첨부 가능

text 에디터 이용해서 글꼴 스타일 '이탤릭체', '밑줄 긋기' 등등 적용 가능

배경색도 넣을 수 있고

이 노트의 우선순위도 지정 가능하고

Add Tag 버튼 누르면 태그 생성할 수 있고
➕ 누르면 태그도 추가할 수 있음

생성하기 버튼 누르면 이렇게 생성됨

저부분 클릭하면 자세히 볼 수 있는 모달도 뜸

📌누르면 Pinned Notes 목록으로 이동함

정렬 버튼 누르면 정렬할 수도 있음
👉 최신으로 만든 순, 예전에 만든 순, 수정된 순

Edit 아이콘 누르고

수정 후 저장하기

⬇정렬을 수정된 순으로 했을 경우 수정한 게 맨 앞으로 오게 됨

여긴 지금 태그가 coding 이랑 exercise로 되어있는데

Coding 클릭하면 coding 태그 있는 노트 목록이 나오고

Exercise 클릭하면 이 태그 있는 것들이 보이게 됨 등등등,,,

Edit Notes 클릭하면 태그를 수정하는 부분임

만약, Newtag 삭제하면

Newtag가 없어진 걸 볼 수 있음

Archive 버튼 누르면

해당하는 곳으로 이동하고

여기서 휴지통 아이콘 클릭하면

Trash로 이동하게 되고 아예 삭제하고 싶으면 휴지통 아이콘 누르면 없어짐

⬇

---

📒노트 만들기 위한 프로젝트 준비 과정

📁바탕화면에 react-note-app 폴더 생성하기

📥비트 사용할거라 설치하기 : npm init vite

리액트 사용

JS 이용할거임

---

✌필요한 패키지들 설치하기

▶ 📅dayjs

날짜의 포맷을 편하게 해줄 수 있는 라이브러리

몇 시 몇 분 몇 초 다양한 방법으로 보여줄 수도 있고
한국은 1시 라고 하면 다른 나라에 있을 땐 다른 시간을 보여줘야함
이런 부분을 다 일일이 구현하려면 소스 코드도 지저분해지고 되게 어렵🥴

▶ html-react-parser

🏷p, em, u 이런 태그들을 실제 요소로 분석하는 걸 도와주는 라이브러리😎

노트 앱에서 작성하면 이부분은 텍스트라고 보지만
실제론 p 태그 요소 안에 텍스트가 있는 것❗

우린 텍스트만 보이지만 오른쪽처럼 만들어주기 위해 요소들이 다 필요⭕

이렇게 보여지려면 저장하고 있을 땐 텍스트로 저장 하고 있을거임
텍스트로 저장된 애를 실제 요소가 돼서 화면에 보여지게 하는 것

▶ react-quill

텍스트 에디터를 위해 사용하는 라이브러리 ( 이 외에도 다양하게 있음 )

이부분을 위해 사용

▶ uuid

#️⃣유니크한 아이디 사용하기 위해 사용하는 라이브러리

▶ react-toastify

스냅바 이걸 위해서 사용하는 라이브러리

---

📁폴더 구조 만들기

App.jsx 필요없는 코드 다 지우고 App.css 파일 지우기

components 폴더 만들기 ( 여러 컴포넌트 파일 집어넣을 것 )

커스텀 훅들 넣어줄 폴더랑
layout 폴더 만들기
👉 어디로 이동하던지 고정되어 있는 부분들 - '헤더'나 '사이드 바',,,

pages 폴더 만들기 ( 각각의 페이지 파일 넣을 것 )

🛒리덕스 사용할거니까 store 폴더 만들기

styles 폴더 만들기
🎨여러 곳에서 공통적으로 사용되는 스타일들 넣어줄 것

utils 폴더 만들기 ( 이곳 저곳에 사용되는 함수들 넣을 것 )

👩‍🎨src>styles>styles.jsx 파일엔 공통적으로 사용하는 스타일들을 여기다 만들거임
styled 컴포넌트 사용할 것🙃

src>utils>getAllNotes.jsx 여기서 할 건

노트 앱 첨에 들어갈 때 모든 노트를 가져올 수 있게끔 로직을 여기다 해줄거임

src>utils>getRelevantBtns.jsx

첨엔 버튼이 Edit/Archive/Delect 총 세개인데

Archive 페이지에선 버튼이 Unarchive/Delete 두 개임

Trash도 버튼이 두개긴한데 여긴 Restore/Delete임

조금씩 다른 부분을 위해 만든 파일 ( 여기에 관한 로직을 짤 것 )

src>utils>getStandardName.js 함수를 만들 것

스텐다드한 네임,
이름 같은 경우엔 첫글자만 대문자로 나머진 소문자로 만들어준다거나
이러한 로직을 위해서 여기서 함수를 만들어 줄 거임

🛒store 폴더 안엔 store 객체 만들어주고 Slice들 만들어줄거임 ( 리덕스니까 )

menu에 isOpen 이라는 건

화면을 이렇게 하면 사이드 바가 보이는데

화면이 작아지면 사이드 바가 사라짐( 햄버거 바 누르면 사이드 보여짐 )

그러면 isOpen이 false 였던 게 true로 바뀌는 걸 볼 수 있음

🛒리덕스 '스토어'에다 왜 isOpen: false를 왜 굳이 넣어뒀을까❓

'네비게이션'이랑 '사이드바'가 같은 값을 공유해야하기 때문❗

리덕스에다 값을 state로 넣어둔 담에 isOpen이 false일 땐 사이드 바 안 보여주지만

햄버거 바 눌러서

값을 true로 변경했을 땐
이 컴포넌트를 렌더링 할 수 있게 처리 해주면 됨✔

store 폴더 안에 menu 폴더 만들고 menuSlice.js 파일 만들기

modal은 총 4개가 있음

viewCreateNoteModal

viewAddTagsModal

viewFilterModal

viewEditTagsModal

이건 다른 부분에서 처리함

store 폴더 안에 modal 폴더 만들고 modalSlice.js 파일 만들기

🏷여기 보면 tag 들은 Coding, Exercies, Quotes 들이 있음
( 현재 갖고 있는 태그들을 나열한 것 )

tags 안에는 어떤 tag들이 존재하는지 나열한 것👌

tag도 여러 컴포넌트에서 사용해야함
이러한 경우엔 리덕스에 넣어두는 게 좋음👍

🛒store 안에 tags 폴더 만들고 tagsSlice.js 파일 만들기

notesList는 노트를 보여주는 부분이 메인에도 있고

또 Archive에도 있고

그리고 Trash에도 있음

이부분을 위해 store 안에 notesList 폴더 만들고 notesListSlice.js 파일 만들기

store에 기본 파일인 index.js 만들기

🧐index.js 여기선 뭐를 만들어주면 될까❓

여기선 각각 메뉴 슬라이스를 만들고 슬라이스 이용해서 리듀서랑 액션 만듦

여기도 똑같이 슬라이스 만들고 리듀서 '서브 리듀서'들임

슬라이스 리듀서.. 슬라이스 리듀서..

✔Sub Reducers 이용해서 Root Reducers 만들고
이걸 이용해서 Store Object를 만들거임 ( index.js 에서 하는 일 )

이렇게 store 부분 전체적인 구조 만들어줬음

📁Pages 폴더 안엔 모든 Notes를 보여주는 부분

Tag 할당된 노트를 보여주는 부분

Archive 노트 보여주는 부분

그리고 Trash 보여주는 페이지가 있음

pages 폴더 안에 AllNotes 폴더 만들고 AllNotes.jsx 파일 만들기

ArchiveNotes 폴더 만들고 ArchiveNotes.jsx 파일 만들기

TagNotes 폴더 만들고 TagNotes.jsx 파일 만들기

TrashNotes 폴더 만들고 TrashNotes.jsx 파일 만들기

4개의 이외 페이지로 가려고 하면
ErrorPage 하나를 만들어줘서 여기로 보내게 할 것

ErrorPage 폴더 만들어서 ErrorPage.jsx 파일 만들기

🙋‍♀️각각 rafce 함수형 컴포넌트로 만들어주기

layout엔

사이드 바랑 네비게이션 바를 layout으로 해줄 것

layout 폴더 안에 Navbar 폴더 만들고 Navbar.jsx 파일 만들고
Sidebar 폴더 만든 담에 Sidebar.jsx 파일 만들기

🙋‍♀️여기도 똑같이 rafce 함수형 컴포넌트 생성해주기

components 폴더 안에 MainWrapper 폴더 만들고
MainWrapper.jsx 파일 만들기

모달 여러 개 있어서 이부분을 위해 Modal 폴더 만들기

Modal 폴더 안에 CreateNoteModal 폴더 만들고 CreateNoteModal.jsx 파일 만들기

CreateNoteModal.jsx➡네브 바 오른쪽 ➕버튼 누르면 생성 되는 모달을 위한 파일

FiltersModal 폴더 만들고 FiltersModal.jsx 파일 만들기

FiltersModal.jsx➡정렬 버튼 누르면 나오는 정렬 모달을 위한 파일

ReadNoteModal 폴더 만들고 ReadNoteModal.jsx 파일 만들기

ReadNoteModal.jsx➡노트 클릭했을 때 읽고 있는 노트 모달이 나오는데 이걸 위한 파일

TagsModal 폴더 만들고 TagsModal.jsx 파일 만들기

NoteCard 폴더 만들고 NoteCard.jsx 파일 만들기

하나의 노트 만들어서 재사용할 거

TextEditor 폴더 만들고 TextEditor.jsx 파일 만들기

TextEditor.jsx➡에디터 부분을 위한 파일

현재는 다 만들어진 걸로 보고 하지만
실제로 웹 개발을 할 때 피그마 이런 곳에 되어있을 것❗

피그마에 되어있으면 어떠한 페이지들이 있는지 알 수 있으니까
페이지가 있다는 건 페이징 처리 해주면 된다는 것🙆‍♀️

페이징 처리는 App.jsx 에서 함
👉 react-router-dom 이용하면 됨✌

---

📒 2탄 담 벨로그