본문 바로가기

Vue

[Vue3 + Scss] 어드민에서 설정한 타입별로 전체 디자인 포인트컬러값 다르게 하기(--root)
이슈 어드민에서 타입을 정하면 타입에 따라 프론트의 전체적인 포인트 컬러를 변경해달라는 요청이 있었다. 원래는 scss는 app.scss 하나를 vite.config.ts에서 부르는걸로 되어있었는데 구조 변경이 필요했다. 해결 scss는 크게 2가지로 볼 수 있는데, app.scss는 divide폴더안의 파일들을 import한 파일이고 main.ts에서 부르고, global.scss는 common폴더안의 파일들을 import한 파일이고 vite.config.ts에서 부른다. app.scss와는 다르게 global.scss는 vite.config.ts에서 부르므로 서버사이드가 돌면서 실행되는데, 이때 컬러변수는 동일하게 설정하고 :root를 위에 선언하여 특정 클래스가 있을때만 바뀌도록 하였다. 그리고 -..
[Vue3] VUE 폰트 적용하기 (font.scss에서 font-face 설정하는데 폰트 설정이 제대로 안될때)
이슈 [현재프로젝트 구조] src └ [DIR] assets └ [DIR] fonts └ [DIR] styles └ [DIR] common └ font.scss └ app.scss 현재 vue3 프로젝트 폴더구조는 위와 같다. 그런데 /src/assets/styles/font.scss에서 font-face 설정을 하고 Monserrat 폰트를 사용하고 싶은데 실제 렌더링 된 모습을 보면 아래처럼 computed탭이나 network탭에서도 폰트를 제대로 불러오지 않는 것을 확인할 수 있었다. 해결 network탭의 headers를 확인해봤더니 ~@ 하면 src를 찾아야하는데 찾지 못하고 그대로 내려온 모습을 확인할 수 있었다. font.scss에서 /src/assets 로 변경해주었더니 정상적으로 나오는 ..
[Vue3] vite.config.ts 에서 scss 설정하는 방법
이슈 vue.config.ts 나 webpack.config.ts 에서 매번 설정하는 scss를 설정하려는데 이번에는 typescript가 같이 들어가 있는 프로젝트라 vite.config.ts에 설정해줘야했다. 해결 기존 vue.config.ts 에 하는 방법과 거의 같았다. app.scss를 연결시켜주었더니 모든 파일에서 app.scss에서 선언한 변수, rem설정 등을 동일하게 사용할 수 있었다. //vite.config.ts export default defineConfig({ css: { preprocessorOptions: { scss: { additionalData: '@import "/src/styles/mobile/app.scss";' } } }, }); vite.config 공식문서: ..
[Vue3] Provide와 inject 한 곳에서 정리하여 불러오기
이슈 공통으로 정의된 alert문구를 한곳에서 정리하여 불러와서 사용하고 싶음. 해결 Provide와 inject *Provide와 inject란 ? 컴포넌트간에 통신하려면 부모 - 자식 이런식으로 거쳐야하는데 단방에 통신할 수 있는 것이라고 보면 된다. 따라서 1. main.ts에서 Provide로 메세지를 가지고 있는 파일를 불러온 후 (language에 따라서 한국어, 영어), 2. main.ts는 완전 공통 ts니까 모든 ts에서 접근할 수 있으므로 3. 각각의 페이지에서 inject로 가져와 사용하려고 ! 하고 보니까 그것도 번거로워서 ==> message/index.ts 에서 inject로 가져와서 그것을 export해주고, ==> 각각의 페이지에서는 message/index.ts 만을 imp..
[Vue3] 엑셀 다운로드 api 통신하기 ( excel blob )
이슈 api통신으로 excel download를 하는데, 한글이 깨진 형태의 데이터가 내려오고, postman에서 테스트를 해서 다운받기를 누르면 정상적인 엑셀로 나오는데 실제 내가 짠 코드로 열면 알수없는 형식의 파일이라고 떴다. 해결 1. request 통신 시에 responseType: 'blob'를 넣어주어야한다. 2. 받은데이터를 Blob를 이용하여 변형 한다. 3. 가상 a 태그를 사용하여 a태그의 download기능을 사용하여 다운로드한다. 1. request 통신 시에 headers 안에 responseType: 'blob'를 넣어주어야한다. const result = await this.request({ ...api, responseType: 'blob' }, options); 2. 받은..
[vue3] teleport란 ?
모달 teleport를 하나 생성했는데, 컴포넌트로 따로 빼서 사용하였다. 사용방법 공지사항페이지 ... 제이쿼리처럼 .이나 #으로 위치를 지정해줄 수 있다. 그리고 주석위치로 모달 컴포넌트 내용이 들어오게 된다. (teleport 안의 내용이 지정한 위치로 들어오게됨)
[Vue3] v-html 안쓰고 줄바꿈 처리하기 (typescript warning: 'v-html' directive can lead to XSS attack)
이슈 'v-html' directive can lead to XSS attack 테이블 th 에 제목이 데이터로 들어오는데, v-text로 썼더니 br태그는 그대로 출력되고 \n은 줄바꿈이 되지 않았다. 그래서 v-html로 바꾸어 썼더니 XSS 공격에 약하다고 타입스크립트에서 에러가 떴다. 해결 1. CSS로 해결 (white-space: pre-line) 해당 th 에 css로 white-space: pre-line 하고 \n으로 바꿔주었더니 정상적으로 줄바꿈이 되었다. 2. \n 기준으로 split해서 배열만들고 for문 돌리기 {{ text }} '마스터\n셀러' 라는 데이터라면 split을 사용하여 ['마스터', '셀러'] 로 쪼갠 후 html에서 v-for로 반복을 돌려서 첫번째가 아니면 뒤에..
[Vue3] v-model 삽질기 (양방향 통신)
이슈 출처: https://v3.vuejs.org/guide/migration/v-model.html#_3-x-syntax 위에는 vue3 공식문서에 있는 내용인데 이걸 제대로 이해하지 않고 넘어가서 삽질을 했다.. v-bind는 단방향통신, v-model은 양방향 통신이라는걸 알고있으면서도 저걸 대충 보고 v-bind하면 컴포넌트에서 emit으로 update:modelValue하면 되는구나~ 하고 시작했는데 watch를 걸어놔도 값이 변경되는게 감지가 되지 않았다. 기존에 내가 생각했던 내용 부모 컴포넌트 자식 컴포넌트 resetData이라는 데이터를 reset이라는 이름으로 전달 reset이라는 props로 전달받음 resetData를 바꾸면 알아서 자식컴포넌트에 전달될것이라 생각 여기서 값을 바꾸고..
[Vue3] 배열 Array Watch 제대로 하는법 (lodash의 _cloneDeep)
이슈 배열안에 객체형태로 있는데 watch를 하니 변경하는 값을 찍어보는데 잘 동작하지 않았다. (계속 같은 값이 찍힘) 해결 lodash의 _cloneDeep을 이용하여 해결하였다. watch(()=> _cloneDeep(selectedList), (newValue, oldValue) => { console.log(newValue, oldValue) }, { deep: true } )
[vue3] 부모컴포넌트에서 자식컴포넌트로 보낸 데이터 값 변경 감지하기 (props 변경 감지하기)
이슈 부모 컴포넌트에서 자식컴포넌트로 props를 통하여 데이터를 보내서 값을 바인딩해놨는데, 그 데이터가 비동기로 업데이트 될 때 자식컴포넌트에서 데이터가 바뀐것이 감지가 되지않음. 해결방법 [부모컴포넌트] 데이터 전달 :depth-data 라는 props로 categories 데이터를 fb-depth-select 컴포넌트로 보냄. [자식컴포넌트] 1. props로 데이터 받아서 데이터 바인딩 2. watch로 props 값 변경 감지 전체소스 {{ depth.name }}
[Vue3 & typescript] component의 composables/ts 로 emit과 props 보내기
이슈 pc와 mo 버전에서 공통적인 부분은 함께쓰기 위해 composables에 ts를 따로 빼서 관리하는데, 빼는 과정에서 emit과 props가 잘 옮겨지지 않았다. vue파일경로: src/views/fb-depth-select.vue ts파일경로: src/composables/fb-depth-select.ts ts 파일 따로 빼기 전 vue 소스 src/views/fb-depth-select.vue 부모 컴포넌트로 보낼 emit을 만들고 (emit 사용하는 부분은 생략) 부모에서 받을 props를 따로 선언하였다. 파일분리 시도 (실패케이스) 1. vue 소스 > src/views/fb-depth-select.vue composables/fb-depth-select.ts 로 소스를 옮기고 fb-de..
[Vue3] vue에서 전체선택 체크박스 로직 구현하기 (checkbox select all)
전체선택 체크박스 만들기 기능구현 로직 1. 전체가 선택되면 판매대기, 판매중 모두 선택 2. 전체가 해제되면 판매대기, 판매중 모두 해제 3. 판매대기, 판매중이 모두 선택되면 전체 선택 4. 판매대기, 판매중 중 하나라도 해제되면 전체 해제 구현된 화면 See the Pen Untitled by JieunShin (@joannashin3) on CodePen. [소스 설명] 1. 전체선택 체크박스 html 전체 전체선택박스인데 v-model의 checkedAllComputed는 아래에서 computed를 사용하고 있다. (아래 js부분 참고) 2. 개별선택 체크박스 html {{ item.name }} js에서 받아올 checkedItems를 반복을 돌려 개별 체크박스를 만들었다. 각각의 input에..
[vue] directive 에서 상위 parent의 methods를 가져오고 싶을때
vue directive 에서 상위 parent의 methods를 가져오고 싶을때 vnode.context.함수명
[Vue3] 컴포넌트간 통신하기 vue2의 eventbus, Vue3에서는 mitt (emitter)
부모컴포넌트에서 자식컴포넌트로 이벤트를 보낼 일이 있어 eventbus를 사용하려는데, vue3에서는 사용하지 말라고 되어있어 어떤 방법을 써야하나 찾아봤더니 mitt 이라는걸 다운받아서 emitter 로 선언하여 사용하는 방법이 가장 많았다. 동작방법 1. store에 emitter선언해서 어느 컴포넌트간에 접근할 수 있도록 한다. 2. eventbus와 동일하게 보내는곳에서 emit / 받는 곳에서 on 으로 처리한다. Vue3 1. mitt 다운로드 npm i mitt 2. store의 state에 emitter 선언 import mitt from 'mitt'; //mitt 가져오기 export default createStore({ state: { emitter: mitt(), //emitter ..
[Vue2 vs Vue3] vue에 있는 ref 접근하기 ! this.$ref 사용하기 (template refs)
Vue2 vue2에서는 this.$refs로 가져온다. Vue3 vue3에서는 ref(null)을 선언하는데, 여기서 변수명은 꼭 위에 템플릿에서 사용하는 ref 이름과 동일하게 지정해야한다. ref는 mounted 전에는 없을 수 있으니 선언은 위에서 하되 mounted에서 value값을 담는다.
[Vue.config.js & SCSS] Vue2 / Vue3 에서 global scss 연결하기
1. 터미널에서 sass와 sass-loader 을 설치한다. npm i sass sass-loader --save 2. src 밑에 styles 폴더를 만들고 app.scss 파일을 만든다. 3. vue.config.js에서 css 부분을 추가해준다. module.exports = { lintOnSave: false, css: { loaderOptions: { scss: { additionalData: `@import "~@/styles/app.scss";`, //VUE CLI에서 @는 SRC 바라봄 } } }, } VUE CLI 에서 @는 src 폴더를 바라보게 되어있다. 현재 src폴더안에 styles 폴더가 있고, styles 폴더안에 app.scss가 있다. 나머지 scss는 app.scss에서..
[Vue2 vs Vue3] 기본내용정리 3 (computed와 methods)
Vue3 카운트: {{ count }} 더블카운트 computed: {{ doubleCount }} 더블카운트 computed: {{ doubleCount }} 더블카운트 method: {{ doubleCountMethod(2) }} 더블카운트 method: {{ doubleCountMethod(2) }} 카운트 숫자 증가 computed methods methods Computed vs Methods Computed 1. computed는 ref, reactive 같이 변하는 값에만 사용이 가능하다. 2. 값을 저장하고 있기때문에 template에서 2번 사용한다고 해서 console이 2번 찍히지 않는다. Methods 1. 매개변수로 넘겨서 사용이 가능하다. 2. 위에서 부를때마다 함수가 실행되기 ..
[Vue2 vs Vue3] 기본내용정리2 (emit과 props)
1. 자식컴포넌트에서 부모컴포넌트로 이벤트를 전달할 수 있는 emit Vue3 context.emit() / emits emit은 자식에서 부모로 이벤트를 전달할때 매우 자주쓰이는데 vue2와 다른것은 Vue.$emit 이 아닌 context.emit()으로 전달한다는 것이다. 물론 context의 emit을 바로 사용하기 위에 { emit } 으로 받아와서 emit("이벤트이름", 전달할 데이터)로 사용해도 된다. 또 하나 다른점은 emits에 이벤트들을 정리해준다는 점이다. 1. setup의 인자값으로 context를 받는다. 2. context.emit("이벤트 이름", "전달할 데이터")를 여기에 넣는다. 3. emits에 정리해준다. ** 부모컴포넌트에서 받는 부분은 vue2와 동일 자식 컴포넌..
[Vue2 vs Vue3] 기본내용정리1 (Fragment / setup / ref,reactive)
Vue2 vs Vue3 1. Fragment vue3에서는 template 태그 안에 꼭 하나의 태그로 감싸지 않아도 된다. 2. setup() 이 안에서 변수, 함수 선언 ! 사용할 것은 return 시키기 this는 더이상 사용하지 않는다. 3. ref와 reactive 변하는 데이터는 그냥 선언하면 안되고 ref로 감싸서 선언하기 기본 자료형(숫자, 문자 등)이면 ref로 감싸고 객체나 배열이면 reactive로 감싸기 1. Fragment Vue3에서는 template 태그 안에 꼭 하나의 태그로 감싸지 않아도 된다 logo hello world logo hello world 2. setup() 이 안에서 변수, 함수 선언 ! 사용할 것은 return 시키기. this는 더이상 사용하지 않는다. ..
[Vue.js2] 무한스크롤 적용하기
사용한 플러그인: vue-observe-visibility npm i vue-observe-visibility https://www.npmjs.com/package/vue-observe-visibility vue-observe-visibility Detect when an element is becoming visible or hidden on the page. www.npmjs.com
[Vue.js2] 체크박스에 v-model 걸어놨는데 값 변경이 감지되지 않을때
문제상황 해결방법 id와 for을 넣어주기 ! ​

티스토리툴바