로그인 기능 src/views/LoginView.vue 컴포넌트를 생성한 후 src/router/index.js에 경로 설정을 한다. vuex 관련 코드는 일단 주석 처리한다. // src/router/index.js ... import LoginView from '../views/LoginView.vue' // import store from '../store' ... const routes = [ ... { path: '/login', name: 'LoginView', component: LoginView }, ... // router.beforeEach((to, from, next) => { // if (to.path === '/') { // next() // } else if (to.path ==..

Vuex https://vuex.vuejs.org/ vuex 라이브러리를 반드시 써야 하는 것은 아니다. (한 번도 안 쓰는 프로젝트도 있다.) Vue 프로젝트 생성 시 Vuex를 사용하는 것으로 선택하면 src 폴더 내에 store폴더와 index.js 파일이 자동으로 생성되고 main.js에 store 폴더가 import 된다. Vuex는 상태를 관리하기 위한 패턴 라이브러리이다. 애플리케이션 내 모든 컴포넌트의 중앙 집중식 데이터 저장소로서 역할을 한다. 각 컴포넌트에는 그 컴포넌트에서만 사용할 수 있는 data()를 정의할 수 있다. 이때 어떤 데이터는 다른 컴포넌트들이 그 데이터에 빈번하게 접근해야 하는 경우가 있다. 이런 데이터는 중앙에서 관리하는 것이 효율적이다. Vuex는 이런 데이터를 효..

금액을 처리하는 함수 금액을 처리하는 함수는 실무에서 많이 사용하므로 잘 이해해 두는 것이 좋다. mixins/Fromatter.js // src/mixins/Fromatter.js export default { methods: { // 금액에 대한 포맷 // 3500 // 3500.1 // 한국 3,500 // 미국 $3,500.00 // 유럽 3.500,00 // '3500', '#,###' -> 3,500 // 3500, '#.###' -> 3.500 // 3500.1, '$#,###.00' -> $3,500.10 // 3500.1, '#,###.##' -> 3,500.1 // 3500.1, '#.###,##' -> 3.500,1 // 1250.12, '#,###.##%' -> 1,250.12% /..

보호되어 있는 글입니다.

다국어 처리 이해 ※ i18n(internationalization): 다국어 처리 plugins/i18n.js plugins 폴더를 생성하고 i18n.js를 작성한다. eslint가 에러가 아닌 것을 에러로 표시하기 때문에 /* eslint-disable */을 넣어 해제한다. // src/plugins/i18n.js /* eslint-disable */ export default { install: (app, options) => { // 파라미터에 i18nPlugin, i18nStrings이 각각 들어간다. // globalProperties에 특정 키 $translate를 잡아두면 모든 컴포넌트에서 바로 접근이 가능해진다. app.config.globalProperties.$translate = ..

excel 다운로드 exceljs, file-saver 모듈을 이용해 "excel 다운로드" 기능을 구현한다. exceljs 설치 https://github.com/exceljs/exceljs npm install exceljs file-saver 설치 npm install file-saver index.js exceljs, file-saver를 import 한다. $ExcelFromTable() 함수를 작성한다. // src/mixins/index.js ... import ExcelJS from 'exceljs' import { saveAs } from 'file-saver' export default { ... methods: { ... async $ExcelFromTable( header = [],..

mixin mixin을 import 한 컴포넌트는 mixin 자바스크립트 파일의 export default를 모두 사용할 수 있다. mixin과 컴포넌트의 동일 시점에서의 실행 순서는 mixin이 우선이다. 아래 코드를 작성하여 서버를 실행하면 콘솔 창에 [그림 1]과 같은 결과가 출력된다. mixin src 폴더에서 mixins 폴더를 생성하고 mixin 파일로서 axios.js를 생성한다. // src/mixins/axios.js export default { created() {}, mounted() { console.log('mixin에서 출력') }, unmounted() {}, methods: {} } 컴포넌트 MixinView.vue 파일에 axios.js를 import 한다. // src/..

전역 컴포넌트 main.js에 자식 컴포넌트를 import 하고 app.component를 추가하면 전역 컴포넌트로 사용할 수 있다. 여기에서는 app.component의 첫 번째 파라미터명을 'page-title'로 작성하였는데, 원하는 이름을 쓰면 된다. // src/main.js ... import PageTitle from './components/fragments/PageTitle.vue' // createApp(App).use(store).use(router).mount('#app') // 기존 // 위 코드에 app을 붙여 아래 코드와 같이 분리한다. 이때 import한 컴포넌트를 추가한다. const app = createApp(App) app.use(store) app.use(router..