기록하고 기억하는 블로그

1.엔티티에는 가급적 Setter를 사용하지 말자

-- 변경포인트가 많아져 유지보수가 어려울 수 있다

2.모든 연관관계는 지연로딩( LAZY )으로 설정

--JPQL을 실행할 때 N+1 문제가 자주 발생한다.

OneToOne, ManyToOne 관계는 기본이 즉시로딩이므로 직접 지연로딩으로 설정해야 한다

3.컬렉션은 필드에서 초기화 하자

--null에서 안전하도록

엔티티의 생명주기:

1) 비영속 : 관계없음

2) 영속 : 저장된 상태

- 영속성 컨텍스트가 관리하는 엔티티 , 식별자값이 반드시 있어야 한다

- 1차 캐시, 동일성 보장 , 트랜잭션으로 쓰기 지연, 변경 감지, 지연 로딩 등이 가능해진다.

3) 준영속 : 저장되었다가 분리된 상태

- em.detach() , em.close() , em.clear()

4) 삭제 : 삭제된 상태

- em.remove()

프로미스 : 비동기 처리를 추상화한 객체 -> 비동기 처리 후 다음 처리를 실행하기 위한 용도

순서 보장을 위해 쓰던 콜백 지옥을 대체

다음 동작을 위해 아래의 상태로 존재

1. Fulfilled : 성공

2. Rejected : 실패 - 에러

3. Pending : 진행중

var promise = new Promise(function(resolve, reject){ ... });

resolve : fulfilled 상태가 될 때 실행

reject : rejected 상태가 될 때 실행

-- 두 함수 모두 프로미스를 종료시키며 인자값을 전달할 수 있다

var promise = new Promise(function(resolve,reject){
	setTimeout(function(){
		console.log("Hello");
        resolve("World");
    },1000 );
});

promise.then(function(response){
	console.log(response);
})

var promise = new Promise(function(resolve,reject) {
	setTimeout(function(){
    	console.log("Hello");
        reject("World");
    },1000);
});

promise.then(function(response){
		console.log("Success!");
    }).catch(function(error){
    	console.log(error);
	}).finally(()=> {
    	console.log("finally!");
    });

GridView로 DataCollection을 바인딩해 편리하게 데이터를 표현가능

행과 열 / 헤더 바디 풋터 설정 후 활용

-------------------------------------------------------------------------------

정렬 : gridView의 헤더 클릭시 정렬 지원

-> property에서 sortable 옵션을 정의하여 사용

필터 : 대상건의 값을 사용자가 조건을 정의하여 필터 처리 가능

-> property에서 useFilterList 옵션을 정의하여 사용

컬럼이동 : gridView 헤더를 마우스로 drag하여 컬럼을 이동할 수 있는 기능

-> property에서 columnMove 옵션을 정의하여 사용

이외 API를 활용한 엑셀 다운 / 컬럼 동적 변경 설정 등등 가능

-------------------------------------------------------------------------------

table 활용

기본으로 table을 만들고 1td에 제목을 쓰고 2td에 inputbox, selectbox 등을 삽입하고 css를 주었다

table property ->

adaptive : layout

adaptiveThreshod : 700 을 주어 반응형 효과를 줄 수 있다.

Palette를 통해 요소들을 드래그&드롭 할 수 있고

이 요소들에 각각 Property를 줘서 여러가지 CSS, JS와 비슷한 효과를 줄 수 있다.

[ InputBox ] Property

---------------------------------------------------------------------------

1. placeholder - 기존의 placeholder와 비슷한 효과를 준다

2. initValue - 박스에 기본값을 부여한다.

3. displayFormat - 박스의 값에 형식을 부여한다.

예시)dateType이 number일 경우 #,###.#0 으로 적용하면 3자리수 마다 ,가 찍히며 소수점 2자리까지 표현된다.

※ 이 기능은 박스에 focus가 없는 경우에만 적용되며 박스 클릭 시 포맷이 다시 돌아온다.

focus에 관계없이 적용하려면 : applyFormat 속성값을 all 로 준다.

4. id , class - id 과 class 를 부여한다.

id를 등록하면 해당 요소가 스크립트에서 전역변수로 선언된다.

( doucment.getElementById 와 같은 효과 )

예시) id.setValue( 값 ) = 값이 부여되는 스크립트

※ initValue 와 setValue를 같이 쓰면 setValue 값이 최종으로 적용된다.

---------------------------------------------------------------------------

[ Spinner ] => 버튼을 이용해 필드 값 증감 표현

---------------------------------------------------------------------------

[ Secret ] => input type = "password"와 유사한 인터페이스

---------------------------------------------------------------------------

[ SearchBox ] => InputBox와 유사하지만 x아이콘이 제공되 클릭 시 입력값 지움

---------------------------------------------------------------------------

[ InputCalendar ] => Calendar 컴포넌트 + Input 컴포넌트 복합

---------------------------------------------------------------------------

[ TextBox ] => 긴 문장에 사용

---------------------------------------------------------------------------

[ Span ] =>짧은 글자나 변경되는 값에 사용

---------------------------------------------------------------------------

[ Image] =>이미지 표현

---------------------------------------------------------------------------

[ Checkbox] =>체크박스

---------------------------------------------------------------------------

[ MultiSelect ] => Ctrl 키로 여러 항목 선택 가능

---------------------------------------------------------------------------

[ SelectBox] => select tag 기능

---------------------------------------------------------------------------

새로 취직한 곳 WMS 프로젝트에서 WebSquare를 사용한다고 한다

기존에 html css js만 사용하다 쓰려니 오히려 낯설고 불편해서 더 공부가 필요할 것 같다.

인스웨이브의 강의를 보며 개념을 정리해 본다.

기본적으로 이클립스에서 인스웨이브 엔진을 돌려 xml -> html , js로 변환되어 화면이 완성되는 것 같다.

경로에서 WebContent에 xml을 만들어 화면을 만들 수 있다.

라이브러리들을 넣어놓고 web.xml에 servlet으로 엔진 설치를 할 수 있다고 한다.

손가락 모양을 눌러 Run에 동작될 브라우저를 설정하고 디폴트도 설정할 수 있다.

MySQL도 오라클과 비슷하게

create table 로 생성한다

다만 PK의 값을 오라클의 경우 시퀀스라는 별도의 스키마 개채를 사용하지만

MySQL의 경우 기본 키 열에 대한 자동 증가 기능만 켜면 된다

create 시 지정할 수 있다 (auto_increment)

또는 alter 로 수정할 수 있다

또한 데이터 삽입시 null 값을 제공하기만 하면 MySQL은 사용 가능한 다음 숫자료 열을 채운다

문자데이터 : char / varchar (오라클에서는 varchar2 사용)

MySQL 8버전은 utf8mb4 케릭터셋이 자동 선택

선언시 캐릭터셋 설정 가능

create database european_sales cheacter set latin1;

텍스트데이터: tinytext / text / mediumtext / longtext

varchar열에 64KB 제한을 초과하는 데이터를 저장하려면 사용

최대 바이트 크기에 따라 선택

정렬 또는 그룹화에 text 열을 사용할 경우 한도를 늘릴 수는 있지만 처음에는 1024 바이트만 사용됨

(text를 제외한 텍스트 자료형은 MySQL의 고유 자료형이다)

오라클의 char열의 경우 최대 2000바이트 varchar2의 경우 최대 4000바이트 더크면 CLOB 사용

SQL의 경우 char와 varchar 모두 최대 8000 , varchar(max) 정의 열에는 최대 2GB데이터 저장

숫자데이터: tinyint / smallint / mediumint / int / bigint / float/ double

시간데이터 : date / datetime / timestamp / year / time

ENUM(A , B  , C .. ) 

enum 자료형

관리자로 접근

mysql -u root -p

모든 데이터베이스 확인

show databases;

데이터베이스 지정

use 이름 ;

한꺼번에 지정

mysql -u root -p 이름

Vue 컴포넌트

복잡한 화면을 조합하여 구성하도록 재사용 가능한 Vue인스턴스이다

지역/ 전역으로 구분된다

컴포넌트를 등록하면 동시에 상위 컴포넌트가 된다

1. 전역 컴포넌트

Vue.component(' 이름 ' , {

});

2. 지역 컴포넌트 

new Vue({
	components: {
    	' 이름 ' : 내용 
    }
})

컴포넌트 명명 규칙 : 

1) 케밥케이스 : 소문자 + -

HTML 템플릿에서 그대로 이름을 사용한다

2) 파스칼케이스: 맨앞단어 대문자

HTML 템플릿에서 1) 2) 두가지 모두 사용가능하다

컴포넌트 통신:

Vue 컴포넌트는 기본적으로 데이터 주고받기 불가능 -> props를 이용하여 가능하다

props는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용하는 속성이다

v-bind를 통해 넘겨준다