frontend 검색 결과

해당 글 26건

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..
frontend/vue.js 2022. 12. 27. 15:31

VsCode 것허브 연동 커밋

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

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..
frontend/vue.js 2022. 12. 27. 13:33

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 설치후 - 아이콘 색깔이 알록달록 해졌습니다..
frontend/vue.js 2022. 12. 27. 10:24

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를 설치하고 확인을 합니다...
frontend/vue.js 2022. 12. 27. 10:06

타임리프 참고 사이트

- 타임리프 공식 사이트 https://www.thymeleaf.org/ Thymeleaf Integrations galore Eclipse, IntelliJ IDEA, Spring, Play, even the up-and-coming Model-View-Controller API for Java EE 8. Write Thymeleaf in your favourite tools, using your favourite web-development framework. Check out our Ecosystem to see more integrati www.thymeleaf.org - 스프링 공식 튜토리얼 https://spring.io/guides/gs/serving-web-content/ Serving W..
frontend/타임리프 2022. 7. 18. 09:54

[타임리프] layout 설정

1. https://start.spring.io/ 에 접속해서 자신의 환경에 맞게 아래 그림처럼 setting을 합니다. 2. build.gradle dependencies 안에 해당 라이브러리를 추가 한후 rebuild 합니다. implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect' 3. Externeal Libraries안에 해당 라이브러리가 추가됬는지 확인합니다. 프로젝트 구조 MainController.java import lombok.RequiredArgsConstructor; import org.springframework.stereotype.Controller; import org.springframework.web.bind.an..
frontend/타임리프 2022. 7. 15. 11:13

타임리프 기본설정 문법

- 보통 웹개발을 하면 jsp를 많이 사용하였습니다. 하지만 spring boot에서 jsp를 지원하지 않음에 따라 jsp 대신 사용하는 템플릿엔진들이 있습니다. 현재 지원하는 템플릿 엔진은 4종류입니다. 1. Freemarker 2. Groovy 3. Thymeleaf 4. Mustache 이중 Thymeleaf 설정 방법과 간단한 사용법을 포스팅 하겠습니다. - 먼저 Spring initializer 사이트에서 프로젝트를 생성합니다. https://start.spring.io/ - controller 패키지 생성후 MainController를 생성합니다. MainController.java package com.example.thymeleafstudy.controller; import org.spri..
frontend/타임리프 2022. 7. 8. 14:22