★ 단일 파일 컴포넌트 단일 파일 컴포넌트는 컴포넌트 하나를 .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..
★ Vue 인스턴스 개요 const vm = Vue.createApp과 같이 메서드로 만든 객체들을 자주 사용한다. 이처럼 Vue.creatApp 메서드를 호출하여, 만들어진 객체를 애플리케이션 인스턴스라고 부른다. 여기서 사용된, name, data 옵션이 바로, 옵션 객체 이다. var vm = Vue.createApp({ name : "App", data() { return { name : "" }; } }).mount('#app') 1. data 옵션 컴포넌트가 관리하고 추적해야 할 데이터를 등록할 때 사용한다. 관리와 추적의 의미는 변경을 탐지하고 추적하여, 화면을 갱신하겠다는 의미. 컴포넌트 인스턴스에서 $로 시작하는 이름은 인스턴스 내부에서 특수한 용도로 사용된다는 의미. 따라서 $,_로 시..
★ 새로운 객체 리터럴 객체의 속성을 작성할 때 변수명과 동일하다면 생략 가능. var name = "홍길동"; var age = 20; var email = "gdhong@test.com"; var obj = { name, age, email }; console.log(obj); 새로운 메서드 표기법 ES6가 제공하는 새로운 객체 리터럴 -> function 키워드를 사용하지 않고 바로 { } 구현부가 따라옴. 이 함수는 화살표 함수가 아니기 때문에, 함수가 중첩되었을 때 바깥쪽 함수의 this가 이 함수의 this로 자동으로 전달되지 않는다. let p1 = { name : "아이패드", price : 200000, quantity : 2, order : function() { if(!this.amo..
★ 검색 확인 연산자 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..
★ 제어문 if문 사용 if num1 : 양수 num2 : 양수 양수 [[${num1}]] 입니다. 양수 음수 양수 음수 실행 결과 switch문 사용 switch 추가하기 삭제하기 기타 실행 결과 ★ 반복문 each문 사용 이름 실행 결과 테이블 형식 Each문 번호 아이디 제목 실행 결과 ★ 조각 페이지 inc/sub.html 조각 페이지 입니다. inc/sub2.html 조각 페이지 2 조각 페이지 3 소유주 : 연락처 : 사용 Thymeleaf Fragment insert replace 실행 결과
★ 타임리프 연산자 산술 연산자 > 동일 비교 연산자 > 동일 + 영문 표현 제공 논리 연산자 > 동일 + 영문 표현 제공 삼항 연산자 > 동일 데이터 없음 문자열 연산자 > 동일 ★ HTML 속성 조작 th:HTML속성명="값" 기존에 동일한 속성이 선언되어 있으면 대체한다. 기존에 동일한 속성이 선언되어 있지 않으면 추가한다. 대부분 서버에서 전달 받은 값(model)은 - 직접 표현식으로 아무곳에서 사용이 불가능(${key}) - 표현식은 반드시 th:속성에만 적용이 가능 사용 ex) ${name} Box 1 Box 2 Box 3 Box 4 Box 5 Box 6 Box 7 Box 7 ★ PCDATA 조작 HTML 콘텐츠 영역 > 데이터 출력 1. th:text - escaped text - '' -..
