Vue 예제 - BootStrap Vue 적용

npm install vue bootstrap bootstrap-vue-3 - VsCode에 해당 명령어를 입력해서 bootstrap을 install 합니다. main.js import { createApp } from 'vue' import App from './App.vue' import router from './router' import BootstrapVue3 from 'bootstrap-vue-3'; import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue-3/dist/bootstrap-vue-3.css' const app = createApp(App) app.use(BootstrapVue3) app.use(router) app.moun..

• format_list_bulleted frontend/vue.js
• · 2022. 12. 27.
• textsms

VsCode 것허브 연동 커밋

이번 게시글에는 VsCode에서 작성한 소스를 깃허브와 연동하고 커밋하는것을 해보겠습니다. - VsCode 좌측하단에 해당 버튼을 눌러서 깃허브를 로그인합니다. - private로 할지 public으로 할지 선택후 클릭합니다. - access token을 입력하라는 창이뜹니다. access token 확인하는방법 - 깃허브 로그인후 프로필 - settings - 왼쪽 메뉴에 Developer Settings 클릭 - Tokens (classic)후 Generate new Token (classic) 클릭 - 토큰명과 repo 체크후 Generate Token 클릭 - 해당키 복사후 위에 토큰 입력창에 넣습니다. - 깃허브에 확인해보면 제가 지정한 vue froject 이름으로 repository가 생성이..

• format_list_bulleted frontend/vue.js
• · 2022. 12. 27.
• textsms

3. Vue 예제 - 서버 실행, vue-router 적용, footer, header 나누기

이번 게시글에서는vue-router를 적용해보고 프로젝트를 실행해보겠습니다. Vue-Router란? - 특정 url에 접근하였을때 url마다 선언한 component vue로 화면을 보여주며, 하나의 페이지로 여러 화면을 보여주는 SPA를 개발할수 있게 해주는 라이브러리 입니다. npm add vue-router@next - 터미널에 해당 명령어를 입력해서 vue-rotuer를 설치합니다. - src 폴더 밑에 router 폴더를 만들고 index.js 파일을 만듭니다. 그리고 src 폴더 밑에 views 폴더를 만들고 LoginView.vue, MainView.vue 파일을 만듭니다. index.js import { createWebHistory, createRouter } from "vue-route..

• format_list_bulleted frontend/vue.js
• · 2022. 12. 27.
• textsms

2. Vue 예제 - VsCode 플러그인 사용해보기

이번글에서는 vue 개발에 유용한 VsCode 플러그인을 다운로드 해보고 사용해보는것을 해보겠습니다. - 먼저 VsCode를 열면 해당 버튼을 누릅니다. (Extensions) vetur 설치 - Vetur를 install 합니다. vetur를 받으면 vue 파일 하이라이팅 기능을 사용할수 있습니다. vetur 설치전 vetur 설치후 material icon 설치 - Material Icon 플러그인을 install 합니다. 아이콘 테마를 바꿀수 있습니다. material icon 적용 File - Preferences - File Icon Theme - Material Icon Theme 입력후 선택 material icon 설치전 material icon 설치후 - 아이콘 색깔이 알록달록 해졌습니다..

• format_list_bulleted frontend/vue.js
• · 2022. 12. 27.
• textsms

1. vue 예제 - Vue 프로젝트 생성

- 본 게시글은 VsCode에서 Vue3 프로젝트를 생성하는 방법을 정리하였습니다. VsCode 설치 https://code.visualstudio.com/download 자신의 os에 맞는 vscode를 설치합니다. NodeJs 설치 https://nodejs.org/ko/ LTS 버전을 설치합니다. VueJs Devtools 설치 https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd chrome에 확장프로그램 추가하기 Vue 설치 npm install -g @vue/cli Vue 설치 확인 vue --version - 위에 설치가 다되었으면 해당 명령어를 날려서 vue를 설치하고 확인을 합니다...

• format_list_bulleted frontend/vue.js
• · 2022. 12. 27.
• textsms

타임리프 유효성체크

build.gradle implementation 'org.springframework.boot:spring-boot-starter-validation' - validation 라이브러리를 추가합니다. Controller @GetMapping(value = "/members/new") public String createForm(Model model){ model.addAttribute("memberForm", new MemberForm()); return "members/createMemberForm"; } @PostMapping(value = "/members/new") public String create(@Valid MemberForm form, BindingResult result){ //회원가..

• format_list_bulleted frontend/타임리프
• · 2022. 7. 19.
• textsms