inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

[리팩토링&퀴즈] mutations 퀴즈 풀이 및 할 일 지우기 기능 구현

브라우저 새로고침시 문제.

235

비오

작성한 질문수 55

3

1,2,3,4,5 순서대로 입력했음에도 새로고침시에 5,2,4,1,3으로 나옵니다.  코드 상의 문제인줄 알고, 캡틴 판교님의 mutations 브랜치에 있는 코드를 클론해서 실행해도 마찬가지인데요... 

fetch() 함수에서 for문으로 localstorage에서 데이터를 read할때, 애초에 저장이 1,2,3,4,5 순서로 안되어 있다는 것을 확인하였고, add를 하면서 확인해본결과 순서대로 localstorage에 들어가지 않는다는 것을 확인했습니다. 

제가 생각할때의 문제점은, localstorage는 순서가 없는 hashmap과 같은 구조인데 이걸 list로 만들어 내기 위해서 read할때 for문을 사용한 것이 문제인거 같은데... 해결 방법이 있을까요? 

vuejs javascript es6 vuex

답변 1

0

캡틴판교

안녕하세요 pius712님, 좋은 내용 질문해주셔서 감사합니다 :) 말씀하신 것처럼 로컬 스토리지에서 데이터를 꺼내올 때 사용하는 localStorage.key() API는 순서를 보장해주지 않습니다. 따라서, 불러온 데이터를 특정 기준으로 정렬하시고 싶다면 sort() 같은 API로 데이터를 정렬해서 표시하는 것을 추천드립니다 :)

Chrome 개발자 모드 확장이 안됨

0

260

1

깃 권한 요청드립니다

0

118

1

vue.js 중급 리포지토리 권한 관련

0

118

1

vuex + axios 질문 있습니다!

1

198

2

깃 권한 요청드립니다!

0

161

1

강의 깃주소 문의

0

144

1

router-view에 props를 어떻게 넘길 수 있나요?

1

280

2

Vue가 인식되지 않는 현상

0

205

1

기초강좌는 어디있나요?

1

190

2

App.vue가 필요한 이유

0

192

1

getter가 정의되어 있지 않아 오류가 발생합니다.

1

254

1

뷰 라이프사이클

1

187

1

TSLint 말고 TSLint Vue 설치해도 되나요?

1

368

3

로컬 스토리지는 어디에 있나요?

1

280

1

vuex 실행시 새로고침해야지만 리스트에 나타나는 현상

1

387

2

export default 관련한 질문

0

354

2

깃허브 vue-todo 접근불가에 따른 확인요청

1

354

2

깃허브에 문제있는것 같습니다.

1

273

2

인프런 강의 재생 화면 구성 변경 문의드립니다

1

305

2

addTodo Helper 함수 적용

1

243

1

vuex 헬퍼 전역 설정

1

245

2

github 권한요청드립니다.

1

258

2

이벤트 위치에 대한 궁금증 입니다.

1

223

2

구조 차이에 대한 문의

1

345

2