vue

반응형
error & basic

vue, react) infomation #2309

# vue stop @click.prevent.stop="함수명(넘기고싶은값)" 컴포넌트 내에서 값을 불러올 경우에는 매개변수가 필요하지 않다. 상황에 따라서 넣기! 참조: https://engineer-mole.tistory.com/391 @click.prevent : 원래 동작하는 클릭 이벤트 막고 , 지정한 메소드로 이벤트 핸들링 수행 🙄언제썻을까? - a태그 안에 특정 태그 클릭시 다른 이벤트를 실행하고 싶을 때 그 태그에 @click.prevent 사용 # 콘솔창에서 vue 막혔을경우 보고 싶을때 window.$nuxt.$store.state.modules.app # react dom - 리액트 돔은 = 클라이언트에서 작동하기 위해서 사용 - 따라서 nextjs13 버전에서 리액트 훅을 사용하기..
Vue

nuxt.js

#nuxt.js 뷰 서버사이드 랜더링을 구현할 때 가장 많이 쓰는 프레임워크 SEO 전달 서버 사이드 렌더링이란 웹 페이지의 내용을 서버에서 모두 작성해서 클라이언트(브라우저)로 보낸 뒤 화면에 그리는 방식을 의미 쓰는이유 : 검색 엔진 최적화,빠른 페이지 렌더링 ssr이 무조건 좋은건가? 서버쪽에서 환경 구성이 되므로 서버빌드에 대한 이해도가 필요하다 node.js 환경에서 실행 되므로 브라우저 관련 api 다룰 시 주의 해야한다. 또한 beforeCreate나 created에서 window, document같은 브라우저 객체에 접근할 수 없다. 😉컴포넌트가 최초로 생성되는 시점이 브라우저 아니라 Node.js 환경이기 때문에 beforeCreate나 created에서 브라우저 객체를 접근할 수 없습니..
error & basic

vue) component height #2307

# 컴포넌트에서 높이 구하기 1. 컴포넌트에 ref="링크명" 붙이기 2. this.$refs.링크명 으로 접근 3. 높이구하기 - mounted이후에 접근해야 undefined 오류가 안뜬다. private 함수명() { //이벤트 const 높이 = this.$refs.링크명.$el.clientHeight; } # html 요소에서 높이 구하기 1. 필요한 html 에 ref="링크명" 붙이기 2. this.$refs.링크명 으로 접근 3. 높이구하기 - 지시자 $el 없이 attribute로 바로 접근한다. private 함수명() { //이벤트 const 높이 = this.$refs.링크명.clientHeight; } 👀느낀점 코드를 짜다가 추가하여 어떠한 상황을 만들었을때 어떠한 이유로 안될경우..
error & basic

vue 생명주기 #2306

#반복적으로 일어나는 이벤트 파괴 timer나 setTimeout 등은 컴포넌트가 사라지기전 없애줘야한다. 왜냐하면 다른컴포넌트에서 가서도 이벤트가 계속 발생하고 있는 문제가 생긴다. // vue2 this.$once('hook:beforeDestroy', () => { //사용한 타이머 등 }); *뷰 라이플싸이클 : https://wormwlrm.github.io/2018/12/29/Understanding-Vue-Lifecycle-hooks.html https://v2.vuejs.org/v2/api/#Options-Lifecycle-Hooks API — Vue.js Vue.js - The Progressive JavaScript Framework v2.vuejs.org //vue 3 의 경우 bef..
error & basic

computed #2306

#computed 1. vue3 state 선언문 내에 computed 속성에 대한 선언 구문을 추가하는 것으로 변화 const 변수명 = computed(() => 계산식; // Composition api가 추가 되면서 함수형식으로 가져옴 2. vue2 - class 컴포넌트일 경우 getter 함수 - 나의 경우 class 형식으로 만들었기 때문에 아래와 같이 작성하였음 - class가 아니라면 함수형으로 적으면 된다. get 함수명(): 리턴타입 { // 리턴타입 예) string - 타입스크립트를 사용하지않을경우는 타입을 적지 않아두 됨 return 조건문 ? true일때값 : false일때 값; // 3항 연산자 } ++ 컴포넌트 내부에서 함수명으로 사용할 수 있다. 예) v-if="함수명" ..
Vue

Helper함수와 store 모듈화

# Helper함수(헬퍼) 1. state -> mapState 2. getters -> mapGetters 3. mutations -> mapMutations 4. actions -> mapActions > vuex에 있는 헬퍼를 로딩 1) 따로 js파일(게터나 뮤테이션만 모아둔 js파일)로 만든 후 export한다. - 나의 경우 "./getters" 으로 만들었으나 하나의 js 파일로 만들어도 된다. const getTotalNum = (state) => { return state.todoItems.length; }; const getTrueNum = (state) => { //인자는 state const trueItem = state.todoItems.filter((item) => item.com..
Vue

Vuex 상태관리 라이브러리

Vuex - 상태관리 라이브러리 컴포넌트를 효율적으로 관리하는 라이브러리 주요속성 : state, getters, mutations, actions 🙌 1. state = data : 컴포넌트 간에 공유하는 데이터 또는 상태 2. getters = computed : 연산된 state 값을 접근하는 속성 / 캐싱하는 속성도 있음 3. mutations = method : state값을 변경하는 이벤트 로직, 메서드 / 인자가 있다면 getters보다 muations 사용을 권장 👀state를 직접변경하지 않고 뮤테이션을 변경하는 이유 : state를 직접변경하면 어느 컴포넌트에서 해당 state를 변경했는지 추적하기 어렵기 때문에 commit을 이용하여 뮤테이션을 변경함(반응성, 디버깅, 테스팅혜택) a..
Vue

Vue transitions

#트랜지션 모달창을 만들다가 트랜지션을 배웠다. 여태껏 자스나 제이쿼리로 짜던걸 vue는 아주쉽게 트랜지션 클래스라는 것을 제공한다 마치 aos 플러그인 마냥 클래스를 꽂아주고 그에 따른 효과만 집어 넣으면 된다. 그렇다고 aos 플러그인 처럼 효과가 정해져 있는 것은 아니다. 본인이 css 애니메이션을 만들면 된다. 1.단일로 쓰일경우 Toggle hello 트랜지션이 필요한 부분을 감싼 후 name을 준다. 그리고 전환클래스를 붙여서 css를 작성하면 끝이다. (아래코드에서 name으로 들어간 fade를 빼면 그뒤에 부분이 트랜지션클래스이다.) .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-l..
Vue

Vue slot , scoped slot

#slot 슬롯을 사용하면 등록한 컴포넌트에서 재정의가 가능 (컴포넌트 안에서 ui부분을 재사용하기 위해서 조각낸 부분이라고 이해하면 쉬움) = 컴포넌트 템플릿의 재사용성을 늘려주기 위한 기능 대표적인 예로 모달이나 버튼 등에 사용된다. 1.정의하기 - 버튼이나 모달 뭐든 좋다.(기본레이아웃 이라고 생각하고 만들면 편하다.) default header default body default footer // slot name="body 하고 등록한 후 그안에 들어가는 내용은 디폴트내용이 된다. 2.사용하기 경고! 할일을 입력 해 주세요 by.Sunny 이것을 필요한 부분에 불러와서 import하여 사용한다 그 안에 들어가는 내용은 본인이 작업하는 ui에 맞게 변경가능하다(태그도, 텍스트, 이미지 무엇이든지..
Vue

vue 투두리스트(feat.인프런)

#투두리스트 만들기 1.npm install -g @vue/cli (해당프로젝트는 vue2) 2.vue create 프로젝트명 $ cd vue-todo $ npm run serve 4.컴포넌트 만들기 - 파스칼케이스법으로 작성 - 첫단어는 대문자로 시작 5.컴포넌트 등록하기 - App.vue 6.public - index.html 에 뷰포트, 파피콘 등 메타태그와 필요한 font, icon 등록하기 - cdn 이용 1 : https://www.favicon-generator.org/ - 파비콘만들기 2 : https://fonts.google.com/ - 구글 웹폰트(요즘은 눈누도 많이씀!) 3 : https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_..
728x90
반응형
dev_써니
'vue' 태그의 글 목록
상단으로
time

티스토리툴바