티스토리

흘러가는 프로그래밍 블로그
검색하기

블로그 홈

흘러가는 프로그래밍 블로그

yeomss.tistory.com/m

반가워요 😺

구독자
32
방명록 방문하기
공지 흘러가는 프로그래밍 블로그 모두보기
728x90

주요 글 목록

  • [to-do-app] Vue Transition transition-group {{ todoItem.item }} Vue 는 UI적으로 간편하게도 트랜지션 컴포넌트가 이미 프레임워크에 내재되어 있습니다. 해당 효과는 transition-group 태그를 통해 사용할 수 있으며, 해당 element 에 애니메이션 효과를 달 수 있습니다. name 속성은 해당 트랜지션의 이름이며, tag 는 해당 트랜지션이 적용될 element 를 이릅니다. 위의 코드는 list 라는 이름을 가진 ul 태그 transition-group 입니다. Vue3 버전 부터는 TransitionGroup 이라는 이름으로 사용할 수 있습니다. Transition CSS /* 리스트 트랜지션 */ .list-enter-active, .list-leave-active { transit.. 공감수 0 댓글수 0 2022. 2. 26.
  • [to-do-app] Vue 모달 컴포넌트 웹에서 자주 쓰는 모달 컴포넌트에 대해서 포스팅을 해보고자 합니다. 강의를 들으면서 모달을 띄우는 것에 오류가 있었는데 해결을 해서 기쁘네요. 그럼 글 시작하겠습니다. 모달 컴포넌트 붙여넣기 Document https://kr.vuejs.org/v2/examples/modal.html 모달 컴포넌트 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 도큐먼트는 다음 주소창으로 이동하면 나옵니다. 해당 도큐먼트에서 다음 코드들을 가져옵니다. Modal Html 코드 default header default body default footer Modal CSS 코드 .modal-mask { position: fixed; z-index: 9998; top: 0; left.. 공감수 0 댓글수 0 2022. 2. 25.
  • [to-do-app] 리팩토링: 할 일 모두 삭제 기능 App.vue clearAll 이벤트가 발생하면 해당 컴포넌트의 clearAllItems 함수가 수행됩니다. // 할 일 모두 삭제 clearAllItems() { localStorage.clear(); this.todoItems = []; }, clearAllItems() 함수를 이용하여 로컬 스토리지도 비우고 todoItems 배열도 비워줍니다. todoItems 배열이 비워야지 화면에 즉각적으로 반영됩니다. TodoFooter.vue clearAll 이벤트를 emit 으로 발생합니다. 결과 화면 [Clear All] 버튼을 클릭했을 시 전부 다 삭제되는 것을 확인할 수 있습니다. vue clear vue 모두 삭제 vue 로컬 스토리지 vue all clear 공감수 0 댓글수 0 2022. 2. 24.
  • [to-do-app] 리팩토링: 할 일 완료 기능 App.vue toggleItem 이벤트가 발생하면 해당 컴포넌트의 toggleOneItem 함수가 수행됩니다. // 할 일 완료 toggleOneItem(todoItem, index) { this.todoItems[index].completed = !this.todoItems[index].completed; localStorage.removeItem(todoItem.item); localStorage.setItem(todoItem.item, JSON.stringify(todoItem)); // 갱신 }, todoItems[index] 로 접근을 합니다. 해당 요소의 completed 를 반대로 변경해줍니다. 그리고나서 로컬 스토리지에서 키를 이용하여 삭제를 하고 다시 해당 키로 JSON 형태로 다시 저.. 공감수 0 댓글수 0 2022. 2. 24.
  • [to-do-app] 리팩토링: 할 일 삭제 기능 App.vue removeItem 이벤트가 발생하면 removeOneItem 함수가 발생합니다. // 할 일 삭제 removeOneItem(todoItem, index) { localStorage.removeItem(todoItem.item); this.todoItems.splice(index, 1); }, 로컬 스토리지에서 todoItem.item 키를 삭제합니다. 그리고나서 todoItems 안에 들어있는 요소를 삭제해야지 화면에 즉각적으로 반영이 됩니다. TodoList.vue // 리스트 요소 삭제 removeTodo(todoItem, index) { this.$emit("removeItem", todoItem, index); }, removeItem 이벤트를 발생시키며 뒤의 데이터를 상위 컴포넌.. 공감수 0 댓글수 0 2022. 2. 24.
  • [to-do-app] 리팩토링: 할 일 추가 기능 App.vue 하위 컴포넌트 → 상위 컴포넌트 데이터 전달하기 v-on:하위 컴포넌트에서 발생하는 이벤트 명="현재 컴포넌트의 메서드 명" v-on 키워드를 사용합니다. 현재 컴포넌트에서 addOneItem() 함수를 만들고, 하위 컴포넌트에서 addTodoItem 이벤트를 전달하도록 하겠습니다. 즉, 하위 컴포넌트에서 addTodoItem 이벤트가 발생하면 addOneItem() 함수가 수행됩니다. data() { return { todoItems: [], // app.vue 에서 관리가 된다. }; }, methods: { // input에서 입력된 메모를 추가 addOneItem(todoItem) { var obj = { completed: false, item: todoItem }; // JSON.. 공감수 0 댓글수 0 2022. 2. 24.
  • [to-do-app] 리팩토링: 할일 목록 표시 기능 현재 애플리케이션에서 고쳐야 하는 부분 1. 할 일 추가 시 즉각적으로 화면 목록 반영 ❌ 2. 모두 삭제 시 즉각적으로 화면 목록 목록 반영 ❌ 현재 애플리케이션에서 고쳐야할 문제점은 위와 같습니다. 화면에 바로바로 반영이 되지 않습니다. App.vue data 선언 data() { return { todoItems: [], }; }, todoItems 를 배열로 선언합니다. 이렇게 되면 [TodoList.vue] 에 있었던 todoItems 가 [App.vue] 에서 관리가 됩니다. todoItems 에는 로컬 스토리지에서 가져온 데이터가 들어갑니다. localStorage 에서 데이터 가져오기 // vue life cycle created() { console.log("created"); // 로컬.. 공감수 0 댓글수 0 2022. 2. 24.
  • [to-do-app] TodoList 컴포넌트 구현 TodoList 컴포넌트 구현 Life Cycle https://v3.ko.vuejs.org/api/options-lifecycle-hooks.html 라이프사이클 훅 | Vue.js 라이프사이클 훅 Note 모든 라이프사이클 훅은 자동으로 this 컨텍스트가 인스턴스에 바인딩되어 있으므로, data, computed 및 methods 속성에 접근할 수 있습니다. 즉, 화살표 함수를 사용해서 라이프사 v3.ko.vuejs.org // vue life cycle created() { console.log("created"); // 로컬스토리지에 데이터가 있다면 if (localStorage.length > 0) { for (let i = 0; i < localStorage.length; i++) { if .. 공감수 0 댓글수 0 2022. 2. 23.
  • [to-do-app] TodoInput 컴포넌트 구현 TodoInput 컴포넌트 구현 v-model https://kr.vuejs.org/v2/guide/forms.html 폼 입력 바인딩 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org v-model : 디렉티브를 사용하여 Input 창과 text Element 사이에서 양방향 바인딩이 가능하게 한다. v-model 을 사용하면 input 창에 입력한 문자열을 바로 element에 바인딩이 가능하며, 이는 스크립트 단에서 변경을 해도 적용이 됩니다. 즉, 동기화가 된 상태라고 보시면 됩니다. 좌측에 input 창에 hello 를 입력하니 우측 스크립트 단에 data인 [newTodoItem]이 변경된 것을 볼 수 있습니다. 아래는 코드입니다. components/.. 공감수 0 댓글수 0 2022. 2. 23.
  • [to-do-app] TodoHeader 컴포넌트 구현 TodoHeader 컴포넌트 구현 componets/TodoHeader.vue To Do It! ✨ style 태그에서 scoped 를 하면 글로벌하게 적용되는 것이 아니라 SPA 로 하나의 파일에만 적용이 됩니다. css 는 cascading style sheet 로 전체로 적용이 되는데 해당 soped 키워드로 인해서 그게 무시가 되는 것입니다. src/App.vue App.vue 파일도 css 를 적용시켜 줍니다. 결과 화면 결과 화면입니다. vue 투두앱 vue todo 공감수 0 댓글수 0 2022. 2. 23.
  • [to-do-app] 파비콘, 아이콘, 폰트, 반응형 태그 설정하기 반응형 태그 https://www.w3schools.com/css/css_rwd_viewport.asp Responsive Web Design Viewport W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com "viewport meta" 라고 구글링하면 위와 같은 사이트가 나옵니다. 위 코드를 불러들어와 [public/index.html] 코드 head 사이에 붙여 넣습니다.. 공감수 0 댓글수 0 2022. 2. 23.
  • [to-do-app] Vue 컴포넌트 생성 및 등록 컴포넌트 생성 및 등록 우선 vue-cli 로 뷰 프로젝트를 만들면 생성되는 컴포넌트를 지워주겠습니다. 해당 파일은 components/ 폴더 밑에 있습니다. 또한 App.vue 파일도 기본 형태만 남기고 다 지워주겠습니다. App.vue 컴포넌트를 등록할 때 총 4가지로 등록할 수 있습니다. 보통 두번째나 세번째 방법을 선호합니다. TodoHeader.vue header TodoInput.vue input TodoList.vue list TodoFooter.vue footer 컴포넌트 생성 및 등록 결과 화면입니다. 공감수 0 댓글수 0 2022. 2. 23.
  • [to-do-app] Vue 프로젝트 생성하기 vue 를 이용하여 새 프로젝트를 생성해보도록 하겠습니다. 😆 vue 프로젝트 생성하기 1. vue-cli 설치 https://cli.vuejs.org/guide/installation.html Installation | Vue CLI Installation Warning regarding Previous Versions The package name changed from vue-cli to @vue/cli. If you have the previous vue-cli (1.x or 2.x) package installed globally, you need to uninstall it first with npm uninstall vue-cli -g or yarn global remove cli.vuejs.. 공감수 0 댓글수 0 2022. 2. 21.
  • [to-do-app] Vue 환경설정 간단한 웹 애플리케이션을 만들면서 Vue에 대해서 포스팅 해보고자 합니다. vue는 과제를 하면서 많이 써본 프레임워크이지만 항상 vuex 를 사용할 때면 설정을 하는 방법을 까먹어서 자주 강의나 만들어놨던 코드를 뒤적거리고 했습니다. 이번 기회에 확실히 복습하며 정리를 해야겠어요. 😃 https://www.inflearn.com/course/vue-pwa-vue-js-%EC%A4%91%EA%B8%89/dashboard Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex - 인프런 | 강의 Vue.js 중급 강좌 - '누구나', '쉽게', '훌륭한' 웹 어플리케이션을 만들 수 있도록 도와주는 Vue.js 활용 강좌 입니다. Vue.js 에 대한 기본적인 이해를 바탕으로 T.. 공감수 0 댓글수 0 2022. 2. 21.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.