데이터가 업데이트 되어 페이지가 렌더링 될 때, 또는 UI가 변경될 때, DOM에 접근하는 작업을 하면 Vue객체가 찾지 못하는 경우가 발생한다. (당연히 에러가 뜨고요.) 이는 자바스크립트가 비동기적으로 작동되는 원리 때문이다. nextTick이라는 함수는 이를 기다려주어 모든 데이터의 업데이트나 렌더링이 끝난 후 DOM에 접근하는 함수를 의미한다. 1번이 진행되고 2번이 순차적으로 다 진행된 후 4번과 5번이 진행되면 너무 좋겠지만, 문제는 1번이 다 진행되기도 전에 즉 UI가 다 변경되기도 전에 DOM에 접근하려는 시도가 있었기 때문에 에러가 뜨게 된다. 이런식으로 nextTick()을 선언한 후 DOM에 접근하는 작업을 내부의 콜백함수로 넣어주면 UI가 변경되거나 데이터가 업데이트 된 후 순차적으..

vueJS의 가장 큰 특징은 양방향 바인딩이라 생각된다. 하지만 그 양방향 바인딩의 특징이 VueJS를 사용하면서 객체 데이터나 배열 데이터를 사용하게 되면 새로운 속성 및 데이터가 추가되거나 삭제되는 것을 감지하지 못하는 경우가 자주 생긴다. 여기서 "값이 갱신되었다." 라고 요청을 하는 메서드인 Vue.set / $set 와 Vue.delete / $delete 가 존재한다. 1. 배열 this.$set(arr, index, value) 2. 객체 this.$set(obj, key, value) this.$delete(obj, key) new Vue({ el: '#app', data: { obj : {a : 'a'}, arr : [0, 1, 2] }, methods : { changeData (){ ..

보호되어 있는 글입니다.

1. 부모 컴포넌트 부모 modal 2. Modal 모달창 v-model, statChange 2개로 true, fasle 전달

1. 컴포넌트 만들기 부모 컴포넌트 : @src/views/Todo.vue 자식 컴포넌트 : @src/components/List.vue 자식 컴포넌트 : @src/components/ListAdd.vue 2. 부모 컴포넌트에 자식 컴포넌트들 import하기 3. memo를 적으면 보여지게 하기 ListAdd.vue 에서 메모값을 부모로 $emit 시키기 부모에서는 받은 데이터를 다시 List.vue로 props 전달하기 // ListAdd.vue (자식 컴포넌트) 할일 추가 v-model="memo" 할일 추가 버튼을 누를 때 textarea의 value를 (즉, this.memo) 부모로 전달한다. textarea안의 memo는 다시 초기화 시켜주기 위해 null 로 바꿔준다. // List.vue ..

1. DNS란? 인터넷에서 목적지를 찾아가기 위한 주소에 해당된다 네트워크에서 도메인이나 호스트 이름을 숫자로 된 IP 주소로 해석해주는 TCP/IP 네트워크 서비스이다. IP주소는 복잡하고 외우기 쉽지 않기 때문에 이를 쉬운 도메인으로 변경한 것이다. 더보기 도메인: www.naver.com IP: 223.130.195.200 내 컴퓨터에서 www.naver.com에 접속하려고 한다고 가정해보자. 그런데, 현재 내 브라우저는 네이버의 IP주소를 모른다. 그래서, 브라우저는 먼저 PC에 설정된 로컬 DNS 서버에 해당 도메인의 호스트명과 IP를 가지고 있는지 물어본다. 이 로컬 DNS 서버는 보통 통신사마다 지정된 곳이 있는데, 사용자가 다른 곳으로 바꿀 수도 있다. 로컬 DNS 서버에는 이 주소가 이미..

보호되어 있는 글입니다.

1. 로그인 Kakao Developers 셋팅 로그인 > 내 애플리케이션 > 애플리케이션 추가하기로 앱 추가 요약 정보 > JavaScript 키 기록 플랫폼 > 사이트 도메인 등록(http://localhost 가능) 카카오 로그인 > 활성화 설정 ON 변경 동의항목 > 닉네임 필수 동의 Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 2. 로그아웃 kakaoLogout() { window.Kakao.API.request({ url: '/v1/user/unlink', }) .then(function(response) { console.log(..

로그인 api 해보다가 버튼까지 직접 만들어서 하면 더 좋을 것 같아서 이참에 fontawesome도 설치 해보자! 해서 다해보는 중이다. npm 쓰는거 쫌 재밌네... 1. package.json "dependencies": { "@fortawesome/vue-fontawesome": "^2.0.6", "axios": "^0.27.0", "bootstrap": "^4.6.1", "bootstrap-vue": "^2.21.2", "core-js": "^3.6.5", "vue": "^2.6.11", "vue-router": "^3.2.0", "vuex": "^3.4.0" }, dependecies안에 "@fortawesome/vue-fontawesome": "^2.0.6" 를 추가한다. 2. main.js..

1. 부모 Modal.vue Modal Button 2. 자식 ModalCompo.vue header × 내용 확인 취소 숨김 watch가 있는이유! 4번째 줄에서 v-model로 modalShow를 default: false로 선언했으니깐, watch로 한번더 감지해서 true로 바꿔줘야한다. 만약에 default를 true로 바꾸면 watch를 지워줘도 된다 3. 이미지 참고 https://bootstrap-vue.org/docs/components/modal BootstrapVue Quickly integrate Bootstrap v4 components with Vue.js bootstrap-vue.org

1. index.html : 컴포넌트들을 마운팅 해준다. public - index.html 파일에 모아진다고 생각하면 된다. index.html 내부에 14번줄에 해당하는 로 표시된 부분을 볼 수 있는데, 여기에 main.js에서 지정하는 컴포넌트들이 마운팅 된다. 2.main.js : 인스턴스를 생성하고 index.html 파일과 연결해준다. import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import BootstrapVue from 'bootstrap-vue' import 'bootstrap/dist/css/bootstrap.min.css' import '..

보호되어 있는 글입니다.

script부분에서 name / props / methods / created / mounted / watch / computed 등등.. 쓸 때 이왕이면 사이클 흐름에 맞게 순서대로 쓰고싶어서 물어보다가 알게 된 사실 딱히 순서는 상관이 없다고 하셨는데 권장사항은 있다는 점! 글로벌 인식 (구성 요소 이상의 지식 필요) name 템플릿 컴파일러 옵션 (템플릿이 컴파일되는 방식 변경) compilerOptions 템플릿 종속성 (템플릿에 사용된 자산) components directives 컴포지션 (속성을 옵션에 병합) extends mixins provide/inject 인터페이스 (구성 요소에 대한 인터페이스) inheritAttrs props emits 구성 API (구성 API 사용을 위한 진입..

1. Bootstrap 설치 npm install vue bootstrap-vue bootstrap 2. main.js 설정 이제 main.js에 Bootstrap 관련 import만 해주면 된다. import BootstrapVue from 'bootstrap-vue' import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap-vue/dist/bootstrap-vue.css' Vue.use(BootstrapVue) 3. Bootstrap 테스트 코드넣어보고 테스트 해본다. Button 4. Vue3.0버전 vue3.0 버전이면 bootstrap5 버전으로 설치해야한다.. 4로 설치했다가 안되가지고 헤맸네 ㅠㅠ // terminal npm insta..

SPA(Single Page Aapplication)의 큰 특징은 처음 페이지 진입 시 리소스를 한번에 다운받아 이후 페이지 전환이 매우 빠르다는 이점을 갖고 있다. 하지만 프로젝트의 규모가 큰 경우 처음 초기 랜더링 시간이 오래 걸리게 되는 단점을 초래할 수 있음. 이러한 단점을 보완하기 위해 Angular, React, Vue 에서는 지연된 로딩(Lazy Loading)을 활용한다. ​ 1.prefetch 기능이란? 나중에 사용될 리소스를 캐시에 저장함으로써, 사용자가 접속했을 때 빠르게 리소스를 내려줄 수 있는 기능 - webpack 4.6.0 부터 지원 - Vue CLI3가 webpack4를 탑재하면서 사용된 기능 - 기본값 true(prefetch 기능이 사용되도록 설정되어있음) - 첫 화면 접..