eunas blog

out param 값을 DECLARE로 중복 선언 할 필요가 없다. 저 노란 네모 박스 부분을 제거하면 정상적으로 out 값이 return 된다.

A라는 파일에서 B라는 공통 컴포넌트를 호출하여 사용하고 있다. B에서 사용하고 있는 getData 라는 function를 A에서 사용하려고 한다. 우선 어려움이 있었던 이유는, B 컴포넌트의 ref명이 단순 스트링 값이 아닌 탭의 index에 따라 달리 매겨진다. 뭐 이런 식으로 .. ? :ref="(el) => {idx==0?getGridDataRef0=el:(idx==1?getGridDataRef1=el:getGridDataRef2=el)}" 예를 들어, A에서 getCallFun 이라는 function에서 B의 저 getData를 호출한다고 해보자 ref를 명명해주었으므로, this.$refs.컴포넌트명(여기서는B).컴포넌트의메소드(여기서는getData) 이런 식으로 호출을 하면 된다. this...

화면에 대한 그리드의 모든 속성 정보를 데이터베이스에서 관리하는 경우가 있다. 그리드의 헤더, 컬럼 데이터, CSS class명, width/align 값, 클릭 이벤트 시 호출하는 함수 명 까지 .. !! vue 파일에 그리드의 헤더와 컬럼 개수만큼 일일히 태그를 적고싶지 않다는 것이 그 이유다. 😇 .. ㅎ 모든 상황을 제어할 수 있을까 의문은 들었지만 일단 해보긴 했는데 해당 데이터를 모두 axios로 받아와서, 객체에 담고 v-if 범벅으로 루프를 돌리니까 각 컬럼의 케이스에 맞게 정상적으로 나오긴 했다. 하지만, 딱 하나가 제대로 적용이 되지 않았는데, 바로 클릭 시 호출하는 함수 명이다. 저 값이 그냥 스트링 처리 되어버려서, 인식을 못하는 것 같았다. eval을 바로 써보아도 안먹어서, 하나..

Webpack이 뭔 지 감도 안왔는데, 정말 친절하게 설명해주는 글을 발견하여 정리해보았다. 출처는 하단에! 😎 Webpack? 브라우저는 HTML, CSS, Javascript (즉, 확장자가 .html, .css, .js 인 것들)만 인식한다. JSP는 HTML 코드 안에 Java 코드를 삽입함으로써, 서버에서 동적 영역을 채워놓은 HTML 코드이다. 그렇기 때문에 확장자가 .jsp 이어도, 브라우저는 최종적으로는 해당 파일을 HTML 파일로 인식한다. 마찬가지로, Vue.js는 확장자가 .vue이다. 브라우저는 이를 어떻게 인식하여 동작하는 것 일까? 결론부터 말하자면, 브라우저는 .vue 확장자를 Javascript 파일로 인식한다. 그리고, 이를 가능케 해주는 것이 바로 Webpack이며, We..

컴포넌트를 하나의 단어로 생성하면, 위와 같은 에러가 발생한다. 두 개 이상의 단어를 조합하여 컴포넌트를 명명하라는 vue의 권고사항인데, ESLint가 설치되어 있으면 명백하게 에러가 난다. (난 ESLint 설치 안했는데 .. 그래서인지 .eslint 파일도 찾을 수 없다.) vue.config.js 파일에서 해당 속성을 추가해주면 컴포넌트를 단일 단어로 생성이 가능하다.

Modules? 자바스크립트 모듈화 방법 // libs/math.js export function sum(x,y) { return x+y; } export var pi = 3.141593; // main.js import {sum} from 'libs/math.js'; sum(1,2); default export 한 개의 파일에서 하나밖에 export되지 않는다. 모듈화 방법. // util.js export default function(x) { return console.log(x); } // main.js import util from 'util.js'; console.log(util); // function(x) {return console.log(x);} util("hi"); // app.js ..

ES6 1. const and let 새로운 변수 키워드 const - var보다 강력하고, 변수를 재할당할 수 없다. let - const와 달리 변수 재할당 가능 2. Arrow functions(화살표 함수) ES5 function func(name) { return '내 이름은' + name; } console.log(func('kea')); //내 이름은 kea ES6 const func = (name) => { return `내 이름은 ${name}`; } const func = (name) => `안녕 ${name}`; console.log(func('kea')); //내 이름은 kea map, filter, reduce 등 내장 함수와 사용이 가능하다. ES5 const arr = ['바나..

ES6? 최신 Front-end Framework인 React, Angular, Vue에서 권고하는 언어 형식 ES5에 비해 문법이 간결해져서 익숙해지면 코딩을 훨씬 편하게 할 수 있음 const & let - 새로운 변수 선언 방식 블록 단위 {}로 변수의 범위가 제한되었음 const : 한번 선언한 값에 대해 변경할 수 없음(상수 개념) let : 한번 선언한 값에 대해서 다시 선언할 수 없음(재할당은 가능함) ! const 하지만, 객체나 배열의 내부는 변경할 수 있다. const a = 10; a = 20; //Uncaught TypeError : Assignment to constant variable const a = {}; a.num = 10; console.log(a); //{num:10}..

Transition? DOM 의 삽입, 삭제, 갱신 등에 관련된 효과 TodoList.vue

캡틴판교님의 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex 강의를 바탕으로 실습한 내용입니다. TodoInput.vue 쪽에 Modal을 붙여보자 https://kr.vuejs.org/v2/examples/modal.html 모달 컴포넌트 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org Slot? 특정 컴포넌트의 일부 UI를 가져와서 재사용(재정의)할 수 있는 기능 Modal.vue default header default body default footer OK TodoInput.vue