[to-do-pin] npm 개선 일지

     

목차

 

 

 

to-do-pin

 

기존 라이브러리의 문제점

https://be-senior-developer.tistory.com/394

next-dev-pin npm 라이브러리

 

 

1. 확실히 io 입출력과 eslint, prettier fix 작업이 들어가다 보니 바로 바로 화면에 반영이 안되는 문제점이 존재했다.

2. nextjs의 app 폴더 구조에만 맞추다 보니 리액트나 nextjs 페이지 라우터에 의존성이 높은 문제가 있었다.

3. 파일에 직접 추가하는 방식이 공유에는 용이하지만 확실히 사용자 입장에서 호불호가 있을 것 같다는 생각이 들었다.

 

 

-> 그래서 기존의 투두를 공유를 하는 방식을 버리고 나만의 to-do로 바꾸기로 결정하였다.

 

 

 

방식 전환

1. 로컬스토레지를 통해 to-do들을 저장할 수 있다.

2. 로컬스토레지 초기화 문제가 있을 수 있으니 json을 백업 가능하게 버튼을 추가하였다.

3. nextjs, react 모두에서 환경변수만 다르게 하면 동작할 수 있게 하였다.

 

 

 

개선된 부분

1. 기존의 삭제나 생성이 10초이상 걸렸던 반면 지금 1초 미만의 속도로 작동하게 되었다.

2. 기존의 투두트래커가 페이지 방문마다 갱신되는 방식이었지만 지금은 초기에 바로 갱신이 된다.

(-> 기존은 단일 파일 업로드 방식이었기 때문에 페이지 방문 시 투두가 갱신되는 방식이었다.)

3. 기존의 to-do-pin들이 ui를 가리는 문제점이 존재했는데 지금은 투두 숨김이 가능하다.

4. react, nextjs 모두 호환 가능하다.

 

 

++개선된 부분

5. 기존의 to-do 공유 방식을 깃허브와 연동 가능하게 하므로써 to-do를 공유하게끔 하였다.

6. ui 업데이트를 진행했으며 to-do-pin이 라이트 하우스 접근성에 영향이 안가게끔 최적화하였다.

 

 

to-do-pin npm

https://www.npmjs.com/package/to-do-pin

to-do-pin