vue.js 토이 프로젝트 - 코드 관리 서비스 제작기 (2) localStorage
이전 글 보기
- 전체 코드 및 소개는 1편에서 확인 할 수 있습니다.
2023.12.13 - [개발 일지] - vue.js 토이 프로젝트 - 코드 관리 서비스 제작기 (1) 프로젝트 소개
이전 편에서는 만들고 있는 프로젝트에 대한 소개와 약간의 고충을 다뤘었다.
뛰어난 기능은 없지만, 처음 만들어서 어딘가에 제대로 올려 본 프로젝트니까 조금 더 관심을 가지고 포스팅 할 예정! 😃
오늘은 전 편에서 변경하고자 했던 부분을 차근차근 진행했다.
1. 파일로 다루던 코드 조각들을 이제 localStorage로 관리한다.
2. 필수 기능이지만 드디어 추가 기능이 생겼다. 👏🏻
loadCodes() {
// this.loadSampleCodes();
for (const key in window.localStorage) {
if (key.includes(this.prefix.local)) {
this.codes.push({
origin: key,
title: this.extractTitle(key),
content: window.localStorage.getItem(key)
});
}
}
}
기존 코드는 이렇게 바꿨다.
웹팩 require.context()를 써서 동적으로 파일을 가져오고 파일 이름을 따로 나열하고... 그렇게 했었는데
그냥 localStorage로 저장하고, 불러오니까 너무 편해짐...
왜 진작 안 썼지...?... 🤔
동적 파일 가져오는 거에 이상하게 꽂혀서 고생만 했다.
사실 로직을 지운 건 아니고, 어떻게 이용할까 생각해보다가 샘플 코드 형식으로 제공하면 어떨까 싶어서 놔뒀다.
근데 github pages에 배포하니까 에러 나서 일단 주석 엔딩...
localStorage를 이용해 아이템 가져오기
for (const key in window.localStorage) {
const value = window.localStorage.getItem(key);
console.log(value);
}
로컬 스토리지는 window 객체를 이용해서 접근할 수 있다.
객체기 때문에 for...in 문을 이용해서 저장된 아이템들을 getItem() 을 통해 모두 조회하는 코드이다.
localStorage를 이용해 아이템 저장하기
window.localStorage.setItem(key, value);
저장할 땐 setItem()을 이용한다. 로컬 스토리지에는 문자열만 저장할 수 있어서,
배열이나 객체를 저장할 때는 JSON.stringify를 이용해서 문자열로 변환한 뒤 저장하도록 하자.
localStorage를 이용해 아이템 삭제하기 & 아이템 비우기
window.localStorage.removeItem(key); // key 지정 삭제
window.localStorage.clear(); // 전체 삭제
삭제는 두 가지 방법이 있는데 removeItem()에 key값을 매개변수로 넣어 한 아이템을 삭제하거나,
clear() 메소드로 모두 삭제하는 방법이 있다.
아직 프로젝트에 삭제 기능을 만들지 않아서 테스트 할 때는 콘솔 로그 창에다가 clear()를 쳐서 테스트했다.
코드 추가 기능이 붙은 메인 페이지 사진이지만...
배경이 자기 주장이 너무 강하다... 빨리 변경 해야 할 듯,,,
코드 추가 방법은 이렇다.
1. 코드 조각 목록 우측 상단의 더하기 + 버튼을 누른다.
2. 중앙 하단 코드 블럭에 "추가할 코드를 복사한 상태에서 제목을 입력하고 저장해주세요" 라는 placeholder를 확인할 수 있다.
3. 저장 할 코드를 클립보드에 복사한다.
4. 제목을 입력한 후 우측 저장 버튼을 누른다.
5. 목록에서 확인 가능하다.
도저히 추가 및 저장 팝업을 어떻게 표시해야 할 지 몰라 과감하게 그냥 없앴다.
어차피 직접 쳐서 넣는 경우는 거의 없으니 복사해두고 바로 저장하는 형태인데
아무래도 이용자의 편의성을 고려하지 못한 방식이니, 전체적인 ui/ux를 변경할 때 다시 바꾸려고 한다.
이렇게 5시간 짜리 jsacv-12 이슈 해결,, , 👏🏻
기능이 생기는 만큼 코드도 쌓여간다. 리팩토링 할 게 점점 많아지고 있다 ㅠㅠ
다음엔 전체적인 디자인을 변경 해 볼 예정이당