VueJs공부
-
[Do it! Vue.js 입문] Todo List 수정기능추가 ver2VueJs공부 2024. 2. 2. 23:42
오랜만에 뷰를 다시 공부할 겸 TodoList를 만들면서, 이전에 만들었던 수정기능보다 간단한 방법이 생각나서 기록으로 남긴다. - 모든 데이터의 처리는 App.vue에서 담당하며 하위 컴포넌트들은 데이터 처리를 App.vue로 $emit() 으로 요청한다. - todoItems에 데이터를 담을 때, Date().getTime()을 id로 관리하여 처리하도록 하였다. - 등록시간으로 sort하여 등록순으로 리스트가 출력되도록 처리하였다. - 샘플 소스는 페이지 하단에 기재함. [App.vue] 수정method - TodoList.vue에서 modifyItem 이벤트를 받으면 modifyItem 을 수행하여 변경사항을 저장한다. - localStorage에 기존과 같은 key로 setItem할 경우 기존 ..
-
Vue SpringBoot 연동하기VueJs공부 2024. 1. 21. 12:40
화면단은 Vue, 백단은 SpringBoot를 Proxy방식으로 연동하는 방법을 기록한다. Front와 Back은 분리하여 개발하는 것이 편의성이 좋으므로 아래와 같은 구조로 분리하겠다. 1. Vue 설정 1.1 vue.config.js에서 proxy방식을 사용하기 위한 설정을 추가한다. build후 결과물 저장위치를 outputDir, back단 호출방식과 주소를 devServer 오브젝트에 proxy를 key로 주어 설정한다. back단 호출방법은 localhost:port/api/xxx 이다. 1.2 back단 호출 함수 선언 및 테스트용 버튼 구현 1.3 npm run build 실행: outputDir에 지정한 위치에 빌드생성 2. SpringBoot 설정 2-1 . Controller /api..
-
Doit Vue.js입문 todolist 수정기능 추가하기VueJs공부 2022. 2. 12. 20:57
교재를 보면서 todoList를 만들어 보았다. 그런데, 교재에서는 수정기능을 따로 기재하지 않고, 각자 알아서 고민해보고 만들어 볼 기회를 주었다.. 하여, 직접 수정기능을 추가해보았다. 개선한 버전을 추가하였습니다. https://mhui123.tistory.com/65 app.vue LocalStorage와 javaScript의 array는 수정기능을 따로 제공하지 않으므로 직접 조작해주었다. 수정이 발생하는 부분이 List 마지막 부분인 경우는 그냥 그 부분만 제거하고 넣어주면 되지만, 그외 부분은 수정한 데이터를 그 자리에 넣어주어야 해서 index를 기준으로 작업을 구분해주었다. TodoList.vue chechkedItem(index)는 목록에서 체크부분을 클릭했을 때, app.vue의 sh..