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()를 쳐서 테스트했다.

 

 

드디어 저장 기능이 생긴 메모 관리 서비스 "javascript-archive"

 

코드 추가 기능이 붙은 메인 페이지 사진이지만...

배경이 자기 주장이 너무 강하다... 빨리 변경 해야 할 듯,,,

---

 

코드 추가 방법은 이렇다.

1. 코드 조각 목록 우측 상단의 더하기 + 버튼을 누른다.

2. 중앙 하단 코드 블럭에 "추가할 코드를 복사한 상태에서 제목을 입력하고 저장해주세요" 라는 placeholder를 확인할 수 있다.

3. 저장 할 코드를 클립보드에 복사한다.

4. 제목을 입력한 후 우측 저장 버튼을 누른다.

5. 목록에서 확인 가능하다.

---

 

도저히 추가 및 저장 팝업을 어떻게 표시해야 할 지 몰라 과감하게 그냥 없앴다.

 

어차피 직접 쳐서 넣는 경우는 거의 없으니 복사해두고 바로 저장하는 형태인데

아무래도 이용자의 편의성을 고려하지 못한 방식이니, 전체적인 ui/ux를 변경할 때 다시 바꾸려고 한다.

 

이렇게 5시간 짜리 jsacv-12 이슈 해결,, , 👏🏻

 

기능이 생기는 만큼 코드도 쌓여간다. 리팩토링 할 게 점점 많아지고 있다 ㅠㅠ

다음엔 전체적인 디자인을 변경 해 볼 예정이당