1-1. 자식으로 삽입

: append(), appendTo(), html(), prepend(), prependTo(), text()

• jquery 설명

1-2. 형제로 삽입

• after(), before(), insertAfter(), insertBefore()

1-3. 부모로 감싸기

• unwrap(), wrap(), wrapAll(), wrapInner()

1-4. 삭제

• detach(), empty(), remove(), unwrap()

1-5. 치환

• replaceAll(), replaceWith()
• jquery 설명

1-6. 클래스

• addClass(), hasClass(), removeClass(), toggleClass()

1-7. 속성제어

• attr(), prop(), removeAttr(), removeProp(), val()

2. 탐색

• jquery 설명

3. 입력요소 값 가져오기

3-1. val() 함수의 사용

• 입력값 조회 : 파라미터 없이 함수를 호출하면 현재 설정되어 있는 입력값(value 속성의 값)을 리턴받는다.

  let value = $("셀렉터").val();

• 입력값 설정 : 파라미터를 통해 입력값(value 속성 값)을 설정한다.

   $("셀렉터").val("내용");

  • 조회한 입력값의 존재 여부를 if문으로 검사하면 입력여부를 알 수 있다.

    if(!value){...}

  • focus() 함수의 사용 : 입력요소에 포커스를 강제로 설정한다. : $("셀렉터").focus();

3-2. 셀렉트박스 입력값

• 만약 <option>요소에 value 속성이 없을 경우 태그 안의 내용을 가져오기 때문에 값이 필요없는 항목이더라도 반드시 공백을 지정해야 한다.

  <select>
  <option vlaue="">--선택하세요--</option>
  <option value="1">항목1</option>
  </select>

• 드롭다운 역시 val() 함수를 사용해서 선택한 요소의 값을 가지고 온다.
  • 선택위치 조회 드롭다운에 포함된 option 태그 중에서 선택된 항목 (:selected)의 위치를 검사한다.

    $("셀렉터 > option:selected").index()

3-3. Radio의 선택항목

• 선택값 조회
• 여러개 항목중에서 선택된 항목을 의미하는 가상 셀렉터 :checked를 사용하여 선택된 요소에 접근한다
• 라디오 버튼은 여러 개의 항목 중에서 단 하나만 선택할 수 있으므로, :checked 가상 클래스를 사용하여 접근하는 요소 역시 단일 요소가 된다.

   let value = $("셀렉터:checked").val();

3-4. checkbox 선택항목

• 체크박스는 여러 개의 항목들 중에서 복수 선택이 가능한 요소이다.

• 사용자가 선택한 항목에 대한 접근은 가상셀렉터 :checked를 사용해야 한다.

• 체크박스는 복수 선택이 가능하기 때문에 접근한 요소는 배열 상태가 된다.

  <input  type="checkbox" name="hello" 
  class="mycheck" value="1"/>
  <input  type="checkbox" name="hello" 
  class="mycheck" value="2"/>
  <input  type="checkbox" name="hello" 
  class="mycheck" value="3"/>
  
  let el = $("셀렉터:checked");
  let el = [
  <input  type="checkbox" name="hello" 
  class="mycheck" value="2"/>
  <input  type="checkbox" name="hello" 
  class="mycheck" value="3"/>
  ];

  • 가져온 요소가 배열이기 때문에 반복문으로 처리해야 한다.
  • 배열의 요소들을 jquery객체로 변환하여 val() 함수를 호출

    for( let i=0; i<el.length; i++ ){
    let value = $(el[i]).val();
    }

4. 입력요소 제어

4-1. HTML 요소에 대한 반복처리가 필요한 경우

• $.each() 함수는 HTML 요소의 수 만큼 콜백함수를 호출하면서 배열의 인덱스와 원소를 파라미터로 전달한다.

  $.each(el, function(index, item){
  // index는 배열의 위치
  // item은 배열의 각 원소
  let value = $(item).val();
  });

4-2. 포커스 관련 이벤트 처리

• 요소에 포커스가 들어갔음을 감지하는 이벤트
• focus()

4-3. 포커스가 빠져 나왔음을 감지하는 이벤트

• blure() 함수는 포커스가 빠져나왔음을 감지

1-1. 마우스이벤트

• MouseEnter + MouseLeave 이벤트
• 이를 위한 복합적인 hover 이벤트를 제공

1-2. 키보드 이벤트

• keypress : 영문, 숫자, 특수문자, 띄어쓰기 키에 대해 반응. 한글x
• keydown : 모든 키에 대해 반응

2. 태그 내에 문장 삽입

• $("셀렉터").html() : 셀렉터 태그 내에 존재하는 자식태그를 통째로 읽어올 때 사용되는 함수. 태그를 동적으로 추가할 때 주로 사용

• $("셀렉터").text() : 셀렉터 태그 내에 존재하는 자식태그들 중에 html 태그는 모두 제외한 채 문자열만 출력하고자 할 때 사용하는 함수

3. effect 효과

• show() : 선택한 요소를 나타나게 한다.
• hide() : 선택한 요소를 사라지게 한다.

4. html 속성 제어

4-1. 이벤트 처리 함수 안에서 자기 자신을 판별하기

• 이벤트에 의해서 실행되는 함수 영역 안에서는 특수 키워드 this를 사용할 수 있다.
• 이 키워드를 $(this) 함수에 전달하면, 이벤트가 발생한 자기 자신을 감지할 수 있다.

4-2. 나는 몇 번째 요소인가

• 특정 객체에 대하여 index()함수의 리턴값을 사용하면 자신이 속한 부모 태그 안에서 태그 종류의 구분 없이 자신이 몇 번째 요소인지를 알 수 있다.
• index() 함수는 요소를 0부터 카운트한다.
• 태그 종류에 상관 없이 무조건 부모 요소 안에서 몇번째 항목인지를 판별한다.

5. 요소의 속성값 제어

5-1. 속성값 읽기

• html 태그 요소의 특정 속성값을 얻기 위해서는 attr()함수를 사용한다.

  let 변수 = $("셀렉터").attr("속성이름");

5-2. 속성값 변경/추가 하기

• HTML 태그 요소의 특정 속성값을 지정할 경우에도 attr()함수를 사용한다

  $("요소").attr("속성이름", "값");
  $("요소").attr(
      "속성이름" : "값",
      "속성이름" : "값",
      "속성이름" : "값"
  );

6. 페이지가 로드 될 때

6-1. javascript

  window.onload = function(){~}

6-2. jQuery

  $(document).ready(function(){~})

6-3. jQuery 에서의 축약 버전

  $(function(){~})

7. CSS 속성 제어

7-1. 속성값 읽고 변경/추가하기

• HTML 태그 요소에 적용된 특정 속성값을 얻기 위해서는 css() 함수를 사용한다.

   $("요소").css("속성이름","값");
   $("요소").css(
       "속성이름" : "값",
       "속성이름" : "값",
       "속성이름" : "값"
   );

7-2. CSS 클래스의 적용 여부 확인

• HTML태그 요소의 특정 클래스 적용 여부는 hasClass() 메서드의 리턴값(boolean)으로 파악할 수 있다.

  let 변수 = $("요소").hasClass("클래스이름");

7-3. 클래스의 적용과 해제

• 요소에 특정 css클래스를 적용할 경우, addClass()함수를 사용

• 두 개 이상의 클래스를 한번에 적용할 경우 공백으로 구분하여 지정

  $("요소").addClass("클래스이름");

• HTML태그 요소에 적용된 특정 CSS 클래스를 제거할 경우 removeClass() 함수를 사용한다.

• 두 개 이상의 클래스에 대한 처리일 경우 공백으로 구분

  $("요소").removeClass("클래스이름");

7-4. toggleClass();

• HTML 태그 요소에 CSS클래스에 대한 적용과 해제를 자동으로 반복하고자 할 경우, toggleClass() 함수를 사용할 수 있다.
• 두 개 이상의 CSS 클래스를 동시에 처리할 경우 공백으로 구분한다.

  $("요소").toggleClass("클래스이름");

7-5. this의 용법

• $(this)는 현재 이벤트가 발생한 단 하나의 요소

7-6. this를 부정하는 not(this)

• 이벤트가 발생한 자신을 제외한 나머지 객체들을 가리킨다.

7-7. 여러 패턴 확인하기

• .btn 클래스를 갖는 요소 중에서 #mybtn만 제외

  $(".btn").not($("#mybtn")).css(~);

• button 태그 중에서 세번째 요소만 제외

  $(".btn").not(".btn:eq(2)");

1-1. 라이브러리

• 자주 사용하는 로직을 재사용할 수 있도록 고안된 소프트웨어를 라이브러리라고 한다.
• 자주 사용하는 코드들을 재사용할 수 있는 형태로 가공해서 프로그래밍 효율을 높여주는 코드

1-2. jQuery

• jQuery는 DOM을 내부에 감추고 보다 쉽게 웹페이지를 조작할 수 있도록 돕는 도구이다.
• 엘리먼트를 선택하는 강력한 방법과 선택된 엘리먼트를 효율적으로 제어할 수 있는 다양한 수단을 제공하는 자바스크립트 라이브러리

1-3. api doc

• JQuery API

2. jQuery 제어의 대상 찾기

• jQuery -> $

• h1 태그 요소에 대한 획득

  let mytag = $("h1");

• hello라는 css 클래스를 갖는 요소에 대한 획득

  let mytag = $(".hello");

• hello라는 id 속성을 갖는 요소에 대한 획득

  let mytag = $("#hello");

• 여러개 선택

  $('a, b, c')

• 자식/자손 선택자

  $('a b')

• 태그 속성

  $('tag_name[name=태그명]')

3. 이벤트

5-1. 이벤트를 정의하는 방법

• $("셀렉터").이벤트이름(function(){~});

• 웹 브라우저의 주소 표시줄을 제어
• 그 일부를 조회할 수 있으며 변경할 수도 있다.

1-1. location 정보

• location.href : 문서의 URL 주소

• location.host : 호스트 이름과 포트
• location.pathname : 디렉토리 이하 경로
• location.port : 포트번호
• location.protocol : 프로토콜 종류
• location.search : 조회 부분
• location.reload() : 페이지 새로고침
• location.href = "주소값" -> 페이지 이동

2. history

• 이전 페이지로 돌아가기
• history.back() : 이전 페이지로 이동
• history.forward() : 다음 페이지로 이동

3. Navigator

• 브라우저의 정보를 조회하기 위한 속성들을 가지고 있는 객체

4. document

• 문서 내에서 특정 태그에 해당하는 객체를 찾는 방법은 여러가지가 있다.

• document.getElementsByTagName()

• 인자로 전달된 태그명에 해당하는 객체들을 찾아서 유사 배열에 담아서 반환
  • document.getElementsByClassName()
• 인자로 전달된 클래스명에 해당하는 객체들을 찾아서 유사 배열에 담아서 반환
  • document.getElementsById()
• 인자로 전달된 아이디명에 해당하는 객체들을 찾아서 유사 배열에 담아서 반환

5. 이벤트

5-1. this

• 이벤트가 발생한 대상을 필요로 하는 경우 this를 통새서 참조할 수 있다.

5-2. 이벤트 등록 방식 : inline

• 이벤트를 이벤트 대상의 태그 속성으로 지정하는 것
• inline 방식은 정보인 HTML과 제어인 Javascript가 혼재된 형태이기 때문에 좋지않은 방법

5-3. 프로퍼티 리스너

• 프로퍼티 리스너 방식은 이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식이다.
• 인라인 방식에 비해서 HTML과 Javascript를 분리할 수 있다는 점에서 선호되는 방식이다.

5-4. 이벤트 객체

• 이벤트가 실행된 맥락의 정보가 필요할 때는 이벤트 객체를 사용한다. 이벤트 객체는 이벤트가 실행될 때 이벤트 핸들러의 인자로 전달된다.

5-5. EventListener

• 이벤트를 등록하는 가장 권장되는 방식이다.

6. 기본동작의 취소

• 웹 브라우저의 구성요소들은 각각 기본적인 동작 방법을 가지고 있다.
• <a> 태그를 클릭하면 href 속성의 url 이동
• 폼에서 submit 버튼을 누르면 데이터가 전송된다.

6-1. inline

• return 방식이 false이면, 기본 동작 취소

7. 마우스 이벤트

• 웹브라우저는 마우스와 관련해서 다양한 이벤트 타입을 지원한다.

  7-1. 종류

  • click : 한번 클릭

  • dblclick : 더블 클릭
  • mousedown : 마우스를 누를 때
  • mouseup : 마우스 버튼을 땔 때
  • mousemove : 마우스를 움직일 때
  • mouseover : 마우스가 대상에 진입할 때
  • contextmenu : 컨텍스트 메뉴가 실행 될 때

8. form 태그

8-1. <select></select>

• <select> 태그 안에 포함된 <option> 태그 중에서 몇 번째 항목이 선택되었는지를 파악하기 위해서는 <select>태그 객체의 selectedIndex 속성을 사용한다.
• 선택 위치는 0부터 시작한다. ( 가장 첫번째 <option> 태그가 0이다.)
• <select> 태그 객체의 selectedIndex 속성에 임의의 숫자값을 대입하면 대입한 위치에 해당하는 <option> 태그가 강제로 선택된다.
• <select>태그의 객체는 하위 <option>태그 객체를 배열 형태로 가지고 있기 때문에, 배열의 인덱스 값을 selectedIndex 속성값으로 사용하면 선택한 <option> 태그의 객체를 획득할 수 있다.
• 선택한 <option> 태그를 의미하는 객체의 value 속성은 사용자가 선택한 항목의 값을 의미한다.

8-2. 라디오 버튼

• name 속성의 값을 동일하게 지정하기 때문에 javascript에서 name 속성을 통하여 접근할 경우 배열로 처리된다는 공통점을 가지고 있다.
• document.form1.gender[0].value로 값 획득
• 체크 박스의 체크 상태를 검사 document.form1.gender[0].checked
• 첫번째 항목을 강제로 체크하는 경우 document.form1.gender[0].value.checked = true;

8-3. 작성된 내용을 전송하기

• form 객체의 submit()함수는 <form> 태그의 action 속성에 명시된 파일로 사용자의 작성내용을 전송
• submit() 함수는 <input type = "submit"> 버튼을 클릭한 것과 동일한 효과를 얻을 수 있다.
• document.form1.submit();

8-4. 작성된 내용을 리셋하기

• form 객체는 작성된 내용을 리셋하기 위한 reset() 함수를 찾는다. 이 함수를 호출하게 되면 <input type = "reset"> 버튼을 클릭한 것과 동일한 효과를 얻을 수 있다.
• document.form1.reset();

1-1. 날짜, 시간 계산

• 두 날짜의 차이를 구하기 : TimeStamp 값 사용
• 1/1000 초 다윈 형태로 반환해서 리턴
• getTime()
• 두 객체 사이의 날짜 값 -> 24(시간)60(분)60(초)*1000 으로 나누면 된다.
• 나눈 값은 소수점 이하를 빼야한다.

1-2. setInterval 함수

• setInterval 함수는 다른 함수의 이름과 1/1000초 단위의 시간값을 파라미터로 설정하여 정해진 시간에 한번씩 파라미터로 전달된 함수를 반복적으로 호출한다. // printTime

1-3. setTimeout()

• 지정된 시간만큼 딜레이 한 후 파라미터로 전달된 함수를 1회만 호출

2. 웹브라우저와 javascript

• 웹 브라우저에 올라가는 것은 HTML, CSS, Javascript이다.
• HTML : 정보
• CSS : 디자인
• Javascript : 웹 브라우저 HTML 제어

3. HTML에서 자바스크립트 로드하기

3-1. inline

• inline방식은 태그에 직접 자바스크립트를 기술하는 방식이다. 장점은 태그에 연관된 스크립트가 분명하게 드러난다는 점이다. 하지만 정보와 제어가 섞여 있기 때문에 정보로서의 가치가 떨어진다.

4. Object Model

• 웹 브라우저의 구성요소들은 하나하나가 객체화 되어있다. 자바스크립트로 이 객체를 제어해서 웹브라우저를 제어할 수 있게 된다. 이 객체들은 서로 계층적인 관계로 구조화 할 수 있다.
• BOM과 DOM은 이 구조를 구성하고 있는 가장 큰 틀의 분류라고 할 수 있다.

4-1. window객체

• window 객체는 DOM을 포함한 브라우저의 창을 나타낸다. 자바스크립트 모든 객체, 전역 변수, 전역 함수들은 자동으로 window 객체의 프로퍼티가 된다.
• BOM : browser object model
• DOM : document object model

• 변수의 중복 선언 허용
• ES6이후, 이를 보완하기 위해 추가된 변수 선언 방식이 let와 const이다.

1-1. let과 const의 차이점

• let은 변수의 재할당이 가능
• const는 변수 재선언, 재할당이 불가능
• 변수 선언에는 기본적으로 const를 사용하고 재할당이 필요한 경우에 한정해 let을 사용하는 것이 좋다.

2. 자바스크립트 호이스팅

• javascript 호이스팅은 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의 선언문을 해당 범위 맨 위로 끌어올리는 것처럼 보이는 현상
• function이 만들어지는 시점과 호출하는 시점의 코드상의 차이는 있으나, 자바스크립트 호이스팅 현상으로 정상작동
• 그러나 함수 표현식은 호이스팅이 적용되지 않는다.

3. Array

3-1. 배열이란

• 변수를 그룹으로 묶는 형태의 한 종류로서, 사물함 같은 형태를 갖고 있다.
• 대부분의 프로그래밍 언어에서 하나의 배열 안에는 같은 종류(데이터형)의 값들만 저장될 수 있지만, javascript는 데이터 형의 선언을 별도로 하지 않기 때문에 데이터 형에 대한 제약이 없다.

3-2. 배열 생성

  - let myarray = new Array(값1, 값2, ...);

3-3. 인덱스

• 생성된 배열은 사물과 같이 각각의 칸에 값들이 저장되고, 일련번호가 0번부터 지정된다. 일련번호 = 배열의 인덱스

3-4. 2차배열

• 생성

  let myarray = new Array(
  new Array(값1, 값2, ...),
  new Array(값1, 값2, ...)
  );
  let myarray = [
  [값1, 값2, ...],
  [값1, 값2, ...]
  ];

3-5. 2차배열 사용

• 배열이름[행][열] 접근 할 수 있다

3.6 길이(크기) 조회

• 행의 크기 조회 myarray.length;

• n번째 행에 대한 "열"의 크기를 조회 myarray[n].length;

4. 객체

4-1. 객체 생성 과정

• 빈 객체의 생성 : 아무런 기능이 없는 상태의 빈 객체 이 상태가 prototype
• 변수의 추가, 함수의 추가, 배열의 추가

4-2. 빈 객체의 생성

• 빈 객체를 만드는 것은 블록괄호{}를 지정하는 것으로 표현된다. let people = {};

4-3. 변수의 추가

• 객체 안에 추가되어 있는 변수를 멤버변수 혹은 프로퍼티라고 한다
• 변수를 추가하기 위해서는 객체이름.변수명 = 값 의 형식을 사용한다.
• 선언을 위한 별도의 let, const 키워드는 사용되지 않는다. people.name = "jh"; people.gender = "M";

4-4. 메서드 안에서 객체 자원 활용

• 객체 안에 포함된 메서드에서 다른 메서드를 호출하거나, 프로퍼티를 활용하고자 하는 경우에는 this 키워드를 사용한다.

  • this.변수이름 = 값;

  • let 변수이름 = this.함수이름(값);

+α : 자바와 달리 자바스크립트에서의 변수는 어떤 타입의 값이든 할당할 수 있다. 즉, 함수도 변수에 할당가능

1-1. for문

• for문은 사람이 직접 처리하기에 부담스러운 반복적인 작업을 처리하기에 매우 용이

1-2. while 문

• java랑 동일

2. 함수

2-1. 함수의 정의

  function funcName(){
    ... 
  }

2-2. 함수의 호출

  funcName();

2-3. 파라미터가 있는 함수

  function funcName(파라미터, ...){ ... }

2-4. 파라미터가 있는 함수의 호출

  funcName(10, 2);

2-5. 리턴형 함수

  function f(x){
    return x+1;
  }
  var y = f(5);

• 자바스크립트의 함수는 처리도중 return문을 만나게 되면 그 즉시 실행을 중단한다.
• 이러한 특성을 이용하여 특정 조건이 충족되지 않을 경우 등에 대한 처리 중단을 목적으로 return문을 사용할 수 있으며, 리턴값없이 처리를 중단하고자 하는 경우에는 return 키워드만 사용한다.
• 이 때, 값이 없는 리턴 결과를 변수에 대입한 경우, 정의되지 않은 값인 "undefined"가 출력된다.

2-6. 익명함수

• 일회성 호출

      (function(){
          i = 0;
          while(i<10){
              document.write(i);
              i++
          }
      })();

2-7. 화살표함수

• 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법

• 매개변수의 지정

  • () => {...} // 매개변수가 없는 경우

  • x => {...} // 매개변수가 한 개인 경우
  • (x,y) => {...} // 매개변수가 여러 개인 경우
  • var f = () => console.log('function');

• 함수 몸체 지정 방법

  • x => {return x * x}

  • x => x * x // 함수 몸체가 한줄일 경우 {}, return 생략 가능

2-8.

• 함수의 파라미터로 함수를 넘기는 것

+α : script내의 태그들은 document.write(태그)로 모두 처리한다.

    <script>
        document.write("<table border = '2'>");
            for(var i = 0;i<=6;i++){
                document.write("<tr>")
                for(var j = 0;j<=6;j++){
                    document.write("<td>("+i+","+j+")</td>")
                }
                document.write("</tr>")
            }
        document.write("</table>");
    </script>

• Bootstrap

2. 무료 템플릿 사이트

• themewagon

3. JavaScript

3-1. 자바스크립트

• 브라우저 내장 자바 스크립트 엔진을 이용해 실행

3-2. 바닐라 스크립트(Vanilla JS)

• 바닐라 자바스크립트란 플러그인이나, 라이브러리를 사용하지 않은 순수 자바스크립트를 의미한다.
• 바닐라 스크립트 = 자바 스크립트

3-3. 바닐라 스크립트의 장점과 중요성

• 아무것도 다운로드받지 않아도 되니 가볍고 빠르다.

3-4. javascript에 영향을 준 언어

• java : 기본적인 문법
• Scheme

3-5. javascript 버전

• ECMAScript
• 자바스크립트의 언어의 표준

4. 콘솔

• 웹 브라우저에서 화면에 표시되는 것과 관계없이 어떠한 배용을 출력하기 위한 공간
• 각 브라우저마다 콘솔 기능을 지원하고, 프로그램의 중간 단계의 변화 상태를 출력하여 프로그램 실행 과정을 추적할 수 있다.

5. 변수의 사용방법

5-1. 변수의 사용

• 변수를 사용하기 위해서는 "선언"과 "할당"의 두 영역으로 구분해야 한다.
• 변수의 선언 -> 선언은 var 키워드 뒤에 사용하고자 하는 변수의 이름을 지정하고 세미콜론(;)으로 한 라인을 종료한다.

  var num;
  var hello;

• 변수의 할당 -> 선언된 변수에 원하는 값을 대입하는 과정을 의미한다. 숫자형식이나 문자열 등을 사용할 수 있다.

  num = 123;
  hello = "안녕";

• 선언과 할당의 통합

  var num = 123;
  var hello = "안녕";

5-2. 변수 이름을 정하는 규칙

• 변수 이름은 영문, 숫자, "_" 만 사용 가능하다
• 변수의 이름의 첫 글자는 숫자 불가능
• 대소문자 구별, 오타 주의
• myName, my_name

5-3. 변수의 종류

• javascript의 면수는 표현하는 값의 종류에 따라 형식이 구분된다.
• 이러한 변수의 종류를 데이터형(dataType)이라고 한다.
• Number : 정수, 실수
• String : 문자열. (" "), (' ') 둘 다 가능
• Boolean : 참, 거짓
• Object : 객체를 저장. 브라우저 제어, form 제어
• Null
• undefined : 정의되지 않음. 처음부터 변수가 선언만 되고 아무런 값도 할당되지 않은 상태. 이 상태의 변수는 어떠한 처리도 불가능

6. 연산자

6-1. 연산자 종류

• 대입연산자
• 사칙연산자
• 단항연산자 : +=, *= 등
• 증감연산자 : ++, --
• 비교연산자 : ==, != 등
• 논리연산자

6-2. 비교연산자

• ==, or, !=
• javascript 에서는 비슷한 것을 같은 것으로 간주하기도 한다. 예) 1 == "1" -> true

6-3. 일치연산자

• ===
• 좌항과 우항이 진짜 '정확'하게 같을 때 true, 다르면 false
• javascript, php는 비슷한 것을 같은 것으로 간주하기도 한다. 따라서 ===를 사용할 것을 권장
• !== : 정확하게 같지 않다는 의미

7. HTML에 결과 출력하기

• document.write(출력내용);
• HTML
• <body> 태그 안에 새로운 내용을 출력하고자 할 경우 자바스크립트에게 "쓰다"(write)라는 명령어를 전달한다.

   document.write("<h1>출력내용</h1>");

• HTML 태그안에 출력되는 내용이므로, HTML 태그를 포함하여 출력할 수 있다.

8. 조건문

8-1. 조건문의 종류

• if, if ~ else, switch

1-1. border 속성

border : 굵기 종류 색상;

1-2. 표시 위치에 따른 border 속성의 세분화

• 테두리의 상/하, 좌/우 영역을 각각 개별적으로 지정하기 위해 다음과 같이 세분화 한다.

  border-top : 굵기 종류 색상; border-right : 굵기 종류 색상; border-bottom: 굵기 종류 색상; border-left : 굵기 종류 색상;

2. padding 속성

padding : px값;

• 내용 영역과 border 사이의 여백의 크기

2-1. 표시 위치에 따른 값의 세분화

padding-top : 상단여백 px단위로 지정 padding-right : 우측여백 px단위로 지정 padding-bottom : 하단여백 px단위로 지정 padding-left : 왼쪽여백 px단위로 지정

2-2. 값의 지정 형식(공백 구분)

• 1개의 값 : 상/하/좌/우 모두 같은 크기의 여백 지정
• 2개의 값 : 공백으로 구분하여 2개의 값을 지정할 경우, 첫번째 값은 "상/하", 두번째 값은 "좌/우"가 된다.
• 4개의 값 : 공백으로 구분하여 4개의 값을 지정할 경우, 첫번째 값은 상단 여백, 그 후 우측, 하단, 왼쪽의 순서(시계방향)로 적용된다.

3. 중첩된 div 간의 크기 관계

• child는 parent의 내용이므로 child의 border와 padding을 합한 모든 크기 요소의 합이 parent의 width나 height를 넘을 수 없다.
• 만약 child의 전체 크기가 parent의 width나 height의 값보다 커진다면 child는 parent를 벗어나게 된다.
• width와 height의 값은 한 번 부여되면 고정 사이즈를 갖는 특성이 있으며, 내용이 많아질 경우 자동으로 확장되지 않는다.

3-1. 백분율로 사이즈를 지정하는 경우

• 박스에 대한 width나 height 속성을 백분율로 지정할 경우에도 비율에 대한 기준이 되는 것은 부모 요소에 대한 width와 height 값이다.

3-2. auto값

• width, height, margin-left, margin-height에 대하여 적용할 수 있는 특수한 값으로, 어떤 속성에 적용되느냐에 따라 동작하는 원리가 달라진다.
• width : auto; -> 부모 요소의 width값으로부터 padding과 border의 크기를 뺀 나머지 값을 자동으로 계산하여 자식의 width에 적용한다.
• height : auto; -> 자신이 포함하고 있는 내용 영역에 대한 높이 만큼만 height를 설정한다.

4. margin

4-1. margin 겹침 현상

• margin 겹침 현상은 상하 margin값이 어떤 상황에서 사라지는 현상을 의미한다.

4-2. margin의 적용원리

• 움직일 수 없는 요소를 밀어내어 스스로의 위치를 변경시키거나 다른 요소를 밀어내는 특성을 갖기 때문에 위치와 관련된 속성이다.
• 바꾸어 말하면 margin 속성은 요소의 위치를 변경시키면서 주변 요소에게 영향을 주게 된다.

5. display

5-1. block-level

• display : block;
• block레벨 요소의 기본값, 이 속성이 적용되면 해당 요소는 width와 height를 적용할 수 있다.
• 이 요소는 하나의 문단으로 처리되기 때문에, 태그 다음에 나타나는 요소는 자동으로 줄바꿈 된다.

5-2. inline-level

• display : inline;
• inline 레벨 요소의 기본값.
• 이 속성이 적용되면 해당 요소는 width, height를 부여하더라도 적용되지 않는다.
• 이 요소는 하나의 단어나 강조 구문처럼 인식되기 때문에, 태그 다음의 요소는 줄바꿈 되지 않는다.

5-3. 공통

• display : none;
• 이 속성이 적용된 요소는 화면상에 표시되지 않는다.

5-4. display 속성에 대한 inline-block 값

• block-level 요소의 특성과 inline-level 요소의 특성을 혼합한 형태
• block : 크기 지정 가능
• inline : 문장으로 형성됨
• 즉, 크기를 지정할 수 있는 inline-level 요소로 처리

6. float

6-1. float란?

• float 속성은 뉴스 페이지와 같은 곳에서 흔히 볼 수 있다
• 이미지나 박스를 화면의 우측 혹은 좌측에 고정시켜 놓고 텍스트가 그 옆을 흐르듯이 지나가도록 하는 것을 floating처리라 하고, 이때 사용되는 속성이 float 속성이다.

6-2. float 속성

float : left; 요소를 부모 박스 안에서 왼쪽에 고정 float : right; 요소를 부모 박스 안에서 오른쪽에 고정 float : inherit; 부모 요소에 적용된 float 속성값을 상속 float : none; float 속성을 적용하지 않음. 기본값

6-3. float 속성 사용시, 주의사항

• width 속성에 대한 auto값을 사용할 수 없게 된다.
• %나 px 단위의 값만 사용 가능하다.

6-4. 서로 이어지는 두 개의 문단

• float 속성은 서로 문단이 다르더라도 이후에 명시되는 모든 요소에 대하여 영향을 준다
• 그러므로 float 속성이 사용된 후, 이 기능을 off하지 않는다면 문단은 새로 시작되지 않는다.

6-5. 중첩된 박스 구조에서의 float 속성

• float 속성이 적용된 요소는 부모 요소가 감싸지 못한다.
• float 속성이 적용되면 부모 요소가 감싸지 못하기 때문에 레이아웃 안에서 다른 요소의 영역을 침범하게 된다.
• 부모 요소가 종료하기 전에 float 마감 처리를 추가하면 정상적으로 float가 적용된 요소를 감쌀 수 있다.
• 빈 HTML 태그로 처리
• 부모 요소의 after 가상 클래스를 사용해서 처리

7. 포지션

7-1. 엘리먼트의 위치를 지정하는 방법

• static
• relative
• absolute
• fixed

7-2. 위치 값

• bottom vs top : top이 우선
• right vs left : left가 우선
• css에서 위치는 정적으로 존재, static하게 위치한다.
• me기준으로 부모 엘리먼트 안에 존재해야 하기 때문에 left, top 등등의 옵션이 무시된다.

8. link와 import

8-1. 외부로 파일을 빼는 방법은 크게 두가지

• link

  <link rel="stylesheet" href="style.css">

• import

  <style>
    @import url("style.css");
  </style>

9. cache

• Cache : 자주 접근하는 데이터를 복사해 놓는 임시 저장소
• browser cache : 서버 지연을 줄이기 위해 사용하는 웹 캐시의 일종

1-1. CSS란

• HTML, XHML, XML 같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어
• HTML는 CSS가 있기 전의 언어. CSS는 HTML이 생긴 후에존재

1-2. 선택자와 선언

• 어떤 태그를 디자인하기 위해서는 디자인하려는 태그를
  1. 선택하고(선택자)
  2. 선택한 대상에게 효과를 줘야한다(선언)
• css에서 가장 기본적인 문법
• 선택자(selector)와 선언(declare)

1-3. CSS 코드를 작성하는 기본 형식

<style>
  selector {
    속성1 : 값;
    속정2 : 값;
  }
</style>

2. 기본 셀렉터의 종류

2-1. 기본 셀렉터 종류

• css에서 셀렉터를 작성하는 방법은 기본적으로 HTML의 태그이름, 클래스 속성, id속성에 대한 명시가 있다.
• 태그 이름
  • selector{...css 적용...}
  • 특정 태그를 가리킨다. HTML내에 동일 태그가
  • 존재할 경우 태그 요소를 일괄 처리한다.
• 클래스
  • .selector{...css 적용...}
  • 셀렉터 이름 앞에 점(.)을 붙여 표시하고 HTML
  • 태그의 class 속성에 점을 제외한 이름을 명시하여 지정한다. 태그의 종류를 가리지 않고 여러 요소에 복수 지정이 가능하다.(재사용 목적)
  • 이 경우 selector의 이름은 자유롭게 지정
• id
  • #selector{...css 적용...}
  • 셀렉터 이름 앞에 (#)을 붙여 표시하고 HTML
  • 태그의 id 속성에 (#)을 제외한 이름을 명시하여 지정한다. id 속성의 값은 HTML페이지 내에서 중복 사용될 수 없다.(고유특성 명시)
  • 이 경우 selector의 이름은 자유롭게 지정

2-2. 조합형 셀렉터

tag.class{ 속성1 : 값1, 속성2 : 값2, ...} tag#id{ 속성1 : 값1, 속성2 : 값2, ...}

• id값이나 class값을 태그 이름과 함께 명시하여 적용하는 형태
• 셀렉터가 지정하는 대상을 자세하게 명시할 수 있다.
• 태그, 클래스, 아이디를 독립적으로 명시할 때보다 우선적으로 적용된다.

2-3. AND의 의미를 갖는 콤마(,)

selector1, selector2, selector3, ...{ 속성1 : 값1, 속성2 : 값2, ... }

• 여러 개의 요소에 동일한 CSS내용을 적용하기 위해 셀렉터를 콤마(,)로 구분하여 일괄처리 할 수 있다.
• 태그, class, id 등 모든 형태의 css 셀렉터가 가능

3. 가상클래스

3-1. 가상클래스란?

• HTML 태그에서 특정 상황이 발생했을 경우에만 적용되는 CSS셀렉터
• 가상클래스는 CSS의 셀렉터 이름 뒤에 ": 상황" 의 형식으로 명시한다.

4. 복잡한 형태의 셀렉터

4-1. 다양한 CSS 조합 방식

4-2. 자식 셀렉터

• ">"로 구분
• ">"는 HTML의 계층 구조의 표현
• A > B 일 경우 B 요소는 A의 1depth 안에 존재해야 한다.

4-3. 자손 셀렉터

• 자식 셀렉터가 반드시 1depth안에 존재해야 했다면, 자손 셀렉터는 depth를 제한하지 않는다.
• 명시 과정에서 중간단계를 생략해도 된다. 몇 depth를 더 내려가던지, 지정한 태그의 범위안에 존재하기만 하면 된다.

4-4. HTML 속성에 따른 구분

• 스타일시트의 셀렉터가 적용되는 대상에게 특정 속성이 있는지 여부와 특정 속성의 값이 적용되어 있는지 여부에 따라 태그 요소를 좀 더 구체적으로 가리킬 수 있다.

4-5. nth-child 가상 클래스

• 여러개의 요소 중 n번째 요소라는 의미로 :nth-child(n)형식이 추가
• 요소를 뒤에서부터 카운트 할 경우 :nth-last-child(n)를 사용한다.

5. css 우선순위

• 구체적인 것을 기준으로 우선순위가 정해진다
  1. style attribute
  2. id selector
  3. class selector
  4. tag selector

6. 웹 폰트

• 아무 의미없는 텍스트(폰트 테스트용)
• lipsum
• 구글폰트

7. 문단관련 속성

7-1. text align

7-2. text-shadow

selector {
    text-shadow : x-offset y-offset blur-radius color;
}

• x-offset : 본체와 그림자의 가로축 거리(px)
• y-offset : 본체와 그림자의 세로축 거리(px)
• blur-radius : 번짐 정도
• color : 그림자의 색상

8. 박스

8-1. block vs inline

• element들은 크게 두가지로 구분된다
• block element : 화면 전체를 사용하는 태그
• inline level element : 화면의 일부를 차지하는 태그

8-2. 박스의 기본 크기를 결정하는 특성

• 가로축 : 부모를 가득 채운다
• 세로축 : 자신이 포함하고 있는 내용만큼 설정된다. 내용이 없을 경우 높이가 형성되지 않는다.

• radio : 선택 버튼. name이 같은 버튼끼리 중복불가

<input type="radio" name="color2">

• checkbox : radio버튼 + 다중선택

<input type="checkbox" name="size" value="95">

• 목록에서 선택하는 버튼

<select name="color">
  <option value="red">붉은색</option>
  <option value="black">검은색</option>
  <option value="blue">파란색</option>
</select>

○ 구현

• html 코드

  <div>
  <form action="http://localhost/form.jsp">
    <input type="submit" value="회원가입">
    <input type="button" value="버튼">
    <button type="button">버튼2</button>
  </form>
  </div>
  <div>
  <form>
    <input type="text">
    <input type="submit" value="전송">
    <input type="reset">
  </form>
  </div>
  <p>
    <h4>사이즈(다중선택)</h4>
    95 : <input type="checkbox" name="size" value="95">
    100 : <input type="checkbox" name="size" value="100">
    105 : <input type="checkbox" name="size" value="105">
  <p>
  <p>
    <h1>색상(단일선택)</h1>
    붉은색 : <input type="radio" name="color3" value="red" checked>
    검은색 : <input type="radio" name="color3" value="black">
    파란색 : <input type="radio" name="color3" value="blue">
  </p>

• 웹 브라우저 상에서의 화면
  버튼2

  사이즈(다중선택)

  95 : 100 : 105 :

  색상(단일선택)

  붉은색 : 검은색 : 파란색 :

2. 의미론적 태그

• semantic 태그
• 문서의 정보를 보다 잘 표현하기 위해서는 의미에 맞는 태그를 잘 사용해야 한다. 특히 HTML5에서는 웹페이지에서 통상 많이 사용하는 구조에 의미를 분명히 부여하기 위해서 의미론적 태그를 새롭게 정의하고 있다.

  2-1. SEO(Search Engin Optimization)

  • 검색을 최적화하기 위해서 우리가 제목, 부제목, 시멘틱 태그를 잘 활용한다면 특정 키워드로 검색했을 때, 내가 만든 웹사이트가 검색창에 노출괼 수 있다.

2-2. 유지보수성

• 단순히 div 태그로만 모든 구조를 짜는 것보다 더 한눈에 알아볼 수 있기 때문에, 다른 개발자들이 코드를 유지보수하기가 더 편해진다.

2-3. 예시

<header>, <footer>, <article>, <section>, <nav>, <aside>, <main>

• 위와 같은 태그들이 있다.

 <!-- -->  (ctrl + / 로 생성가능)

2. 목록태그

• 목록(순서 O). OrderedList

 <ol> </ol>

• 목록(순서 X). UnorderedList

 <ul> </ul>

• 목록의 각 항목

 <li> </li>

• 직선을 표시. 레이아웃의 영역을 나누는 과정에서 사용

 <hr/>

• 본문을 정의하기 위한 태그. 하나의 문단을 구성하고자 할 때 사용

 <p></p>

○ 구현

• html 코드

  <p>
  <ol>
    <li> 목록1</li>
    <li> 목록2</li>
    <li> 목록3</li>
  </ol>
  <hr/>
  <ul>
    <li> 목록1</li>
    <li> 목록2</li>
    <li> 목록3</li>
  </ul>
  </p>

• 웹 브라우저 상에서의 화면

  1. 목록1
  2. 목록2
  3. 목록3

  ---

  • 목록1
  • 목록2
  • 목록3

3. 문서 구조를 표현

• 문서의 구조를 표현하는 태그

• 각 영역의 구분은 이 태그에 고유한 id값을 부여하여 처리한다.

  <div></div>

4. HTML 안에서의 특수문자

• &

5. 이미지 표시

• 이미지

 <img src = "이미지 파일의 경로"
    alt = "이미지 설명"
    width = "가로px"
    height = "세로px"/>

• 이미지를 감싸는 용도로 사용되는데 범위를 지정

 <figure></figure>

• 이미지의 설명을 담은 태그

 <figcatption> </figcatption>

6. 테이블

• 표

 - <table border="테두리 두께"> </table> 

• 행

 - <tr> </tr> 

• 열

 - <td> </td> 

• 제목

 - <th> </th> 

• 표의 최상단

 - <thead> </thead> 

• 표의 본문

 - <tbody> </tbody> 

• 표의 최하단

 - <tfoot> </tfoot> 

6-1. 테이블 속성

• align : 정렬
  • left, center, right 속성 부여 가능
• rowspan : 행을 병합
  • 현재 열이 아래로 몇 행을 병합할지 결정하는 속성
  • 만약 rowspan="3" 을 지정했다면 그 열은 3줄을 병합하게 된다.
  • 병합된 열에 해당하는 2, 3 번째 행은 열을 정의해서는 안된다.
• colspan : 열을 병합
  • 가로로 열을 몇 칸 병합할 것인지 설정하는 속성이다.

○ 구현

• html 코드

  <table border="2">
        <thead>
            <tr>
                <th><strong>이름</strong></th>
                <th><strong>성별</strong></th>
                <th><strong>주소</strong></th>
                <th><strong>회비</strong></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>홍길동</td>
                <td>남자</td>
                <td rowspan="2">서울</td>
                <td>1000</td>
            </tr>
            <tr>
                <td>강하늘</td>
                <td>여자</td>
                <td>500</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">합계</td>
                <td>1500</td>
            </tr>
        </tfoot>
    </table>

• 웹 브라우저 상에서의 화면

  이름	성별	주소	회비
  홍길동	남자	서울	1000
  강하늘	여자		500
  합계			1500

7. 입력양식

• 입력 양식을 표시

 <input name = "이름(영어)"
        id = "식별자(영어)" 
        type = "종류"
        value = "기본값"
        maxvalue = "숫자"/>

• name 속성과 id 속성
  • name 속성은 웹 프로그램과 연계되는 속성으로 한 페이지 안에서 고유한 값을 명시해야 한다
  • id 속성은 해당 페이지에서 그 요소를 식별하기 위한 값으로 고유한 값을 명시해야 한다.

• 입력요소 앞이나 뒤에서 표시되는 제목을 구성

• 입력 칸이나 버튼 부분 밖의 이름 부분을 클릭해도 되게 함

  <label for="input의 id"></label>

• 장문 입력

 <textarea></textarea>

○ 구현

• html 코드

  <div>
  <label for="user_id">아이디</label>
  <input type="text" name="user_id" id="user_id" maxlength="20" 
         placeholder="아이디를 입력해주세요">
  </div>
  <div>
  <label>회원이름
    <input type="text" name="user_name" id="user_name" maxlength="20" 
           placeholder="이름을 입력해주세요">
  </label>
  </div>
  <div>
  <label>자기소개
    <textarea type="text" name="memo" id="memo" maxlength="100" 
              placeholder="자기소개를 입력해주세요">
    </textarea>
  </label>
  </div>

• 웹 브라우저 상에서의 화면
  아이디
  회원이름
  자기소개
  ## 8. 기타 태그 > - \n 처럼 줄바꿈 ```html
  ```

• HTML에서 사용자 입력을 수집하고 서버로 제출하는 데 사용

<form action="제출할 URL"></form>

• 웹 양식 요소들을 그룹화하는 데 사용

<fieldset>
  <legend>필드셋 제목</legend>
</fieldset>

• templates
  • thymeleaf의 파일을 두는 곳
• static
  • 보통 css, js를 둔다. 정적 페이지
  • 정적 리소스에서 해당 파일을 탐색기를 통해 직접 열어도 동작하는 것을 확인할 수 있다.

2. @PostConstruct

• 객체의 초기화 부분
• 객체가 생성된 후 별도의 초기화 작업을 위해 실행하는 메소드를 선언한다.
• @PostConstruct 어노테이션을 설정해 놓은 init 메서드는 was가 띄워질 때 실행된다.

3. @PreDestroy

• 마지막 소멸 단계
• 스프링 컨테이너에서 객체(빈)를 제거 하기 전에 해야할 작업이 있다면 메소드 위에 사용하는 어노테이션.

4. th:action

• 같은 url로 전송 시, 전송 방법만 달라지는 경우는 url을 쓰지 않아도 된다.
• url이 같다는 것을 강조하기 위해 여기서는 쓰지 않는다.

   <form action="item.html" th:action method="post">

5. @ModelAttribute

5-1. @ModelAttribute - 요청 파라미터를 처리

• @ModelAttribute는 Item 객체를 생성하고, 요청 파라미터의 값을 프로퍼티 접근법(set...) 으로 입력해준다.

5-2. @ModelAttribute - Model 추가

• @ModelAttribute는 중요한 한 가지 기능이 더 있는데, 바로 모델에 @ModelAttribute로 지정한 객체를 자동으로 넣어주는 기능이다.

  • 주의 : @ModelAttribute("key") Item item model.addAttribute("key", item);

5-3. @ModelAttribute - 이름 생략

• @ModelAttribute의 이름을 생략하면 모델에 저장될 때 클래스명을 사용한다. 이 때, 클래스의 첫 글자만 소문자로 변경해서 등록한다.

  예) @ModelAttribute Item item -> 모델의 key의 이름 = item -> model.addAttribute("item",item);

6. forward, redirect

• 웹 브라우저의 새로 고침은 마지막에 서버에 전송한 데이터를 다시 전송한다.
• 그래서 내용은 같고, ID만 다른 상품 데이터가 계속 쌓이게 된다.

7. RedirectAttributes

• redirect 시 사용되는 여러 속성들을 알아보자.

• RedirectAttributes를 사용하면 URL 인코딩, pathVariable, 쿼리 파라미터까지 처리해준다.

    @PostMapping("/add")
   public String saveV7(Item item, RedirectAttributes redirectAttributes) {
       Item savedItem = itemRepository.save(item);
       redirectAttributes.addAttribute("itemId",savedItem.getId());
       redirectAttributes.addAttribute("status","true");
       return "redirect:/basic/items/{itemId}";
       // 결과 URL -> http://localhost:9090/basic/items/3?status=true
   }

• redirect:/basic/items/{itemId} -> pathVariable 바인딩 : {itemId} -> 나머지는 쿼리 파라미터로 처리 : ?status=true

1-1. 뷰란?

• 하나의 가상 테이블이라고 생각하면 된다.
• 작업을 하다보면 자주 조회하는 데이터들이 있다. 한 테이블에 데이터가 있으면 조회하기 편하겠지만 그렇지 않은 경우가 있다. 이런 경우 여러 테이블을 join 사용하여 가져오고 쿼리가 복잡한 경우도 있다.
• 이런 경우 쿼리로 뷰를 만들어 놓고 사용하면 편리하다.
• 뷰는 보안에도 유리하다. 테이블에 데이터를 노출시키고 싶지 않을때, 뷰를 사용하여 보여줄 데이터만 뷰로 제공할 수 있다. (ex. 다른 업체에 DB데이터 조회 권한을 주었을 때, 테이블의 특정 데이터의 노출 방지)

1-2. 뷰의 특징

• view는 table과 유사하며, 테이블처럼 사용가능
• 테이블과는 달리 데이터를 저장하기 위한 물리적인 공간이 필요하지 않은 가상 테이블이다.
• 데이터를 물리적으로 갖지 않지만 논리적인 집합을 갖는다.
• 테이블과 마찬가지로 select, insert, update, delete 명령이 가능하다.

2. index

2-1. 인덱스란?

• 조회속도를 향상시키기 위한 데이터 베이스 검색 기술
• 색인이라는 뜻으로 해당 테이블의 조회결과를 빠르게 하기 위해 사용
• 인덱스가 필요한 이유는 인텍스를 생성해줌으로써 조회속도를 빠르게 할 수 있다.

2-2. 인덱스 생성 원리

• 인덱스를 테이블의 특정 컬럼에 한 개 이상 주게 되면 인덱스 테이블이 따로 만들어 진다.
• 인덱스 컬럼의 row값과 rowid값이 저장되며, row값은 정렬된 트리 구조로 저장시켜 두었다가 검색시 좀 더 빠르게 해당 데이터를 찾는데 도움을 준다. (rowid : 테이블을 생성하고 컬럼을 만든 후 데이터를 삽입하면 하나의 row가 생성되면 이 row는 절대적인 주소를 가지게 되는데 이를 rowid라고 한다.)
• DML명령을 사용할 때는 원본 Table은 물론 Index Table에도 데이터를 갱신시켜 주어야 하기 때문에 update, insert, delete명령어를 쓸 때 속도가 느려진다는 단점이 있다.

2-3. 반대로 index 생성이 불필요한 경우?

• 데이터가 적은(수천건 미만) 경우에는 인덱스를 설정하지 않는게 오히려 성능이 좋다.
• 조회보다는 삽입, 수정, 삭제 처리가 많은 테이블

2-4. DML 구문과 index

• insert : 인덱스 split 현상으로 부하가 걸린다.

• delete : 인덱스에서는 데이터를 사용하지 않음으로 표시하고 지우지 않는다.
• update : 인덱스에서는 delete를 한 후, 새로운 데이터를 insert 작업을 함

2-5. index 생성 방법

• unique index

  create unique index 인덱스명
  on 테이블명(컬럼);

• non-unique index

  create index 인덱스명
  on 테이블명(컬럼);

• 사용자에게 권한 생성 혹은 권한 삭제 같은 명령어
• grant : 권한 생성
• revoke : 권한 삭제

2. 컬럼 속성 - 무결성 제약 조건

• not null : null 값이 입력되지 못하게 하는 조건

• unique : 중복된 값이 입력되지 못하게 하는 조건
• check : 주어진 값만 허용하는 조건
• primary key : not null + unique의 의미
• foreign key(외래키) : 다른 테이블의 필드(컬럼)를 참조해서 무결성을 검사하는 조건

2-1. primary key

• primary key, 기본키, pk, 주키, 식별자 등으로 불리고 있다.
• 기본키 역시 기본적인 제약조건들은 테이블을 생성할 때 같이 정의한다.
• 테이블 당 하나만 정의가 가능하다. (두 개 이상의 PK는 조합키/복합키 라고 불리고, 묶어서 하나로 본다)
• pk는 not null + unique 의 기능을 가지고 있다.
• 자동 index가 생성되는데 이는 검색 키로써 검색 속도를 향상시킨다.

2-2. pk 선언방법

create table pkTable(
    col1 varchar2(10) primary key,
    col2 varchar2(10) constraints pk이름 primary key,
    col3 varchar2(10),
     constraints pk이름 primary key (col3)
);    
-- pk는 table당 하나여야 하지만 사용법 설명을 위해 여러개를 적은 것임. 실제로는 하나만 선언해야 함.

2-3. Foreign Key(외래키)

• 외래키, fk, 참조키, 외부키, 외부 식별자 등으로 불린다.
• fk가 정의된 테이블을 자식 테이블이라 칭한다.
• 참조되는 테이블 즉, pk가 있는 테이블을 부모 테이블이라 한다.
• 부모 테이블의 PK컬럼에 존재하는 데이터만 자식테이블에 입력할 수 있다.
• 부모 테이블은 자식의 데이터나 테이블이 삭제된다고 영향을 받지 않습니다.
• 참조하는 데이터 컬럼과 데이터 타입이 반드시 일치해야 한다.
• 참조할 수 있는 컬럼은 기본키(pk)이거나 unique만 가능하다. (보통 pk랑 엮는다)

2-4. fk 선언방법

  create table pTable(
    pCol1    number(10) primary key
  );
  create table cTable(
    cCol1    number(10) primary key
    pCol1    number(10),
    constraints fk이름 Foreign key(pCol1) references
    pTable(pCol1) on delete cascade
  );

• 참조할 컬럼과 같은 컬럼이 자식 테이블에 존재해야 한다.
• 같은 이름을 쓸 필요는 없지만, 관계를 알아보기 쉽게 같은 컬럼명을 사용한다.
• 자식 테이블에 값을 먼저 넣을 수 없다.
• 참조되는 컬럼에 데이터가 있어야 값을 넣을 수 있다.

2-5. 삭제 옵션

• on delete cascade

  • 참조되는 부모 테이블의 행에 대한 delete를 허용한다.

  • 즉, 참조되는 부모 테이블 값이 삭제되면 연쇄적으로 자식 테이블 값 역시 삭제된다.

• on delete set null

  • 참조되는 부모 테이블의 행에 대한 delete를 허용한다.

  • 이건 cascade와 달리 부모 테이블의 값이 삭제되면 해당 참조되는 자식테이블의 값들은 null값으로 설정된다.

3. 시퀀스(Sequence)

• 연속적인 번호를 만들어주는 기능
• 시퀀스란 자동으로 순차적으로 증가하는 순번을 반환하는 데이터베이스 객체이다. 보통 PK값에 중복값을 방지하기 위해 사용한다.
• 예를 들어, 게시판에 글이 하나 추가될 때마다 글 번호(PK)가 생겨야 한다고 가정하자. 만약 100번 까지 글 번호가 생성되어있다면, 그다음 글이 추가가 되었을 경우 글 번호가 101번으로 하나의 row를 생성해 주어야 한다. 이 때 101번 숫자를 얻으려면 기존의 글 번호중 가장 큰 값에 +1을 하는 로직을 어딘가에 넣어야 하는데 시퀀스를 이용하면 이러한 로직이 필요하지않고 데이터베이스에 row가 추가될 때마다 자동으로 +1 시킨다.

3-1. 시퀀스 생성 옵션

• start with n : 초기화 값

• increment by n : 증가값
• maxvalue n : 최대값 nomaxvalue : 무한대 값 +

  (진짜 무한이 아니고 9999...99 같은 값)

• minvalue n : 최소값 nominvalue : 무한대 값 -
• cycle : 시퀀스 한계값 도달시 최소값으로

  돌아가서 시작하는지 여부. 즉, 반복여부

• nocycle : 기본값은 nocycle

• 데이터의 구조를 정의하기 위한 테이블 생성, 삭제, 수정 등의 기능을 수행하는 명령어

  • create : 테이블 생성
  • drop : 테이블 삭제
  • alter : 테이블 수정
  • truncate : 테이블에 있는 모든 데이터 삭제

2. DML(Data Manipulation Language)

• 데이터 조회 및 변형을 위한 명령어

  • select : 데이터 조회
  • insert : 데이터 입력
  • update : 데이터 수정
  • delete : 데이터 삭제

• insert ```sql

• • 특정 column에만 값을 넣을 때(나머지 column에는 null값이 들어간다) insert into 테이블명 (컬럼1, 컬럼2, ...) values (값1, 값2, ...);
• • 모든 column에 값을 넣을 때. 컬럼의 순서대로 값 입력한다. insert into 테이블명 values (값1, 값2, ...);

• update

  update 테이블 set 컬럼1=값1, 컬럼2=값2, ...
  where 조건 ... ;

• delete

  delete (from) 테이블명
  where 조건 ... ;

3. Drop vs Truncate vs Delete

3-1. Drop

• drop table 테이블명;
• 만들었던 테이블의 존재 자체가 삭제된다.

  DROP TABLE EMPLOYEES3 ;

3-2. Truncate

• 데이터만 삭제
• truncate table 테이블명;
• truncate는 테이블이 삭제되는 명령어는 아니고, 테이블 안에 들어있던 모든 레코드들을 제거하는 명령어이다.
• 즉, truncate만으로는 table 구조를 완전히 삭제하는 것은 아니라는 것

  TRUNCATE TABLE EMPLOYEE ;

3-3. Delete

• 데이터 골라서 삭제
• delete from 테이블 where ... ;
• truncate와 delete의 차이점

  • delete는 where문으로 부분삭제 가능
  • truncate는 DDL문, delete는 DML문
  • 내부 방식에 차이가 존재한다.
  • truncate는 drop 후에 create한다.

-- 부서명칭이 '영업부'인 데이터를 삭제
DELETE     sample
WHERE     deptname = '영업부'
;

3-4. 요약

4. COMMIT

• 모든 작업을 정상적으로 처리하겠다고 확정하는 명령어이다.
• 트랜젝션의 처리 과정을 데이터베이스에 반영하기 위해서, 변경된 내용을 모두 영구 저장한다.
• COMMIT을 수행하면, 하나의 트랜젝션 과정을 종료하게 된다.
• Transaction(Insert, Update, Delete) 작업 내용을 실제 DB에 저장한다.
• 이전 데이터가 완전히 Update된다.
• 모든 사용자가 변경한 데이터의 결과를 볼 수 있다.

5. ROLLBACK

• 작업 중 문제가 발생했을 때, 트랜젝션의 처리 과정에서 발생한 변경 사항을 취소하고, 트랜젝션 과정을 종료시킨다.
• 트랜젝션으로 인한 하나의 묶음 처리가 시작되기 이전의 상태로 되돌린다.
• transaction(insert, update, delete) 작업 내용을 취소한다.
• 트랜젝션 작업 중 하나라도 문제가 발생하면, 모든 작업을 취소해야 하기 때문에 하나의 논리적인 작업 단위로 구성해 놓아야한다.
• 문제가 발생하면, 논리적인 작업의 단위를 모두 취소해 버리면 되기 때문이다.

6. commit 명령어와 rollback 명령어의 장점

• 데이터 무결성이 보장된다.

• 논리적으로 연관된 작업을 그룹화 할 수 있다.

  요약 : commit = 저장, rollback = 불러오기

7. 자동 rollback 되는 경우

• 비정상적인 종료

8. 자동 commit 되는 경우

• DDL구문(create, alter, drop, truncate)
• DCL구문(grant, revoke) 사용 권한
• insert, update, delete 작업 후 commit을 하지 않고, 오라클을 정상 종료시에 commit 명령어를 입력하지 않아도 정상 commit 후 오라클 종료

• 데이터 타입이란 컬럼이 저장되는 데이터 유형을 말한다.
• 기본 데이터 타입은 문자형, 실수, 정수 자료형 등의 여러 데이터를 식별하는 타입이다.
• char(10), number(100) 식으로 작성한다.

2. 문자 데이터 타입

• char vs varchar2

  char	varchar2
  고정형	가변형

  • 예를 들어 가변형 문자형 데이터 타입인 varchar2에 10이라는 데이터 공간을 할당하고 abc라는 데이터를 입력했다고 보자. 그 데이터는 10이라는 데이터 공간을 할당했기에 10byte까지만 데이터를 입력받을 수 있고 3글자만 입력되었으므로 그 데이터 공간은 3byte가 된다.
  • 반대로 고정형 문자형 데이터 타입인 char은 10이라는 데이터 공간을 할당하고 마찬가지로 abc라는 데이터를 입력했다고 하자. 그 데이터는 3글자만 입력되었지만 데이터 공간은 10byte가 된다. 남/여 같이 1글자만 들어올 수 있는 것이 아니라면 대부분 varchar2를 사용한다.

3. 숫자형 데이터 타입

• 숫자 타입은 4가지가 있다. 대부분 Nuber형을 사용한다.

• Number(p,s) : P는 소수점을 포함한 전체 자리수, S는 소수점 자리수를 의미한다. P,S를 입력하지 않으면 저장 데이터의 크기에 맞게 자동으로 반올림되어 조절된다.

  입력값	타입	저장되는 값
  12.516	NUMBER	12.516
  12.516	NUMBER(3)	12.5
  12.516	NUMBER(5,3)	12.516
  12.516	NUMBER(6,2)	12.52
  12.516	NUMBER(2,2)	오류

4. 날짜 데이터 타입

• 가장 일반적으로 쓰는 데이터타입은 DATE이다. 연도(year), 월(month), 일(day) 정보를 저장한다.
• TIME은 시간(hour, minute, second) 정보를 저장하는 데이터 타입이다.

5. LOB 데이터 타입

• LOB이란 Large Object의 약자로 대용량 데이터를 저장할 수 있는 데이터 타입이다. 일반적으로는 그래픽, 이미지, 사운드 등 비정형 데이터를 저장할 때 LOB 타입을 사용한다.

• Thymeleaf는 자바 웹 애플리케이션에서 템플릿을 처리하는 엔진으로, 서버 측에서 HTML 페이지를 동적으로 생성하기 위한 도구이다.
• 템플릿을 사용하여 HTML 코드와 데이터를 결합하여 동적인 콘텐츠를 생성할 수 있으며, HTML 파일 자체가 브라우저에서 바로 볼 수 있도록 설계되었다.
• *.html 파일을 브라우저에서 열 때는 정적 페이지로 보이고, 서버에서 렌더링할 때는 동적인 데이터를 포함하도록 변환된다.

2. Thymeleaf의 주요 특징

2-1. 자연 템플릿(Natural Templates):

• Thymeleaf 템플릿은 브라우저에서 볼 수 있는 정적 HTML로 유지된다. 즉, Thymeleaf로 작성된 HTML 파일은 템플릿 엔진 없이도 정적 HTML로서 브라우저에서 바로 열어볼 수 있어 디자이너와 개발자 간의 협업이 용이하다.

2-2. 서버 사이드 및 클라이언트 사이드 렌더링:

• Thymeleaf는 서버 사이드 템플릿 엔진으로 주로 사용되지만, 일부 클라이언트 측에서 렌더링을 지원하기도 한다.
• 서버에서 데이터를 받아 HTML을 동적으로 생성하고, 사용자에게 동적인 콘텐츠를 제공하는 역할을 한다.

2-3. Spring MVC와의 긴밀한 통합:

• Thymeleaf는 Spring Boot와 Spring MVC에서 기본 템플릿 엔진으로 널리 사용된다.
• @Controller에서 모델 데이터를 전달받아 뷰에서 동적으로 표시하는 데 사용되며, Model 객체와 함께 데이터를 쉽게 템플릿에 전달할 수 있다.

2-4. 표현식 및 속성 기반 데이터 바인딩:

• Thymeleaf는 다양한 표현식을 통해 데이터 바인딩을 지원한다. 이를 통해 컨트롤러에서 전달된 데이터를 HTML 태그에 쉽게 삽입할 수 있다.

• 주요 표현식:
  • ${}: 변수를 참조하는 기본 표현식이다.
  • th:text: 요소의 텍스트 내용을 동적으로 설정한다.
  • th:if, th:each: 조건문 및 반복문을 사용하여 동적 콘텐츠 생성이 가능하다.

    <!-- @Controller 에서 "data"라는 모델 데이터를 전달받았을 때-->
    <h1>컨텐츠에 데이터 출력하기</h1>
        <ul>
            <li>th:text 사용 -> <span th:text="${data}"></span></li>
            <li>컨텐츠 안에서 직접 출력하기 = [[${data}]]</li>
        </ul>

2-5. 국제화(I18n) 지원:

• Thymeleaf는 국제화(i18n)를 지원하여 다국어 웹 애플리케이션을 쉽게 구현할 수 있다. 메시지 파일을 통해 다양한 언어에 맞춘 텍스트를 뷰에 출력할 수 있다.

3. Thymeleaf 활용

3-1. 연산

• 비교연산

  > (gt), < (lt), >= (ge), <= (le), ! (not), == (eq), != (neq,ne)

• 나머지 연산은 기존과 같음

  <!-- @Controller 에서 "data", "nullData"라는 모델 데이터를 전달받았을 때-->
  <h1>연산</h1>
      <ul> 
          <li> 산술 연산
              <ul>
                  <li> 10 + 2 = <span th:text="10 + 2"></span></li>
                  <li> 10 % 2 == 0 = <span th:text="10 % 2 == 0"></span></li>
              </ul>
          </li>
          <li> 비교 연산
              <ul>
                  <li> 10 > 2 = <span th:text="10 > 2"></span></li>
                  <li> 10 <= 2 = <span th:text="10 le 2"></span></li>
                  <li> 10 != 2 = <span th:text="10 neq 2"></span></li>
              </ul>
          </li>
          <li> 조건식
              <ul>
                  <li> (10 % 2 == 0)? '짝수' : '홀수' = <span th:text="(10 % 2 == 0)? '짝수' : '홀수'"></span></li>
              </ul>
          </li>
          <li> Elvis 연산자
              <!-- 조건식의 축약 버전 -->
              <ul>
                  <li> ${data} ?: '데이터가 없습니다.' = <span th:text="${data} ?: '데이터가 없습니다.'"></span></li>
                  <li> ${nullData} ?: '데이터가 없습니다.' = <span th:text="${nullData} ?: '데이터가 없습니다.'"></span></li>
              </ul>
              <ul>
                  <li> ${data} ?: _ = <span th:text="${data} ?: _">데이터가 없습니다.</span></li>
                  <li> ${nullData} ?: _ = <span th:text="${nullData} ?: _">데이터가 없습니다.</span></li>
              </ul>
          </li>
      </ul>

  3-2. 반복 상태 유지

• 반복의 두번째 파라미터를 설정해서 반복의 상태를 확인할 수 있다.

• 두번째 파라미터는 생략 가능한데, 생략하면 지정한 변수명(user) + Stat가 된다.

• 현재 코드 기준 user + Stat = userStat이므로 생략가능.

  <!-- @Controller 에서 "users"라는 list 타입의 모델 데이터를 전달받았을 때-->
  <h1>반복 상태 유지</h1>
      <table border="2">
          <tr>
              <th>count</th>
              <th>username</th>
              <th>age</th>
              <th>etc</th>
          </tr>
          <tr th:each="user, userStat : ${users}">
              <td th:text="${userStat.count}"></td>
              <td th:text="${user.username}"></td>
              <td th:text="${user.age}"></td>
              <td>
                  index = <span th:text="${userStat.index}"></span>,
                  size = <span th:text="${userStat.size}"></span>,
                  even = <span th:text="${userStat.even}"></span>,
                  odd = <span th:text="${userStat.odd}"></span>,
                  last = <span th:text="${userStat.last}"></span>,
                  first = <span th:text="${userStat.first}"></span>,
                  current = <span th:text="${userStat.current}"></span>
              </td>
          </tr>
      </table>

  3-3. 블록

• th:block 은 HTML 태그가 아닌 타임리프의 유일한 자체 태그이다.

• 템플릿 로직을 그룹화하거나 조건문, 반복문을 처리할 때 사용되는 Thymeleaf 태그이다.

• 렌더링되지 않는 블록 태그로, HTML로 변환될 때는 존재하지 않는다. 이를 통해 불필요한 HTML 태그 없이 로직을 깔끔하게 처리할 수 있다.

• 사용 빈도는 높지는 않고 어쩔 수 없이 사용될 때 사용한다.

  <th:block th:each="user : ${users}">
      <div>
          사용자 이름1
          <span th:text="${user.username}"></span>
          사용자 나이1
          <span th:text="${user.age}"></span>
      </div>
      <div>
          요약 <span th:text="${user.username} + '/' + ${user.age}"></span>
      </div>
  </th:block>

  3-4. URL 동적 표현식

  • @{} 표현식: Thymeleaf에서 URL을 동적으로 구성하는 방법이며, 서버 측 경로와 쿼리 파라미터를 동적으로 생성할 수 있다.

  • 쿼리 파라미터: @{/hello(param1=${param1}, param2=${param2})}와 같은 방식으로 쿼리 파라미터를 동적으로 생성하여 URL에 추가할 수 있다.

  • 모델 데이터와의 연결: ${param1}과 같은 표현식은 서버에서 전달된 데이터를 참조하여 URL을 동적으로 구성한다.

    <!-- 각 URL부분과 그 링크 경로 -->
    <h1>URL 동적 표현식</h1>
      <ul> 
          <li><a th:href="@{/hello}">basic url</a></li>
            <!-- http://localhost:9090/hello -->
    
          <li><a th:href="@{/hello(param1=${param1}, param2=${param2})}">query param</a></li>
            <!-- http://localhost:9090/hello?param1=data1&param2=data2 -->
    
          <li><a th:href="@{/hello/{param1}/{param2}(param1=${param1}, param2=${param2})}">path variable</a></li>
            <!-- http://localhost:9090/hello/data1/data2 -->
    
          <li><a th:href="@{/hello/{param1}(param1=${param1}, param2=${param2})}">path variable + query param</a></li>
            <!-- http://localhost:9090/hello/data1?param2=data2 -->
      </ul>

• oracle에서 기본으로 제공하는 dummy table
• oracle 자체에서 제공되는 테이블
• 간단하게 함수를 이용해서 계산 결과값을 확인 할 때 사용하는 테이블
• dual 테이블은 사용자가 함수를 실행할 때 임시로 사용하는데 적합하다.
• 함수에 대한 쓰임을 알고 싶을 때 특정 테이블을 생성할 필요없이 dual 테이블을 이용하여 함수의 값을 리턴 받을 수 있다.

2. 큰따옴표("") vs 작은따옴표('')

2-1. 큰따옴표

• 용도: 식별자(Identifiers) 또는 컬럼명, 테이블명 등 객체의 이름을 감싸는 데 사용됩니다. 주로 SQL 표준에서 예약어로 지정된 단어를 테이블명이나 컬럼명으로 사용할 때 필요합니다. SELECT "user", "age" FROM "users";

2-2. 작은따옴표

• 용도: 문자열 리터럴을 감싸는 데 사용됩니다. SELECT * FROM users WHERE name = 'John Doe';

3. select

• SELECT ~ : 대상을 가져오기
• FROM ~ : 해당 DB에서 부터
• WHERE ~ : 조건에 해당하는 데이터를

       -> and, or 사용가능

  SELECT     EMPLOYEE_ID, FIRST_NAME , LAST_NAME , JOB_ID
  FROM     EMPLOYEES e 
  WHERE     FIRST_NAME = 'Guy';

• SELECT ~ AS "ID" : 대상을 가져오되 "ID"라는 별칭을 붙임.

   (" "만 가능)

• SELECT DISTINCT ~ : 대상을 중복없이 가져오기.

1. join(조인)

1-1. join이란

• 두 개 이상의 테이블을 서로 연결하여 데이터를 검색할 때 사용하는 방법으로, 두 개의 테이블을 마치 하나의 테이블인 것처럼 보여주는 것이다.

1-2. join의 기본 사용 방법

• 두 개의 테이블에 하나라도 같은 컬럼이 있어야 한다.
• 두 컬럼의 값은 공유 되어야 한다.
• 보통 join을 위해 기본키(Primary Kdy)와 외래키(Foreign Key)를 활용한다.

2. inner join

• 각 테이블에서 join 조건에 일치되는 데이터만 가져온다.
• inner join은 교집합이라고 말한다.
  • select * from A inner join B on ...

3. outer join

• join 조건에 일치하는 데이터 및 일치하지 않는 데이터를 모두 select한다.
• join 조건에 일치하는 데이터가 없다면 null로 가져온다.
• outer join은 inner join과는 다르게 주(main)테이블이 어떤 테이블인지가 중요하다. 그래서 어떤 테이블이 중심이 되느냐에 따라 다시 left outer join, right outer join, full outer join으로 세분화 할 수 있다.
• left outer join은 왼쪽에 있는 테이블이 메인, right outer join은 오른쪽에 있는 테이블이 메인, full outer join은 양쪽 테이블 모두가 메인이라는 뜻

3-1. left outer join

• 왼쪽 테이블이 기준이 된다.
• join 조건에 부합하는 데이터가 join 당하는 테이블에 있으면 해당 데이터를, 없으면 null로 select한다.
• select * from A left outer join B on ...

  SELECT     e.EMPLOYEE_ID , e.FIRST_NAME ,
      d.DEPARTMENT_ID , d.DEPARTMENT_NAME
  FROM     DEPARTMENTS d 
  LEFT OUTER JOIN EMPLOYEES e ON d.DEPARTMENT_ID = e.DEPARTMENT_ID 
  ;

3-2. right outer join

• 오른쪽 테이블이 기준이 된다.
• join 조건에 부합하는 데이터가 join 당하는 테이블에 있으면 해당 데이터를, 없으면 null로 select한다.
• select * from A right outer join B on ...

  SELECT     e.EMPLOYEE_ID , e.FIRST_NAME ,    
      d.DEPARTMENT_ID , d.DEPARTMENT_NAME
  FROM     EMPLOYEES e 
  RIGHT OUTER JOIN DEPARTMENTS d ON e.DEPARTMENT_ID = d.DEPARTMENT_ID 
  ORDER BY e.EMPLOYEE_ID
  ;

3-3. full outer join

• 양쪽 테이블 모두가 기준이 된다.
• join 조건에 부합하는 데이터가 join 당하는 테이블에 있으면 해당 데이터를, 없으면 null로 select한다.
• 쉽게 말해서 벤다이어 그램 ⓐⓑ에서 inner join(A∩B), left outer join(A), right outer join(B), full outer join(A∪B) 를 뜻함.

4. ANSI join vs Oracle join

• SQL은 데이터베이스를 관리하기 위해 만들어진 프로그래밍 언어이며, 데이터베이스를 관리해주는 대부부느이 Management System(DBMS : Oracle, Mysql, ...)들은 SQL을 사용한다. 물론 DBMS 자체의 특수성 때문에 SQL의 사용법이 조금씩 다르기도 하지만, 큰 틀에서 보면 나름대로의 보편성을 가지고 있다.
• 이를 위해 미국 국립 표준 협회(American National Standards Institute, ANSI)에서도 SQL에 대한 보편적인 문법을 제시하고 있는데, 그것이 바로 ANSI Query이다.
• Join도 마찬가지로 ANSI문법을 사용하는 경우가 대부분이긴 하지만, 편의에 따라 DBMS만의 자체 문법을 사용하기도 한다.
• 대표적으로 Oracle 에서 사용하는 Oracle Join이 있다.

5. 서브쿼리(sub query)

5-1. 서브쿼리란?

• Main Query에 반대되는 개념으로 이름을 붙인 것
• 메인쿼리를 구성하는 소단위 쿼리
• select, insert, delete, update 절에서 모두 사용 가능
• 서브쿼리의 결과 집합을 메인 쿼리가 중간 결과값으로 사용
• 서브쿼리 자체는 일반 쿼리와 다를 바가 없다.

  -- 월급이 가장 적은 사람
  SELECT  EMPLOYEE_ID , FIRST_NAME , LAST_NAME , SALARY 
  FROM     EMPLOYEES e
  WHERE     SALARY = (    SELECT     MIN(SALARY) 
                  FROM     EMPLOYEES )
  ;

1-1. 자료(Data)

• 현실 세계에서 관찰이나 측정을 통해 수집한 단순한 사실이나 값

1-2. 정보(Information)

• 의사결정에 도움을 줄 수 있는 유용한 형태
• 자료를 가공(처리)해서 얻을 수 있는 결과를 의미

1-3. 데이터베이스

• 어느 한 조직체의 여러 응용 시스템이 공동으로 사용할 수 있도록 통합하여 저장한 운영데이터의 집합
• 공통의 목적을 지원하기 위한 서로 관련된 자료들의 모임
• 주제와 관련된 의미 있는 데이터들의 모음

1-4. DBMS(CataBase Management System)

• 사용자에게 데이터베이스를 생성하고 유지할 수 있게 하는 프로그램 집합
• DBMS는 데이터베이스 언어를 가지고 있으며 이를 통해 데이터의 삽입/삭제/수정 등을 할 수 있다.

1-5. DBMS의 기능

• 데이터의 무결성 유지
  • DB의 데이터는 실세계를 적용하는 규칙을 항상 만족해야 함
  • 서로 다른 부분에 있는 두 개의 데이터가 서로 모순되지 않아야 함. 데이터는 일관성을 유지

2. DBMS의 3가지 특성

2-1. 데이터의 논리적 독립성

• 한 속성에 가해진 변경이 동일한 테이블에서 다른 속성에 영향을 주지 않는 것을 의미
• 응용프로그램에 영향을 주지않고 데이터 구조를 변경할 수 있게 하는 것

2-2. 참조 무결성과 데이터의 무결성

• 응용프로그램 개발 시 무결성 제약 조건을 신경쓰지 않아도 된다.

2-3. 비정규 질의

• 사용자는 작업을 실행하는 방법을 명시하지 않고도, 데이터베이스에게 어떤 데이터를 조회할 것인지를 명령할 수 있다.

3. 데이터베이스 모델의 종류

3-1. 계층데이터 모델

3-2. 망 데이터 모델

3-3. 관계 데이터 모델(Relational Data Model)

• 개체 집합에 대한 속성 관계를 표현하기 위하여 개체를 테이블(table)로 사용하고 개체 집합들 사이의 관계는 공통 속성으로 연결하는 독립된 형태의 데이터 모델

4. 관계형 모델의 구성 요소

• 테이블(table)
• 열(column)
• 행(row)
• 관계 데이터베이스에 데이터를 저장할 수 있는 형식테이블 (table = relation)
• 행과 열의 교차점은 원자값(atomic value)이라는 오직 하나의 값으로 구성
• 테이블 내용을 실제적인 행의 집합으로 간주한다.

5. SQL

• SQL(Structured Query Language)은 관계형 데이터베이스 언어이다.
• 데이터의 삽입, 삭제, 갱신, 질의, 보호(보안) 명령문으로 구성
• SQL은 관계 데이터베이스 언어로써 비절차적 데이터베이스 언어로 분류한다.

6. Oracle DBMS 설치

• Oracle 11g
• Oracle 설치 링크
• cmd 창 sqlplus 명령어 입력

7. Tool 설치

• DBeaver

8. hr 계정 unlock

• cmd 명령어 : alter user hr identified by hr account unlock; 성공시 > User altered.

9. hr 계정 pw 설정

• alter user hr identified by 1234; 성공시 > User altered.
• grant connect, resource to hr; 성공시 > Grant succeeded.
• cmd창에서 완료시 DBeaver에서 pw 설정을 완료한다.

9-1. 계정 생성

• 콘솔창에 입력 CREATE USER ADMIN IDENTIFIED BY KH123; GRANT CONNECT, RESOURCE TO ADMIN; // user-name : ADMIN, password : KH123 // 대소문자 구분

10. SQL

• SQL은 대소문자의 구분은 없지만 둘 중 하나로 통일해서 사용하는 것이 좋다.
• SQL 기능에 따른 분류

10-1. 데이터 정의어(DDL)

• 테이블이나 관계의 구조를 생성하는데 사용하며 CREATE, ALTER, DROP문이 있다.

10-2. 데이터 조작어(DML)

• 테이블에 데이터를 검색, 삽입, 수정, 삭제하는데 사용, SELECT, INSERT, UPDATE, DELETE문 등이 있다.

10-3. 데이터 제어어(DCL)

• 데이터 사용 권한을 관리하는데 사용하며 GRANT, REVOKE 문 등이 있다.