profile
사는 것도 디버깅의 연속. feel lucky to be different🌈 나의 작은 깃허브는 https://github.com/lyj-ooz

nuxt: vue의 확장판

nuxt는 vue를 좀 더 편하게 사용할 수 있기 위해 몇 가지 기능을 더 추가한 vue의 확장판이다. 그래서 vue에서 하던 것들을 그대로 하되 nuxt에서만 추가된 속성, 기능들이 있다.예) layout: {...}, head: {...}

2021년 8월 1일
·
0개의 댓글
·

layouts: 레이아웃도 여러 개일 수 있다.

로그인된 유저의 레이아웃, 로그인 하지 않은 유저의 레이아웃, 관리자의 레이아웃 등...

2021년 8월 1일
·
0개의 댓글
·

:key에 index를 써도 되는 경우, 안되는 경우

key에 들어있는 값은 화면을 다시 그려야할지 말지 판단하는 기준이 된다.index가 변하지 않는 경우에는 key에 index를 넣어도 괜찮을 듯! 예: \[1, 2, 3, 4, 5] 라는 배열이 있을 때 이 배열의 원소가 계속 늘어나거나 수정만 될 때. 계속 늘어나거

2021년 8월 1일
·
0개의 댓글
·

자식 컴포넌트에 데이터 전달하는 2가지 방법

props로 전달slot 사용: 여는 태그, 닫는 태그 사이에 또 다른 태그를 넣어준다. 해당 자식 컴포넌트에 가서 새로 추가한 태그가 들어올 자리를 <slot>이라고 적는다. slot을 여러 개 사용할 수도 있고, slot에 이름도 줄 수 있고, slot 기본값

2021년 8월 1일
·
0개의 댓글
·

export default...

export default .. : 한 파일에서 가장 중요한 딱 하나만 export default.. 붙인다.나머지 자잘한 것들은 export const number 이런 식으로 여러 개 만들 수 있다.

2021년 7월 30일
·
0개의 댓글
·

object dynamic property

vue에서의 동적 속성

2021년 7월 30일
·
0개의 댓글
·

Vue.set & this.$set

vue에서 데이터를 변경하면 그에 따라 화면도 업데이트 된다고 했다. 그런데 배열로된 데이터를 인덱스로 접근하여 업데이트 했는데 화면은 그대로인 경우가 있다. 이럴 때는 Vue.set 또는 this.$set을 사용하여 배열 데이터의 인덱스를 사용하여 데이터를 업데이트

2021년 7월 30일
·
0개의 댓글
·

vuex

vuex는 store 파일이 여러 개여도 괜찮다.

2021년 7월 30일
·
0개의 댓글
·

EventBus

EventBus: 이벤트를 중앙에서 통제Vuex는 데이터를 중앙에서 통제

2021년 7월 30일
·
0개의 댓글
·

async

모든 함수 앞에는 async를 붙일 수 있다.async는 await을 사용하기 위해서, await은 promise 처리를 위해서 사용.async & await은 콜백 hell에서 벗어나게 해줌. 또는 비동기 작업을 깔끔하게 처리하거나.

2021년 7월 21일
·
0개의 댓글
·

vue-devtools & 성능

크롬 확장 프로그램을 설치하면 사용할 수 있는 vue-devtools의 기능 중에 1초에 몇 프레임이 그려지는지, 퍼포먼스가 어떤지 보여주는 탭이 있다. Frames per second: 초당 60프레임 이하면 눈에 조금 버벅거리는게 보이기 때문에 최소 초당 60 프레

2021년 7월 21일
·
0개의 댓글
·

Lifecycle

없다가 생기는 순간(아직 화면에 보이기 전임)에 created()데이터나 computed 다 계산하고 실제 화면에 그려지는 순간에, 화면에 보인 후에 mounted()데이터가 바뀌거나 해서 화면이 바뀔 때, 화면이 다시 그려질 때, updated()컴포넌트가 화면에서

2021년 7월 21일
·
0개의 댓글
·

template 사용하기

단순히 감싸는 용도로 div를 사용했다면 div 대신에 template을 사용할 수 있다.다만 가장 상위 태그는 template을 사용할 수는 없다.

2021년 7월 20일
·
0개의 댓글
·

v-show와 v-if

v-show: dom이 생성되어 있고 그 요소에는 display:none이 적용되어 있음.(태그는 있으나 안보일뿐)v-if: 화면에 아예 없음(태그 자체가 없음)태그 하나가 있냐 없냐는 전체 레이아웃 구조에 영향을 줄 수 있기 때문에 태그의 유무는 중요하다.

2021년 7월 20일
·
0개의 댓글
·

computed 사용하기

조금이라도 data들이 가공된다거나 data가 그 자체로 사용되지 않고 data에 뭔 짓(?)을 해야한다! 라고 하면 computed로 사용하자computed는 성능과 관련이 많기 때문에 신경 쓰는 것이 좋다고 한다. 그리고 data가 바뀌면 computed도 알아서

2021년 7월 20일
·
0개의 댓글
·

RxJS 1

데이터를 Observable로 변경오퍼레이터를 통해 변경 또는 추출 또는 여러 개의 Observable을 결합 또는 분리원하는 데이터를 처리할 Observer를 생성Observable의 subscribe를 통해 Observer를 등록Observable의 구독을 정지하고

2021년 7월 19일
·
0개의 댓글
·

dom 요소 직접 접근할 필요가 있을 때: ref

데이터는 아닌데 직접 html 태그에 접근해야 하는 경우에는 ref를 사용한다. 이제 위 input태그는 vue에서 'answer'라는 이름으로 접근할 수 있게 된다. (this.$refs.answer 이런 식으로 접근)

2021년 7월 14일
·
0개의 댓글
·

입력하는 값과 data를 연결해주는 v-model

input에서 바뀌는 값을 data에도 받고 싶다...? -> v-modelv-model이 input과 data를 연결하는 것임.

2021년 7월 14일
·
0개의 댓글
·

vue 1

데이터만 잘 컨트롤하면 뷰가 화면은 알아서 바꿔준다.그러니 데이터(data) 잘 만들고, 메소드(methods) 잘 만드는 것에 집중해야 한다. 그리고 v-on, v-if 처럼 'v-'가 붙은 속성의 따옴표 안에는 자바스크립트 코드를 작성할 수 있다.

2021년 7월 14일
·
0개의 댓글
·

v-model = ? + ?

v-model = v-bind:value + v-on:input아직 vue가 어색하니 일단 이렇게 외운다..........

2021년 7월 11일
·
0개의 댓글
·