선진이네

개발을 진행하다 보면 비동기처리를 위해 이벤트리스너를 사용할 때 콜백 함수를 많이 사용했을 것이다. ES6부터는 API들이 콜백 대신 프로미스 기반으로 재구성 되어서 콜백 지옥 현상을 극복해냈다. 프로미스도 객체이고, 여러 기능들을 위해 사용되기 때문에 완벽히 숙지해야 한다. 아래 예시를 보겠다. new Promise로 프로미스를 생성할 수 있고, 그 내부에 resolve와 reject를 매개변수로 갖는 콜백 함수를 넣는다. 이렇게 만든 프로미스 변수에 then, catch 메소드를 붙일 수 있다. 프로미스는 쉽게 말해서, 실행은 바로 하되 결괏값은 나중에 받는 객체이다. 결괏값은 실행이 완료된 후 then이나 catch 메소드를 통해 받는다. then이나 catch에서 다시 다른 then이나 catch..

ES6 이전에는 다음과 같은 템플릿 문자열을 사용했다. var num1 = 1; var num2 = 2; var result = 3; var string1 = num1 + ' 더하기' + num2 + '는 \'' + result + '\''; console.log(string1); // 1 더하기 2는 '3' 위와 같은 문자열은 띄어쓰기, 변수, 더하기 기호 때문에 가독성이 좋지 않다. 또, 작은따옴표를 이스케이프 하느라 코드가 지저분하다. 따라서 ` (백틱) , ${변수} 형식이라는 것을 사용하여 코드를 훨신 깔끔하게 만들어냈다. const num1 = 1; const num2 = 2; const result = 3; const string1 = `${num1} 더하기 ${num2}는 '${result..

보통 자바스크립트를 배우면 var로 변수를 선언하는 방법을 배운다. 하지만 ES6 이후로는 const, let이 그 역할을 대신한다. 이 이슈의 가장 큰 특징은 블록 스코프의 범위 차이이다. var은 함수 스코프를 가지고, const 와 let은 블록 스코프를 가진다. var는 함수 호출이 가능하고, const와 let은 함수 호출이 불가능하며 존재하는 블록 내에서만 사용 가능하다는 것이다. 위와 같이 x는 정상적으로 호출되어 출력하지만, y는 선언되지 않았다는 에러가 발생한다. const로 선언하여 호이스팅도 방지하고, 코드 관리도 수월해지는 좋은 점이라고 생각한다. 호이스팅이란, 자바스크립트 코드를 인터프리터가 로드할 때, 변수의 정의가 그 범위에 따라 선언과 할당으로 분리되어 변수의 선언을 항상 컨..

정답을 먼저 말하면, 굳이? 그치만 가능하다. 처음에는 $router.replace 그리고 $router.push를 이용하여 페이지를 바꿔버리고 넘겨버리려했다. 그럴 때마다 error가 발생해서 원인을 찾아보니 SPA는 동일 페이지 이동이 어렵다는 결론에 도달했다. 하지만, 페이지를 새로고침하는 방법은 존재했다. 따라서 $router.go()를 먹이면 동작함을 확인했다. 그런데 여기서 잘 생각해볼 필요성이 있다. 우리는 왜 SPA를 선택했고, 사용하는가? 단일 페이지만으로도 대부분의 기능을 수행할 수 있기 때문이다. 따라서 "굳이"라는 결론에 도달하는 것이다. 단일 페이지만으로도 바뀐 데이터를 동일한 컴포넌트를 이용하여 그릴 수 있는데 굳이 왜 페이지를 변환하는 작업을 하냐 이 말이다. 현재 Vue가 동..

먼저 SPA(Single Page Application)에서 새로고침 방식은 권장 되지 않는다. 그럼에도 불구하고, 새로고침을 사용해야 할 경우 $router.go() 기능을 사용하면 된다. 또, Vue Router가 브라우저를 새로고칠 경우 vuex-state 손실이 발생하는데, 이를 방지하기 위해서는 어떻게 해야할 것인가에 대해서 생각해보다 대안을 찾아냈다. import createPersistedState from 'vuex-persistedstate" const store = new Vuex.Store({ // ... plugins: [createPersistedState()] }); 다음과 같이 수행하면, 저장된 데이터를 유지할 수 있게 되며, 페이지가 새로고침 될때매다 데이터의 변경이 이루어지..

Vue에서는 복잡한 javascript 구현을 간단히 처리하기 위하여 수식어들을 제공한다. v-on:click.수식어= "메소드이름" 등과 같은 방법을 사용한다. .prevent 기본 이벤트의 자동 실행을 중단시킴 preventDefault()와 동일 기능 .stop 이벤트가 전파되는 것을 중단시킴(Bubbling 중단) stopPropagation()과 동일한 기능 .capture 포착 단계에서만 이벤트를 발생시킴 내부 엘리먼트를 대상으로 하는 이벤트가 해당 엘리먼트에서 처리되기 전에 여기서 처리함 .self 발생 단계에서만 이벤트를 발생시킴 event.target이 엘리먼트 자체인 경우에만 트리거를 처리, 자식 엘리먼트에서는 실행 안됨 .passive 기본 이벤트를 취소할 수 없게 함 있을지 모를 ...

Vue에서는 이벤트를 구현하는 방법으로 v-on 디렉티브를 사용한다(v-on은 줄여서 @로 대체가능하다). v-on 뒤에 붙을 수 있는 활용 이벤트들에는 다음과 같은 것들이 존재한다. click 마우스를 클릭했을 때 실행함 dblclick 마우스를 더블 클릭했을 때 실행함 mouseover 마우스의 포인트가 요소 위로 올라왔을 때 실행함 mouseout 마우스의 포인트가 요소 밖으로 벗어났을 때 실행함 mousemove 마우스의 포인트가 이동했을 때 실행함 mousedown 마우스의 버튼을 눌렀을 때 실행함 mouseup 마우스의 버튼을 놓았을 때 실행함 keydown 키보드의 키를 눌렀을 때 실행함 keyup 키보드의 키를 놓았을 때 실행함 keypress 키보드의 키를 눌렀다가 놓았을 때 실행함 ch..

Vue에서 함수를 구현하기 위한 속성으로 computed와 methods를 제공한다. 어떤 경우에 두 가지를 구분해서 사용해야하는지 차이점을 알아보려 한다. computed 속성에서는 복잡한 로직을 구현할 수 있다. 계산적으로 복잡하다기 보다는 다른 함수들 혹은 다른 파일의 무언가에게 종속된 연관된 로직을 구현할 수 있다는 것이다. computed의 가장 큰 특징은 종속된 값에 의존하며, 반환하는 결과를 캐싱한다는 점이다. 종속된 값이라 하면 우리가 data 속성에 정의한 반응형 데이터를 가리킨다. methods 속성은 일반적인 함수를 정의할 때 사용하는데, computed와는 호출되는 조건이 다르다. 종속된 값이라는 개념없이 렌더링이 일어나는 시점마다 계속 호출된다.

컴포넌트 디자인 패턴 중 네가지에 대하여 알아보려한다. 1. Common - 기본적인 컴포넌트 등록과 컴포넌트 통신 2. Slot - 마크업 확장이 가능한 컴포넌트 3. Controlled - 결합력이 높은 컴포넌트 4. Renderless - 데이터 처리 컴포넌트

Vue.js는 다른 프레임워크에 비해 상대적으로 새로 생긴 프레임워크이기에 쉽게 사용할 수 있는 형태로 라이브러리 제공이 활발하지 않다. 따라서 외부 라이브러리를 모듈화 하여 사용할 필요성이 생기게 된다. 따라서 Vue.js 관련 라이브러리가 없을 때 일반 라이브러리를 결합할 수 있어야한다. 보통 외부 라이브러리라고 한다면, 차트, 데이트 피커, 테이블, 스피너 등등이 존재하는데 이를 Vue.js 내부에서 라이브러리를 제공하지 않기 때문에 외부 라이브러리를 모듈화하여 사용할 것이다. 기본적으로 뷰 파일을 만드는 명령어는 다음과 같다. vue create 원하는 폴더명 다음을 수행하면 vue create + npm i + vue init의 개념이 들어가기에 의존성까지 주입한다. 본인은 Chart.js를 통..