프론트앤드
-
Vue.js로 To Do List 애플리케이션 만들기(하)Programming/.JS 2020. 6. 14. 23:00
2020/06/13 - [Programming/.JS] - Vue.js로 To Do List 애플리케이션 만들기(상) TodoList.vue TodoList는 추가한 값들이 로컬스토리지에 저장되고 그 저장된 것을 가져와서 차례대로 뿌려줄 컴포넌트이다. 세션이나 DB에 저장한 뒤에 처리할 수도 있지만 간단하게 로컬스토리지를 통해서 이를 구현하도록 하자. {{ todoItem }} 새로운 디렉티브가 등장했다. v-for는 지정된 갯수만큼 반복해서 HTML을 표시하는 반복문 디렉티브이다. 여기서 반복시킬 propsdata는 상위 컴포넌트로부터 전달받은 데이터를 이용할 것이다. 상위 컴포넌트인 App.vue에서 보내주지 않은 지금 상태에서는 propsdata가 로컬스토리지에서 가져온 데이터임을 가정하고 작성한다..
-
Vue.js로 To Do List 애플리케이션 만들기(상)Programming/.JS 2020. 6. 13. 23:02
할일 관리 앱은 프론드앤드 프레임워크를 배울 때 가장 대중적으로 도전하는 활용 예제이다. 제일 무난하게 시작할 수 있는 낮은 입문턱이지만 데이터 조작(CRUD)이 어떻게 사용되는지, 컴포넌트의 구조와 컴포넌트간의 통신이 어떻게 이루어지는지도 알수있는, 간단해보이지만 이 안에 많은 것들이 함축되어있고 또한 이것을 알게된다면 여기서 응용하여서 다른 더 고도화된 앱들을 구성할 수 있다. TO DO APP 구상하기 위 사진은 우리가 만들어볼 할일 관리 앱의 완성본이다. 반응형으로 구성되어 웹 뿐만 아니라 모바일에서 봐도 문제가 없도록 UI를 구성하였다. 할 일을 input에 적어서 +버튼을 누르면 목록에 추가되고 휴지통 아이콘을 눌러서 낱개로 지우거나 Clear All버튼을 눌러서 한번에 다 지우는 것도 가능하..