본문 바로가기

Front-end

requestBody로 JS Map 객체 넘기기 2021. 6. 28. Vue에서 axios로 patch 요청을 보낼 때 request body에 JS Map 객체를 넘겼다. 간단하게 표현하면 아래와 같다. let map = new Map(); map.set("1", 1); map.set("2", 2); axios.patch("/notices", map) .then(response => console.log(response)) 그리고 SpringBoot에서는 아래와 같이 받으려 했었다. @PatchMapping public ResponseEntity patch(@RequestBody Map ids ) { ... } 그런데 controller에서 데이터가 받아지질 않았다. 해결하고 보니 이유가 간단했다.. 굉장히 바보가 된 기분.. 그래도 기억에 남기고자 기록한다. 먼저 시도..
HTML srcset이 모바일에서 적용이 안될 때 2021. 5. 22. img 태그에 srcset을 사용해서 크기별로 이미지를 다르게 사용하려고 했다. vutify의 v-carousel로 동적 이미지 바인딩을 하려 했기 때문에 css media query도 쓰기 어려웠다. 그래서 적용해보았는데 아래 그림처럼 크롬 개발자도구에서 모바일 버튼만 누르면 원하는 사이즈의 이미지가 나오질 않았다. sizes를 이렇게도 수정해보고 저렇게도 수정해봤지만 다 안 됐다. 크롬 개발자 모드를 통해 보면 적용이 안 된 것 처럼 보일 수 있다는 stackoverflow 답변에 aws로 배포해서 직접 폰으로 보기도 했는데 적용 안된 게 맞았다. 그렇게 열심히 검색하던 중 해결방법을 찾을 수 있었다. 바로 picture 태그와 source 태그를 사용하는 것이다. 이렇게 picture 태그와 sou..
Vue PWA index.html 서비스 워커 캐시에서 제외하기 2021. 1. 21. PWA 에서는 서비스 워커가 캐시를 해줘서 서비스 디자인 업데이트를 해도 반영하기가 힘들다. 사용자가 직접 캐시를 날리진 않기 때문이다. 그래서 어떻게든 해야하는데 방법을 찾기가 힘들었다. 여러 가지 방법을 모색하던 중 이 글을 발견했다. 글 내용에 따르면 PWA에서는 일반적으로 새로운 버전이 있을때 아래 이미지처럼 알림을 보여주고 사용자가 버튼을 누르면 캐시를 날리는 방법으로 업데이트 버전을 반영한다고 한다. How to display a "new version available" for a Progressive Web App 글을 보면 위에서 말한 방식을 적용하는 친절한 예제가 있다. 그런데 내가 만들고 있는 토이프로젝트에 적용하기엔 맘에 안 들었다. 사용자를 귀찮게 하는 것을 최대한 하고 싶지 않았..
Vue.js 경로 지정 2019. 11. 21. import data from '@/data'; @/는 src부터 시작하는 경로 import Login from ./Login ./는 같은 폴더에 있음을 의미한다. import Login from ../Login ../는 상위폴더에 있음을 의미한다. /static/images/Test.jpg /부터 시작하면 절대경로를 의미한다.
$mount() API, computed, 브라우저 저장소 2019. 10. 22. * $mount() API el 속성과 동일하게 인스턴스를 화면에 붙이는 역할을 한다. 인스턴스를 생성할 때 el 속성을 넣지 않았더라도 생성하고 나서 $mount()를 이용하면 강제로 인스턴스를 화면에 붙일 수가 있다. 뷰 라우터의 공식문서에서는 el을 지정하지 않고 라우터만 지정하여 생성한 다음 생선된 인스턴스를 $mount()를 이용해 붙이는 식으로 안내한다. *computed 데이터 연산들을 정의하는 영역 methods 속성은 호출할 때만 해당 로직이 수행되지만 computed 속성은 대상 데이터의 값이 변경되면 자동적으로 수행 된다. * 브라우저 저장소의 종류 1. 로컬 스토리지 2. 세션 스토리지(Session Storage) 3. 인덱스드 디비(IndexedDB) 로컬 스토리지를 가장 간단하..
Vue.js 라우터 URL의 해시 값(#)을 없애는 방법 2019. 10. 21. 뷰 라우터의 기본 URL 형식은 해시 값(#)을 사용한다. URL의 #이 거슬린다면 이렇게 하면 된다. mode: 'history'를 활용하면 된다. 1 2 3 4 5 var router = new VueRouter({ mode: 'history', routes }); 또는 router폴더의 index.js에서 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' Vue.use(Router) export default new Router({ mode: 'history', routes: [ { path:..

티스토리툴바