27차시에서는 데이터베이스에 대한 기본 개념과 MySQL에서의 테이블, ERD 생성 실습을 진행하였다. 이에 대한 주요 내용을 다음과 같이 정리하였다. 1. 테이블 생성 Column Name은 소문자 스네이크 표기법을 사용한다. Primary Key의 경우 [그림 1]과 같이 Column 플래그를 PK, NN, UN, AI를 선택한다. (UN은 양수만 사용한다.) ※ Column 플래그(https://dev.mysql.com/doc/workbench/en/wb-table-editor-columns-tab.html) PK: PRIMARY KEY NN: NOT NULL UQ: UNIQUE INDEX BIN: BINARY UN: UNSIGNED ZF: ZEROFILL AI: AUTO_INCREMENT G: G..

Footer 생성 [그림 1]과 같이 Bootstrap > Examples > Footers(https://getbootstrap.com/docs/5.1/examples/footers/)에서 원하는 코드 일부를 복붙 하여 FooterLayout.vue를 생성한다. © 2021 Company, Inc // App.vue ... ... ... import FooterLayout from '@/components/layouts/FooterLayout.vue' export default { components: { HeaderLayout, FooterLayout } } ... Font icon 적용 [그림 2]의 Footer에는 아이콘이 표시되지 않고 있다. 아이콘이 이미지 파일인 경우 이미지의 수만큼 서버와 ..

로그인 기능 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 = [],..