첨부파일 {{ item }} X 1. 파일업로드 경우의 수 1. 파일을 선택X 2. 파일을 선택O 삭제X 3. 파일을 선택O 삭제O 1번의 경우 파일을 선택하지 않았으므로, formData로 값을 전달해 줄 필요가 없다. 2번의 경우 파일을 삭제 하지 않았을 때 undefined로 판단해주어서, if문 안으로 들어오게 하였다. this.dataTransfer.files === undefined 3번의 경우 this.file은 로 담긴 파일배열이고, this.dataTransfer은 삭제한 파일이 있을 때, this.file로 다시 할당시켜준다. (dataTransfer가 비교의 대상이 되는셈) 2. DataTransfer DataTransfer개체는 드래그 앤 드롭 작업 중에 드래그되는 데이터를 유지하는..

보호되어 있는 글입니다.

데이터가 업데이트 되어 페이지가 렌더링 될 때, 또는 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. 로그인 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..