<a href="src/pages/corplist/Sample.xlsx" download="Sample.xlsx">
   <button type="button">Download</button> 
</a> 

3. axios 라이브러리 사용

   const handleClick_Download = () => {
        axios({
          url: 'src/pages/corplist/Sample.xlsx',
          method: 'GET',
          responseType: 'blob'
          })
          .then((response) => {
                const url = window.URL
                      .createObjectURL(new Blob([response.data]));
                const link = document.createElement('a');
                link.href = url;
                link.setAttribute('download', 'Sample.xlsx');
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
          })
      }

참고: https://www.delftstack.com/ko/howto/javascript/javascript-download/

• 클래스형 컴포넌트에만 사용(함수형의 Hooks기능)
• 마운트/ 업데이트/ 언마운트로 나뉨
• 총 9가지. Will-, Did-,

1) 마운트 : DOM이 생성되고 웹 브라우저 상 나타나는 것 Constructor(컴포넌트 새로 만들 때마다 호출되는 생성자) -> getDerivedStateFromProps(props에 있는 값을 state에 넣을 때 사용) -> render(UI를 렌더링) -> componentDidMount(컴포넌트가 웹 브라우저상에 나타난 후 호출. 다른 자바스크립트 library 호출, 이벤트 등록, 각종 비동기 작업 처리)

2) 업데이트 – props/ state가 바뀔 때, 부모 컴포넌트 리 렌더링, this.forceUpdate getDerivedStateFromProps shouldComponentUpdate(반드시 true/false 반환. This.props/state , nextProps/nextState) render getSnapshotBeforeUpdate componentDidUpdate

2) 언마운트 – 컴포넌트를 DOM에서 제거 componentwillUnmount

** Render() 내에서는 이벤트 설정이 아닌 곳에서 setState사용하거나 DOM에 접근하면 안됨. DOM의 정보를 가져오거나 state변화를 줄 때는 componentDidMount()에서 처리해야함

배열에 새 항목 추가할 때, concat 사용.(push는 기존 배열자체를 변경, concat은 새로운 배열 생성) js에서 클래스 메서드는 기본적으로 바인딩 되어 있지 않음.

This – 객체 안의 메서드에서 this는 그 메서드가 포함된 object를 가리킴 클래스형 컴포넌트에서는

1) constructor에 this.handleClick = this.handleClick.bind(this)로 바인딩 하거나 2) handleClick = () => { } 처럼 선언 함수형 컴포넌트 에서는 콜백에 arrow function으로 바인딩 <button onClick = {() => this.handleClick}>

 컴포넌트 배열 렌더링 할 때는 key값 설정에 주의!(always unique)  상태 안에서 배열을 변형할 땐, concat, filter등 배열 내장 함수를 사용해 새로운 배열을 만든 후 상태로 설정해야 됨.

*ES6 화살표함수 * -, 주로 함수를 파라미터로 전달할 때 사용 -, 일반 함수는 자신이 종속된 객체를 this로 가리키며, arrow function은 자신이 종속된 인스턴스를 가리킴 -, 값을 연산해 바로 반환할 때 사용하면 가독성 높아짐 e.g. Const triple = (value) => value + 3;

 reactjs code snippets 단축키 rsc(함수형; class component skeleton)/ rcc(클래스형; stateless component skeleton)

 state를 다루어야 한다면 class기반, 그 외의 경우라면 함수형 사용

const a = 1;
const c = 3;
export {a};
export const b = 2;
export default c;


import d, {a,b as e} from './Example';
console.log(a, e, d) ; //1, 2, 3

** default로 선언된 내용은 {} 없이 받을 수 있고 변수명 달라도 됨. ** 하지만, default로 선언되지 않은 것들은 {} 안에서 무조건 보내진 이름 그대로 선언.

예) export default function DataRow() => import DataRow from '../xx'

일반적으로 뷰 안에 ORDER BY를 포함시킬 수 없고, ORDER BY를 포함하려면 TOP N 을 써야한다. 전체를 조회해야 한다면 top n % 라고 사용.

하지만 엄밀히 말하면 양방향 바인딩은 존재하지 않고, 내부적으로 프로퍼티 바인딩과 이벤트 바인딩을 쓰죠. [(ngModel)]은 내부적으로 아래와 같이 동작합니다. [ngModel]="budget", (ngModelChange)="budget =$event"

출처: https://dschci.tistory.com/84

• dxi-item 에서 visible/disable처리시 다른 컴포넌트 깨지는 문제? 내부에 있는 각각의 컴포넌트를 visible/disable처리.

• cellTemplate

  <dx-data-grid [dataSource]="m_RowData">
    <dxo-selection mode="single" allowSelectAll="false"></dxo-selection>
    <dxo-scrolling mode="infinite" rowRenderingMode="standard"></dxo-scrolling>
    <dxi-column caption="" dataField="CarId" width="100" datType="string" alignment="center" [allowSorting]="true"></dxi-column>
    <dxi-column *ngFor="let i of m_DateArray" id="{{i}}" dataField="{{i}}" [width]="m_columnWidth" datType="string" alignment="center" [allowSorting]="true" cellTemplate="cellTemplate"></dxi-column>
    <div *dxTemplate="let data of 'cellTemplate'">
        <div *ngIf="m_DefaultTypeYN == true; then checkbox; else text"></div>
        <ng-template #checkbox>
            <dx-check-box class="checktextcolor longer" [disabled]="false" (onValueChanged)="OnValueChanged_Checkbox($event)" [value]="data.value"></dx-check-box>
        </ng-template>
        <ng-template #text>
            <span>{{data.value}}</span>
        </ng-template>
    </div>
  </dx-data-grid>

APPLY 장점?

1. 외부 테이블의 컬럼을 인자로 제공할 수 있음

2. 테이블 반환 함수도 사용 가능(JOIN연산자로는 불가능)

3. 특정 상황에는 JOIN보다 더 좋은 성능을 발휘할 수 있음

참고 : https://goldswan.tistory.com/m/16

let result = objArray.map(a => a.foo);

join 배열의 모든 값들을 연결한 문자열을 리턴

this.m_SelectedLocalAreaCode = array.map(x => x.LocalArea).join('/');

findIndex

arr.findIndex(x => x.value === 'something');

기타 -, 배열에서 중복값 제거

 let ret = this.m_HistoryRow.filter((item, index) => this.m_HistoryRow.indexOf(item) === index);

GROUPING(ID)의 결과가 0이면 데이터, 1이면 합계(추가된 행)

• #로 선언
• 템플릿 내에서만 유효하고, 컴포넌트 클래스에 어떠한 side effect도 주지 않음

2. Safe navigation operator (세이프 내비게이션 연산)

• null이나 undefined 에러 회피하기 위해 사용 e.g. {{obj}} 결과 없으면 화면에 아무것도 출력 안함 {{obj.id}} 에러(cannot read property 'id' of undefined) {{obj?id}} 에러 안 남

3. 비동기 Pipe

   • Promise 자동 실행
   • Observable 직접 구독
   4. 인터셉터 체인

4. LifeCycle Hooks

5. 라우터 이벤트

-, 소용량에서 쿼리비용/ 데이터 처리 유리 (INSERT데이터가 100건 이하, 1~2개 컬럼인 경우 사용) -, SP내에서 사용하면 임시테이블보다 유리(다시 컴파일 하는 일 줄어듦) -, 해당 배치(Batch) 혹은 저장 프로시져내로 Scope가 제한됨 => 정의된 함수나 프로시저 처리 끝나면 자동으로 정리됨 -, 장점 : PK, UNIQUE, CHECK 제약 사용 가능. IDENTITY 지정 가능. -, 단점 : FK 사용 불가, ALTER TABLE 불가, 추가 IDX 선언 불가 -, 가능하면 PK, UNIQUE 지정해서 정렬된 형태로 저장해 사용

임시테이블 (CREATE TABLE #TEMP)

-, #(로컬), ##(전역)으로 시작 -, DROP하지 않으면 세션 연결기간 동안 유지. 사용자 연결 끊기면 자동 삭제 => 모든 세션에서 공유하기 때문에 동시에 사용할 경우 LOCK 걸릴 수 있음 -, 대용량에서 처리 유리. (INSERT되는 데이터가 100건 이상인 경우) -, 세션단위 처리시에 사용 -, 장점 : 인덱스 작성 가능, FK제외한 나머지 제약 지정 가능, ALTER TABLE가능, INSERT INTO 함께 사용 가능

결론 : Dynamic SQL문 안에 테이블변수를 사용하고 이를 EXECUTE로 실행한다면 이는 현재 배치와 별도의 Context를 가지므로 테이블 변수를 인식할 수 없다

참고 : http://www.sqlprogram.com/TIPS/tip-table_variable.aspx https://blog.sonim1.com/166