당신보다 고작 하루 먼저 시작한 개발자의 오지랖

서버에서 역순으로 데이터를 리턴해달라고 요청하는게 맞지만 임시방편으로 처리를 하고 싶다던지, 혹은 역순 필터링을 넣고 싶다던지 할때 그냥 v-for 돌릴 배열에 .slice.rever()를 추가해주면 된다.

boot 폴더에 js 파일을 하나 만들고 import { boot } from "quasar/wrappers"; import lodash from "lodash"; import moment from "moment"; export default boot(({ app }) => { app.config.globalProperties.$_ = lodash; app.config.globalProperties.$moment = moment; }); 이런식으로 전역으로 설정하고, vue 파일에서 this.$_(함수) 이 형태로 사용하면 된다. lodash.js 와 moment.js 는 제일 자주 쓰는 라이브러리. npm install 후에, 위처럼 boot 파일 만들고 전역으로 호출해서 사용하면 된다.

객체내 값 모두를 감시할 경우 watch: { object: { handler: function (val, oldVal) { console.log(val); }, deep: true, }, }, 객체내 특정 값만 감시할 경우 watch: { "object.child": function (val) { console.log(val); }, },

router의 beforeEach 를 활용하면 된다. const routes = [ { path: "/", component: () => import("layouts/MainLayout.vue"), children: [ { path: "", component: () => import("pages/Index.vue"), meta: { requiresAuth: false }, }, { path: "/auth", component: () => import("pages/Auth.vue"), meta: { requiresAuth: true }, }, ], }, ]; export default routes; route.js 에 로그인이 필요한 페이지는 meta 값에 true를 넣어준다. Router.beforeEa..

스크롤 이동할 html element에 ref 값을 설정해주고 실행시킬 스크립트에 다음과 같이 scrolIntoView를 호출하면 된다. 매우 간편

회원가입 화면 등에서 유저의 주소 혹은 우편번호를 입력받아야 하는 상황이 있다. 이럴 때 카카오(다음)에서 제공하는 우편번호 서비스를 이용하면 매우 편리하다. https://postcode.map.daum.net/guide Daum 우편번호 서비스 우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다. postcode.map.daum.net 사실 너무도 예제코드가 쉽고 잘 정리되어 있기에 그냥 보고 따라 하기만 하면 된다. 본인은 iframe을 이용하여 페이지에 끼워 넣는 방식을 이용했다. 1 2 3 4 5 주소 검색 Colored by Color Scripter cs 입력받을 텍스트 인..

Vue Router 이용할 때, 원하는 페이지 이동을 위해서 push 혹은 replace 메소드를 이용한다. 1 2 3 4 5 // push this.$router.push('hobbada.com/post') // replace this.$router.replace('hobbada.com/post') cs 하지만, 동일한 페이지에서 query나 params의 값만 변경될 때는 페이지 갱신이 이루어지지 않는 문제가 발생한다. 1 2 3 // 같은 Post 페이지에서 query만 다른 페이지로 이동시 작동 X this.$router.push({ name: 'Post', query: { id: '33' } }) cs 이럴 경우 해당 페이지를 호출하는 router view에 key값을 넣어주면 해결할 수 있다...

사용자 경험을 위해서 화면 렌더링이 완료되기 전까지 스피너를 띄워 유저를 지루하지 않게 한다. 구현하는 것은 어렵지 않다. 말 그대로 로딩이 시작되는 시점에서 스피너를 보여주고, 끝나는 시점에 스피너를 가리면 된다. Vue에서는 v-if를 활용하면 돼서 정말 간단하다. 1 2 3 4 5 6 7 8 9 // ... 기타 코드 Colored by Color Scripter cs 1 2 3 4 5 6 7 export default defineComponent({ data () { return { isLoading: true } } }) cs v-if를 활용해서 화면 로딩이 끝나는 시점에 데이터 변수를 false로 바꿔주면 된다. 1 this.isLoading = false cs 마찬가지로 API를 호출할 경우..