트리에서 코딩하기: freeCodeCamp에 Auto‑Save 추가
Source: Dev.to
배경
다음 프로젝트 시작일이 약 2주 뒤로 잡히면서 드디어 여유 시간이 생겼다. VS Code를 열고 커피 한 잔을 따른 뒤, GitHub에서 “help wanted” 이슈를 찾아보기 시작했다. freeCodeCamp 저장소로 돌아가 눈에 띈 이슈를 선택했다.
이슈
FreeCodeCamp는 코드를 localStorage에 자동 저장하지 않는다. 사용자는 Ctrl + S를 직접 눌러야 하는데, 이 요구사항이 명확히 전달되지 않는다. 그 결과, 페이지를 떠날 때 많은 사용자가 작업을 잃어버린다.
제안된 해결책
LeetCode와 GreatFrontend에서 사용되는 자동 저장 기능을 추가한다. 구현 내용은 다음과 같다:
onChange,onBlur, 컴포넌트 언마운트,beforeunload이벤트에 의해 디바운스된 자동 저장을localStorage에 지속한다.- 5초마다 업데이트되는 타임스탬프를 표시하고, 페이지 이동 시 깨끗하게 초기화하여 “Saved 20 m ago”와 같은 오래된 메시지가 남지 않게 한다.
- 툴바(ActionRow)에 FontAwesome 체크마크와 짧은 상태 텍스트를 이용한 시각적 표시를 추가한다.
- 코드를 DRY하게 유지하기 위해 공유 유틸리티 함수와 커스텀 훅을 사용한다.
- 수동 저장을 위한 눈에 띄는 다운로드 버튼을 배치한다.
구현 세부 사항
레포지토리를 포크하고 새 브랜치를 만든 뒤 작업을 진행했다. 직관적인 폴더 구조와 설명적인 함수 이름 덕분에 관련 컴포넌트를 빠르게 찾을 수 있었다.
핵심 기술 선택
- 상태 관리: 주로 React의 Context API를 사용하고, 로컬 상태는 Zustand로 관리한다. Redux는 Claude의 조언을 받아 탐색해 보았다.
- 상태 변수:
lastSavedTime은 마지막 자동 저장 이후 경과 시간을 추적한다. - 자동 저장 동작: 자동 저장 시 플래시 메시지를 억제하고, 수동 저장에 대해서는 명시적인 확인 메시지를 유지하도록
code-storage-epic.js를 업데이트했다.
테스트
단위 테스트
completion-modal.test.tsx의 단위 테스트가 실패했다. 리팩터링된 로직이 유틸리티 함수로 이동했지만 테스트에서는 이를 반영하지 않았기 때문이다. 새로운 유틸리티를 임포트하도록 테스트를 수정해 문제를 해결했다.
엔드‑투‑엔드 테스트
multifile-cert-projects.spec.ts에 있는 두 개의 e2e 테스트도 실패했다. Playwright( Cypress와 유사)를 사용해 문제를 빠르게 파악했다. 자동 저장 동작이 조용히 수행되어 테스트 기대값에 방해되지 않도록 수정했다.
결과
- 소요 일수: 2일
- 결과: 자동 저장이 이제 조용히 동작하며, 타임스탬프를 업데이트하지만 방해가 되는 플래시 메시지는 표시되지 않는다. 수동 저장 시에는 여전히 명시적인 확인이 제공된다.
풀 리퀘스트는 검토를 기다리고 있다. 이제 피드백을 기다리며, 어쩌면 샤워도 할 예정이다.