FrontEnd/Vue 217 [Vue.js] 로컬스토리지 새로고침 문제 ;; (해결) To Do App을 만들다. vue2로 컴포넌트간 데이터 주고 받는게 이해가 안되서 혼자 To Do App을 만들어 보고 있습니다. 프롭스로 데이터 내리고, 이벤트로 올리는 걸 하면서 익숙해지는 중이었습니다. ⁉️ 근데 문제가 생겼네요. 말이 안되는 문제라 지금 아직 해결을 못했어요. created() { for (let i = 0; i < localStorage.length; i++) { let todoKey = localStorage.key(i); console.log(todoKey) let item = JSON.parse(localStorage.getItem(todoKey)); console.log(item); this.todoList.push(item); } }, 문제가 발생한 코드는 위 코드입니.. 2022. 9. 28. [Vue.js] style 태그에 있는 scoped의 의미 CSS를 정의하는 style태그에 scoped의 의미 SPA는 말 그대로 Single Page, HTML Page가 단 한개만 존재하기 때문에 Component별로 다른 파일에서 Style을 지정해주어도 각 태그, class 등에 적용되는 style이 겹칠 수 있다. 이를 해결하기 위해서 사용되는 방법은 여러가지가 있다. React에선 SCSS의 Nesting을 사용하거나, styled components를 사용해서 className을 독립적으로 지정되도록 하는것이 일반적이다. Vue.js에선 2022. 9. 18. [Vue.js] Vue CLI를 활용해서 로그인 form 만들기 Vue CLI를 활용해 사용자 입력 폼 (로그인 폼) 만들기 기초 강의의 마지막으로 로그인 폼 만들기를 해보았다. 이제 vue 개발을 시작할 준비가 되었다~! // @App.vue id: pw: login hi 2022. 9. 18. [Vue.js] 배운 내용들 Vue Cli로 마이그레이션 해보기 Vue Cli를 통해 컴포넌트 만들어보기 아래와 같이 Vue CLI를 통해 AppHeader 컴포넌트를 만들고, Props 내리기, Event 올리기를 해보았다. data()로 달라진 점 주석에 설명이 되어 있으며, 해당 부분 이외엔 특별히 다른점이 없다. 이제 이정도면 Vue를 통해 개발을 시작할 준비가 되었다. 중급 강의를 들으러 가기 전 마지막 사용자 입력 폼 하나를 만들어 볼 예정이다. //@ App.vue {{ str }} // @ components/AppHeader.vue {{ propsdata }} send 2022. 9. 18. [Vue.js] vue cli와 이전 방식 비교 Vue Cli와 이전 방식의 비교 아래 코드에 주석을 통해 설명했지만, 정리해보면 new Vue({ }) 라는 인스턴스 방식에서 export default { } 방식으로 변경 const component { template : '' } 방식에서 template태그 안으로 html 부분 이동 컴포넌트 태그 영역은 kebab-case, PascalCase 모두 같다. => 아래 인스턴스 옵션 속성, 컴포넌트 옵션 속성 부분에 components: { HelloWorld } 이런 부분에 선언되어있는 것이고, 이 HelloWorld 는 'hello-world' = HelloWorld와 같다. 2022. 9. 18. [Vue.js] Computed 속성을 활용한 CSS Class 바인딩 Computed 속성을 활용한 CSS Class 바인딩 주석 처리 한 것처럼 class 네임에 인라인으로 warning을 true일 때만 넣어줄 수가 있다. computed 속성을 활용하면 인라인이 아니라 하나의 함수명으로 제어할 수 있다. Hello 2022. 9. 18. [Vue.js] Watch 속성 vs Computed 속성 watch 속성, Computed 속성 두 속성은 Data가 변경됨에 따라 실행된다는 점에서 비슷하다. 하지만 다른 점이 있다는데.... 솔찍히 모르겠고, 공식문서에서는 computed를 쓰는것을 권장하고 있습니다... 솔찍히 이유는 이해가 안되네요. 좀 더 공부해보고 경험해보면서 익혀야겠습니다. 2022. 9. 18. [Vue.js] Watch 속성 Vue에서 데이터가 변할 때마다 실행 되는 Watch 속성 데이터의 변화를 감지하여 메서드가 실행되도록 할 수 있습니다. 이 watch 속성을 사용하면 React의 useEffect처럼 특정 데이터가 변할 떄마다 어떤 행동을 하도록 만들 수 있습니다. 아래 예제를 보면 num이 변할 때마다 this.logText()라는 메서드를 실행하게 됩니다. 이런 방식은 아래 react useEffect() 훅과 비슷한 효과를 볼 수 있겠습니다. {{num}} increase // 실행은 안시켜봤는데 위 코드와 아래코드가 같은 코드인것 같습니다. num이 변할 때마다 useEffect 안의 logText()가 실행, // 단 하나 다른점은 아래 코드에서는 mount되는 시점에 logText가 한번 실행 되겠네요. i.. 2022. 9. 18. [Vue.js] v-on 디렉티브를 통한 event Handle Methods binding v-on 디렉티브 v-on:keyup 과 같은 v-on 디렉티브를 통해 eventListener를 쉽게 붙일 수 있다. Click me add 2022. 9. 18. [Vue.js] 데이터 바인딩, 디렉티브 Vue에서 데이터를 다루는 방법은 2가지다. 데이터 바인딩 Mustach Syntax라고 불리는 방식으로 HTML내부에 직접 바인딩 할 수 있다. {{ data }} 디렉티브 v-bind, v-if, v-show, v-html 등등 v-로 시작하는 정해진 문법을 통해 html tag의 attributes에 데이터를 바인딩 할 수 있다. 아래 코드에서 v-bind로 만들어진 예제들을 확인할 수 있다. {{number}} {{doubleNum}} v-if Loading...v-if test user has been logged in v-show Loading...v-show 2022. 9. 18. 이전 1 2 다음