nana_log

좋아하는 걸 좋아하는 나나 🤟

Blog/Library

이 글은 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex 강의를 바탕으로 작성한 글입니다. 멋진 강의 감사합니다 (__) 시리즈: Todo 웹앱 만들기(1) 5. 할 일 목록 구현하기 지난 글에서 퍼블리싱까지 마쳤으니, 이제부터 기능을 개발할 차례입니다. 🚀 할 일 추가하기 TodoInput은사용자가 입력한 내용을 받아와 localStorage에 저장하는 기능을 담고 있습니다. Web Storage API는 직관적으로 key/value 데이터를 안전하게 저장할 수 있습니다. 로컬 스토리지는 브라우저를 종료해도 데이터가 계속 남아 있지만, 세션 스토리지는 세션이 종료되면 데이터도 사라집니다. 각각의 오리진에 대해 다른 스토리지 객체가 localStorage와 session..

2020. 5. 28.

Blog/Library

이 글은 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex 강의를 바탕으로 작성한 내용입니다. 멋진 강의 감사합니다 (__) 1. 프로젝트 구상 Todo List를 보여주는 간단한 웹 페이지를 만들어보겠습니다. localStorage를 활용해 리스트를 추가/삭제하려고 합니다. 얍, 이런 느낌으로 만들어보려고 해요 🙋‍♀️ (디자인은 미래의 나에게 맡긴다!) 여기에 필요한 컴포넌트를 나열하면 이렇겠네요. - header : 웹앱 이름과 오늘 날짜를 보여줍니다 - title : 몇 개의 할 일이 남았는지 보여줍니다 - input : 할 일을 입력받습니다 - controller: 필터와 모두 삭제 기능이 들어 있습니다 - list : 할 일 목록을 보여줍니다 - footer :..

2020. 5. 26.

Blog/Library

이 글은 Vue.js 시작하기 - Age of Vue.js 강의를 보고 작성한 노트 필기입니다. 뷰는 1도 모르지만 친해지고 싶은 사람이 공부를 위해 작성한 글입니다 :-9 필요할 때마다 수정/보완해 나갈 예정입니다. Vue.js 소개 Vue는 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크 입니다. 공식 페이지 - vuejs.org - kr.vuejs.org (한국어) 위 사이트에서 상세한 공식 문서를 제공하고 있습니다. Reactivity Reactivity는 Vue가 가진 가장 큰 특징이라고 할 수 있습니다. Vue가 하는 일을 흉내내보면 이렇습니다. 위 코드를 실행 후, 콘솔에 viewModel.str = "안녕하세요!"`와 같이 입력하면 해당 글씨가 화면에 바로 나타나게 됩니다. 이를 V..

2020. 5. 21.