• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

뒤죽박죽 올라가는 리스트 순서를 대비해 sort() API를 사용하라고 적어주셨는데 도저히 모르겠습니다..!

23.03.28 15:17 작성 조회수 454

1

const storage = {
    fetch() {
        const arr = [];
        if(localStorage.length > 0){
            for(let i = 0; i < localStorage.length; i++){
                if(localStorage.key(i) !== 'loglevel:webpack-dev-server'){
                    arr.push(JSON.parse(localStorage.getItem(localStorage.key(i))));
                
                }
            }
        }
        return arr;
    },
};

답변 중 불러올 때 for 문을 돌리는데 순서 보장이 안된다고 하신 부분을 보고 위 쪽에 있는 for문을 말씀하신 건가 싶었고 그럼 이 부분에 있는 배열 arr에 sort()를 추가하는 건가? 싶었는데 제가 맞게 이해한 걸까요?

sort라는 변수를 하나 추가한 뒤 arr.sort()를 넣은 후 return값에 arr대신 sort를 넣어보기도 했는데 잘못된 방 법인지 딱히 바뀌지 않더라구요..

구글을 뒤져봐도 아직 못 찾아 좀 더 찾아보면서 질문도 함께 올려봅니다..

답변 1

답변을 작성해보세요.

2

이창근님의 프로필

이창근

질문자

2023.03.28

앗..해결했습니다.

const storage = {
    fetch() {
        const arr = [];
        if(localStorage.length > 0){
            for(let i = 0; i < localStorage.length; i++){
                if(localStorage.key(i) !== 'loglevel:webpack-dev-server'){
                    arr.push(JSON.parse(localStorage.getItem(localStorage.key(i))));
                    arr.sort(function(a,b){ //sort 추가
                        if(a.key > b.key){
                            return 1;
                        }
                        if(a.key < b.key){
                            return -1;
                        }
                        return 0;
                    });
                }
            }
        }
        return arr;
    },
};

export const store = new Vuex.Store({
    state: {
        todoItems: storage.fetch(),
        num: 1 // num을 추가!
    },
    mutations: {
        addOneItem(state, todoItem) {
            const obj = {completed: false, item: todoItem, key: state.num};
            localStorage.setItem(todoItem, JSON.stringify(obj));
            
            if(!state.todoItems.some(element => element.item == todoItem)){
                state.todoItems.push(obj);
                state.num++ //num값 하나씩 플러스
            }else{
                alert('이미 같은 내용이 있습니다!🐅');
            }
        },
        removeOneItem(state, payload){
            localStorage.removeItem(payload.todoItem.item);
            state.todoItems.splice(payload.index, 1);
            state.num-- //num값 하나씩 마이너스
        },
        toggleOneItem(state, payload){
            state.todoItems[payload.index].completed = !state.todoItems[payload.index].completed;

            //로컬 스트리지에 새로운 데이터를 갱신
            localStorage.removeItem(payload.todoItem.item);
            localStorage.setItem(payload.todoItem.item, JSON.stringify(payload.todoItem));
        },
        clearAllItems(state){
            localStorage.clear();
            state.todoItems = [];
            state.num = 1; //num값 1로 초기화
        }
    },
});


  1. state에 num을 만들어 숫자 1을 추가했고

  2. addOnItem이 실행될 때 추가되는 obj에 key값을 추가한 뒤

  3. add를 완료한 후에는 num++,
    remove를 완료한 후에는 num--,
    모두 지울 경우에는 num = 1로 초기화시켜주니

새로고침을 해도 처음 작성한 순서 그대로 나오네요.
(사용자가 작성한 순서가 바뀌지 않았으면 했거든요..)
dev툴 Application을 확인하면 key 값의 순서는 여전히 뒤죽박죽이지만 (이 부분은 브라우저에서 바꾸는 거라 저희가 못하는 부분이라고 하신 걸로 기억하는데 맞죠?)

말씀해주신 sort API를 활용하니 구현해냈습니다..!
2시간 가량 걸렸지만 스스로 해결하니 정말 뿌듯하네요..😂

아 네 창근님 잘 해결하셨군요. 고생 많으셨습니다 또 궁금하신거 있으면 알려주세요 :)