머털&보약의 기록

※ 일반적으로 javascript에서 this는 사용하는 상황에 따라 다른 객체를 가리킴 ex)뷰 인스턴스의 methods 객체의 함수 내 콜백함수에서 인스턴스의 data 객체 값을 세팅하는 로직 Vue 인스턴스 new Vue({ //element id el: '#project-client-req', //vue에서 관리할 데이터 data: { client: { clientBizNo: '', //사업자등록번호 clientNm: '', //상호 clientZipNo: '', //우편번호(주소검색 API로 세팅) clientBasAddr: '', //기본주소(주소검색 API로 세팅) clientDtlAddr: '' //상세주소 } }, methods: { //주소 검색 searchAddr() { let add..

부모 컴포넌트 new Vue({ //element id el: '#main', //vue에서 관리할 데이터 data: { items: [], // 데이터 목록 currentPage: 1, //현재 페이지 firstPage: 0, //첫번 째 페이지 lastPage: 0, //마지막 페이지 startIdx: 0, //첫번 째 페이지 번호 endIdx: 0, //마지막 페이지 번호 empNm: '', //사원명 }, //data를 기반으로 변경할 속성(data의 변경 감지) computed: { //변경된 데이터 displayedItems() { return this.items; }, }, //vue 컴포넌트 화면에 렌더링 된 직후 실행(컴포넌트의 템플릿이 DOM에 추가/화면에 표시된 직후) mounted(..

문제: modal 표시 시 ajax로 데이터는 가져오지만 바인딩이 되지 않음 환경: thyemelaf 파일에 vue.js를 적용(별도 node.js 환경 X) thymeleaf파일에 vue.js를 적용한 경우에 modal창에 아래처럼 바인딩이 안된 경우가 있었다. 원인은 간단했다. 기존 thyemelaf파일에서는 아래처럼 전체를 나타내는 div 영역 밖에 모달창 div가 있었음 기존에는 javascript/jQuery로 페이지 로드 후 DOM에 직접 접근해서 작업해서 문제가 안되었음 하지만 vue.js에서는 root element안에 모달영역이 포함되어 있어야 vue.js의 인스턴스와 연결되어 vue.js의 바인딩 기능 사용 가능(vue.js에서는 DOM에 직접 접근하는 일이 거의 없음) 위 코드처럼 m..

목차 ajax로 데이터 조회 시 reactivity를 활용한 lib나 framework를 사용하지 않는 기존 방식(javascript/jQuery)의 경우 화면에서 ajax로 데이터를 가져와서 그릴 부분의 태그만 미리 정의해 놓고 데이터를 가져온 후에 스크립트단에서 동적으로 태그를 만드는 로직을 작성해서 붙였다.(아래 참조) 기존방식 html 주소록 순번 사원명 직급 직책 전화번호 이메일 script //table에 데이터 그리는 부분 const targetTbody = "addressbookBody"; if(data.list != null && data.list.length > 0) { // foreach start for (let i = 0; i < data.list.length; i++) { htm..

목차 데이터 변화 감지하는 점은 동일하지만 용도가 다름 watch 데이터의 변화를 감지하고 원하는 로직을 수행하는데 사용 주로 데이터 변화 시 비동기적 로직 등 복잡한 로직 수행 시 사용됨 변경 전 데이터, 변경 된 데이터를 매개변수로 받아서 처리 가능 카운트: {{ count }} 증가 new Vue({ el: '#app', data: { count: 0 }, methods: { increment() { this.count++; } }, watch: { //매개변수로 변경된 값, 변경 전 값을 받을 수 있음 count(newValue, oldValue) { console.log('count가 변경되었습니다. 이전 값: ${oldValue}, 새 값: ${newValue}'); //ajax 로직 생략....

post 방식으로 데이터 전송 #ajax 통신 위한 lib 설치 npm i axios App.vue id: password: login get방식으로 데이터 조회 조회 queryString(?empId=dev&empNm=로다주&empEmail=dev@naver.com) 추가 시 아래처럼 사용 const data = { empId: this.empId, empNm: this.empNm, empEmail: this.empEmail } //2번 째 인자값에 위에서 만든 object 추가 axios.get(url, { data }) reference: https://www.inflearn.com/course/lecture?courseSlug=age-of-vuejs&unitId=21471&tab=curriculu..

App.vue app AppHeader.vue {{ propsdata }} send reference: https://www.inflearn.com/course/lecture?courseSlug=age-of-vuejs&unitId=21466&tab=curriculum 학습 페이지 www.inflearn.com

App.vue app AppHeader .vue {{ propsdata }} reference: https://www.inflearn.com/course/lecture?courseSlug=age-of-vuejs&unitId=21465&tab=curriculum 학습 페이지 www.inflearn.com

하위 컴포넌트 import 후 사용 App.vue app AppHeader.vue Welcome to My App reference: https://www.inflearn.com/course/lecture?courseSlug=age-of-vuejs&unitId=21464&tab=curriculum 학습 페이지 www.inflearn.com 2023.07.29 - [IT/development] - [Vue.js] 싱글 파일 컴포넌트에서 props 속성 이용 [Vue.js] 싱글 파일 컴포넌트에서 props 속성 이용 App.vue app AppHeader .vue {{ propsdata }} yaga.tistory.com 2023.07.29 - [IT/development] - [Vue.js] 싱글 파일 ..

목차 터미널 명령어를 통해 Vue.js 개발환경을 더 쉽게 해주는 도구라고 보면 되고 아래와 같은 기능을 제공한다. 자바로 따지면 레거시 스프링을 사용하다 스프링부트를 만난 기분인 듯 프로젝트 생성 개발서버 실행 프로덕션 빌드 추가 플러그인 설치 vue.js의 기본 설정 및 구성을 쉽게 변경할 수 있는 설정 파일과 옵션 제공 ※ 사전에 npm 최신버전(LTS 권장) 설치 되어 있어야 함 설치(npm 또는 yarn으로 설치) 😃 npm install -g @vue/cli # OR yarn global add @vue/cli vue project 생성 🙂 vue create my-project#(생성할 프로젝트 명) # OR vue ui vue project를 생성할 경로로 이동 후 명령어 입력 시 프리셋을..