김평범's OrdinaryCode

datepick에서 이번에 신규로 개발한 기능은 기존 날짜를 선택하면 이전기간과 비교해서 보여주는 datepicker를 개발 중이었다. 이전기간이 변경이 되면, 비교 기간이 자동으로 v-model에 연동되어서 변경이 되는데 아쉬운 점이 연결된 데이터는 변경이 되었는데 datepicker에서는 표시가 안 되는 문제가 발생했다.🤷‍♀️ 오늘은 v-model로 연결된 데이터가 변경되면, 해당 날짜로 datepicker를 focus 시키는 기능을 찾아보기로 했다! VCalendar VCalendar는 vue에서 range를 선택하기에 최적화되어있는 datepicker로, 현재 range를 선택할 때 내가 사용하고 있는 datepicker라이브러리이다. https://vcalendar.io/ Welcome | V..

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 프로그램을 신규로 가져와서 npm install을 하니 갑자기 오류가 발생했다. Nuxt Version이 2.16.0 버전이 설치가 되면서 문제가 난 듯하다. 🔎Nuxt 설치버전 확인하기 pacakge-lock.json 파일을 확인해주자. 만약 pacakage-lock.json파일에 @nuxt/config가 2.16.0이 설치가 되면 해당 이슈가 날 수 있다. 해결방법 npm install nuxt@2.15.8 위 코드를 이용해서 nuxt를 2.15.8 버전으로 재설치를 해주면 된다. 만약 해당 코드로 설치해도 안된다면 node_modules와 package-lock.json파일을 먼저 삭제해 준 뒤 npm install nuxt@2.15.8 npm install 먼저 nuxt를 설치해 준 뒤,..

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

오늘 개발하다가 발견한 특별한 상황 백앤드 개발자 분이 첫 페이지 로딩이 느린 것 같다는 말을 보니까 mounted 될 때 호출하는 function이 두 번씩 되는 것을 발견했다. 검색해보니 나와 같이 비슷한 상황이 나오는 사람들이 있는 듯했다. 원인은 찾지 못하고 급하게 처리하는 방식을 찾아서 공유해보려고 한다. 📌Nuxt mounted가 두 번씩 호출되는 원인 문제는 nuxt 레이아웃에서 무슨 원인인지 모르겠는데 레이아웃에 import 한 컴포넌트들이 모두 2개씩 들어가 있다.🤔 위 내용을 확인한 건 크롬 확장 프로그램인 vue.js devtools이다. 만약 이용하고 아래 프로그램을 크롬에 추가해보자. https://chrome.google.com/webstore/detail/vuejs-devtoo..

💗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 ..

nuxt에서. env 파일을 배포 환경과 개발환경마다 다르게 쓸 경우가 있다. 오늘은 @nuxtjs/dotenv를 이용해서 배포 환경마다 .env파일을 변경해보도록 하겠다. 1. @nuxtjs/dotenv와 cross-env를 설치를 해준다. npm install @nuxtjs/dotenv --save npm install cross-env --save 2. package.json 설정 cross-env를 이용해서 환경변수를 설정해줄 수 있다. package script에서 실행할 때 NODE_ENV 값을 설정해준다. "scripts": { "dev": "cross-env NODE_ENV=development nuxt", "start": "cross-env NODE_ENV=production nuxt s..

많이 사용하는 datepicker 중 bootstrap datepicker가 있다. 필요한 모든 기능들이 제공되어서 꾸준히 사용하고 있는 datepicker! 📌공식사이트는 아래 링크 참고 https://getdatepicker.com/4/ https://getdatepicker.com/4/ Get awesome Dashboard Templates Looking for a template with the datepicker ready to go? Then get check out these templates from our partners. getdatepicker.com https://www.npmjs.com/package/vue-bootstrap-datetimepicker vue-bootstrap-d..

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