이번에 프로젝트를 진행하면서 crypto를 사용할 일이 있었는데.. crypto라는 모듈은 기본적으로 node에서 제공중이라고 해서 이걸 사용하려고 했다. (처음에는 crpyto-js 라이브러리를 설치해서 하려고 했는데, 이 친구 비대칭키는 지원 안한다고 해서 안함..) 근데 막상 import해서 사용하려고 하니 다음과 같은 에러가 발생했다. Module not found: Error: Can't resolve 'crypto' / webpack

프로젝트를 빌드하려니 다음과 같은 에러가 발생했다. error Parsing error: Decorators must be placed *after* the 'export' keyword. Remove the 'decoratorsBeforeExport: false' option to use the '@decorator export class {}' syntax. 대충 에러 문구를 해석해보면 다음과 같은데.. 1) export 키워드 뒤에는 반드시 Decorators이 있어야 한다. 2) decoratorsBeforeExport: false 옵션을 지워야 한다. 인데 우선 나는 decoratorsBeforeExport: false 옵션을 따로 설정해주지 않았기에 이건 넘어갔다. 그래서 (1)에서 말한 것 ..

오늘 테스트로 Vue componenet를 만드는데 (eslint나 prettier, typescript 등 테스트 하기 위해 새로 만든 프로젝트) 아래와 같은 에러가 발생했다. error Parsing error: Unexpected token, expected "}" 에러 발생 eslint를 설정한 프로젝트이다 보니, 뜨는 에러인 거 같다. 원인은 eslint가 ES6~ES7을 파싱할 때, 생기는 문제가 있다고 한다.. 그래서 바벨 패키지를 설치하면 된다고 해서 설치해봄.. babel-eslint 패키지 설치 명령어 npm install babel-eslint --save-dev or yarn add babel-eslint --dev 이렇게 설치하니까. 에러가 사라졌다. 괜히 eslint 초기화 해서..

보통 Vue에서 클릭했을 때 클릭이벤트로 v-on:click( 이하 @click )을 많이 쓰는데... 검색을 할때는 바로 엔터를 치는 경우가 많다. 검색어를 입력하고, 마우스로 검색버튼을 누르는 일은 많이 없지 않은가 그럴 때 사용하는게 v-on:keyup.enter 라는 녀석이다. 기본문법 v-on:keyup.enter="호출함수()" @keyup.enter="호출함수()" 예제 export default{ template : ` Search `, data () { return { keyWord : '' } }, methods : { search () { alert("검색.."); } } } 예를 들어 이렇게 하면, 클릭했을 때도, 엔터를 눌렀을 때도 저 search라는 함수가 호출 되는 것을 볼 수..

예전에 this를 공부하면서 일반함수와 Arrow Function에서의 this가 다르다는 것을 배웠다. 그렇게 기억하고 있다가, 이번에 Vue 컴포넌트 코드를 작성하고 있는데, methods안에 메서드를 선언하는데 Arrow Function으로 작성하고 싶은 욕심이 생겼다.. 그래서 작성한 코드는 아래... 예제 import dummyData from './data.js'; // 더미데이터 import export default{ template : ` 테스트 `, data () { return { data : {} // 데이터 하나 선언 } }, mounted () { this.data = dummyData; // 마운트 되었을 때 더미데이터를 넣어줌.. }, methods () { getYoutub..

저번 글에 이어, 주소검색 및 지도이동을 구현하려고 한다 ( 해당 글 참조 ) 카카오맵API에서 함수를 다 제공하기 때문에 그냥 가져다 쓰기만 하면 된다. 그냥 API연습 겸... 오늘은 MapHeader.vue를 중점적으로 보려고 한다. 우선 데이터를 담을 데이터 객체를 선언해보자. data() { return { keyWord : '', // 검색키워드 v-model을 통해 검색단어를 받아옴 placeArray : [] // 검색결과를 담는 배열 } }, 그리고 실제로 API를 통해 주소검색을 하는 메서드를 선언한다. searchBox : function(){ this.placeArray = []; // 배열 초기화 let places = new kakao.maps.services.Places(); ..