SQLP 문제

문제

emp_idx 인덱스는 deptno, job, ename 컬럼이 결합된 결합 인덱스로 이루어져있다.

드라이빙 테이블

드라이빙, 드리븐 테이블이란

데이터베이스에서 데이터를 가져올 때, 테이블 엑세스 순서에 따라 성능 차이가 발생하기도 한다. 여기서 두 테이블간의 조인시에 먼저 엑세스 되는 테이블을 드라이빙 테이블이라고 하고, 나중에 엑세스 되는 테이블을 드리븐 테이블 이라고한다.

드라이빙 테이블로 결정되는 것은 INDEX의 존재 및 우선순위 혹은 FROM 절에서의 TABLE 지정순서에 영향을 받으며 어느 TABLE이 먼저 엑세스 되느냐에 따라 속도의 차이가 크게 날 수 있으므로 매우 중요하다.

• 테이블 A가 100건 테이블 B가 100만건인 경우
• A 테이블을 드라이빙 시 -> 100번 탐색
• B 테이블을 드라이빙 시 -> 100만번 탐색
• 즉 레코드 수가 적은 테이블을 드라이빙 하는것이 유리하다.

드라이빙 테이블 결정 규칙

JOIN이 되는 컬럼 중 한쪽에만 인덱스가 있는 경우 해당 테이블이 드라이빙 테이블이 된다.

뷰 머지를 막는 키워드

• ROWNUM
• ORDER BY
• DISITINCT
• GROUP Functions
• WINDOW Functions
• SET Operator
• CONNECT BY

SQL Trace

Trace의 각 항목

1) call

• Parse : SQL문이 파싱되는 단계에 대한 통계
• Execute : SQL문의 실행단계에 대한 통계 (주로 UPDATE, INSERT, DELETE 문들에 대한 결과가 나타남)
• Fetch : SQL문이 실행되면서 Fetch된 통계

2) count : Parse, Execute, Fetch 각 단계가 수행된 횟수

3) cpu : Parse, Execute, Fetch에 실제로 사용된 CPU 시간 (0.01초 단위)

4) elapsed : Parse, Excecute, Fetch에 실제로 소요된 시간

5) disk : 디스크에서 읽어 들인 블록 수

6) query : 메모리에서 읽어 들인 블록 수

7) current : 현재 세션에서 작업한 내용을 commit 하지않아 자신에게만 유효한 dirty blcok 수

8) rows : 각 단계에서 읽거나 변경된 ROW 수

SQL을 서로 다르게 인식하는 경우

1. 공백 문자 또는 줄 바꿈
2. 대.소문자 구분
3. 주석 (comment) 작성
4. 테이블의 Owner를 명시한 경우
5. Hint 사용
6. WHERE 절에 다른 비교 값을 입력

동일한 항목을 조회하더라도 SQL이 서로 다르게 인식되는 경우에는 각 SQL에 대해서 하드파싱이 일어난다.

예제1

1번, 2번, 3번 쿼리 결과값은 모두 동일하다. 하지만 각각의 쿼리는 다르게 인식되어 각 쿼리마다 하드파싱이 일어난다. 1번 경우 like가 소문자로 작성됬지만, 2번의 경우는 LIKE가 대문자로 작성되어 다르게 인식된다. 3번의 경우 고객조회라는 주석이 작성돼어 다르게 인식된다.

예제2

1) 공백문자 작성으로 다르게 인식된다. 2) 대.소문자 구분으로 인해 다르게 인식된다. 3) 주석 작성으로 인해 다르게 인식된다. 4) 테이블 Owner 명시로 인해 다르게 인식된다.

소프트 파싱, 하드 파싱

SQL의 파싱 과정

1. Syntax Error 확인
2. Dictionary Cache에서 Object 및 권한 확인
3. Library Cache에 SQL과 실행계획이 있는지 탐색
4. SQL과 실행계획이 있는 경우 바로 실행 단계로 넘어간다. (소프트 파싱)
5. SQL과 실행계획이 없는 경우 SQL 최적화 후 실행 단계로 넘어간다. (하드 파싱)

객체나 배열 가공을 쉽게 할 수 있도록 도와주는 Spread, Rest 문법을 알아보자

Spread

이 문법을 이용하면 객체나 배열을 합치는데 유용하다. 기존 객체를 건드리지않고 새로운 객체를 만들 때 사용한다.

사용예시

// 객체 사용 예시
let name = {
    name : 'hongGilDong'
};

let address = {
    address : 'incheon'
};

let user = {
    ...name, 
      ...address, 
      age: 13
}; // Spread 문법으로 객체 합체

console.log(user); // {name: 'hongGilDong', address: 'incheon', age: 13}

// 배열 사용 예시
let number1 = [1,2,3];
let number2 = [4,5,6];

let number3 = [...number1, ...number2]; // Spread 문법으로 배열 합체

console.log(number3); // [1, 2, 3, 4, 5, 6]

Rest

이 문법을 사용할때 구조 분해 할당 문법이 함께 사용된다. 하나의 배열이나 객체를 둘 이상으로 나누고 싶을 때 사용한다.

사용예시

// 객체 사용 예시
let user = {
    name : 'hongGilDong',
      address : 'incheon',
    age : 13
};

let { name, ...rest1 } = user; // user 객체의 name속성과 그 나머지 속성으로 나눔. 


console.log(name); // hongGilDong
console.log(rest1); // {address: 'incheon', age: 13}

// 배열 사용 예시
let numbers = [1, 2, 3, 4, 5, 6];

let [ number1, ...rest2 ] = numbers; 
// numbers 배열의 첫번째 요소와 첫번째를 제외한 나머지 요소로 나눔

console.log(number1); // [1]
console.log(rest2); // [2, 3, 4, 5, 6]

let [ number2, number3, ...rest3 ] = numbers; 
// numbers 배열의 첫번째, 두번째 요소와 그머지 요소로 나눔

console.log(number2); // [1]
console.log(number3); // [2]
console.log(rest3); // [3, 4, 5, 6]

둘만의 암호

문제풀이

function solution(s, skip, index) {
    var answer = '';
    let sArr = [];
    let skipArr = [];

    // 알파벳 to 아스키코드 
    for (let i = 0; i < s.length; i++) {
        sArr.push(s.charCodeAt(i) % 97)
    }

    // 알파벳 to 아스키코드 
     for (let i = 0; i < skip.length; i++) {
        skipArr.push(skip.charCodeAt(i) % 97)
    }


    for (let i = 0; i < sArr.length; i++) {
        for (let k = 0; k < index; k++) {
            do {
                sArr[i]++;  
                if (sArr[i] == 26) sArr[i] = 0;
            } while (skipArr.includes(sArr[i])); // skip에 등록된 단어인 경우 계속 반복  
        }
        answer += String.fromCharCode(sArr[i] + 97);
    }


    return answer;
}

자바스크립트 비동기 호출을 하는 소스를 작성할 때 가독성 높은 코드로 작성할 수 있다.

프로미스(Promise)

자바스크립트에서 비동기 처리를 하는 코드를 작성할 때 사용하게 되는 객체이다. 비동기로 동작하지만 순차적으로 처리해야하는 경우 프로미스 패턴을 이용해 간결한 코드를 작성할 수 있다.

콜백지옥 예시

function a () {
    function b () {
        function c () {
            function d () {
              //...
            }
        }
    }
}

콜백 지옥이라는 말이 있다. 위 코드는 a, b, c, d.. 함수가 비동기로 동작한다는 가정하에 작성해보았다. 소스를 보는 사람도 소스를 수정해야 하는 사람도 가독성이 떨어지는 코드를 보며 어려움을 겪을 것 이다. 또한 만약 처리 도중 특정 메소드에서 오류가 발생하는 경우, 그 원인을 찾기가 어렵다.

이때 프로미스가 필요하다.

Promise의 3가지 상태

프로미스의 상태란 프로세스 처리과정을 의미한다. 프로미스 객체를 생성하고 종료될 때 까지 3가지 상태를 갖게 되는데 대기, 이행, 실패 단계가 존재한다.

• Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
• Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
• Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

대기 상태

new Promise() 메소드를 통해 호출하는 순간 Pending(대기) 상태가 된다. 비동기 처리가 끝날 때 까지 Pending(대기) 상태가 유지된다.

new Promise(function(resolve, reject) {
  // ...
});

이행 상태

비동기 처리가 다 끝난 후 resolve 함수가 콜백된다. 이때를 이행 상태라 하는데, 이 시점에서 .then() 메소드를 통해 결과 값을 받을 수 있다.

new Promise(function(resolve, reject) {
    resolve();
});

실패 상태

비동기 처리가 실패한 경우 reject 함수가 콜백된다. 이때를 실패 상태라 하고, 이 시점에서 .catch() 메소드를 통해 실패한 이유를 알 수 있다.

new Promise(function(resolve, reject) {
  reject();
});

프로미스 사용 방법

프로미스는 말 그대로 약속이다. 비동기 처리에 대한 약속된 결과를 반환한다. 이때 약속값을 통해 개발자는 해당 함수의 종료시점을 알 수 있으며, 종료시점 이후 로직을 작성할 수 있다.

1. 프로미스 객체 생성 및 리턴

function promiseTest () {
     return new Promise(function(resolve, reject) {
          if (resolve) {
            resolve({test : 'success'});
        }
          else if (reject) {
              reject(new Error("error occured!!"));
        } 
    });
}

비동기 호출이 성공과 실패의 경우에 대해서 각각 resolve, reject에 할당한다.

2. 프로미스 체이닝

function callPromiseTest () {
     promiseTest().then(response => {
          console.log(response.test); // success
    }).catch(error => {
          console.log(error); //error occured!!
    });
}

비동기 작업이 정상적으로 처리된 경우에 then 메소드를 통해 처리된 값을 인자로 전달 받을 수 있다. 비동기 작업이 실패한 경우 catch 메소드를 통해 실패한 이유를 분석한다.

프로미스를 쓰면 비동기 처리에 많은 편리함이 있다. then과 catch를 통해 성공과 실패를 제어하기 편하며, 여러 비동기 함수를 작성할때도 하나의 비동기가 끝나고 리턴되는 시점인 .then() 메소드 안에 소스를 작성하면 되므로 가독성이 뛰어나다.

var, let, const의 차이점

개요

var, let, const를 설명할 때 크게 2가지로 분류할 수 있다. 첫번째는 스코프 범위, 두번째는 재할당이다. 심화적으로 더 들어가면 호이스팅 개념도 등장한다.

1. 스코프 범위

스코프 범위란, 자바스크립트에서 변수에 접근할 수 있는 범위를 뜻한다. var와 let, const는 접근할 수 있는 범위가 다르다.

1) var의 스코프 범위 var는 함수안에서면 어디서든 접근가능하다. (function scope)

예제 소스를 보며 이해해보자.

function fnAccess () {
  if (true) {
    var foo = 'scope';
    console.log(foo);
  }

  console.log(foo);
}

if(true) 안에서 선언된 foo변수는 if 밖에서도 접근이 가능하다. 함수안에서 선언된 변수는 어디서든 유효하다.

2) let의 스코프 범위 let은 스코프 범위가 블럭{} 단위이다. (block scope)

function fnAccess () {
  if (true) {
    let foo = 'scope';
    console.log(foo);
  }

  console.log(foo);
}

1)번과 동일하게 작성하고, 단지 var를 let으로 바꾸면 어떻게 될까?

위 이미지와 같이 에러메서지가 뜬다. foo라는 변수는 지역변수로 선언되서 if (true){} 안에서만 유효한데, 유효범위 밖에서 접근하려고 했기때문에 에러가 뜨는 것이다. 즉, 여기서 알 수 있는건 지역변수로 선언된 let은 해당 블럭{}안에서만 유효하다는 것 이다.

2. 재할당

1) 재할당 재할당이란, 선언된 변수에 새로운 값을 대입하는 것을 말한다. var와 let은 변수여서 재할당이 가능하지만 const는 상수이기 때문에 재할당이 불가능하다.

const foo = 'foo';
foo = 'foo1';

해당 소스는 오류가 뜬다. const로 선언된 foo 변수에 'foo1' 값을 재할당하려고 했기때문이다.

2) EventListener를 통한 방법

  <!-- parentComponent.html -->
  <template>
      <c-child-component> 
    </c-child-component>
  </template>

  // parentComponent.js
  constructor() {
      super();
      /*
      this.template.addEventListener('name', evt => {
          console.log(evt.detail.name);
      });
      this.template.addEventListener('address', evt => {
          console.log(evt.detail.address);
      });
      */  
      this.template.addEventListener('name', this.nameHandler);
    this.template.addEventListener('address', this.addressHandler);
  }

  function nameHandler (event) {
    console.log('FirstName : ' + event.detail.first);
    console.log('LastName : ' + event.detail.last);  
  }

  function addressHandler (event) {
      console.log('Address : ' + event.detail);
 }

원리는 1번 방법과 동일하다. 작성방법만 조금 다른데, on키워드가 아닌 부모 컴퍼넌트의 LWC 생성자(constructor) 안에 받을 이벤트를 등록해준다.

OAUTH + SPRING BOOT https://docfriends.github.io/DevStrory/2021-10-08/spring-boot-security-jwt-social/

OUATH 실제구현 사례 https://data-jj.tistory.com/53

데코레이터란?

Lightning 웹 구성 요소 프로그래밍 모델의 속성 또는 함수 기능

** 종류로는 @api, @wire, @track으로 총 3개가 있다. **

1. @api

@api 데코레이터는 컴퍼넌트 내 변수 또는 함수에 지정 가능하다. @api 데코레이터를 활용도는 2가지가 있다.

1. (해당 화면이 레코드 페이지인 경우) 레코드 Id를 가져올 때 사용한다.

2. A 컴퍼넌트 안에 B 컴퍼넌트가 있는 있는 경우, B에서 변수값을 A로부터 상속 받을 때 사용한다. 1) 레코드를 가져올 때는 아래와 같이 지정해주면 된다.

   ```java export default class RecordPageComponent extends LightningElement { @api recordId; } ```
   2) 하위(자식) 컴퍼넌트의 변수 값을 상위(부모) 컴퍼넌트로 부터 상속받을 때 아래와 같이 지정한다.

   ```java

*부모-자식관의 관계에 있는 컴퍼넌트의 경우 (ex: A 컴퍼넌트안에 B 컴퍼넌트가 포함된 경우, A는 부모 B는 자식의 관계에 있다고 표현한다.) 자식 Component에서 변수에 @api 데코레이터를 지정하여, 부모 Component의 값을 상속 받을 수 있다.

```html
ParentComponent.html
<template>
    <c-child-Component child-label={value}></c-child-Component>
</template>

ParentComponent.js
export default class ParentComponent extends LightningElement {
    value = 'child label';

} 

ChildComponent.html
<template>
  childLabel : {childLabel}
</template>

ChildComponent.js
export default class ChildComponent extends LightningElement {
    @api childLabel;

}

2. @track

https://private-space.tistory.com/97 https://zzang9ha.tistory.com/381

[출처] https://www.youtube.com/watch?v=NYc18lS6FtQ&list=PLlCujDgOz8x4JN2wHKbmlM8bFan-WaKj5&index=14

[출처] https://yurimac.tistory.com/34

[출처] https://www.youtube.com/watch?v=mMoOok9eLQ4&list=PLlCujDgOz8x4JN2wHKbmlM8bFan-WaKj5&index=11