VUE (12) 썸네일형 리스트형 [ Vue ] 이미지 삽입시 변수, 절대경로 사용하기 ( with v-for ) @로 src내 파일 절대경로로 사용 이미지 경로가 src/assets/images/IMG1.png 일때 vue 에서는 @/assets/images/IMG1.png 로 src를 절대경로로 사용 할 수 있다. 그래서 아래와 같은 방법으로 이미지를 삽입 할 수 있다. 변수를 사용한 절대경로 사용 하지만 변수를 사용하거나 v-for로 index값을 이용하거나 하는 등의 경우에는 위처럼 적용하면 이미지가 제대로 나오지 않는것을 볼 수 있다. 아래의 예제가 위처럼 사용하고 변수만 넣었을 경우이다. 1. 미작동 예시 사진을 보면 제대로 뜨지 않는것을 확인 할 수 있는데, Element에서 확인해보면 src에 @가 포함된 절대경로 자체가 들어가 버렸다 2. 작동 예시 이럴때는 위의 형태로 require을 추가해 변.. promise를 이용한 api 순차 반복 요청 보내기 (with - vue ,axios) for문으로 api를 호출 하는 경우 순차적으로 반복 호출하는 경우를 적용해야하는 경우가 생겼다. api호출이 잦아 트래픽이 높아지면 서버가 뻗어버리는 상황… 😅..? 1초 간격으로 api 반복 요청 처음에는 setTimeout으로 1초 간격을 두고 요청을 보냈다. timeRequest(){ const arr = ['첫번째','두번째','세번째','네번째'] arr.forEach((titem, index) => { setTimeout(function() { this.getRes(titem) }, 1000 * (index + 1)) }) } getRes(){ // api 호출 함수 this.axios.post("api주소",{ num }) . . } arr를 순회하면서 그 값을 순차적으로 api의 body.. [ Vue ] ref 사용해서 클릭이벤트 적용하기 1.Ref란 DOM에 접근할때 사용하는것이 ref이다. 아래와 같은 형태로 element에 Ref로 값을 지정하고 그 값으로 해당 element에 접근이 가능하다. Click! //ref로 dom에 접근 this.$refs.click 사실 Vue파일의 template 안에서 해당 element에 @click="clickEvent"를 적용하면 되지만, 2. 내가 이 방법을 사용한 이유는 더보기 Ant Design of Vuef를 사용하여 화면에 그려진 checkbox select가 내 코드에 존재하지 않아서 js로 dom을 선택해 click을 제어해줘야 하는 경우가 생겨서 찾아서 적용한 방법이다 🤧그리고 어쨋든 dom에 직접 접근하는건 지양해야 한다고 한다 3. 사용법 특정 element를 눌렀을때 but.. [ Nuxt ] nuxt-link 다양하게 사용하기 ! ** 본글은 nuxt에 대한 기본적인 설명이 없으므로 nuxt에 대해 알고계셔야 도움 될 내용입니다 ! ** 페이지를 연결할때 (이동시킬 때 ) 사용하는 는 와 같은 역할을 한다. 의href와 같이 to를 이용해 형태로 사용한다 화면에 그려지고 난 뒤에는 아래와같이 a태그로 보여진다 이름을 가진 라우터를 사용할때나 데이터 값을 넣어 사용할때에는 v-bind:to=".." 를 사용한다 Props 사용하기 1 . replace ( 기본값 false ) 클릭할 때 router.push() 대신 router.replace()를 호출 뒤로가기를 하더라도 히스토리 레코드를 남기지 않으므로 이전 화면으로 돌아가지 않는다 2 . append ( 기본값 false ) 항상 상대 경로가 현재 경로에 추가된다. ex ) 예.. [ Nuxt ] layout 여러개 만들어 새로운 레이아웃 적용하기 ** 본글은 nuxt에 대한 기본적인 설명이 없으므로 nuxt에 대해 알고계셔야 도움 될 내용입니다 ! nuxt의 디렉토리 중 layouts에 대해 알게된 부분이 있어서 정리하고자 한다 defalut만 아니라 다른 형태의 layout도 사용이 가능 하다는점! 전역으로 사용하는 컴포넌트가 있어서 이걸 어떻게 빼야하나 싶었는데.. 또다른 layout용 vue파일을 만들어서 그 파일에 빼고싶은 컴포넌트를 빼고 정의해주고 사용하면 되겠지 🤤 일단 layouts은 아래와 같은 형태로 사용하며 vue에서 app.vue 처럼 화면의 base가 되는 부분이다. 에 해당하는 위치에 page며 conponent들이 불려와서 뿌려진다. layouts > defalut.vue layouts > error.vue layout의.. [ Vue ] emit 한줄로 사용하기 - @click.self v-on:click.self 내부의 자식 요소들이 존재하는 경우 클릭된 요소가 해당 엘리먼트와 일치하는 경우에만 이벤트에 바인딩된 함수를 호출 이벤트 버블링 등의 간접적인 클릭 요소가 발생하여 함수 호출이 한 번이 아닌 다수가 일어나는 문제를 방지할 수 있다. 주의할 점은 클릭 영역에 자식 영역이 포함된 경우 당연히 함수가 동작하지 않는다 상위컴포넌트 아래의 에서 상위컴포넌트의 내용은 아래로 둘다 동일하다 (이벤트를 받는 상위 컴포넌트) 하위컴포넌트 before 하위 컴포넌트에서 상위컴포넌트로 간단한 이벤트를 전달할때 기존에 작성했던 코드는 아래와 같다. 취소 간단한 기능인데 저렇게 밖에 할 줄 몰라서 methods에 emit으로 이벤트를 올려 보내는 코드를 따로 작성해두었다 하위컴포넌트 after 하위.. [ Vue ] 컴포넌트 내에서 라우터 변경 감지하기 문제 화면이 바뀌면 메뉴창이 닫히는 부분 구현 중, 모바일 메뉴는 누르면 화면을 차지하면서 뜨는 메뉴였는데 path자체가 바뀌는 경우는 재렌더 되면서 메뉴가 닫혔으나 query만 바뀌는 경우에는 렌더가 일어나지 않아서 메뉴가 닫히지 않아 이러면 일일히 닫아주는 함수를 작성해야 하나 싶었다. this.$route를 console에 찍어 본 결과는 위와 같았다 해결 결론적으로 route가 변경되는 순간을 감지해서 메뉴창을 닫아주기로 했다. 그리고 모바일에서만 일어나면 되는 일이므로 괜히 pc에서 리소스 낭비가 될까봐 width값을 조건으로 걸어주었다 export default { watch:{ $route(){ const width = window.innerWidth if (width [ Vue ] Vue Router 사용하기 ( + query , params ) Vue Router 라우팅이란 웹 페이지의 간의 이동방법을 의미. Vue Router는 1) URL에 따라 보여줄 컴포넌트를 연결해 놓고, 2) 해당 URL로 이동했을때 연결된 컴포넌트를 보여준다. Router 설치 npm i vue-router --save routes 파일 생성 설치 후 routes.js 파일을 만들고, 사용할 컴포넌트들과 vue, vuerouter 등을 import 해준뒤 ulr과 컴포넌트들을 연결해준다. import Vue from 'vue' import VueRouter from 'vue-router' import Main from '../views/Main.vue' // route에 등록할 컴포넌트들 등록 Vue.use(VueRouter) export const router =.. [ Vue ] CLI로 SPA프로젝트 생성하기 + Vuetify Vue CLI Vue CLI 는 Vue.js 를 생성, 관리, 실행할 수 있는 Command Line Interface 이다. Vue CLI 를 사용하면 Webpack, Babel, Lint, TypeScript, Vue Router, Vuex 등의 다양한 피쳐들을 선택해서 프로젝트를 생성할 수 있다. CLI 설치 npm install -g @vue/cli 프로젝트 생성 //vue create 생성할프로젝트이름 vue create new-project-name “Please pick a preset:” 선택옵션에서 나오면 “default(babel, lint)” 항목을 선택한다. 프로젝트 실행 npm run serve Vuetify Vuetify는 Vue.js를 위한 개발된 디자인 프레임워크이다. Rea.. [ 디자인패턴 ] FLUX와 FLUX가 생겨난 이유 뷰 내에서 Redux처럼 전역 상내 관리를 할 수 있는 기능인 Vuex를 공부하면서 Flux패턴에 대한 이야기가 나와서 정리하려고 한다. 실제로 Vuex는 Flux 패턴에 영감을 받아 만들어졌다고하며, Flux는 ReactJS의 Redux의 디자인패턴이기도 하다. 글을 읽기 전에, 일단 MVC패턴이 뭔지 알아야 하므로 전에 작성해 두었던 아래의 글을 읽고 Flux에 대해 이해하는것이 좋다. [ 디자인 패턴 ] MVC, MVP , MVVM 디자인 패턴이란 ? 디자인 패턴이란 프로그램이나 어떤 특정한 것을 개발하는 중에 발생했던 문제점들을 정리해서 상황에 따라 간편하게 적용해서 쓸 수 있는 것을 정리하여 특정한 규약을 통�� im-designloper.tistory.com Flux 모델이 생겨난 이유 MVC.. 이전 1 2 다음
