익명의 개발노트

vue-property-decorator 클래스 기반 타입스크립트에 storybook을 설정하는 법 스토리북에서 *.stories.ts를 만들어서 vue파일을 import 하면 *.vue 파일 내부에 '@' 데코레이터를 인식을 못해서 에러가 날 것이다. 이런 경우 스토리북 웹팩을 설정해주어야 한다. .storybook 폴더 밑에 webpack.config.js 파일을 만들어 주고, 웹팩 플러그인을 설치해준다. yarn add -D fork-ts-checker-webpack-plugin //타입스크팁트 체커 // 또는 npm i -D fork-ts-checker-webpack-plugin babel-preset-vue가 없다면 반드시 설치해주어야 한다. yarn add -D babel-preset-vue ..

토글 버튼이나, 탭기능 구현을 함에 있어서 코드를 최대한 적게 쓰고 싶어서. for문을 이용하여 리스트를 만들고 탭 이름을 뿌려줬다. 클릭하면 html에서 클릭한 부분만 클래스 네임이 하나 더 추가되서 이벤트효과를 따로 부여했다. {{item.title}} 위 코드에서 클래스 추가하는 부분에 클릭하면 active 이름이 추가로 붙는다. (item.id 값이랑 선택한 것이랑 일치하면 클래스 명이 추가되도록 했음) tabMenuList는 아래와 같이 이루어져 있으며, 부모컴포넌트로부터 Prop으로 넘겨받는다. 별도의 파일로 만들어져 빼서 사용했다. //util/tabList.js export const storageBox = [ {title:'내 테마', id:'my_theme'}, {title:'좋아요',..

위와 같이 통상 하단부 네이게이션 바를 특정 컴포넌트에서 안보이게 하고 싶을 때 처리하는 방법. 글로벌로 보이게 처리하려면 app.vue에서 등록을 해주면 어떤 라우터를 타고 들어가든 해당 컴포넌트를 볼 수 가 있다. 특정 컴포넌트에서 안보이게 처리는 어떻게 할까? //app.vue App.vue 컴포넌트에서 특정 url일때, 해당 컴포넌트를 안보여주면 된다. 위 소스 코드 처럼, 라이프싸이클 부분에서 url을 파싱하여, 해당 url일때 v-if를 통한 분기처리를 해주면 해결된다.

분명히 백틱을 사용해서 두 줄로 보냈는데, 화면에서는 아래와 같이 한 줄로만 나온다. 이런 경우 보내는 쪽에 을 넣어주고 받는 쪽에서 v-html로 바인딩시켜주면 해결 할 수 있다. //데이터 보내는 쪽 { title: '수정하기', message: `수정은 최초 1회만 가능합니다. 수정하시겠습니까?`, checkBtnName: '확인', flag:'modify', }, //데이터 받는 쪽 {{modalMessage}} 위의 내용을 아래와 같이 변경 //데이터 보내는 쪽 { title: '수정하기', message: `수정은 최초 1회만 가능합니다. 수정하시겠습니까?`, checkBtnName: '확인', flag:'modify', }, //데이터 받는 쪽 v-html은 XSS취약점으로 쉽게 이어질 수 ..

1. ! : Nullable 변수 뒤에 !를 붙이면, Null or Undefined을 허용한다는 말이다. 초기화 할필요 없다. 2. ? : Optional 변수 뒤에 ? 를 붙이면 필수 값이 아닌 선택값을 의미한다.

1. 인터페이스를 이용한 설계 방식 1) 인터페이스에서 state의 타입을 지정해준다. 2) 스토어 타입을 지정한다. 스토어 타입은 Vuex에 StoreOptions라는 내장 객체타입을 이용한다. 3) Actions의 타입은 ActionContext타입을 사용하며, 들어가는 제너릭 타입은 State, RootState 인데, 아래 예제는 하나밖에 없으므로 RootState대신 State로 지정해주어도 무방하다. import Vue from 'vue'; import Vuex, { StoreOptions, ActionContext } from 'vuex'; Vue.use(Vuex); //1.인터페이스 타입지정 interface State { count: number; } //2. 스토어 타입지정, inter..

1. 클래스 기반 컴포넌트 (Class base Component) vue-typescript 클래스구성을 보니 리액트와 비슷해져가는 듯한 느낌을 받았다. 기본적으로 뷰 컴포넌트에서 template, script, style 부분에서 script에 반드시 lang="ts"를 명시해주어야 한다. 그리고 리액트 처럼, import { Component, Vue } from 'vue-property-decorator' 를 import 해주고, @Component라는 데코레이터를 사용한다.(데코레이션은 애노테이션 개념보다는 함수로 보면 된다.) 그 후에는 클래스 이름 명시와 Vue를 상속 받는다. {{message}} 2. Prop 전달하기 Prop는 import 한 부분에서 Prop을 추가해주고 데코레이터를 ..

1. 타입스크립트는 무엇인가? 자바스크립트에 타입을 도입한 자바스크립트이며, 자바스크립트의 상위 집합(Super set)이다. 2. 왜 사용하는가? 시스템 규모가 커짐에 따라 시스템의 복잡도가 늘어나는데, 이럴때 정적타입의 타입스크립트가 빛을 발휘한다. (1) 빠른 버그 발견가능 : 실행되기 전에 상당수의 오류 잡아낼 수 있다. (2) 컴파일러 및 코드 에디터가 코드를 실행하지 않고도 프로그램에 대해 훨씬 더 많은 정보를 알 수 있다. (3) 자바스크립트는 간단한 실수조차 실제 코드를 실행해 봐야 잡아 낼 수 있는 반면, 타입스크립트는 실행전에 잡을 수 있다. => 안전하게 코드를 작성할 수 있다. 3. 기본타입 1) boolean const a: boolean = true; 2) number const..