전체 글 (96) 썸네일형 리스트형 4. 스프링 부트 lombok 적용 lombok : VO, DTO를 사용할 때 getter, setter를 어노테이션으로 편리하게 사용하기 위해 사용한다. 1. lombok 다운로드 https://projectlombok.org/download Download projectlombok.org 2. 프로젝트 폴더에 lombok 설치하기 cmd에서 lombok이 설치 된 경로로 이동 후 java -jar lombok.jar 명령어를 입력한다. lombok이 설치되기를 원하는 IDE를 선택한 후 Install / Update 버튼을 누른다. (목록에 없을 경우 Specify location... 에서 IDE경로까지 이동 후 IDE파일 선택) 3. 스프링 부트 pom.xml에 의존성 추가 org.projectlombok lombok provide.. 3. 스프링부트 mysql(+ MyBatis) 연동 1. MySQL, MayBatis 의존성 추가 mysql mysql-connector-java runtime org.mybatis.spring.boot mybatis-spring-boot-starter 1.3.2 2. application.properties 작성하기 src.main.resources경로에 있는 application.properties에 작성 spring.datasource.username=(mySQL 아이디) spring.datasource.password=(mySQL 비밀번호) spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver spring.datasource.url=jdbc:mysql://localhost:3306/(db이름).. 2. Vue-SpringBoot axios 연동 1. frontend 인 vue에 axios를 설치한다. vue add axios vue cli로 실행한 환경이기 때문에 vue add axios로 설치해준다. 그렇지 않으면 npm으로 설치 npm i axios 2. vue에서 axios 메소드 작성 this.$axios .get("/api/user/sub") .then((res) => { console.log(res); }) .catch((err) => { console.log(err); }); 3. Spring Controller에서 응답 @RestController public class TestController { @RequestMapping(value = "/api/user/sub", method = RequestMethod.GET) publ.. [Vue] Component 컴포넌트 사용에는 전역적인 방법과 지역적인 방법이 있는데, 여기서는 가장 많이 사용하는 지역적인 방법만 다룬다. 1. 컴포넌트 생성 nav-component.vue Processing Center Workspace item one item two item three item four item one item two item three Info Orders 2. 컴포넌트 사용 Home me 사용하고자 하는 부모vue에서 컴포넌트 import 및 components 에 등록 [Vue] element-ui 1. 설치 npm i element-ui -S 2. main.js 코드 추가 import Element from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; ... 생략 Vue.use(Element, { size: 'small', zIndex: 3000 }); ... 생략 [Vue] Router 1. 뷰 라우터 설치 npm install vue-router --save 2. 라우터 폴더 및 index.js 파일 생성 router -> index.js 3. 라우터로 보여줄 views 작성 Home.vue Home me About.vue About vue 4. index.js 파일에 코드 작성 import Vue from 'vue' import Router from 'vue-router' // 연결할 컴포넌트 작성 import Home from '@views/Hoem' import About from '@views/About' Vue.use(Router) export default new Router({ mode: 'history', // history 모드는 자연스러운 url 가능, 지정하지 않으.. [JavaSctipr] 화살표 함수 일반 함수 function sum(num1, num2) { return num1 + num2; } 화살표 함수 ( 일반 함수에서 function과 sum 생략 후 '=>' 추가 ) let sum = (num1, num2) => { return num1 + num2; } 화살표 함수 사용 후 바로 return문이 올 경우 중괄호, return 생략 후 사용 가능 let sum = (num1, num2) => num1 + num2; [Vue] slots 자식컴포넌트를 재활용하여 각각의 부모컴포넌트에서 쓸 수 있다. 사용법 1) 부모 컴포넌트에서 자식 컴포넌트의 태그 사이에 자식컴포넌트에 주고자 하는 데이터를 쓴다. 부모.vue data 이전 1 2 3 4 5 6 7 ··· 12 다음
