[고양이와 책을] 팀 프로젝트(8)

쏘소·2022년 2월 20일

프로젝트

목록 보기

14/18

현재 상황

sessionStorage에 writedata, bookdata, reviewdata를 일일히 저장해주던 코드들을 코드 간략화를 위해 리팩토링 하였다. 다음과 같이 sessionStorge에 하나씩 저장해주면서 또 사용할 때는 key를 이용해 하나씩 불러와야해 코드 양이 많이 늘어나 가독성이 조금 떨어지고 전체적으로 지저분해 보였다.

Write.js

 	//onSubmit를 한 경우 시행되는 코드 
    const writeSubmit = async (data) => {
        try{  //서평 작성 정보 sessionStorage에 저장
        setWriteData(data)
        window.sessionStorage.setItem('rtitle', (data.rtitle))
        window.sessionStorage.setItem('bauthor', (data.bauthor)) 
        window.sessionStorage.setItem('btitle', (data.btitle))
        window.sessionStorage.setItem('rtext', (data.rtext))
        window.sessionStorage.setItem('day', day)
        await booksdata(data.btitle, data.bauthor)
        } catch {
            console.log('somethis is wrong')
        }finally {
            console.log('done')}
        } 
    }

Review.js

const Review = () => {
    return(
    <Body>
        <Reviewform>
            <ReviewTitle>{window.localStorage.getItem('rtitle')}</ReviewTitle>
            <Bookinfo>
                <Bookimg src={window.localStorage.getItem('bpicture')}></Bookimg>
                <Bookcontainer>
                <Booktitle>{window.localStorage.getItem('btitle')}</Booktitle>
                <Bookauthors>{window.localStorage.getItem('bauthor')}</Bookauthors>
                <Bookcontents>{window.localStorage.getItem('bcontents')}...</Bookcontents>
                </Bookcontainer>
            </Bookinfo>
            <Reviewtext>{window.localStorage.getItem('rtext')}</Reviewtext>
        </Reviewform>
    </Body>
    )}

이를 상태관리 라이브러리인 recoil을 이용해 해결하고자 하였고, 다음과 같이 리팩토링 하였다.

문제

recoil을 이용해서
왜 recoil은 안 됐는지 알기
하지만 다시 sessionStorage에 저 많은 데이터들을 저장하고 다시 일일히 불러오는 건 비효율적인 것 같다는 생각이 들었고, 다른 방법이 있지는 않을까 하면서 찾아보다가 다음과 같이 문제를 해결할 수 있었다.

해결 방법

recoil-persist를 이용하면 된다. recoil-persist는 recoil의 작은 모듈로서 브라우저의 localStroage 또는 sessionStorage 등 storage에 저장할 수 있게 해준다.
recoil-persist를 이용한 몇 가지 설정만으로도 기존의 recoil atom에 저장한 데이터들을 그대로 세션 스토리지에 저장해준다. 또 데이터를 불러올 때 간단하게 useRecoilValue를 통해 atom의 세션 스토리지에 저장된 데이터를 불러올 수 있어 굳이 sessionStorge.getItem('key')와 같이 추가적인 코드를 작성할 필요가 없다는 장점이 있었다.
recoil-persist을 설치한 후 설명(https://www.npmjs.com/package/recoil-persist)을 읽고 하나하나 따라서 코드 수정을 하기로 하였다.

설치

npm i recoil-persist

하지만 이게 웬걸 설치를 해주는데 오류가 생겼다.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: bookwithcat@0.1.0
npm ERR! Found: recoil@0.6.1
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer recoil@"^0.5.1" from recoil-persist@4.0.0
npm ERR! node_modules/recoil-persist
npm ERR!   recoil-persist@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

대충 이런 오류였다. Dependency conflict 문제로 보여진다.
Stackoverflow에서 그 해결법을 쉽게 찾을 수 있었다. Stackoverflow 링크

npm config set legacy-peer-deps true

npm install --save --legacy-peer-deps

recoil-persist 적용

Atom.js

import { atom } from "recoil";
import { recoilPersist } from 'recoil-persist' //recoil-persist import 해주기

const { persistAtom } = recoilPersist({ //persistAtom 설정
    key: 'storedatas', // this key is using to store data in local storage
    storage: sessionStorage, // configurate which stroage will be used to store the data
  })

export const reviewdataAtom = atom({
    key: 'reviewdata',
    default: [],
    effects_UNSTABLE: [persistAtom], //설정한 persistAtom 입력
})

export const bookdataAtom = atom({
    key: 'bookdata',
    default: [],
    effects_UNSTABLE: [persistAtom],
})

export const writedataAtom = atom({
    key: 'writedata',
    default: [],
    effects_UNSTABLE: [persistAtom],
})