1. Redux, Localstorage를 이용한 Short Blog 프로젝트 ( React[ReduxToolkit] )

 

 

short Blog React 웹 프로젝트

소요 기간 : 2일
Github: https://github.com/chalinuna/shortBlog
Hosting: https://chalinuna.github.io/

React App

 

---

사용 언어와 기술, 라이브러리 및 DB

Frontend - React (Redux Toolkit, useSelector, useNavigator, useState, useDispatch, useEffect, localStorage, Route, URL Prams, sessionStorage)

 

 

프로젝트 제작 계기

props만 이용하면 안되는 이유.jpg

여기저기서 props 주다가 중간에 꼬여서 고생하고 얌전히 ReduxToolkit을 사용하겠다고 마음먹은 장면. 기술은 삽질에 의해 발전한다

Props로 남발된 App.js를 보다가 Redux의 소중함을 온몸으로 깨닫고 말았다. 그래서 이번 기회에 Redux를 마스터 해보겠다는 마음으로연습용 Redux Toolkit을 이용한 작은 프로젝트를 하다가, Local Storage에 저장하면 백엔드 없이도 대충 로그인 로그아웃 기능을 제공할 수 있겠다는 좋은(!) 생각이 들어 규모를 키웠다가... 된통 고생했다. ReduxToolkit만 사용한 범위에서는 하루만에 끝났는데 Local Storage에 이차원 배열을 설정하겠다고 설치다가 이틀 내내 땅을 팠다. 그래도 덕분에 자연스럽게 리덕스 툴킷이 손에 익게 되었다...

 

그림판으로 그린 와이어프레임. 이때까지만 해도 리덕스만 써야지 ^ ^ 하고 있었음..

 

 

설명

 

 

LocalsPost.js

 

▶ sessionStorage.getItem을 사용해 현재 로그인 상태인지 세션값을 받아와, 로그인 상태일 경우 1페이지를, 로그인하지 않은 상태일 경우 2페이지를 출력한다.

왼쪽 - 1페이지 (로그인 한 경우, 로그인 해서 작성한 포스트를 출력) / 오른쪽 - 2페이지 (로그인 하지 않은 경우, 로그인하도록 유도하는 ui 출력)

 

▶ 주요 코드

import { configureStore, createSlice } from '@reduxjs/toolkit' 로 Redux Toolkit을 사용한 store.js의 모습. 유저와 포스트에 대한 데이터 및 리듀서들을 작성해 export 하고, export default configureStore로 등록해준다.

getLogin으로 로그인 페이지에서 생성한 세션값을 받아온다.

if문을 사용해 만일 세션이 존재할 경우, 로컬 스토리지에서 값을 받아와 포스트 목록을 출력한다. 만일 목록에서 삭제 버튼을 누르면 dispatch를 이용해 Redux에 저장된 state들을 삭제하고, 이후 로컬 스토리지에 저장된 값들도 삭제해준다.

★ 만일 포스트를 Redux 에만 저장하면 새로고침 할 경우 사라진다. Local Storage에 추가로 저장하지 않고 Redux에만 저장할 경우에는 아래 코드를 사용한다. useSelector를 이용해 store.js에 있는 Redux 내의 state값을 모두 불러오고, dispatch로 리듀서들을 사용한다. 

(원래는 Redux에만 저장하고 로컬 스토리지에는 저장하지 않으려 했었으나 추후 로컬 스토리지에도 추가로 저장하도록 코드를 수정함..)

 

 

---

 

 

Profile.js , LoginPage.js, Register.js

 

▶ 이메일, 닉네임, 비밀번호로 회원가입 및 로그인 기능을 제공한다.(db나 백엔드 서버가 꾸려져 있는 것이 아니기 때문에 LocalStorage에 저장한다.)

▶로그인 상태에 따라 Profile UI 및 상단바가 다르게 보이도록 컴포넌트를 IF문 처리한다.

 

로그인 하지 않은 상태의 창

 

로그인 후의 상단바

로그인 후의 Profile.js

 

▶ 주요 코드

Register.js / 회원가입 시 Redux에 유저 정보들을 보내고, 해당 이름을 Json 형태로 LocalStorage에도 set 해준다.

Profile.js / 세션값에 따라 보여줄 프로필 화면을 설정한다.

Login.js / 이메일과 패스워드를 검증한 후 세션을 생성한다.

 

 

---

 

 

 

Write.js

 

▶ 글쓰기 창을 보여준다.

▶제출을 누르면 Redux Store와 Local Storage에 값을 추가한다.

 

Write.js / Write 창으로 이동한 모습

작성 완료

 

▶ 주요 코드

 

dispatch로 add 함수들을 불러와 Redux Store에 State를 추가하고, localSotrage에도 unshift하여 글을 추가해준다.

 

 

 

---

 

 

 

Rightlist.js

 

▶ 로그인 한 상태라면 아래처럼 현재 작성한 포스트의 제목들을 출력한다.

▶제목을 클릭하면, 내가 작성한 글을 볼 수 있는 detail 페이지로 이동한다.

▶ 주요 코드

왼쪽의 Lpost는 let Lpost = JSON.parse(writed)로 로컬스토리지의 값을 받아와 map 함수를 이용해 출력한 모습이고, 오른쪽의 rStore는  let rStore = useSelector((state)=>{return state})로 Redux에서 state를 가져와 map을 이용해 출력한 모습이다. 로컬 스토리지를 이용한다면 왼쪽, 이용하지 않는다면 오른쪽을 사용한다. (마찬가지로 삽질의 흔적..)

 

 

---

 

 

 

 

Postdetail.js, Edit.js

 

▶ 로그인 한 상태에서 포스트 목록, 또는 포스트 디테일 페이지의 [ 수정 ] 버튼을 누르면, 포스트를 수정할 수 있는 Edit 창으로 이동한다.

▶ 수정한 글은 Redux Store와 Local Storage에 모두 반영되어 제출 버튼을 누르면 home화면에서 즉시 업데이트 된다.

 

포스트 목록을 출력하는 로그인 후의 홈 화면

 

왼쪽에서 포스트의 제목을 누르거나, 최신 글 리스트에서 포스트 제목을 클릭하면 해당하는 포스트만 detail 페이지로 보여준다.

 

포스트 수정 버튼을 클릭하면 원래 입력되어있던 내용을 수정할 수 있다.

 

제출 버튼을 누르면 즉시 홈화면으로 돌아오고, 바뀐 state들이 Local 과 Redux에 적용된다.

▶ 주요 코드

onChange 를 사용해 useState로 만든 State에 input창의 내용을 저장하고, 제출 버튼을 누르면 redux store와 LocalStorage에 변경된 내용을 할당해준다. 이때 로컬 스토리지의 경우 이차원 배열의 요소에 대해 직접적인 수정이 불가능하기 때문에 (가져온 정보를 String으로 인식해서 splice에서 요소 변경 함수가 제대로 먹질 않음...) 해당 위치의 정보를 아예 없애고, 다시 저장해 주는 방식으로 수정한다.

 

 

 

소감

 

로컬 스토리지 쓸 바에 아주 조금 공을 들여 bycriptjs와 Axios, cors, proxy를 사용해 풀스택으로 웹을 만드는게 더 쉬운 것 같다 ..