익명의 개발노트

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

1. 파일마다 태그 상단에 /*eslint-disable*/ 주석을 단다. 2. vue-cli 공식문서에서 lintOnSave 검색 => 제일 바깥에 vue.config.js 파일만들고 아래 사진과 같이 설정해준다. 3. Script단에서 components: { ToolBar } import한 후 template 단에서 라고 사용해도 되고(strong한 방법), 식으로 사용해도 된다. 두번째는 mac 기준으로 option버튼 누르고 클릭하면 해당 컴포넌트파일로 바로 이동가능하다. vscode자체 기능.(essential 한 방법)

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

구분 장점 단점 언제사용? 어레이 검색, 중간꺼 삭제, 맨뒤에 넣는 것은 빠름 순서가 있으니 인덱싱이 있음 1.앞으로 넣거나, 중간에 넣는 것은 느림 2.크기가 고정이라 크기가 꽉차면 늘려줘야한다 (js에서는 알아서 해결해줌) 단순 읽기(read) 및 쓰기(write) 작업이 많은 데이터에 좋다. ex) ui>li 리스트 저장 링크드 리스트 1.메모리를 동적할당하기 때문에 크기를 미리 지정할 필요가 없다. 2. 배열에 비해 추가, 삭제가 용이하다. 1.배열에 비해서 클래스로 저장해버리기때문에 메모리 를 더 먹음 2. 배열에 비해서 느림(인덱스로 찾는 방식이 아닌 연결 주소로 찾아가는 방식) 리사이징과 수정, 삭제 많을 때, ex) 주식 시세정보, 기본적으로 리스트 저장할때 배열을 쓰지만, 링크드 리스트가..