익명의 개발노트

위와 같이 통상 하단부 네이게이션 바를 특정 컴포넌트에서 안보이게 하고 싶을 때 처리하는 방법. 글로벌로 보이게 처리하려면 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취약점으로 쉽게 이어질 수 ..

자바스크립트에서 0은 false의 의미를 가진다. 그러므로 배열의 0번째 색인값을 통해 찾으려고하면 값이 존재함에도 false가 된다. const sections = ['ddd'] function show(sections){ if(sections.indexOf('ddd')){ return true; } return false; } show(sections); // false 위와 같은 코드는 아래와 같이 존재하지 않을 경우 -1인 값을 비교함으로써 값을 판별할 수 있고, const val = ['ddd'] function show(val){ return val.indexOf('ddd') > -1 } show(val); // true 아래와 같이 ES6 문법인 includes를 통해 판별 할수도 있다. c..

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. 스피너 같은거는 이벤트 버스로 통제해주는 것이 간결하다. 버스는 라이프 싸이클 내부에서 사용 이벤트 on했으면 off도 반드시 해주어야함, 2. 하이오더 컴포넌트 1) 컴포넌트의 코드를 재사용할 수 있는 기술 2) 단점: HOC로 통신하는 것이 많을 수록 컴포넌트 레벨이 깊어지면서 컴포넌트 통신에있어서 불편한 현상들이 발생함. ex) ask, jobs, news컴포넌트에서 api 콜하는 부분이 코드가 똑같다.(엔드포인트 주소는 다름) //ask.vue created() { Bus.$emit("start:spinner"); setTimeout(() => { this.$store .dispatch("FETCH_ASK") .then(() => { Bus.$emit("end:spinner"); }) .ca..

1. 보여지는 화면의 구성이 같고, 보여지는 데이터가 다른 경우 1) 공통 컴포넌트 하나 생성 후 API콜 부분 분기처리 2) 템플릿 부분 v-if문으로 보여지는 화면 분기처리 (1) 를 사용하여 분기처리해도 되고, 바로 태그에 v-if 달아서 분기처리 해도 됨. 3) 데이터 받아와서 저장하는 부분 분기처리 2. 부모컴포넌트에서 하위 컴포넌트 데이터 전달시 1) props이용하거나, 자식에서 데이터 생성 => props로 데이터 내려주는 게 드라이한 설계 3. Slot을 이용하여 표시 1) react의 children같은 기능, 1번같이 데이터가 일부 다른데 수정하기 애매한 경우 Slot으로 써도 되고 애초에 Slot을 이용해도 좋음. 2) 하위 컴포넌트에 화면 받아서 보여주고 싶은 부분을 slot으로 ..

1. 동적 라우팅 1) 페이지 전환시 기존 정보 가지고 가는 라우팅 기술 2) 라우터에 가지고 갈 정보를 표시해주고, 실제 라우터 링크에서 값을 표기해 줌 { path:'/user/:id', component: UserView, }, 아래와 같이 사용할 경우에는 라우터에 위와 같이 표기안해주어도 된다. { path:'/user', component: UserView, }, //클릭시 페이지 이동시키고 싶을때 라우터 링크사용 2. v-html 1) 서버로부터 받아오는 내용에 HTML이 포함되어있는경우 사용 {{fetchedItem.content}} 3. 트랜지션 1) 뷰에서 트랜지션 기능을 기본으로 제공해 준다. 2) 트랜지션 이름 기준으로 css가 prefix되어 있기 때문에 트랜지션 이름 변경시 css..

OSX 모하비 이후부터는 zsh가 bash를 대신해서 default 터미널로 사용됩니다. 설치순서 1. brew 먼저 설치 한다. /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 2. iterm2 를 다운받아 설치 https://www.iterm2.com/ iTerm2 - macOS Terminal Replacement iTerm2 by George Nachman. Website by Matthew Freeman, George Nachman, and James A. Rosen. Website updated and optimized by HexBrain www.iterm2.com..