김평범's OrdinaryCode

UI상 한 화면에 많은 데이터를 이용할 때 carousel을 이용해 준다. vue carousel 라이브러리를 확인해 보면 가로, 세로 몇 개씩 콘텐츠를 보여줄지 변수로 지정을 하는데 이때 화면 크기에 따라서 자동으로 수정되는 UI를 만들어보도록 하겠다. 💛Vue Carousel 라이브러리 추천 https://www.npmjs.com/package/vue-slick-carousel vue-slick-carousel Vue Slick Carousel with True SSR Written for Faster Luxstay. Latest version: 1.0.6, last published: 3 years ago. Start using vue-slick-carousel in your project by r..

Nuxt 프로젝트 중에 nuxt-link 등 을 이용해서 페이지가 이동될 때 특정 페이지에서 이벤트를 발생해야되는 경우가 있다. 이런 경우는 watch 속성에서 $route를 바라보게 해서 이벤트를 발생시킬 수 있다. 🤔vue watch란? watch는 특정 데이터의 변화를 감지되면 특정 로직을 실행할 수 있다. $route watch 샘플코드 ... 위 코드를 이용하면, $route 즉 페이지가 이동될 때마다 해당 로직이 실행된다. to의 경우에는 현재 진입한 페이지의 속성이 나오며, from을 찍어보면 과거에 나온 페이지를 확인할 수 있다. 결과화면 콘솔 로그의 결과를 보면 지금 진입한 페이지인 index 페이지의 속성과 과거에 넘어온 페이지인 detail 페이지의 route 속성 값을 확인할 수 있..

💗vue $ref란? vue코드에서 DOM요소에 접근하기 위해서 사용하는 속성 HTML 예시 코드 Vue 접근 예시 코드 this.$refs.target; script 코드 측에서 html에 지정한 ref를 접근하는 방법은 위와 같다. 📒$refs접근 시 변수로 접근하기 refs의 경우 ID처럼 고유한 하나의 유닛을 접근해야 될 때가 있다. 만약 for문으로 10개의 refs를 생성한다면 이때는 변수를 이용해줘야 한다. {{i}} 위 코드로 10개의 div를 생성해주면, 각각 다른 ref속성을 갖는 DOM이 생성된다. vue 접근 예시 코드 selectRefs(i) { let targetRef = `target-${i}`; vm.$refs[targetRef][0]; } 그냥 텍스트로 접근할 때와 다른 점..

현재 상황은 프로젝트 파일에서 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 ..

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 값에..

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

✔️구글 애널리틱스 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..

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의 경우 원본 이미지가 깨지거나, 로드되지 않..

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

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