부트캠프 20차시에서 Vue.js의 slot 기능을 적용한 Modal 구현을 실습하였는데 그 내용을 다음과 같이 정리하였다. 자식 컴포넌트를 부트스트랩 디자인의 Modal 컴포넌트로 만들고 부모 컴포넌트에서 자식 컴포넌트를 이용해 하나 이상의 Modal을 구현하고자 한다. | 자식 컴포넌트 부트스트랩 적용 components의 fragments 폴더에 SlotModal.vue 파일을 생성한 후 태그 안에 "부트스트랩 > Components > Live demo"에서 이하를 copy 하여 붙여 넣는다. Modal title ... Close Save changes slot 및 v-bind 적용 부모 컴포넌트에서 하나 이상의 Modal을 생성하기 위해서 id를 props의 modalId와 바인딩한다. mod..

| w3schools.com에서 SELECT 연습 Tutorials > Learn MySQL > MySQL HOME > Try it Yourself https://www.w3schools.com/mysql/trymysql.asp?filename=trysql_select_all MySQL Tryit Editor v1.0 WebSQL stores a Database locally, on the user's computer. Each user gets their own Database object. WebSQL is supported in Chrome, Safari, and Opera. If you use another browser you will still be able to use our Try SQL ..

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% /..