프론트엔드
-
Chart.js Maximum call stack error 날 때 대응법프론트엔드/Vue 2024. 5. 9. 17:21
* chart 변수를 data의 return 안에 넣으면 에러남 data(){ this.chart = null; // 이렇게 넣어야 에러 안남 return { // chart: null, 이렇게 넣으면 에러나고 } }, methods:{ draw(){ const chart = document.getElementById(this.id); if(this.chart) this.chart.destroy(); this.chart = new Chart(chart, { type: 'doughnut', ..
-
vue nuxt에서 카카오 kakao api 사용하는법 #nuxt #kakao #카카오프론트엔드/Vue 2024. 3. 12. 00:15
@ nuxt.config.js {src: "//dapi.kakao.com/v2/maps/sdk.js?appkey=자바스크립트&libraries=services&autoload=false"}, * 카카오 개발자센터에서 플랫폼 추가 후 해당 키를 사용할 도메인 등록해야됨 @ example.vue (내가 쓰려는 코드르 kakao.maps.load 안에 명시하는게 핵심 kakao.maps.load(()=>{ // 카카오 코드 입력 })
-
[작성중] 6-1. Custom Form Input 컴포넌트 만들기프론트엔드/React 2024. 3. 3. 02:53
# What? 이게 뭔데? - select, input text, textarea, checkbox, file(첨부파일), image(이미지 업로드)를 만들필요 없이 커스텀 컴포넌트로 만들어놓고 재활용하는법 # Why? 왜 쓰는데? - 매번 위 input들을 만들어서 쓰려면 비효율적임. 미리 입력세트를 만들어놓고 간편하게 쓰기 # How? 어떻게 쓰는데? 1. 커스텀 입력 컴포넌트 만들기 @ compoents/form/InputSelect.js -> props로 옵션 목록을 받고, 그 옵션을 클릭했을 때 해당 데이터를 전달하는 메소드 짜기 function InputSelect({value, options, onChange}){ return ( {options.map(option => {option.lab..
-
401 에러 시 로그아웃시키는법프론트엔드/Nuxt 2023. 10. 6. 12:41
import $ from 'jquery'; export default function ({ $axios, redirect, store, app }) { $axios.onError(error => { // store.commit("setFlash", error.message); if(error.response.status == 401) { app.$auth.logout(); return store.commit("setPop", { title: "로그인 필요", description: "로그인 후 이용해주세요." }); } }) } - 근데 이러면 logout 자체가 auth 필요한 요청이라 무한반복 될 수 있음 백엔드쪽에서 logout를 게스트도 할 수 있게 변경하고 auth()->user()가 있을때만 ..
-
middleware에서 페이지 이동 막는법 #nuxt #middleware #미들웨어 #vue프론트엔드/Nuxt 2023. 8. 22. 08:08
@ middleware/user.js next(false)로 하면 페이지 이동 안함 export default function ({store,route, redirect, next}) { if(!store.state.auth.user) { store.commit("setModals", ["login"]); store.commit("setIntendedUrl", route.fullPath); next(false); } }