익명의 개발노트

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

작년 12월 말에 서평단 지원해서 받은 책. 생각보다 깔끔한 디자인과 구성으로 눈에 쉽게 들어와서 매우 좋았다. 설명도 다른 책들에 비해 쉬웠고, 무엇보다 앱 만들때 많이 사용하는 기능을 목차로 구분해서 따로 따로 구현 시킨 점이 좋았다. 다만 아쉬운 것이 있다면, 앱스토어에 배포과정이 없던 것이 좀 아쉽긴 하다.

전개연산자라고 알고 있는데, 나 또한 그렇게 알고 있었다. 하지만 ...은 연산자가 아닙니다. 연산의 개념은 식이 나타낸 일정한 규칙에 따라 계산하는 일이며, 연산자는 이것들을 행하기 위한 기호를 의미한다. 하지만 ...은 계산을 따로 하지 않기 때문에 연산자가 아니다. 구분 올바른 명칭 [1,...[2,3,4]] Spread elements { a: 1, ...{ b: 1 } } spread properties function abc(...args) {} rest parameter abc(...[1, 2, 3]) spread argument [x, ...xs] = [1, 2, 3] rest elements { x, ...xs } = { x: 1, b: 2, c: 3 } rest properties

자바스크립트에서 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..

Destructuring은 사전적 의미로 구조를 분해한다는 의미이다. 일반적으로 배열이나, 객체 처럼 구조를 가진 Object를 쪼개고, 쪼갠 값을 변수에 담아서 사용한다. 1. 배열 Destructuring const arr = [1,2,3,4,5]; const [ one, two ] = arr; console.log(one); //1 console.log(two); //2 이런 식으로 값을 쪼갤 변수를 먼저 만들고, 해당 배열을 일치시켜준다. 2. 객체 Destructuring 객체는 기본적으로 속성에 키, 값을 가진다. const obj = { id: 'dddd', pw: '1q2w3e', } const {id} = obj; console.log(id); //'dddd' 객체는 위와 같은 식으로 쪼..

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..