feat-fe: useLocalStorageState 구현 #964
Conversation
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
|
1734510030.794339 |
|
1734510033.581279 |
|
1734593411.755679 |
| try { | ||
| const storedValue = window.localStorage.getItem(key); | ||
| return storedValue !== null ? JSON.parse(storedValue) : initialValue; | ||
| } catch (error) { | ||
| return initialValue; | ||
| } |
There was a problem hiding this comment.
localStorage에서 초기값을 로드할 때 에러가 발생하면 조용히 initialValue를 리턴하도록 되어 있네요. 이대로도 문제는 없겠지만, process.env.NODE_ENV === 'development'일 때 console.error를 띄워주는 방식이 어떨지 제안드려 봅니다.
| try { | ||
| window.localStorage.setItem(key, JSON.stringify(value)); | ||
| } catch (error) { | ||
| console.error(`"${key}":`, error); |
There was a problem hiding this comment.
여기도 마찬가지로, 로컬 개발 환경에서만 콘솔 에러가 뜨도록 process.env.NODE_ENV === 'development' 조건을 붙여주면 어떨까요?
| interface OptionProp { | ||
| enableStorage: boolean; | ||
| } |
There was a problem hiding this comment.
현재는 OptionProp에 boolean값을 가지는 enableStorage 필드만 정의되어 있어요. 혹시 다른 추가적인 옵션 prop을 염두에 두고 설계하신 것일까요?
There was a problem hiding this comment.
다른 Prop을 염두한 건 아니지만, 객체로 받은 이유는 enableStorage값이 boolean값이기 때문에 인자로 받게 될 경우 너무 flag스러웠기 때문입니다.
이 때문에 인자로만 받을 경우 가독성이 떨어졌습니다.
해당 Prop도 조금 더 개선하겠습니다!
| const safeParseJSON = <T>(value: string | null, fallback: T): T => { | ||
| try { | ||
| return value !== null ? JSON.parse(value) : fallback; | ||
| } catch (error) { | ||
| if (process.env.NODE_ENV === 'development') { | ||
| console.error('JSON 파싱 실패:', error); | ||
| } | ||
| return fallback; | ||
| } | ||
| }; | ||
|
|
||
| const safeStringifyJSON = <T>(value: T): string | null => { | ||
| try { | ||
| return JSON.stringify(value); | ||
| } catch (error) { | ||
| if (process.env.NODE_ENV === 'development') { | ||
| console.error('JSON 직렬화 실패:', error); | ||
| } | ||
| return null; | ||
| } | ||
| }; | ||
|
|
There was a problem hiding this comment.
parsing, stringify 로직을 깔끔하게 분리해주셨네요 👍
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Jeongwoo Park <wahoo9040@naver.com>
Original issue description
목적
#954
작업 세부사항
참고 사항
local-storage-state
closes #963
🛠️ useLocalStorageState 훅 구현
목적
useLocalStorageState 훅은 폼 요소 작성 중 사용자가 페이지를 이탈하거나 브라우저를 닫아도 데이터를 유지하여 사용자 경험을 개선하기 위해 설계된 훅입니다.
이 훅을 기반으로 React State와 LocalStorage를 연결하려 합니다.
주요 기능
✅ 테스트 코드 작성
테스트는 원시값에 대한 테스트와, 객체값에 대한 테스트로 나누었습니다.
테스트 설명
추가적으로 테스트해야될 케이스가 있다면 공유해주세요.
🔧 리팩터링