본문 바로가기
반응형

Vue.js21

Vue.js 가장 많이 사용되는 Prettier 설정 Prettier란? Prettier는 개발자들이 일관된 스타일로 코드를 작성할 수 있도록 도와주는 도구 중 하나입니다. 이를 위해서는 Prettier 설정 파일인 .prettierrc 파일을 작성하여 사용할 수 있습니다. 가장 많이 사용되는 Prettier 설정은 다음과 같습니다. { "printWidth": 80, "tabWidth": 2, "useTabs": false, "semi": true, "singleQuote": true, "trailingComma": "es5", "bracketSpacing": true, "jsxBracketSameLine": false, "arrowParens": "avoid", "endOfLine": "auto" } printWidth: 한 줄에 출력할 문자 수를 지정.. 2023. 3. 3.
Vue.js - axios 통신 JSON parse error 해결방안 axios 통신 JSON parse error 해결방안 백엔드로 넘겨주고 싶은 데이터 store - Send.js import axios from 'axios' const Send = { namespaced: true, state: {}, getters: {}, mutations: {}, actions: { SEND_SAVE(context, sendDate) { axios .post('/api/send/sendSave', sendDate) .then((response) => { if (response.status === 200) { console.log(response) } }) .catch((error) => { alert(error.response.data.message) console.log(err.. 2023. 3. 3.
Vue.js에서 두 개의 key-value 배열을 합치는 방법 Vue.js에서 두 개의 key-value 배열을 합치는 방법 JavaScript에서 제공하는 Object.assign() 메소드를 사용하면 된다. Object.assign() 메소드는 인자로 전달된 객체를 병합하여 새로운 객체를 반환합니다. 이를 이용하여 두 개의 배열을 병합할 수 있습니다. 예시 코드입니다. let obj1 = { a: 1, b: 2 }; let obj2 = { c: 3, d: 4 }; let merged = Object.assign({}, obj1, obj2); console.log(merged); // { a: 1, b: 2, c: 3, d: 4 } 위 예시에서 Object.assign() 메소드의 첫 번째 인자는 새로운 객체를 생성하기 위한 빈 객체 {}이며, 두 번째와 세 번째.. 2023. 3. 3.
Vue.js - Vue.js에서 배열을 문자열로 바꾸는 방법 Vue.js에서 배열을 문자열로 바꾸는 방법 Vue.js에서 배열을 문자열로 바꾸는 방법은 여러 가지가 있습니다. 이 중에서 가장 간단한 방법은 JavaScript의 join() 메소드를 사용하는 것입니다. join() 메소드는 배열의 각 요소를 문자열로 결합하여 하나의 문자열로 만들어 줍니다. 다음은 Vue.js에서 join() 메소드를 사용하여 배열을 문자열로 바꾸는 예시입니다. {{ items.join(", ") }} 위 코드에서 items 배열의 각 요소를 쉼표와 공백으로 구분하여 하나의 문자열로 결합하고 있습니다. join() 메소드를 사용하여 문자열을 만들고, 이를 Vue.js 템플릿에서 출력하고 있습니다. 만약 다른 구분자를 사용하고 싶다면, join() 메소드의 매개변수로 구분자를 전달하면.. 2023. 3. 2.
Vue.js - vuex - store - 상태관리법 등 개념/사용법 Vuex 란 ? 프로젝트의 규모가 커질수록 컴포넌트는 늘어날 수 밖에 없고 늘어난 컴포넌트들 관계에서 데이터를 주고 받는 부모 자식 관계는 점점 복집해질 수 밖에 없다. 그래서 Vue에서는 Vuex라는 상태 관리 패턴을 지원해주었는데 , Vuex는 Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리 이다. 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 변경할 수 있다. State 전역에서 공통으로 컴포넌트 간에 공유할 data를 말한다. 전역에서 참조, 사용할 수 있다. 일반적인 Vue컴포넌트의 watch처럼 $store.watch로 변화를 감지하고 핸들링할 수 있다. Mutations의 메서드에서 State 데이터값이 변이되기를 권장함 Mut.. 2023. 2. 24.
Vue.js - router-view(특정 Component 만 출력) 특정 컴포넌트 비활성화 방법 1. router /index.js 에서 등록한 라우터 // 메인 페이지 라우터 { path: '/main', name: 'main', component: Main, beforeEnter: (to, from, next) => { if (!localStorage.getItem('memId')) { next('') } next() } }, 해당 라우트 name 값이 " main " 인 라우터만 제외하고 TopMenu Component가 나타난다. template> 1. router /index.js 에서 등록한 특정 라우터만 출력 라우터 name 값이 main에 포함된 경우에만 TopMenu Component가 나타난다. visiableRouter: ['main'] 2023. 2. 24.
Vue.js 3 - Proxy 설정 Proxy 클라이언트와 서버가 별도의 포트를 사용할때 클라이언트가 서버로 HTTP요청을 하게 되면 CORS 문제가 발생한다 해당 문제를 해결하기 위해 Proxy 서버 사용한다 . Proxy 서버 프록시 서버 클라이언트가 자신을 통해 다른 네트워크 서비스에 간접적으로 접속할 수있게 해주는 응용 프로그램 서버 클라이언트 사이의 중계기로써 대리로 통신을 수행하는 것을 프록시라 한다 CORS Cross-Origin Resource Sharing의 줄임말로, 한국어로 직역하면 교차 출처 리소스 공유라고 해석할 수 있다. 여기서 “교차 출처”라고 하는 것은 “다른 출처”를 의미 웹 어플리케이션에서 도메인,포트 프로토콜이 다른곳으로 HTTP 요청을 보낼 수 없도록 브라우저가 요청을 막는 보안 정책 vue.config.. 2023. 2. 21.
Vue - 네비게이션 가드 네비게이션 가드란? 네비게이션 가드(navigation guard)란 뷰 라우터로 특정 URL에 접근할 때 해당 URL의 접근을 막는 방법 사용자의 인증 정보가 없으면 특정 페이지에 접근하지 못하게 할 때 사용하는 기술입니다. 설치 npm install vuex --save main.js 에 추가 import store from './store' createApp(App) .use(store) .use(router) .use(ElementPlus) .use(VueMoment) .mount('#app') 위 코드 추가하기 router / index.js 에 아래코드 추가 { path: '/send/sendListBoard', name: 'sendListBoard', component: () => impor.. 2023. 1. 13.
Vue3.js - 로컬스토리지 사용(localStorage) 개요 Stringboot Vue3.js 로 문자발송프로젝트 진행 중 백엔드 회원가입 dto 에 유저아이디(memId) 가 있다. 이거 유저아이디를 foreign 키로 참조 하고 있는 아이가 발송테이블에 memId 가 있다. 문제는 발송 등록 할 때 로그인한 회원 아이디로 문자내용 시간 등 DB에 insert 하는건데 memid 를 어떻게 가져올까 하다가 Vue3.js 에 로컬스토리지를 사용해 보기로 했다. localStorage란? localStorage를 사용하면, 브라우저에 key-value 값을 Storage에 저장할 수 있습니다. 저장한 데이터는 세션간에 공유됩니다. 즉, 세션이 바뀌어도 저장한 데이터가 유지됩니다. localStorage 메서드 setItem() - key, value 추가하기 .. 2023. 1. 13.
Vue3.js - 회원가입 유효성 검사 templat MJCrossShot 회원가입 아이디는 영문, 숫자를 포함한 4자이상 20자 이내이여야 합니다. 중복체크 비밀번호는 영문 + 숫자를 포함한 4자이상 20자 이내이여야 합니다. 이름이 올바르지 않습니다. 이메일 형식이 올바르지 않습니다. 다시 한번 확인 해주세요 휴대전화번호 형식이 올바르지 않습니다. 가입하기 v-show boolean데이터로 제어한다. 기본값 false watch `v-model`로 걸어둔 변수랑 input창이 변하는것을 `watch`로 감시하고 변경이되면 `methods`가 실행된다. 따라서 실시간으로 이메일 형식이 맞는지 판단할 수 있다. 'userDatas.memId': function () { this.checkId() }, 'userDatas.pwd': functi.. 2023. 1. 13.
LIST

티스토리툴바