★ 단일 파일 컴포넌트 단일 파일 컴포넌트는 컴포넌트 하나를 .vue 파일 하나에 작성하기 때문에 붙여진 이름 한 파일에 컴포넌트 구성을 위해 템플릿, 스크립트, 스타일 정보를 모두 포함하기 때문에 컴포넌트 단위로 분리 가능 Vue 애플리케이션을 개발하기 위해서는 Webpack, Rollup 과 같은 모듈 번들러 도구와 ES6, TypeScript와 같은 트랜스파일러를 함께 사용하도록 개발 프로젝트 환경을 설정해야 한다. 1. 프로젝트 설정 도구 1.1 Vue CLI 도구 Webpack 기반의 Vue 공식 프로젝트 설정 도구였다. 하지만, 이 방법은 프로젝트를 생성하고 구동하기까지 다소 긴 시간이 소요가 된다. 또한, 번들링 과정을 거쳐야하기 때문에 작성한 코드를 테스트하기에 조금 긴 시간을 기다려야 한..
★ TodoList 할일을 적고 해당 사항들을 수행해 나가는 List Step1 ~ Step4에 대한 내용을 가지고 해당 기능을 개발 1. 기본 UI 개발 큰 틀 잡기 :: Todolist App 본문 내용 삽입 추가 할일 1 (완료) 삭제 할일2 삭제 할일3 삭제 2. 데이터와 메서드 정의 [ 데이터 ] todo 텍스트 박스에 사용자가 입력하는 내용을 받아내기 위한 data 입니다. todolist 추가한 todo 들의 목록, todo 한 건은 다음과 같습니다. id todo 한 건의 고유 키, 이 예제에서는 timestamp를 이용합니다. todo todo 내용 completed 완료 여부(true, false) [ 메서드 ] addTodo 텍스트 박스에 사용자가 입력하는 내용을 받아내기 위한 dat..
1. HTML의 스타일 적용 HTML 요소의 스타일 적용은 모두 문자열이며, 케밥 표기법을 주로 이용한다. font-size와 같은 형태 이와 같은 표기법을 사용하는 이유는 HTML에서는 대소문자를 구별하지 않기 때문이다. 케밥 표기법은 HTML, 스타일 특성 등에서 주로 사용한다. 버튼 1 버튼 2 이렇게 클래스를 적용하는 모든 HTML 요소에 동일한 스타일이 적용된다. 하지만, 적용되는 순서는 꼭 알아둬야 한다. 이렇게 살펴보면, style 특성에 직접 지정하는 인라인 스타일 방식이 마지막으로 적용된다. 요소의 기본 스타일 -> .test 스타일 -> .over 스타일 -> 인라인 스타일 2. 인라인 스타일 인라인 스타일은 v-bind:style로 작성한다. style로 지정할 정보는 데이터 속성에 ..
★ 이벤트 처리 동적 UI는 HTML 요소에서 발생하는 이벤트 처리를 통해 구현되는 경우가 많다. Vue의 이벤트는 HTML, 자바스크립트에서 사용하는 이벤트를 준용해서 사용하기 때문이다. 1. 인라인 이벤트 처리 Vue에서의 이벤트 처리는 아래와 같이 주로 사용한다. v-on:[이벤트 이름]="표현식" 가장 많이 쓰이는 click 이벤트 예 v-on 디렉티브는 @로 줄여 쓸 수도 있다. v-onclick="test($event)" @click="test($event)" 금액 : 입금 출금 계좌 잔고 : {{ balance }} 2. 이벤트 핸들러 메서드 Vue 인스턴스에 등록한 메서드를 이벤트 처리 함수로 연결 이와 같이 복잡한 기능은 메서드를 미리 작성해두고, v-on 디렉티브로 참조해서 이벤트를 수..
★ Vue 인스턴스 개요 const vm = Vue.createApp과 같이 메서드로 만든 객체들을 자주 사용한다. 이처럼 Vue.creatApp 메서드를 호출하여, 만들어진 객체를 애플리케이션 인스턴스라고 부른다. 여기서 사용된, name, data 옵션이 바로, 옵션 객체 이다. var vm = Vue.createApp({ name : "App", data() { return { name : "" }; } }).mount('#app') 1. data 옵션 컴포넌트가 관리하고 추적해야 할 데이터를 등록할 때 사용한다. 관리와 추적의 의미는 변경을 탐지하고 추적하여, 화면을 갱신하겠다는 의미. 컴포넌트 인스턴스에서 $로 시작하는 이름은 인스턴스 내부에서 특수한 용도로 사용된다는 의미. 따라서 $,_로 시..
★ 보간법 mount하고 있는 9행 id가 app인 div요소 {{ }} : 콧수염 모양을 닮았다해서, 콧수염 표현식이라고도 부르며, 보간법이라고 불릅니다. {{message}} ★ 기본 디렉티브 1. v-text, v-html 디렉티브 Vue 디렉티브는 템플릿 안에 사용하는 v-로 시작하는 속성이며, 이것을 이용해 HTML 요소와 관련된 작업을 지정할 수 있습니다. v-text : {{message}} 와 같은 동일한 기능을 수행한다. 즉, inner Text 속성에 연결됨. 태그 문자열을 HTML 인코딩하여 나타나기 때문에 화면에는 태그 문자열이 그대로 나타남. v-html : innerHTML 속성을 변경하는 것. innerHTML 속성에 연결됨. 태그 문자열을 파싱하여 화면에 나타냄 2. v-bi..
★ 검색 확인 연산자 null 값 확인 //[Is}Null, [Is]NotNull //- 컬럼 값이 null인 레코드 검색 //[Is]Empty, [Is]NotEmpty //- 컬럼값이 null이거나 빈문자열인 레코드 검색 null 값 확인 ex) List list = itemRepo.findByOwnerNull(); List list = itemRepo.findByOwnerEmpty(); List list = itemRepo.findByOwnerNotNull(); 정렬 //정렬 //List list = itemRepo.findAll(Sort.by(Sort.Direction.ASC, "price")); //List list = itemRepo.findAll(Sort.by("name")); //오름차순 /..
★ 새 프로젝트 생성 Name : boot-jpa Group : com.test Artifact : boot-jpa Package : com.test.jpa 의존성 - Spring Web - Lombok - MyBatis Framework - Oracle Driver - Spring boot Devtools - Thymeleaf - Spring JPA ■ JPA, Java Persistent API Java ORM 기술에 대한 API 표준 명세 JPA 구현 기술 > Hibernate, EclipseLin, DataNucleus 등 대부분 Hibernate를 사용 ■ ORM, Object Relational Mapping Entity 객체와 Database 테이블을 서로 매핑해서, SQL 쿼리가 아닌 Ja..
