나의 개발 기록/Vue7 [Vue.js] click 이벤트로 카카오주소api 적용해보기 여러가지 방법이 있겠지만 보통은 index.html에 카카오에서 제공해주는 script 주소를 박아주지만 보안상(?) 이유는 사실 잘 모르겠다..하지만 어쨌든 스크립트를 처음부터 딱 박아서 사용하는게 아닌 필요한 화면에서 mounted 를 이용해서 화면이 불러와질때 스크립트 소스를 유동적으로 집어넣어주려고 한다 joinView.vue mounted(){ const script = document.createElement('script'); //script 변수 선언해서 얘를 만들어가지고 담는다 script.src = '//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js'; //script의 src속성에 카카오에서 제공한 주소값을 넣어준다 docu.. 2022. 9. 8. [Vue.js] vue에서 새창으로 form을 post방식으로 전송하기 //template 2022. 9. 3. [Vue.js] state값 새로고침되도 값 유지되도록 하기(vuex-persistedstate ) 먼저, 내가 구현하고싶은것 backend에서 응답받은 sessionid를 vuex를 사용해서 state에 sessionid를 저장시켜준다. 그리고 페이지가 이동되도 (새로고침이 되도) state값에 있는 sessionId가 그대로 유지 되도록! 테스트를 먼저 해본다. 1. 로그인버튼 눌렀을때 sessionid가 저장되도록 store //state sessionId : "" //mutaion changeSession(state){ state.sessionId = "12345678" }, //actions changeSession( {commit} ) { commit('changeSession'); }, view this.$store.dispatch('loginStore/changeSession') .the.. 2022. 9. 2. [Vue.js] vue store 모듈화 (feat.vuex) /store/index.js 에서 관리하는 변수들이 많아지면 관리하기 힘들기때문에 모듈화가 필요하다 각 컴포넌트별로 변수를 사용할수있게 모듈화 해주면 훨씬 개발하기 수월해진다고 한다 기존 index.js ▼ /store/index.js /* eslint-disable no-plusplus */ import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: { // 공통 관리되는 상태값을 관리, 접근방법- this.$store.state.items tardy: 0, }, getters: { // 공유되는 상태 값을 조회 로직을 관리, 접근방법 - this.$store.gette.. 2022. 8. 17. [Vue.js] vscode 디버깅 하기 (feat. Debugger for Chrome) 제일먼저 vscode에서 Debugger for Chrome 을 설치해준다. 그다음 launch.json에 코드를 작성해주어야하는데 나같은 경우는 launch.json 파일이 없었다. 이럴때 옆에 디버그 아이콘을 눌러서 create a launch.json file을 눌러주자! { // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": ".. 2022. 8. 15. [ Vue.js] vuex (state, getter, mutation, actions) 기본 실습 * vuex store 모듈화가 된 후 기준 실습임 * 1. state * state을 실행하기 위해서는 Commponent의 computed 영역 내에 작성을 해야한다. state실습을 위한 store폴더 내에 index.js 와 testStore.js //testStore.js const testStore = { namespaced: true, state: { // 공통 관리되는 상태값을 관리, 접근방법- this.$store.state.items count: 33, }, getters: { // 공유되는 상태 값을 조회 로직을 관리, 접근방법 - this.$store.getters['경로명/함수명'] }, mutations: { // 상태 값을 변경하는 로직을 관리, 접근방법 - this.$stor.. 2022. 8. 6. [vue.js] vue-router의 네비게이션 가드 vue-router의 네비게이션 가드 ◽ 네비게이션 가드(navigation-guard) 네비게이션 가드란 특정 URL에 접근할 때 해당 URL의 접근을 막는 방법이다. ◽ 종류 1) 전역가드: 어플리케이션 전역에서 동작한다. to: 이동할 URL 정보가 담긴 라우터 객체 from: 현재 URL 정보가 담긴 라우터 객체 next: to에서 지정한 URL로 이동하기 위해 반드시 호출해야하는 함수 const router = new VueRouter(); // beforeEach()를 호출하고나면 모든 라우팅이 대기상태가 된다. // URL로 라우팅하기위해서는 next()를 호출해야한다. router.beforeEach(function( to, from, next ) { // 'isPassed'는 내가 정의한.. 2022. 7. 29. 이전 1 다음
