Vue 9

[nuxt/vue]백앤드 프록시 서버 설정하기 (vue.js 타 도메인 CROS 에러 해결하기)

현재 상황은 프로젝트 파일에서 frontend 서버는 localhost:3000 이용하며, backend 서버는 localhost:3001 이용 중이다. 이럴 경우 frontend 서버에서 axios에서 호출을 할 경우 CROS error가 발생했다. frontend는 nuxt.js 이용 중인 상황일 때 해결 방법이다. 📌Nuxt Proxy 이용하기 1️⃣설치하기 nuxt에서 간편하게 프록시를 설정을 할 때 이용하는 라이브러리를 먼저 설치해주자 https://www.npmjs.com/package/@nuxtjs/proxy @nuxtjs/proxy proxy support for nuxt server. Latest version: 2.1.0, last published: 2 years ago. Start ..

FrontEnd/Vue.js 2022.11.28

[vue] v-if 내 조건으로 filter로 데이터 변환 후 비교하기

vue.js에서 v-if 조건 중 filter를 통해 정제된 데이터 값이랑 비교하고 싶을 때가 있다. 📌v-if문 시 filter로 이용한 데이터 값 조건으로 넣어주기 v-if="$options.filters.필터명(필터파라미터)" 샘플 코드 filter를 통해서 user레벨을 확인한 뒤 그에 따른 인사말을 v-if를 이용해서 출력하는 코드이다. 로그인회원 레벨 : {{$options.filters.levelCheck(userList, loginUser.id)}} 안녕하세요! 정회원이시네요! 안녕하세요! 준회원이시네요! 만약 필터를 통해서 준회원인지 정회원인지 확인하고 그에 맞는 텍스트를 보여줘야 하는 상황이라면 회원 레벨을 체크하는 필터를 만든 뒤 v-if에서 user를 확인해서 출력된 level 값에..

FrontEnd/Vue.js 2022.08.05

[Vue/nuxt] mounted에서 $ref undefined 해결하기(<client-only> 이슈)

📌최근 발생한 문제점 $ref undefined mounted()에서 $ref에 접근을 해서 무언가를 적용을 하려고 해 봤는데, $ref에 접근이 안되고 undefined가 뜨는 오류가 발생했다. 무엇이 문제인지 찾아본 결과 안에 있는 $ref에 접근을 할 때, 초반에 undefined가 발생할 수 있다는 점을 찾아냈다. 이러한 상황은 왜 발생하는걸까? 먼저 이 문제를 알기 위해서는 를 왜 사용하는지를 알아야 했고, SSR과 CSR의 차이를 먼저 이해해야 되어서 오늘은 이 부분을 정리해보기로 했다! ⚙️SSR이란? Server Side Rendering이라고 해서 Server에서 렌더링이 된 HTML 화면을 만들어서 보내주는 방식을 말한다. SSR로 처리가 된다고 하면 모든 리소스를 서버에서 랜더링 한 ..

FrontEnd/Vue.js 2022.05.02

[Vue.js/Nuxt] 구글애널리틱스4 vue-gtag로 연동하기

✔️구글 애널리틱스 UA 종료 유니버설 애널리틱스(Universal Analytics, UA) 버전이 23년 7월 1일 이후부터 서비스가 종료된다는 안내가 왔다. 유니버설 애널리틱스 서비스 종료시점에서는 더 이상 신규 데이터 수집 및 조회가 안되기 때문에 구글 애널리틱스 4로 이전을 해야 된다. 🙅‍♀️vue-analytics 지원 중단 기존 지원하는 vue-analytics에서도 더 이상 지원이 안된다고 안내 문구가 떴다. 구글 애널리틱스 analytics.js 자체가 중단되고, gtag.js로 수집을 하라 권고가 되면서 vue-analytics 말고 vue-gtag를 이용을 하라고 안내가 되어있다. 📊vue-gtag https://www.npmjs.com/package/vue-gtag vue-gtag..

FrontEnd 2022.04.27

[vue.js] image 없을 경우 default 이미지 처리하는 방법 @error 사용하기

Vue.js 공부할 때 이미지 경로를 하드코딩하지 않고 변수로 연결했던 방법을 공유했었다. https://ordinary-code.tistory.com/85 [Vue.js] 이미지 경로를 변수, data 값, URL로 이미지 연결하는 방법 (require이용) vue.js에서 img 태그 내에 이미지를 특정 분기를 이용해서 해당 값에 맞는 이미지를 바꿔가면서 보여주고 싶을 때가 있다. 혹은 data에 선언한 변수명으로 img 이름으로 대체해서 보여주고 싶을 때 ordinary-code.tistory.com 오늘은 이미지 경로를 가져오다가 에러가 발생할 경우 default 이미지를 호출하는 코드를 공유해보려고한다. 😎img 태그 @error 활용하기 @error의 경우 원본 이미지가 깨지거나, 로드되지 않..

FrontEnd/Vue.js 2022.04.26

[Vue.js] ref undefined일 경우 해결 방법 (this.$nextTick)

🏷️Vue ref란? Vue에서 특정 컴포넌트나 HTML에 접근을 하고 싶을 때는 ref속성을 이용해서 접근이 가능하다. 먼저 아래의 코드로 예시를 보자. /page/ref.vue 상위컴포넌트 입니다. 하위 컴포넌트 클릭 이벤트 호출 /components/refComponent.vue 하위 컴포넌트 입니다. 상위컴포넌트 클릭 Count : {{count}} ref.vue에서 refComponent에 접근해서 하위 컴포넌트의 function을 실행하는 코드이다. 이럴 경우 하위 컴포넌트에 ref를 이용해서 컴포넌트 명에 접근한다 그다음 해당 컴포넌트에 methods에 등록된 clickCount를 호출해서 숫자를 올리는 코드이다. 이렇듯 ref를 이용하면 해당 컴포넌트에 손쉽게 접근할 수 있다. 🚩ref 사..

FrontEnd/Vue.js 2022.03.22

[vue] class(클래스) 조건에 따라 바인딩하는 방법(if, ifelse에 따른 class 변경)

개발을 하다 보면, 특정 조건에 따라서 Css를 변경해야 되는 상황이 있다. 이럴 경우 주로 Class를 변경시켜서 적용이 가능하다. Vue에서 클래스를 조건에따라서 설정할 수 있다. 👩‍💻Vue 조건부 Class 예시 만약 버튼을 클릭하면, 화면이 다크 모드와 라이트 모드로 변경되는 기능을 구현한다고 생각해보자. 라이트 버전일 경우 배경화면이 하얀색으로 보여야하고, 다크 모드일 경우 배경화면을 검은색으로 보여야 한다. 이럴 경우 조건별 Class를 주면 해당 기능 구현이 가능하자. 아래 코드를 보자 {{thema}} div class중 body를 가지고 있는 div를 thema-button을 클릭했을 때 다크 모드로 바꿔준다고 해보자. 1️⃣vue Class if 조건에 따라 바꿔주기 vue에서 조건에..

FrontEnd/Vue.js 2021.08.09 (1)

[JavaScript/Vue] 자바스크립트로 크롬 전체 화면 실행 및 종료하기

웹 애플리케이션을 구축할 때 모니터링 기능이 주요 기능이라면 전체 화면으로 하여 커다란 TV에 프로그램을 띄워놓고 보는 경우가 있다. 크롬에서는 사실 F11을 누르면 전체 화면이 되는 단축키가 있지만, 인터넷 환경에 익숙하지 않은 분들은 해당 기능이 있는지도 모르는 경우가 많다. 이런 분들을 위해서 애플리케이션에 내 크롬 전체 화면을 만들어주는 버튼으로 넣어줄 수 있다. 🌵버튼으로 크롬 전체 화면 만들어주기 샘플 코드 전체 화면 켜기 전체 화면 끄기 vue.js에서 data에 전체 화면을 감지하는 fullPage라는 data를 만든 뒤 버튼에서 전체 화면일 경우 버튼을 각 상황에 맞게 보여준다. 해당 버튼 클릭 시 document.fullscreenElement상태를 확인한다. 만약 전체 화면 상태이면 ..

FrontEnd/Javascript 2021.05.25

[nuxt/vue] nuxt store Classic mode deprecated 해결 방법

🐣 들어가기 전 어느 날 Nuxt로 만든 프로젝트에서 run server를 돌릴 때마다 이상한 경고문이 발생하기 시작했다. Classic mode for store/ is deprecated and will be removed in Nuxt 3. 무슨 에러이길래 이렇게 무섭게 여러 번 찍히는 것인가 에러가 찍히긴 하지만 프로젝트 상 기능에서는 특별히 큰 문제가 없어서 일단은 무시하고 있었으나, 지속적으로 콘솔 로그에 뜨다 보니 슬슬 신경이 쓰여 이번 기회에 알아보기로 했다. 💡 Store에서의 Classic Mode과 Module Mode Nuxt에서 store 기능을 활용하기 위해서는 /store 디렉터리 아래에 파일을 생성해야 한다. 해당 디렉터리 이름을 절대적이며 변경을 해서는 안되기 때문에 vue..

FrontEnd/Vue.js 2021.02.21