• 브라우저의 JS 실행 순서 중, HTML 파싱 완료로 DOM 트리 구축 끝났음을 알리는 이벤트, 외부 리소스의 로드 완료 여부와 상관없이 발생하는 것
  • DOMContentLoaded
• 기본 JS는 HTML의 구분 분석을 중지하므로, 효율적인 렌더링을 위해서 사용
  • async : HTML 문서 파싱 처리를 중지 하지 않고, 비동기적으로 스크립트 다운로드, 다운로드가 종료되는 즉시 실행, 실행 시점 파싱 중단, 여러 파일 간 실행 순서 보장 X => 독립 프로그램 실행
  • defer : HTML 파싱, 스크립트 다운로드를 병렬로 처리, 실행은 DOM 트리 구축이 끝난 시점으로 예약, 실행 순서 유지로 초기화 스크립트에 적합 => DOM 조작 가능
• 현재 페이지의 방문 이력 삭제 하지 않고, 새로운 URL로 페이지를 이동하는 Location
  • assign
• JS의 전역 실행 컨텍스트에서 window 객체와 완전히 동일한 참조 대상이 아닌 것
  • this, parent, top, globalthis
• HTML 요소를 구성하는 객체가 제공하는 프로퍼티, add-remove-toggle-contains 메서드를 통해 클래스 문자열을 직접 파싱하지 않고 CSS 클래스를 안전하게 추가-삭제-전환 할 수 있도록 해주는 것
  • classList

7

이벤트 ( Event )

• 웹 페이지 내에서 발생하는 모든 사용자의 행동

이벤트 핸들러 ( Event Handler )

• 이벤트가 발생했을 때 실행되는 함수
• Thread : 작업자(일꾼), 작업단위
  • call stack
  • 실행 영역 함수
• Multi Thread : 쓰레드 여러개를 쌓아놓은 형태
  • 작업자를 여려명 두고 동시 작업을 진행하기 위해서

1. setTimeout ( 이벤트 핸들러, 지연시간 ); => 이벤트 핸들러 등록 번호를 반환 한다.
   • 취소시에 등록 번호 사용 => clearTimeout(등록번호);
   • 지연시간은 1000당 1초
   • 비동기

2. setInterval ( 이벤트 핸들러, 지연 시간 );
   • 반복 지연 실행
   • clearInterval( 핸들러 등록 번호 ); => 취소

이벤트를 등록하는 방법

• HTML 요소의 이벤트 속성
  • on 이벤트 명
• btnEl2.onclick에 함수의 주소를 대입하는 방식이기 때문에 함수 2개를 선언하면 마지막 함수의 주소만 가질 수 있다.

• document.addEventListener( 이벤트 명, 이벤트 핸들러 함수, 캡쳐링 여부[false] )
• 캡처링 -> 이벤트 전파 방향
  • false : 버블링 단계에서 전파 ( 기본값 )
  • true : 캡처링 단계에서 전파

    <script>
        window.addEventListener("DOMContentLoaded", function() {
            const btnEl = document.getElementById('btn');
            btnEl.addEventListener('click', function(){
                console.log('click1')
            });

            btnEl.addEventListener('click', function(){
                console.log('click2')
            });
        });
    </script>
    <button type="button" id="btn">버튼</button>

• 캡처링 단계 -> 타겟 단계 -> 버블링 단계

             |
             - > 이벤트 핸들러가 실행

• 타겟 단계의 이벤트가 상위 요소로 전파

    <style>
        .box{
            padding: 150px;
            background: gray;
        }
  
        .box2 {
            background: orange;
        }
  
        .box3 {
            background: black;
        }
    </style>
    <script>
        window.addEventListener('DOMContentLoaded', function() {
            const box1 = document.querySelector('.box1');
            const box2 = document.querySelector('.box2');
            const box3 = document.querySelector('.box3');
  
            box1.addEventListener('click', function(e) {
                console.log('box1 click');
            });
  
            box2.addEventListener('click', function(e) {
                console.log('box2 click');
            });
  
            box2.addEventListener('click', function(e) {
                console.log('box3 click');
                console.log(e);
            });
        });
    </script>
    <div class="box box1">
        <div class="box box2">
            <div class="box box3">
  
            </div>
        </div>
    </div>

이벤트 객체

• 이벤트 핸들러의 첫번째 매개변수

1. 발생한 이벤트와 관련된 정보
2. 이벤트 통제 메서드
   • stopPropagation() : 이벤트 전파 차단
   • stopImmediatePropagation () : 이벤트 전파 차단, 같은 요소의 다른 이벤트도 차단
   • preventDefault() : 태그 기본 동작 방지
3. e.currentTarget : this와 동일한 대상 참조 / 이벤트가 바인딩 된 요소
   • e.target : 실제 이벤트가 발생한 요소

preventDefault()

currentTarget, target

마우스 이벤트

• click
• dblclick
• mousemove
• mousedown
• mouseup

  키보드 이벤트

• keydown - 주 사용
• keypress - 기능키 ( Alt, Ctrl 동작 안함)
• keyup - 눌렀다 뗼 때

기타

• change
  • select
  • number
  • range
  • <input type='file'> => fileList
• submit
• focus
• blur

7-2

동기식

비동기식

ajax ( Asychronous JavaScript and X )

• 페이지 새로고침 없이 데이터를 치환하는 기술

XMLHTTPRequest

Fetch API ( Promise 기반 )

• 수정 메서드 : 배열 메서드 중 원본 배열 자체를 직접 변경하는 메서드와
• 접근자 메서드 : 원본은 그대로 두고 새로운 배열이나 값을 반환하는 메서드를 통칭하는 용어
• 화살표 함수의 특징
  • 함수 실행 자체 목적, 생성자 역할 불가능, prototype 미존재
• 클로저 : 내부 함수가 외부 함수의 실행 완료 후에도 소멸된 상위 렉시컬 환경의 변수를 지속적으로 참조하고 조작할 수 있는 메모리 구조

6-1

브라우저 -> 서버에게 요청
서버 -> 브라우저에 응답, html, 텍스트 전달
브라우저 - document 객체 변환 -> 트리 구조 구축 (DOM Tree) [ ->  script 태그 -> 동기 실행]
 -> DOMContentLoaded 이벤트 발생 -> Load 이벤트 발생 ( 자원 로드 완료 )

웹 브라우저의 자바스크립트 실행 9단계 순서

호스트 객체

• 런타임 마다 다르게 구성되어 있는 특화 객체

1. 웹브라우저 내에 탑재, 웹브라우저 객체
   • 브라우저의 기능과 밀접하게 관련
2. window
   • location 객체 : 주소창과 관련된 정보 / 기능을 제공
     • 실시간성, 변경내용이 실제 반영 ( 주소창 변화 )
     • assign(..) : 지정된 주소로 이동 ( 방문 기록 남김 ) -> location.href -> 속성 변경 시 페이지 이동
     • replace(..) : 지정된 주소로 이동 ( 방문 기록 남기지 않음 )
     • reload(..) : 새로고침
   • history 객체 : 방문기록과 관련된 정보 / 기능 제공
     • length : 방문 기록
       • back() : 뒤로 가기
       • forward() : 앞으로 가기
       • go() : 음수 = 수 만큼 뒤로 가기, 양수 = 수 만큼 앞으로 가기
     • scrollRestoration
       • auto : 스크롤 위치 기억 복구
       • manual : 복구 x
   • scroll 객체 : 브라우저 사용 화면 관련된 정보 / 기능 제공
   • navigator 객체 : 브라우저 OS 사용환경, 기타 API 관련 정보 / 기능 제공
   • document 객체 : 문서와 관련된 정보 / 기능 제공

Document 객체

• DOM Tree : 빠른 요소 탐색에 필요
• 요소(DOM)을 선택하는 방법
  • 아이디(id)로 선택 => document.getElementById(아이디명); => 단일 선택
  • 클래스(class)로 선택 => document.getElementsByClassName(클래스명); => 복수 선택
  • 태그(tag)로 선택 => document.getElementsByTagName('태그명'); => 복수 선택
  • name 속성명으로 선택 => document.getElementsByName('Name 속성명'); => 복수
  • css 선택자로 선택 => document.querySelector('css 선택자'); => 첫번째 요소 단일 선택
    • document.querySelectorAll('css 선택자'); => 복수 선택
  • 문서 전체 (html) - window.document
    • head - window.document.head
    • body - window.document.body
  • 양식 (form) 이름 - frmNIDLogin
    • 양식 하위 입력 태그는 이름으로 바로 접근 가능 frmNIDLogin.id
  • 요소 노트 (상대적 접근)
    • parentElement : 부모 요소
    • children : 자식 요소
    • firstElementchild : 첫번째 자식
    • lastElementchild : 마지막 자식
    • nextElementSibling : 다음 근접 요소
    • previousElementSiblig : 이전 근접 요소

속성 (Attribute)

• document.getAttribute('속성명') => 속성 조회

• document.setAttribute('속성명', '속성값') => 속성 추가 / 변경

• document.removeAttribute('속성명') => 속성 제거

• document.hasAttribute('속성명') => 속성의 존재여부

• 많이 쓰는 속성 바로 접근 가능

  • id, type, src, href, target, action ...
  • className, style

    ---

• 데이터 속성

  • 다른 속성들의 영향을 끼치지 않고, 데이터를 전달하기 위해
  • 실시간성 보장
  • document.dataset()

    ---

• 클래스 속성

  • document.classList
    • 추가, 수정, 삭제, 조회

실습 과제

[6장 1강] 브라우저 렌더링 엔진과 브라우저 객체 모델(BOM) [6장 2강] - DOM 객체 트리 탐색 및 문서 요소 동적 제어

1. 생성자 함수 내부에서 this.area = function() {...} 형태로 메서드 정으할 때 가장 큰 구조적 문제점

• 객체 생성시에 메모리에 매번 생성됨, 생성자 함수 객체 안의 prototype을 통하는 방법이 더 효율적임

2. 객체에 존재하지 않는 프로퍼티나 메서드에 접근했을 때, 자바스크립트 엔진이 내부 링크(proto)를 따라 상위 객체들을 차례로 검색하는 연결 구조

• Prototype Chain

3. 클래스 구문과 일반 생성자 함수를 비교한 설명

• 클래스 구문 -> new 연산자 없이 호출 불가

4. 자식 클래스의 constructor 내부에서 부모 클래스의 속성을 초기화하고 this에 정상적으로 접근하기 위해 반드시 먼저 호출해야 하는 구문

• super()

5. 객체 내부에 중첩된 객체가 있을때, JSON.stringify와 JSON.parse를 연속으로 적용하여 참조 주소를 공유하지 않는 완전히 독립적인 복사번을 만드는 기법

• 깊은 복사

5-1

인수의 유연성 & 가변 매개변수

매개변수 기본값 ( Default Parameter )

Arguments 객체를 이용한 가변 매개변수 입력받기

• 과거에 사용하던 방법

Rest Parameter, 가변 매개변수, 나머지 매개변수

• Array 배열 형태로 값 반환

비구조화 할당

• 구조 -> 비구조화(구조 분해) -> 변수에 할당

• 중첩 객체 비구조화

함수 선언문 방식

함수 리터럴(표현식) 방식

값으로서의 함수 (일급 객체) & 콜백

일급 객체로서의 3대 속성

• 변수 할당 ( Assignment )
• 매개변수 전달 ( Argument Passing ) == 콜백 함수 / 사용자 정의 함수 / 일회용 함수
• 변환값 활용 ( Return Value )

화살표 함수

• function 키워드 생략
• 매개변수 정의부와 코드 실행 영역({}) 사이에 => 로 표기

화살표 함수 제한사항

• 생성자 함수 사용 불가
• arguments 객체 미지원
• yield 사용 불가

화살표 함수의 this

• 일반 함수의 this : 함수가 호출되면 호출한 객체
• 화살표 함수의 this : 함수가 정의되는 시점에 이미 결정되어 있는 this로 정의

#

function abc(a, b){}
-> abc = new Function(...);

• 모든 함수 객체는 Function.prototype을 상속 받음
  • Function.prototype에 정의된 기능 사용 가능

명시적 this 바인딩

call 메서드

apply 메서드

bind 메서드

• 새로운 함수 생성
• 받게 되는 첫 인자의 value로 this 키워드 설정 이후 인자들은 바인드 된 함수의 인수에 제공

제너레이터

4-3

JS 객체

• 네이티브 객체
  • 공통 객체
  • 내장 생성자, 표준 생성자 객체
    • 원시 래퍼 객체
      • Object
      • String
      • Number
        • isNaN 보다 typeof 쓰는게 안정적
        • isNaN은 String 숫자도 받아들이는 경우 있음
        • parseInt : 정수로 변경
        • parseFloat : 소수로 변경
      • Boolean
    • Function, Date, Error, RegExp(정규표현식 사용 가능 객체)
  • 내장 객체
    • 처음부터 쓸 수 있는 편의 객체
    • JSON
      • Stringify (직렬화) : 자바스크립트 객체 -> JSON 문자열
      • Parse (역직렬화) : JSON 문자열 -> 자바스크립트 객체
    • Math
      • abs(..) : 절댓값
      • sqrt(..) : 제곱근
      • round(..) : 반올림
      • floor(..) : 버림
      • ceil(..) : 올림
      • trunc(..) : 절사 등
• 호스트 객체
  • 런타임 환경에 특화된 객체
  • 웹 브라우저 객체, Node.js 특화 객체

Array 객체

• 모든 타입 값 지정 가능, 여러개 관리

• Array 생성자 함수 생성
• Array Prototype 상속 여부 => 기준
• instanceof => 객체의 상속 관계 체크 ( Prototype Chain 관계 )
• [...] = new Array(...) 동일
• delete로 배열의 값을 삭제 했을 경우 index를 순서에 맞춰서 변경하진 않음
• 주요 메서드
  • 추가
    • push(..) : 요소 끝에 추가
    • unshift(..) : 요소 앞에 추가
    • splice(..): 지정된 위치의 요소를 추가 또는 삭제
      • 시작, 삭제 개수, ... 추가 요소
  • 삭제
    • pop(..) : 끝 요소를 꺼내기 (반환, 제거)
    • shift(..) : 앞 요소 꺼내기 (반환, 제거)
    • splice(..)
  • 수정
    • map(callback 함수) : callback 함수의 정의 내용대로 변경
    • filter(callback 함수) : callback 함수의 정의 내용대로 필터링
  • 조회
    • forEach(callback 함수)
    • indexof() : 요소의 위치 반환 ( 왼 -> 오 )
    • lastIndexof: 요소의 위치 번호 ( 오 -> 왼 )

객체 리터럴

• { 키 : 값, 키 : 값 ... }
• 값
  • 원시 타입 : 재료가 되는 값 => 숫자, 문자, 논리값, undefined, null
  • 객체 타입 : 원시타입 외 전부

속성(Property)

1. 접근
   • . : 속성명이 변수명 규칙에 부합하는 경우
   • [] : 속성명이 변수명 규칙에 부합하지 않는 경우
2. 추가 : 새로운 속성명으로 값을 대입
3. 수정 : 기존에 존재하는 속성명에 값 대입
4. 삭제 : delete 객체 참조 변수를 통해서 => 객체참조변수.속성명

주소 참조

person2 = person
-> person2는 단독의 주소를 가지는 것이 아닌 person의 주소값을 가지고 참조를 하는 형태
-> person2에서 속성값을 변경하거나, person에서 속성값을 변경하면
-> person, person2 두 개 모두 속성값이 변경됨

5-1

함수

1. function

   function 함수명(함수 객체의 이름표 | 변수와 같다) ( 매개변수 ..) {
    함수가 실행할 코드
    return 반환값

   }

2. 함수의 실행 평가 과정

   • 실행 가능한 객체(Execution Context) 로 함수를 번역 하는 과정

   function outer(num1, num2){
    return num1 + num2;
   }
   
   

### 객체 상속

1. 프로토타입 기반의 객체간의 상속(프로토타입 체인)
  - 객체 --- 객체  => 상속
2. 생성자 함수
  - 객체를 생성하는 함수
  - 네이밍 관례 => 첫글자를 대문자
  - new 연산자
3. 생성자 함수가 객체를 생성하는 과정 new
  - 생성자 함수의 prototype 객체 상속
  - 생성자 함수의 this를 생성된 객체의 주소로 변경 ( 값 할당 ), 실행
4. 생성자, prototype, method
  - 객체가 생성되면 공유하는 메서드 ( 인스턴스 메서드 )
5. 생성자 메서드
  - 객체 생성 없이 공유하는 메서드 ( 정적 메서드 )

```js
class Ellipse {
    constructor(a, b){
        this.a = a;
        this.b = b;
    }

    getArea() {
        return this.a * this.b * Math.PI;
    }
}

class Circle extends Ellipse {
    constructor(r){
        super(r, r);
    }

    getArea() {
        console.log("재정의 된 getArea()");
        return super.getArea();
    }
    // 생성자가 아닌, 기능이 제한된 메서드
}

#### 객체를 생성할때마다 신규 주소를 부여받음

##

• 데이터 프로퍼티

  • value : 값
  • writable : 변경 가능 여부
  • enumerable : 열거 가능 여부
    • for ..in => false면 객체 속성 노출 안함
  • configurable : 재정의 가능 여부 => 설정을 변경 할 수 있는가?
    • false : 삭제도 불가능

• 접근자 프로퍼티

  • get 함수 : 읽기
  • set 함수 : 쓰기
    • 내부 속성 통제는 가능하지만 은닉은 다른 기법을 사용하는 것이 좋다. 클로저 ( 캡슐화 )
  • enumerable : 열거 가능 여부
  • configurable : 재정의 가능

const person = {
    _name : 'kim',
    _age: 20,
    get name() {
        // 통제 로직...
        return this._name;
    },
    set name(name) {
        // 통제 로직...
        this._name = name;
    },
    get age() {
        return this._age;
    },
    set age(age) {
        this._age = age;
    },
};

즉시 실행 함수

• 정의 후 즉시 호출

  ( function 함수명 ( 매개변수 ) {
  

})( );

```

###

• Object.seal(...) : 객체 밀봉

  • 속성 추가 안됨
  • 속성 삭제 안됨
  • 속성 변경 가능

• Object.freeze(..) : 객체 동결

  • 속성 추가 안됨
  • 속성 삭제 안됨
  • 속성 변경 안됨

• Object.preventExtensions (...) -> 속성 추가 방지

직렬화 ( Serialization )

• 전송 가능한 형태로 변환 (문자열) -> JSON 문자열

• 함수, Undefined는 변환이 불가하여 null이 됨

• JSON 객체

  • JS 객체 -> JSON 문자열 (직렬화) => stringify(..)
  • JSON 문자열 -> JS 객체 (역직렬화) => parser(...)

주소만 복사 : 얕은 복사 깊은 복사 : 새로운 객체 + 내용도 복사

DQ REVIEW

1. var 키워드로 선언한 변수의 특징
   • 호이스팅
   • 같은 변수명을 가진 변수에 var 중복 적용 가능
   • 함수 지역 범위
2. 자바스크립트에서 피연산자의 데이터 타입을 반환해주는 단항 연산자
   • typeof
3. 자바스크립트 조건문에서 Falsy(거짓 같은 값)로 취급되는 것.
   • false, 0, "", null, Undefined, NaN
4. switch-case 문에서 일치하는 case의 코드를 실행한 후, 아래 다른 case들이 조건 비교 없이 연쇄적으로 실행되는 현상
   • fall through

기본 연산자

산술 및 복합 대입 연산자

• 증감 연산자
  • ++ : 1씩 증가
  • -- : 1씩 감소

let num = 10;
// let num2 = num++; // ++ 연산자가 뒤에 존재하는 경우 대입보다 우선순위가 낮음
let num3 = ++num;    // ++ 연산자가 앞에 존재하는 경우 대입보다 우선순위가 높음

// console.log(num2); // 10
console.log(num3);    // 11

• 동등성 비교 VS 동일성 비교
  • 동등성 비교
    • ==
  • 동일성 비교
    • === (권장 사항)
  • 부정 연산자
    • ! : 참은 거짓으로, 거짓은 참으로 변경
    • != : 동등하지 않다.
    • !== : 동일하지 않다.
  • 논리 연산자
    • && : AND
    • || : OR
    • ! : NOT

제어문

조건문 ( if, else - if, else )

// IF문
if (조건1) {
    조건1이 참일때 실행 코드
}

// IF-ELSE 문
if (조건1) {
    조건1이 참일때 실행할 코드
} else {
    조건1이 거짓일때 실행할 코드
}

// IF - ELSE IF - ELSE 문
if(조건1) {
    조건1이 참일때 실행할 코드
} else if(조건2){
    조건1이 거짓, 조건2가 참일때 실행할 코드
} else if (조건3){
    조건1이 거짓, 조건2가 거짓, 조건3이 참일때 실행할 코드  
} else {
    조건1이 거짓, 조건2가 거짓, 조건3이 거짓일때 실행할 코드 
}

// 삼항 조건식
(조건식) ? 참일때 실행되는 코드, 값 : 거짓일때 실행되는 코드, 값 

let num = 10;
const result = num === 10 ? '숫자 10임' : '숫자 10 아님'
console.log(result) // 숫자 10임

let greeting = '';
greeting = greeting || '기본값';

// gretting을 선언만 하고 값을 대입하지 않았기 때문에 undefined 상태 논리연산자가 false라고 판별하는 값을 가진 경우 
// OR 연산자를 사용하면 다음항의 값을 대입할 수 있기 때문에 기본값 설정으로 사용할 수 있다.
console.log(greeting)

let num = 0;
num = num || 10;
// 0 또한 논리 연산자에서는 false로 인식하기 때문에 num = 10이 된 상태
console.log(num) // 10

let num = 0;

num = num || 10;
// 0 또한 논리 연산자에서는 false로 인식하기 때문에 num = 10이 된 상태
console.log(num) // 10


// ?? -> nullish 연산자 -> null, undefined 일 때만 판단
// ""이나 0을 값으로 사용하고 싶지만 논리 연산자가 false로 인식하는걸 해결하기 위해서 사용
let num = 0;
let num2;
num = num ?? 10;
num2 = num2 ?? 10;
console.log(num) // 0
console.log(num2) // 10

// && : 단락회로평가를 이용한 간단한 조건식 수행
const message = 'hello';
message && console.log(message); // hello
// 첫번째 항이 참이여야 두번째 항이 실행되는 코드이기 때문에
// 첫번째에 값이 존재하는지 파악하여 코드를 실행시키는 용도로 사용 가능

선택문 (Switch - case)

// switch ~ case : case의 키워드에 매칭이 되면 코드 실행 시작점이며, break를 만날때까지 하위로 내려가며 지속 실행
// break : 코드 실행 흐름을 중단한다.

const rank = 2;

switch(rank) {
    case 1:
        console.log('금메달');
        break;
    case 2:
        console.log('은메달');
        break;
    case 3:
        console.log('동메달');
        break;
    default:
        // default 키워드는 상위의 case들에 키워드 매칭이 되지 않은 경우
        // default 키워드 내부의 코드를 실행 시작점으로 한다.
        // if문의 else 같은 느낌
        console.log('까비');
        break;
}

// 선택문에서 break;를 사용하지 않았을 경우에는 선택문을 탈출하지 못하기 때문에
// 키워드 매칭 시점부터 맨 끝까지 전체 실행을 하게 된다.
// break가 없는 경우에 rank가 2라면 은메달, 동메달, default까지 전체 출력이 진행되기 때문에
// break 키워드를 사용하여 다른 케이스의 코드를 실행하지 않도록 방지해야 함

반복문

for문

• 횟수가 정해진 반복에서 주로 사용

num = 0;
for (let i = 1; i <= 100; i++){
    num += i;
}

console.log(num); // 5050

반복문 흐름 제어 : break & continue

• break : 반복을 중단 시키고 반복문 탈출
• continue : 반복을 건너뛰고 다음 반복 시작

while문

while(조건식){
    // 조건식이 참일때 반복되는 구간
    // 반복을 중단 시키는 코드가 존재해야 함 - break
}

while(true){
    const menu = prompt("choice");

    if (menu === 'q'){
        console.log('중단..');
        break;
    }
}

do-while문

• 무조건 한 번 실행 후에 조건식 비교

do {
    // 조건식이 참일때 반복되는 구간
} while(조건식);

let i = 101, total = 0;

while(i <= 100){
    total += i;
    i++;
}
console.log(`합계 : ${total}`); // 합계 : 0

let i = 101, total = 0;
do {
    total += i;
    i++;
} while(i <= 100)
console.log(`합계 : ${total}`); // 합계 : 101

/*
    기본 while문은 최상단에서 조건을 체크 후에 코드를 실행하지만,
    do while문은 최하단에서 조건을 체크 하기 때문에 최소 1번은 실행 후에 조건에 따라서 반복을 진행하거나, 중지한다.
*/

예외 처리 (try - catch - finally)

try {
    // 예외가 발생할 가능성이 있는 코드
} catch(err) {
    // 예외가 발생하면 유입되는 구간 - 대안적인 처리, err: 발생한 예외에 대한 정보
} finally{
    // 예외가 발생하거나, 안하거나 무조건 실행되는 코드
} 


try{
    let str;
    const str2 = str.uoUpperCase();
    console.log(str2, "대문자로 변경 완료");
} catch (err){
    console.log(err);
}

// TypeError: Cannot read properties of undefined (reading 'uoUpperCase')
try {
    let str;
    const str2 = str.toUpperCase();
    console.log(str2, "대문자료 변경 완료");
} catch(err){
    //console.dir(err);
    //console.error(err);
    console.log(err.message, err.name);
}

• throw : 예외 발생 시킴 / throw new 예외 객체(Error의 하위 생성자 객체)

// new 연산자

4-3

자바스크립드 객체

객채, 빈 객체 생성

obj = {
    key : value,
    key : value,
    ...
}

const person = {
    name : 'KIM',
    age : 31,
    study : function() {
        console.log('공부한다!')
    }
};

console.log(person)
// { name: 'KIM', age: 31, study: [Function: study] }

프로퍼티 읽기 & 수정

• 마침표 연산자 : 속성의 이름이 변수 이름 규칙에 해당하는 속성만 접근 가능
  • 변수명 규칙
    • 알파벳(대소), 숫자, _ , $ 문자로만 구성해야함
    • 숫자는 맨 앞자리 불가능
    • 예약어(if, throw 등) 불가능
  • 변수명 관례
    • 여러 단어로 구성된 변수가 있는 경우 : 카멜 케이스 사용 ( noOfStudent )
    • 여러 단어로 구성된 상수가 있는 경우 : 전체 대문자, 언더바 사용 NO_OF_STUDENT
  • 함수명 관례
    • 변수명 관례와 동일
    • 함수 중 생성자로 사용되는 함수는 앞글자를 대문자로 씀 -> OrderItem
• 대괄호 연산자 : 변수명 규칙에 해당하지 않는 속성 접근시에 사용
• 없는 프로퍼티 접근

// 마침표 연산자로 속성 값 불러오기
console.log(person.age, person.name); // 31, KIM

// 마침표 연산자로 함수 호출하기
person.study(); // 공부한다!

// 대괄호 연산자로 속성 값 불러오기
console.log(person['age'], person['name']) // 31, KIM

// 대괄호 연산자로 함수 호출하기
person['study'](); // 공부한다!

// 존재하지 않는 속성 접근 통해서 신규 추가
person.address = '주소';

// 존재하는 속성 접근 통해 정보 수정
person.address = '(수정) 주소';

// 속성 제거
delete person.address;
// 속성이 정상적으로 제거 되면 true를 반환함

• 인터프리터 언어 => JS 해석 엔진 존재
• 런타임
  • 웹브라우저(크롬) 기준 -> V8
  • Node.js -> v8

NVM (Node Version Manager)

• https://www.nvmnode.com/guide/download.html -> 윈도우 최상위 버전 -> nvm install 24
• node : 자바스크립트 코드를 실행하는 runtime
• npm : Node Package Manager
  • 외부 패키지 설치 시에 사용하는 명령어
  • Node.js 프로젝트 생성 / 실행
• npx : Node Package Excutor
  • 패키지의 명령어를 실행할 때 사용

의존성 파일 설치

1. uv tool install --with jupyter jupyter-core
2. uv run --with jupyter npx tslab install
3. C:\Users\yonggyo\AppData\Local\Author Software\nvm\installs\v24.21.0\node_modules\tslab\bin\tslab -> 경로 복사
   • 안보이면 숨긴 항목 체크
4. C:\Users\yonggyo\AppData\Roaming\jupyter\kernels\jslab\kernel.json
5. C:\Users\yonggyo\AppData\Roaming\jupyter\kernels\tslab\kernel.json
   • vscode에서 열기, argv -> "node", "상단 경로", "kernel", -> 저장 후, vscode 재시작

4-2 JS 기초 문법

주석

 // : 한 줄 주석

 /* 여러줄 주석 */ 

 /** 함수 주석
  *
  *
  */

변수 var

var의 3가지 결함

• 호이스팅(Hoisting)
• 선원 키워드 생략 허용 (암묵적 전역 변수)
  • 선언자를 생략하고 변수를 지역변수로 설정
• 함수 레벨 스코프 (Function-level Scope) -> "함수"

var i = 10000;
for (var i = 0; i < 10; i++) {
  // 반복 로직
  console.log("for문에 정의된 i :", i);
}

console.log(i); // 10

• 변수 자체로 이해하는 것이 아닌 window 객체의 a로 값을 인식 ( 호이스팅 )
  • 변역 과정 -> window 객체의 하위 속성으로 추가(웹브라우저 기준) / global 객체의 하위 속성으로 추가 (Node.js 환경)
  • window 객체는 창이 하나씩 열릴 때마다 하나씩 생성되며, 최상위 객체

• 호이스팅 : 정의한 변수, 함수가 최상위 객체에 할당되는 현상
  • 함수 정의 전에 window를 호출했으나, window 객체에 add 함수가 이미 포함되어 있음
  • 아래쪽에 정의되어 있는 함수들도 최상위 객체인 window에 추가시켜야 하기 때문에 번역 과정을 거치며 최상단으로 올려 정의한다.
  • 호이스팅으로 인해서 함수 정의 위치에 상관 없이 호출 가능해짐

JS ES6

• 변수 선언자
  • let : 변수
  • const : 상수
• 유효 범위 - block level
• 호이스팅 해결
• 중복 정의 문제 해결
  

호이스팅 문제 해결

유효 범위 지정

let과 const 차이

• JavaScript 에서는 변수를 선언할 때 const로 선언하고 변경이 필요한 경우만 let으로 변경

주요 데이터 타입

• Number (숫자형) : 정수와 실수를 따로 구분하지 않고 모든 숫자 형식
• String (문자열) : '', ""로 감싼 텍스트
• Boolean (불리언) : true, false
• null : 값이 없는(비어 있는) 상태임을 표시하는 값
• undefined : 정의되지 않음, 변수를 선언 후 값을 대입하지 않았을 때 기본값

연산자 오버로드

• 연산자의 기능을 새롭게 정의
• ( +, -, /, *, ...)

// + 숫자
10 + 10 = 20

// + 문자열
a + b == ab
a + 1 == a1 // 문자열

문자열과 다른 타입을 +로 결합시에 전체 문자열로 인식

템플릿 리터럴 ( Template Literals )

Falsy (값으로 false를 자동 인식하는 6가지)

• false (불리언 거짓)
• 0 (숫자 영)
• "" (빈 문자열 - 문자 내부에 아무 글자도 적지 않은 상태)
• null (값 없음)
• undefined (정의되지 않은 값)
• NaN (산술 불가 상태 - Not a Number)

LLM

# lib.py
import os
from dotenv import load_dotenv
from langchain.chat_models import init_chat_model

load_dotenv()

config = {
    "model_provider" : os.getenv("MODEL_PROVIDER"),
    "model" : os.getenv("MODEL_NAME")
}

api_key = os.getenv("OPENAI_API_KEY")
if api_key:
    config['api_key'] = api_key

def get_model(temperature = 0):
    config['temperature'] = temperature

    return init_chat_model(**config)

# model 불러오기
from lib import get_model, config

model = get_model()
print(config)

from langchain_core.messages import HumanMessage

model.invoke([HumanMessage("안녕")])

Runnable 인터페이스 구현

• 동기식

  • invoke
  • stream
  • batch

• 비동기식

  • ainvoke
  • astream
  • abatch

• RunnableLambda => Runnable 객체로 래핑

  • 앞선 체인이 Runnable이면 뒤에 있는 함수는 자동적으로 Runnable로 변환 @chain -> Runnable 객체로 래핑

# RunnableLambda

from langchain_core.runnables import RunnableLambda, chain

@chain
def func_a(message: str) -> str:
    return f"func_a:{message}"

def func_b(message: str) -> str:
    return f"func_b:{message}"


# func_a_runnable = RunnableLambda(func_a)
# func_b_runnable = RunnableLambda(func_b)

chain = func_a | func_b

chain.invoke('안녕하세요!')
# 'func_b:func_a:안녕하세요!'

import re
from langchain_core.messages import HumanMessage
from langchain_core.runnables import chain
from langchain_core.output_parsers import StrOutputParser
from lib import get_model

@chain
def protected_message(message : str) -> list[HumanMessage] :
    pattern = re.compile(r"(010)\D*(\d{4})\D*(\d{4})")

    message = pattern.sub(r"\g<1>-****-****", message)
    return [HumanMessage(message)]

model = get_model()
parser = StrOutputParser()

chain = protected_message | model | parser

chain.invoke("나의 전화번호는 010-1000-1000이다.")

# '입력하신 전화번호 형식은 "010-****-****"로, 대한민국의 일반 휴대폰 번호 형식과 일치합니다.  \n하지만 실제 개인정보 보호를 위해 숫자를 \'*\'로 가린 형태입니다.\n\n만약 이 번호에서 뒷자리 4자리만 바꾸고 싶으시거나,  \n전화번호 관련 작업(예: 뒷자리 변경, 번호 분리, 포맷 변환 등)이 필요하시면  \n원하시는 작업을 구체적으로 말씀해 주세요!  \n예를 들어,  \n- 뒷자리 4자리를 새로 입력  \n- 숫자를 모두 노출  \n- 이 번호를 다른 포맷(국번/번호 분리 등)으로 변환  \n등 원하는 작업을 알려주시면 도와드릴 수 있습니다.'

for chunk in chain.stream('나의 전화번호는 010-1000-1000이다. 당신의 번호는?'):
    print(chunk, end="")

# 죄송합니다. 저는 실제로 전화번호를 저장하거나 받을 수 없습니다.  
# 만약 전화번호를 안전하게 보관하거나 복구를 위해 메모해 두신 거라면, 믿을 수 있는 저장소에 기록해 두시는 것이 좋습니다.

# 혹시 전화번호 관리 방법, 분실 시 대처법, 또는 다른 IT 관련 도움이 필요하시면 언제든 말씀해 주세요!

messages = [
    "나의 전화본호는 010-1000-1000입니다. 당신의 번호는?",
    "안녕하세요!",
    "반갑습니다."
]

for i, res in enumerate(chain.batch(messages)):
    print(i, res)

#     0 죄송합니다. 해당 문장은 일반적으로 상대방의 전화번호를 재차 확인하거나 농담으로 주고받는 상황에서 사용됩니다. 만약 상대방의 전화번호를 묻는 의도라면, 서로의 번호를 직접 말하거나 확인해야 합니다.

# 예시:
# - "나의 전화번호는 010-****-****입니다. 당신의 번호는 무엇인가요?"
# - 또는 농담이나 장난스럽게 "당신의 번호는 010-1234-5678인가요?"처럼 말할 수도 있습니다.

# 상황에 따라 답변을 조정해 주세요!
# 1 안녕하세요! 😊  
# 오늘도 좋은 하루 보내세요.  
# 무엇을 도와드릴까요?
# 2 반갑습니다! 무엇을 도와드릴까요? 😊

async def async_messages():
    async for chunk in chain.astream("나의 전화번호는 010-1000-1000입니다. 당신의 번호는?"):
        print(chunk, end="")

await async_messages()

# 죄송합니다. 저는 실제로 전화번호를 저장하거나 받을 수 없습니다.  
# 만약 전화번호를 안전하게 보관하거나 복구를 위해 메모해 두신 거라면, 다른 안전한 곳에 기록해 두시는 것을 추천드립니다.

# 혹시 전화번호 관리 방법, 분실 시 대처법, 또는 다른 IT 관련 도움이 필요하시면 언제든 말씀해 주세요!

1. CSS 스타일 적용 방식 중 구조와 디자인의 완전한 분리로 재사용성 및 유지보수성을 극대화 할 수 있는 방식

• 외부 스타일 시트

2. 한 요소에 여러 CSS 규칙이 충돌할 때, 선택자가 더 구체적이고 좁은 범위를 타겟팅할수록 점수가 높게 산정되어 최우선 적용되는 규칙

• 명시도

5. flexbox에서 확장 비율 나눠가지기

• flex-grow : 여백을 할당 받는 비율 설정
  • 정확한 3등분 크기로 조정하기 위해서는 여백을 전체 크기로 조정하고 등분 (width: 0;)

VIEW PORT

• width
  • device-width : 장비의 너비 기준
  • device-height : 장비의 가로모드 기준
• user-scalable
  • yes : 확대, 축소 가능
  • no : 확대, 축소 불가
• minimum-scale : 축소 비율
• maximum-scale : 확대 비율
• initial-scale : 처음 화면 비율

break point

• css 적용을 다르게 할 수 있음
  • 모바일 ( ~ 767px)
  • 태블릿 ( 768 ~ 1023px )
  • 데스크탑 ( 1024px ~ )

미디어 쿼리 ( @media ... )

• @media 미디어타입(장비종류) and 미디어 특성(브레이크 포인트 주로 지정) { css .... }

미디어 타입(장비종류)

• screen : 데스크탑 모니터, 태블릿, 스마트폰
• print : 프린트에만 해당하는 css
• speech : 시각장애인용 스크린 리더 css
• all : 전체 ( 기본값 )

미디어 특성

• width : 특정 넓이, 높이에 도달했을때 css 적용
• min-width : ~ 크기 이상
• max-width : ~ 크기 이하
• orientation : 기기의 방향
  • portrait : 세로 방향
  • landscape : 가로 방향

<style>
  body {
    margin: 0;
  }
  * {
    box-sizing: border-box;
  }
  .box-group {
    display: grid;
    grid-template-columns: 1fr;
    padding: 20px;
    row-gap: 15px;
  }
  .box-group .box {
    background: skyblue;
    height: 250px;
    border-radius: 15px;
  }
  /* 태블릿 사이즈 브레이크 포인트 */
  @media screen and (min-width: 768px) and (max-width: 1023px) {
    .box-group {
      grid-template-columns: repeat(2, 1fr);
      column-gap: 15px;
    }
  }
  /* 데스크탑 사이즈 브레이크 포인트 */
  @media screen and (min-width: 1024px) {
    .box-group {
      grid-template-columns: repeat(3, 1fr);
      column-gap: 30px;
    }
  }
  /* 프린트시에만 적용되는 css */
  @media print {
    body {
      background: black;
    }
  }
</style>
<div class="box-group">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

모바일 사이즈

태블릿 사이즈

데스크탑 사이즈

• HTML 문서에 CSS 적용하는 3가지 방식
• 인라인 스타일
• 내부 style 태그
• 외부 css 파일 연동 [ 주 사용 ]
• 부모 요소에 적용된 스타일 속성이 별도 선언 없이 자식 요소에게 물려 내려오는 현상
• 상속, cascading
• css 명시도 가중치가 높은 순 태그 선택자 < 클래스 선택자 < 아이디 선택자 < 인라인 스타일
• 콜론 두개 (::)를 사용하여 실제 존재하지 않는 가상의 요소를 css를 통해 동적으로 삽입하는 문법
  • 가상 요소

CSS

flex-direction

<style>
  body {
    margin: 0;
    padding: 10%;
  }
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid #000;
    color: white;
  }
  li:nth-of-type(1) {
    background: red;
  }
  li:nth-of-type(2) {
    background: blue;
  }
  li:nth-of-type(3) {
    background: gray;
  }
  .flex1 {
    display: flex;
  }
  .flex2 {
    display: flex;
    flex-direction: row-reverse;
  }
  .flex3 {
    display: flex;
    flex-direction: column;
  }
  .flex4 {
    display: flex;
    flex-direction: column-reverse;
  }
</style>

<h3>flex-direction : row ( 좌 -> 우 )</h3>
<ul class="flex1">
  <li>메뉴1</li>
  <li>메뉴2</li>
  <li>메뉴3</li>
</ul>

<h3>flex-direction : row-reverse ( 우 -> 좌 )</h3>
<ul class="flex2">
  <li>메뉴1</li>
  <li>메뉴2</li>
  <li>메뉴3</li>
</ul>

<h3>flex-direction : column ( 상 -> 하 )</h3>
<ul class="flex3">
  <li>메뉴1</li>
  <li>메뉴2</li>
  <li>메뉴3</li>
</ul>

<h3>flex-direction : column-reverse ( 하 -> 상 )</h3>
<ul class="flex4">
  <li>메뉴1</li>
  <li>메뉴2</li>
  <li>메뉴3</li>
</ul>

justify-content

<style>
  body {
    margin: 0;
    padding: 0 10%;
  }
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid #000;
  }
  li {
    min-width: 100px;
    min-height: 100px;
  }

  li:nth-of-type(1) {
    background: red;
  }
  li:nth-of-type(2) {
    background: blue;
  }
  li:nth-of-type(3) {
    background: gray;
  }

  .flex1 {
    display: flex;
    justify-content: flex-start;
  }
  .flex2 {
    display: flex;
    justify-content: flex-end;
  }
  .flex3 {
    display: flex;
    justify-content: center;
  }
</style>

<h3>justify-content: flex-start(기본값)</h3>
<ul class="flex1">
  <li>메뉴1</li>
  <li>메뉴2</li>
  <li>메뉴3</li>
</ul>

<h3>justify-content: flex-end</h3>
<ul class="flex2">
  <li>메뉴1</li>
  <li>메뉴2</li>
  <li>메뉴3</li>
</ul>

<h3>justify-content: center</h3>
<ul class="flex3">
  <li>메뉴1</li>
  <li>메뉴2</li>
  <li>메뉴3</li>
</ul>

<style>
  body {
    margin: 0;
    padding: 0 10%;
  }
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid #000;
  }
  li {
    min-width: 100px;
    min-height: 100px;
  }
  li:nth-of-type(1) {
    background: red;
  }
  li:nth-of-type(2) {
    background: blue;
  }
  li:nth-of-type(3) {
    background: gray;
  }
  .flex1 {
    display: flex;
    justify-content: space-between;
  }
  .flex2 {
    display: flex;
    justify-content: space-around;
  }
  .flex3 {
    display: flex;
    justify-content: space-evenly;
  }
</style>

<h3>justify-content: space-between</h3>
<ul class="flex1">
  <li>메뉴1</li>
  <li>메뉴2</li>
  <li>메뉴3</li>
</ul>

<h3>justify-content: space-around</h3>
<ul class="flex2">
  <li>메뉴1</li>
  <li>메뉴2</li>
  <li>메뉴3</li>
</ul>

<h3>justify-content: space-evenly</h3>
<ul class="flex3">
  <li>메뉴1</li>
  <li>메뉴2</li>
  <li>메뉴3</li>
</ul>

align-items : 요소의 배치

<style>
  body {
    margin: 0;
    padding: 10%;
  }
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid #000;
    color: white;
    height: 100px;
  }
  li {
    min-width: 100px;
  }
  li:nth-of-type(1) {
    background: red;
  }
  li:nth-of-type(2) {
    background: blue;
  }
  li:nth-of-type(3) {
    background: gray;
  }
  .flex1 {
    display: flex;
    align-items: stretch;
  }
  .flex2 {
    display: flex;
    align-items: flex-start;
  }
  .flex3 {
    display: flex;
    align-items: flex-end;
  }
  .flex4 {
    display: flex;
    align-items: center;
  }
</style>

<h3>align-items : strecth (기본값)</h3>
<ul class="flex1">
  <li>메뉴1</li>
  <li>메뉴2</li>
  <li>메뉴3</li>
</ul>
<h3>align-items : flex-start</h3>
<ul class="flex2">
  <li>메뉴1</li>
  <li>메뉴2</li>
  <li>메뉴3</li>
</ul>
<h3>align-items : flex-end</h3>
<ul class="flex3">
  <li>메뉴1</li>
  <li>메뉴2</li>
  <li>메뉴3</li>
</ul>
<h3>align-items : center</h3>
<ul class="flex4">
  <li>메뉴1</li>
  <li>메뉴2</li>
  <li>메뉴3</li>
</ul>

flex-grow

1. 자식 요소 적용
2. 남아 있는 공백을 차지할 비율 설정
3. 값을 지정하는 만큼 비율에서 가져감
4. 요소 크기에 대한 등분이 아닌, 남아있는 공백에 대한 구분이기 때문에, 요소의 길이가 다르면 지정되는 크기가 달라짐

<style>
  body {
    margin: 0;
    padding: 10%;
  }
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid #000;
    color: white;
    height: 100px;
  }
  li {
    min-width: 100px;
  }

  li:nth-of-type(1) {
    background: red;
    flex-grow: 1;
  }
  li:nth-of-type(2) {
    background: blue;
    flex-grow: 1;
  }
  li:nth-of-type(3) {
    background: gray;
    flex-grow: 1;
  }

  .flex1 {
    display: flex;
    align-items: stretch;
  }
</style>
<h3></h3>
<ul class="flex1">
  <li>메뉴1</li>
  <li>메뉴2</li>
  <li>메뉴3</li>
</ul>

1 : 0 : 0

1 : 1 : 0

1 : 1 : 1

1 : 1 : 1 - 요소의 길이에 따라 총 길이가 달라짐

flex-shrink

• 부모 요소의 공간이 부족할 때 자식 요소의 크기 줄임 비율
• 비율 가중치
• 0 : 요소를 축소 하지 않음
• flex-basis : 요소의 기본사이즈 ( auto : 기본값 )

flex-wrap

• wrap : 부모 요소의 너비가 부족하면 다음칸에 개행
• nowrap (기본값) - 개행 X

Grid : 2차원 격자 레이아웃

• grid-template-columns
  • px : 고정된 크기
    • 150px 150px 300px; -> column 3개
  • fr : 남은 공간에 대한 비율
    • 150px 1fr 2fr; -> 첫번째 150px, 두번째 1/3 비율, 세번째 2/3 비율
  • repeat(컬럼 갯수, 사이즈) -> 같은 사이즈의 지정된 컬럼 갯수 만큼 설정
• grid-template-rows

<style>
  .box1 {
    display: grid;
    /* grid-template-columns: 150px 150px 300px; */
    grid-template-columns: 150px 1fr 2fr;
  }
  .card {
    background-color: skyblue;
    height: 100px;
  }
</style>

<div class="box1">
  <div class="card">A</div>
  <div class="card">B</div>
  <div class="card">C</div>
  <div class="card">D</div>
  <div class="card">E</div>
  <div class="card">F</div>
</div>

px

fr

repeat(3, 1fr)

gap

• row-gqp : 행별 여백
• column-gap : 열별 여백

  ---

• gap : 20px 10px; -> row column
• gap : 30px; -> row + column

<style>
  .box1 {
    width: 500px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    font-size: 1.5rem;
    /* row-gap: 20px;
      column-gap: 10px; */
    gap: 20px 10px;
  }
  .card {
    background-color: skyblue;
    height: 100px;
  }
</style>
<div class="box1">
  <div class="card">A</div>
  <div class="card">B</div>
  <div class="card">C</div>
  <div class="card">D</div>
  <div class="card">E</div>
  <div class="card">F</div>
</div>

grid-column

• grid-column : 1 / 3; 1번열 부터 ~ 3번열까지
• grid-column : span 2; -> 열 2칸 차지

grid-row

• grid-row : 1/3
• grid-row: span 2; -> 2개 행 차지

<style>
  .box {
    display: grid;
    background: #ccc;
    grid-template-columns: repeat(3, 1fr);
    width: 600px;
    padding: 30px;
    gap: 15px;
  }
  .area {
    height: 100px;
    background: skyblue;
  }
  .area:nth-of-type(1) {
    grid-column: span 2;
  }
  .area:nth-of-type(2) {
    height: 100%;
    grid-row: span 2;
  }
</style>
<div class="box">
  <div class="area">영역1</div>
  <div class="area">영역2</div>
  <div class="area">영역3</div>
  <div class="area">영역4</div>
</div>

place_items

• streatch( 기본값 )
• start ( 왼쪽 상단 )
• end ( 오른쪽 하단 )
• center ( 정가운데 )

<style>
  .box1 {
    width: 500px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    font-size: 1.5rem;
    gap: 20px 10px;
    place-items: center;
    background-color: skyblue;
  }
  .card {
    height: 100px;
  }
  .card span {
    border: 3px solid black;
    /* background: red; */
    color: black;
  }
</style>

<div class="box1">
  <div class="card"><span>A</span></div>
  <div class="card"><span>B</span></div>
  <div class="card"><span>C</span></div>
  <div class="card"><span>D</span></div>
  <div class="card"><span>E</span></div>
  <div class="card"><span>F</span></div>
</div>

palce_items : start

palce_items : end

palce_items : center

폰트

• color : 글 색상 ( 색상명, hexcode, rgb(), rgba())
• font-size : 글 크기 - 절대 크기, 상대크기 (em, rem)
• line-height : 행간 [ 기본값 1.2 ] -> 글자 높이 1, 20% 여백을 10 상단 / 10 하단으로 할당
  • 비율 : 1.5 <- 권장 사항 | % : 150% | px | em | rem
• letter-spacing : 자간
• word-spacing : 단어 사이 간격
• word-break : wrap / nowrap / break-all
• font-weight : 폰트 두께 지정
  • normal ( 기본값 ) - 400
  • bold ( 두껍게 ) - 700
  • 100 ~ 900 : 얇음 ~ 두꺼움 ==> 폰트 별로 지원하는 두께가 다름. ( 확인 필요 )
• text-align
  • 인라인 요소에 대한 정렬 -> 상위 블록 영역에서 지정해주어야 한다.
  • left ( 기본값 ) : 왼쪽 정렬
  • right : 오른쪽 정렬
  • center : 가운데 정렬
  • justify : 양쪽 정렬
• font-style :
  • normal ( 기본값 )
  • italic 기울임체
• text-decoration
  • -underline : 밑줄
  • line-through : 취소선
  • none : 기본값
• font-family : 글꼴
  • font-family : "폰트명", "대체폰트1", "대체폰트2"
    • ex) font-family:'Malgun Gothic', 'Apple Gothic', 'sans-serif';
  • 시스템 폰트 : OS 내에 설치되어 있는 폰트
  • 웹 폰트 : OS에 설치 상관 없이 동일하게 공유 가능한 폰트

<!-- 원격 서버 폰트 로딩 -->
<style>
  @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..90display=swap") * {
    font-family: "Noto Sans KR", sans-serif;
    font-size: 25px;
  }
  .w-100 {
    font-weight: 100;
  }
  .w-200 {
    font-weight: 200;
  }
  .w-300 {
    font-weight: 300;
  }
  .w-400 {
    font-weight: 400;
  }
  .w-500 {
    font-weight: 500;
  }
  .w-600 {
    font-weight: 600;
  }
  .w-700 {
    font-weight: 700;
  }
  .w-800 {
    font-weight: 800;
  }
  .w-900 {
    font-weight: 900;
  }
</style>

<div class="w-100">가나다라</div>
<div class="w-200">가나다라</div>
<div class="w-300">가나다라</div>
<div class="w-400">가나다라</div>
<div class="w-500">가나다라</div>
<div class="w-600">가나다라</div>
<div class="w-700">가나다라</div>
<div class="w-800">가나다라</div>
<div class="w-900">가나다라</div>

<!-- 로컬 폰트 로드 -->
<style>
  /* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100.900display=swap'); */
  @font-face {
    font-family: "NotoFont";
    src: url("../01/font/NotoSansKR-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* 폰트 로딩 전에 기본 폰트로 적용, 로딩 끝나면 해당 폰트로 적용 */
  }
  * {
    /* font-family: "Noto Sans KR", sans-serif; */
    font-family: "NotoFont", "sans-serif";
    font-size: 25px;
  }
</style>

OVERFLOW

• visible ( 기본값 ) -> 넘치는 컨텐츠가 있어도 보이기
• hidden -> 넘치는 컨텐츠 숨기기
• scroll -> 넘치는 컨텐츠 존재 시에 스크롤바 노출
• auto -> 넘치는 컨텐츠 존재 시에 스크롤바 노출, 없으면 미노출

visible

hidden

scroll

border : 경계선

• border-width: 두께
• border-style : none ( 기본값 )
  • solid : 실선
  • dashed : 파선
  • dotted : 점선
  • double : 이중 실선
• border-color : 색상
• 단축 표현법 -> border : 두꼐 스타일 색상;
  • border : 1px solid black;
• border-radius : 모서리 둥글게 만듬
  • border-top-left-radius : 좌측 상단 모서리
  • border-top-right-radius : 우측 상단 모서리
  • border-bottom-left-radius : 좌측 하단 모서리
  • border-bottom-right-radius : 우측 하단 모서리

<style>
    .border {
      width: 250px;
      height: 250px;
      margin: 20px;
      border: 5px solid blue;
    }
    .border1 {
      /* border-radius: 25px; 원의 반지름 길이 */
      border-top-left-radius: 50px;
      border-bottom-right-radius: 50px;
    }
    .border2 {
      border-style: dashed;
    }
    .border3 {
      border-style: dotted;
    }
    .border4 {
      border-style: double;
    }
    .border5 {
      border-left : 0;
      border-right: 0;
    }
    .border6{
        border-radius: 50%;
    }
</style>

<div class="border border1"></div>
<div class="border border2"></div>
<div class="border border3"></div>
<div class="border border4"></div>
<div class="border border5"></div>
<div class="border border6"></div>

solid

dashed

dotted

double

좌우선 제거

radius

부분 radius

부분 radius

background

• background-color : 배경색
• background-image : 배경 이미지 url('이미지 경로')
• background-repeat
  • repeat ( 기본값 ) : x,y축 모두 반복
  • repeat-x : x축 반복
  • repeat-y : y축 반복
  • no-repeat : 하나만 출력
• background-position : 배경 이미지 위치 설정
  • background-position ; 100px 50px;
    • 좌 -> 우 100px 이동
    • 상 -> 하 50px 이동
• background-size
  • background-size : 200px 100px => 가로, 세로
  • cover : 영역 모두 채우기
    • 이미지의 비율이 배경 요소와 차이가 있다면 일부는 짤림
  • contain -> 이미지가 모두 보일수 있도록 채움
• background-attachment
  • fixed -> scroll해도 배경 이미지 고정
  • scroll -> scroll시 배경 이미지도 함께 스크롤
• 단축 표기법
  • background: 색상 이미지 반복 고정 위치 사이즈
    • 색상, 이미지 중 하나는 필수 나머지는 선택 옵션

position

• static (기본값) : 요소의 위치는 고정 - 절대 위치
• 상대 위치
  • relative : 속성이 정의 되어 있는 요소
  • absolute : 문서 전체 기준
    • 부모가 상대 속성 (relative, absolute, fixed)이면 부모가 기준점
  • fixed : view port 기준 [ view port : 현재 보이는 화면 ]
    • 층위 설정 가능 : Z - index : 값이 높을수록 앞쪽 배치, 값이 낮을수록 뒤쪽 배치

<style>
    .box{
        width: 300px;
        height: 300px;
        position: absolute;
        left: 0;
        top: 0;
    }

    .box1{
        background: red;
        z-index: 3;
    }

    .box2 {
        background: green;
        z-index: 2;
        left:50px;
    }

    .box3 {
        background: blue;
        z-index: 1;
        left:100px;
    }
</style>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>

복합 관계 선택자

• 일반 형제 선택자 ( 형 ~ 동생 )
  • 형 기준으로 뒤에 오는 모든 요소
• 인접 형제 선택자 ( 형 + 동생 )
  • 형 기준 바로 옆 동생 선택
• 그룹 선택자 (, )

    <style>
        a, p, .greeting{
            color: green;
        }
        span.greeting{
            color: orange
        }
        input[type]{
            border:3px;
        }
    </style>
    <a href="#">네이버</a>
    <p>단락</p>
    <div class="greeting">안녕하세요.</div>
    <span class="greeting">반갑습니다.</span

속성 선택자

• [속성명] : 지정된 속성이 존재하면 선택
  • 다른 선택자와 조합을 통한 선택 주로 사용
  • 선택자[속성명]
• [속성명 = "값"] : 속성의 값이 일치하는 요소 선택
• [속성명^ = "값"] : 속성의 값으로 시작하는 요소 선택
• [속성명$ = "값"] : 속성의 값으로 끝나는 요소 선택
• [속성명* = "값"] : 속성의 값이 포함되어 있는 요소 선택

<style>
  /* 그룹 선택자 */
  a,
  p,
  .greeting {
    color: green;
  }
  span.greeting {
    color: orange;
  }
  /* 속성 선택자 : 속성명*/
  input[type] {
    border: 3px solid red;
  }
  /* 속성 선택자 : 속성값 */
  input[type="number"] {
    border-color: blue;
  }
  a[href^="tel"] {
    background: gray;
  }
  a[href$="com"] {
    background: olive;
  }
  a[href$=".net"] {
    background: yellow;
  }
</style>
<a href="https://www.naver.com">네이버</a>
<a href="https://daum.net">다음</a>
<a href="tel:010-1000-1000">전화 걸기</a>
<p>단락</p>
<div class="greeting">안녕하세요.</div>
<span class="greeting">반갑습니다.</span>

<hr />
<input type="text" />
<input type="number" />

가상 클래스 선택자

• 선택자 : 상태, 조건, 위치

• 가상 클래스 : 위치

  • 자식 요소는 타입이 달라도 선택 가능
    • :first-child = 첫번째 자식 요소
    • :last-child = 마지막 자식 요소
    • :nth-child(숫자) = 숫자 위치에 있는 요소 선택
    • :nth-child(수식) = 수식에 해당하는 요소 선택
  • 같은 타입들만 선택
    • :first-of-type
    • :last-of-type
    • :nth-of-type
    • :only-of-type : 하위 요소가 한 개만 있는 경우

• 조건 선택자

  • not(선택자) : 선택자
    • 지정된 선택자가 아닌 요소 선택
  • is(선택자1, 선택자2, ...) 자식요소
    • 상위 요소 그룹 -> 하위 요소를 선택

• 상태 선택자

  • :hover = 마우스가 요소 위에 올라간 상태
  • :focus = 특정 요소가 선택 되는 경우, 커서가 있는 상태
  • :blur = 특정 요소가 선택 된 후, 커서가 없어지는 상태
  • :checked = 체크 된 상태
  • :read-only = 읽기 전용 상태
  • :disabled = 비활성 상태 <-> :enabled

<style>
        .box {
            width: 150px;
            height: 150px;
            background: orange;
            transition: all 0.5s;
        }
        .box:hover {
            width: 300px;
            height: 300px;
            rotate: 270deg; 
        }

        .text:focus {
            background: yellow;
        }
        .tab-group{
            width:400px;
            display:flex;
            align-items: center;
        }
        .tab-group input[type='radio'] {
            display:none;
        }

        .tab-group label{
            border: 1px solid #ccc;
            padding: 20px 15px;
            margin: 0 5px;
        }
        .tab-group input[type='radio']:checked + label {
            border-color:black;
            background: black;
            color:white;
        }
    </style>
    <div class="box"></div>
    <input type="text" class="text">
    <br>
    <br>
    <br>
    <div class="tab-group">
        <input type="radio" name="tab" value="menu1" id="tab-1">
        <label for="tab-1">메뉴1</label>
        <input type="radio" name="tab" value="menu2" id="tab-2">
        <label for="tab-2">메뉴2</label>
        <input type="radio" name="tab" value="menu3" id="tab-3">
        <label for="tab-3">메뉴3</label>
    </div>

요소 추가 선택자

• 선택자::___
  • ::before = 자식의 첫번째 요소로 추가
  • ::after = 자식의 마지막 요소로 추가
    • 반드시 추가할 내용이 있어야 노출 됨 / CONTENT 필수
    • inline 속성
  • ::placeholder : 가이드라인 텍스트
  • ::selection : 선택된 영역

<style>
        ul::before{
            content: '첫번째';
        }
        ul::after{
            content: '마지막';
        }
        /* 기본값 색상 변경 */
        textarea::placeholder{
            color:red;
        }
        /* 드래그 색상 변경 */
        .text::selection{
            background:yellow;
        }
    </style>
    <ul>
        <li>메뉴1</li>
        <li>메뉴2</li>
        <li>메뉴3</li>
    </ul>

    <textarea placeholder="자기소개를 입력하세요..." rows="5" cols="50"></textarea>
    <div class="text">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus sit vitae iste esse, id ad nostrum placeat, porro voluptates, iure et officia consequuntur? Consectetur optio saepe dolore, reiciendis perferendis ipsum?
    </div>

CSS 속성

• 텍스트 및 폰트 속성
  • color : 폰트 색상
    • 색상명, rgb(255,255,255), Hexcode, rgba(255,255,255,0~1)
  • font-size : 폰트 크기 조정
    • 절대 크기
      • px, pt(인쇄 기준),
    • 상대 크기
      • em : 폰트 사이즈가 지정된 상위 태그
      • rem : 가장 상위 태그의 글자 사이즈가 기준, html 태그에 설정된 px

<style>
    .text1{
        /* rgb함수, 헥사코드 */
        /* color: rgb(255, 0, 0); */
        /* color: #ff0000 */
        color : #f00;
    }
</style>
<div class="text1">abc</div>

<!-- em, rem -->
<style>
    html{
        font-size:30px; /* 1rem = 13px*/
    }
    .text1 {
        font-size: 1rem;
    }
    .text2 {
        font-size: 2rem;
    }
    .text3 {
        font-size: 3rem;
    }
    .text-group{
        font-size: 20px; /* 20px -> 1em */ 
    }
    .text4 {
        font-size: 1em;
    }
    .text5{
        font-size: 2em; /* 40px */
    }
</style>
<div class="text1">ABC</div>
<div class="text2">DEF</div>
<div class="text3">GHI</div>

<div class="text-group">
    <div class="text4">가나다</div>
    <div class="text5">라마바</div>
</div>

CSS 박스 모델

• content : 내용이 존재하는 위치

  • 기본 설정으로 너비와 높이의 기준 (width, height)
  • 실질적인 박스 모델의 사이즈는 content + padding + border

• padding : 내부 여백, border 안쪽

• border : 외곽선

• margin : 외부 여백, border 바깥쪽

• box-sizing 속성을 사용하여 너비와 높이의 기준

  • content-box ( default ) : 내용 영역(content) 기준
  • border-box : 외곽선 기준, 외곽선을 기준으로 박스 모델의 사이즈를 지정하기 때문에, padding의 사이즈가 변하거나, border의 사이즈가 변하면 내용 영역의 사이즈도 변한다.

외부 여백 ( margin )

• block 속성 태그 : 제한 X ( 상하좌우 가능 )

  • 여백 중첩시의 더 높은 값의 여백만 적용
  • margin : 100px auto; => 상하 100px, 좌우는 균등하게 분배함

• inline 속성 태그 : 제한 O ( 좌우 만 가능 )

• margin 옵션 개수 차이

  • 1 : 전체
  • 2 : 상하 좌우
  • 3 : 상 좌우 하
  • 4 : 상 우 하 좌

• margin,padding 방향 지정 옵션

  • top, bottom, left, right

Display

• block -> block이 아닌 속성을 block으로 변경
• inline -> inline이 아닌 속성을 inline으로 변경

<style>
    .box {
        width: 150px;
        height: 150px;
        background : orange;
        margin: 100px;
    }
    .box:nth-of-type(2){
        background: blue;
    }
    .box:nth-of-type(3){
        background: green;
    }
    .box:nth-of-type(4){
        background: red
    }
    div.box{
        display:inline;
    }
    span.box{
        display:block;
    }
</style>
<div class="box">A</div>
<div class="box">B</div>
<span class="box">C</span>
<span class="box">D</span>

• inline-block : 줄개행 X, 너비 높이 지정 가능, 외부 여백 전체 가능
  • 여백의 중첩이 일어나지 않으며, 독립적인 여백을 유지함

<style>
    .box {
        width: 150px;
        height: 150px;
        background : orange;
        margin: 100px;
    }
    .box:nth-of-type(2){
        background: blue;
    }
    .box:nth-of-type(3){
        background: green;
    }
    .box:nth-of-type(4){
        background: red
    }
    div.box, span.box{
        display:inline-block;
    }
</style>
<div class="box">A</div>
<div class="box">B</div>
<span class="box">C</span>
<span class="box">D</span>

• none : 감추기
  • visibility : visible(기본값), hidden
  • visibility는 영역을 유지하며 숨김, none은 영역 자체를 숨김

    <!-- display: none -->
    <style>
    .box {
        width: 150px;
        height: 150px;
        background : orange;
        margin: 100px;
    }
    .box2{
        background: blue;
    }
    .box:nth-of-type(3){
        background: green;
    }
    .box:nth-of-type(4){
        background: red;
    }
    div.box, span.box{
        display:inline-block;
    }
    .box2{
        display: none;
    }
    </style>
    <div class="box">A</div>
    <div class="box2">B</div>
    <span class="box">C</span>
    <span class="box">D</span>

<!-- visibility -->
<style>
    .box {
        width: 150px;
        height: 150px;
        background : orange;
        margin: 100px;
    }
    .box2{
        background: blue;
    }
    .box:nth-of-type(3){
        background: green;
    }
    .box:nth-of-type(4){
        background: red
    }
    div.box, span.box{
        display:inline-block;
    }

    .box2{
        visibility: hidden;
    }
</style>
<div class="box">A</div>
<div class="box2">B</div>
<span class="box">C</span>
<span class="box">D</span>

flexbox ( 1차원 정렬 )

• 설정 : 부모 요소 -> display: flex;
• 적용 : 자식 요소
• 정렬 방향
  • flex-direction : row ( 기본값 ) 좌 -> 우로 정렬

               : row-reverse  우 -> 좌로 정렬
               : column 상 -> 하로 정렬
               : column-reverse 하 -> 상으로 정렬

• 정렬 속성 제어 : justify-content
  • flex-start : 왼쪽 정렬
  • flex-end : 오른쪽 정렬
  • center : 가운데
  • space-between : 좌,우측 요소 1개를 양끝에 배치, 나머지 요소를 균등한 여백 부여
  • space-around : 요소 1개당 양쪽에 공백을 부여함.
  • space-evenly : 각 요소 사이의 공백이 모두 동일하게 부여
• align-items : 자식 요소들의 위치, 배치
  • stretch : 부모의 높이에 맞게 늘려서 맞춤
  • flex-start : 위쪽 배치
  • flex-end : 아래쪽 배치
  • center : 가운데 배치

<!-- display: flex 적용-->
<style>
    body{
        margin: 0;
    }
    ul{
        margin:0;
        padding: 0;
        list-style-type: none; 
        height:100px;
    }
    ul li {
        min-width: 100px; 
    }
    li:nth-of-type(1){
        background: red;
    }
    li:nth-of-type(2){
        background: blue;
    }
    li:nth-of-type(3){
        background: green;
    }
    .flex1{
        display : flex;
    }
</style>
<ul class="flex1">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>

<!-- flex-direction을 활용한 우 -> 좌 정렬 -->
<style>
    body{
        margin: 0;
    }
    ul{
        margin:0;
        padding: 0;
        list-style-type: none; 
        height:100px;
    }
    ul li {
        min-width: 100px;

    }
    li:nth-of-type(1){
        background: red;
    }
    li:nth-of-type(2){
        background: blue;
    }
    li:nth-of-type(3){
        background: green;
    }
    .flex1{
        display : flex;
        flex-direction: row-reverse;
    }
</style>
<ul class="flex1">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>

<!-- justify-content를 활용한 리스트 정렬 -->
<style>
    body{
        margin: 0;
    }
    ul{
        margin:0;
        padding: 0;
        list-style-type: none; 
        height:100px;
    }
    ul li {
        min-width: 100px;

    }
    li:nth-of-type(1){
        background: red;
    }
    li:nth-of-type(2){
        background: blue;
    }
    li:nth-of-type(3){
        background: green;
    }
    .flex1{
        display : flex;
    }
    .flex2{
        display : flex;
        justify-content: center;
    }
    .flex3{
        display : flex;
        justify-content: flex-end;
    } 
</style>
<h1>start</h1>
<ul class="flex1">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>
<h1>center</h1>
<ul class="flex2">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>
<h1>end</h1>
<ul class="flex3">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>

<!-- space-between, around, evenly 적용 -->
<style>
    body{
        margin: 0;
    }
    ul{
        margin:0;
        padding: 0;
        list-style-type: none; 
        height:100px;
    }
    ul li {
        min-width: 100px;

    }
    li:nth-of-type(1){
        background: red;
    }
    li:nth-of-type(2){
        background: blue;
    }
    li:nth-of-type(3){
        background: green;
    }
    .flex4{
        display: flex;
        justify-content: space-between;
    }
    .flex5{
        display: flex;
        justify-content: space-around;
    }
    .flex6{
        display: flex;
        justify-content: space-evenly;
    }

</style>
<h1>space-between</h1>
<ul class="flex4">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>
<h1>space-around</h1>
<ul class="flex5">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>
<h1>space-evenly</h1>
<ul class="flex6">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>

<!-- align-items : flex-start, flex-end, center -->
<style>
    body{
        margin: 0;
    }
    ul{
        margin:0;
        padding: 0;
        list-style-type: none; 
        height:100px;
    }
    ul li {
        min-width: 100px;

    }
    li:nth-of-type(1){
        background: red;
    }
    li:nth-of-type(2){
        background: blue;
    }
    li:nth-of-type(3){
        background: green;
    }
    .flex7{
        display: flex;
        justify-content: space-evenly;
        align-items: flex-start;
    }
    .flex8{
        display: flex;
        justify-content: space-evenly;
        align-items: flex-end;
    }
    .flex9{
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }

</style>
<h1>align-items: flex-start</h1>
<ul class="flex7">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>
<h1>align-items: flex-end</h1>
<ul class="flex8">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>
<h1>align-items: center</h1>
<ul class="flex9">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>

Form 태그

• target : 출력할 창의 위치

• action : 제출 처리 URL ( 서버 URL )

• Method : 전송 방식

  • GET ( default )
    • 자원 조회 [ 검색 ]
    • 전송할 데이터는 URL에 포함
    • _?이름=값&이름=값.... => ( Query String )
  • POST
    • 서버에 변경을 가하는 요청 => 회원가입 or 글작성 등
    • 요청 전문의 body에 데이터가 전송됨

• input 태그 : 입력을 위한 태그

  • type : 입력 유형 설정
    • text (default)
    • password : 비밀번호 입력
    • radio : 여러개 중 하나 선택
    • checkbox : 여러개 중 다중 선택
    • submit : 양식 제출, reset - 입력항목 초기화, button
  • name:
    • 전송할 값의 이름
    • radio, checkbox 그룹 명칭
  • value:
    • 입력 값
    • radio, checkbox에서는 개발자가 각 value값을 지정해야 함
    • type이 text, password, number 에서는 사용자가 입력하면 값이 할당

• button 태그

  • type
    • submit : 양식 제출
    • reset : 양식 입력 취소
    • button : 일반 버튼
  • <button> BUTTON NAME </button>

• 태그랑 입력 요소 연결

  • 입력 요소를 태그로 감싼다. 주로 lable 태그 사용
  • for(lable) id(입력요소, 유일무의) 속성 연결

• textarea : 여러줄 텍스트 입력

• select : 여러개 중 한개 또는 여러개 선택

  • selected : 선택 상태로 지정
  • multiple : 여러개 선택
  • size : 한 번에 보일 수 지정

• required : 필수 입력 항목

  • required 속성값이 있는 데이터는 입력값이 없을 경우에 이후 과정으로 넘어가지 않음

• placeholder : 안내 문구

• readonly : 읽기 전용 ( 데이터 전송 O )

• disabled : 기능 무력화 ( 데이터 전송 X )

<!-- GET / radio,checkbox에 value값 추가 -->
<h1>회원 가입</h1>
<form action="sign_up.html">
  이메일   <input type="text" name="email" /> <br />
  비밀번호  <input type="password" name="password" /> <br />
  비밀번호 확인 <input type="password" name="confirm_password" /> <br />
  회원 이름  <input type="'text" name="user_name" /> <br />
  성별 <input type="radio" name="gender" value="FEMALE" /> 여성
      <input type="radio" name="gender" value="MALE" /> 남성 <br />
  취미 <input type="checkbox" name="hobby" value="GAME" /> 게임
      <input type="checkbox" name="hobby" value="READ" /> 독서
      <input type="checkbox" name="hobby" value="MOVIE" /> 영화 <br />
      <input type="submit" />
</form>
<!-- sign_up.html?email=123&password=qwe&confirm_password=qwe&user_name=123&gender=MALE&hobby=GAME&hobby=READ -->

<!-- POST -->
<h1>회원 가입</h1>
<form method="POST" action="sign_up.html">
  이메일  <input type="text" name="email" /> <br />
  비밀번호 <input type="password" name="password" /> <br />
  비밀번호 확인 <input type="password" name="confirm_password" /> <br />
  회원 이름 <input type="'text" name="user_name" /> <br />
  성별 <input type="radio" name="gender" value="FEMALE" /> 여성
      <input type="radio" name="gender" value="MALE" /> 남성 <br />
  취미 <input type="checkbox" name="hobby" value="GAME" /> 게임
      <input type="checkbox" name="hobby" value="READ" /> 독서
      <input type="checkbox" name="hobby" value="MOVIE" /> 영화 <br />
      <input type="submit" />
</form>
<!-- chapter01/sign_up.html -->
<!-- URL 상에서 정보가 숨겨짐 -->

<!-- value값 통해서 기본 입력값 설정, button 태그 사용-->
<form method="POST" action="sign_up.html">
  이메일  <input type="text" name="email" value="user01@test.org" /> <br />
  비밀번호 <input type="password" name="password" /> <br />
  비밀번호 확인 <input type="password" name="confirm_password" /> <br />
  회원 이름    <input type="'text" name="user_name" value="user01" /> <br />
  성별 <input type="radio" name="gender" value="FEMALE" />여성
      <input type="radio" name="gender" value="MALE" />남성 <br />
  취미 <input type="checkbox" name="hobby" value="GAME" /> 게임
      <input type="checkbox" name="hobby" value="READ" /> 독서
      <input type="checkbox" name="hobby" value="MOVIE" /> 영화
  <br />
  <!-- <input type="submit" value="회원가입"/> -->
  <button type="submit">회원가입</button>
</form>

<!-- radio, checkbox에서 checked 속성 사용-->
이메일  <input type="text" name="email" value="user01@test.org" /> <br />
비밀번호 <input type="password" name="password" /> <br />
비밀번호 확인 <input type="password" name="confirm_password" /> <br />
회원 이름 <input type="'text" name="user_name" value="user01" /> <br />
성별 <input type="radio" name="gender" value="FEMALE" checked />여성
    <input type="radio" name="gender" value="MALE" />남성 <br />
취미 <input type="checkbox" name="hobby" value="GAME" checked /> 게임
    <input type="checkbox" name="hobby" value="READ" /> 독서
    <input type="checkbox" name="hobby" value="MOVIE" checked /> 영화
<br />
<button type="submit">회원가입</button>

<!-- label 활용 -->
성별
<label>
  <input type="radio" name="gender" value="FEMALE" checked />여성
  <input type="radio" name="gender" value="MALE" />남성
</label>
<br />
취미
<input type="checkbox" id="hobby_game" name="hobby" value="GAME" checked />
<label for="hobby_game">게임</label>
<input type="checkbox" id="hobby_read" name="hobby" value="READ" />
<label for="hobby_read">독서</label>
<input type="checkbox" id="hobby_movie" name="hobby" value="MOVIE" checked />
<label for="hobby_movie">영화</label>
<br />
<button type="submit">회원가입</button>

<!-- textarea / placeholder 활용-->
자기소개
<textarea
  name="introduction"
  rows="5"
  cols="100"
  placeholder="두 줄 이상 입력하세요"
></textarea
>"

<!-- select 태그 -->
태어난 년도
<select name="birth_year">
  <option value="2020">2020</option>
  <option value="2019">2019</option>
  <option value="2018">2018</option>
  <option value="2017">2017</option>
  <option value="2016">2016</option>
</select>

<body>
  <ul>
    <li>짜장면</li>
    <li>짬뽕</li>
    <li>군만두</li>
  </ul>

  <ol>
    <li>소렌토</li>
    <li>팰리세이드</li>
    <li>모하비</li>
  </ol>

  <dl>
    <dt>상품명</dt>
    <dd>아이폰 Duo</dd>
  </dl>
  <dl>
    <dt>판매가</dt>
    <dd>3,290,000원</dd>
  </dl>

  <table>
    <thead>
      <tr>
        <th>번호</th>
        <th>이름</th>
        <th>국어</th>
        <th>수학</th>
        <th>영어</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>K</td>
        <td>90</td>
        <td>90</td>
        <td>90</td>
      </tr>
      <tr>
        <td>2</td>
        <td>L</td>
        <td>80</td>
        <td>80</td>
        <td>80</td>
      </tr>
    </tbody>
  </table>

  <br />
  <img src="photo.png" alt="가수 사진" style="width : 300px;" />
  <br />
  <br />
  <video
    src="https://www.w3schools.com/html/mov_bbb.mp4"
    controls
    muted
    loop
    poster="https://picsum.photos/400/225"
    width="400"
  >
    최신 브라우저를 이용해 주세요.
  </video>
</body>

1-3

시멘틱 태그

• 의미를 가지고 있는 태그
  • form, table, video, nav
• 비시멘틱 태그
  • div, span

필요한 이유

• 검색 엔진 최적화
• 웹 접근성
• 코드 가독성 향상

레이아웃 구성 태그

• header : 상단 공통 영역
• footer : 하단 공통 영역
• main : 본문, 하나만 정의
• section : 내용 구분
• article : 섹션별 내용
• nav : 주 메뉴
• aside : 왼쪽, 오른쪽 영역

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <header>
      <a href=".."><img src="logo.png" alt="Logo" /></a>
      <form method="get">검색 부분 정의</form>

      <nav>
        <a href="#">메뉴1</a>
        <a href="#">메뉴2</a>
        <a href="#">메뉴3</a>
        <a href="#">메뉴4</a>
      </nav>
    </header>

    <main>
      <section>
        <article>....</article>
        <article>....</article>
      </section>

      <section>
        <article>....</article>
        <article>....</article>
      </section>
    </main>

    <aside>숨김 왼쪽 더보기 메뉴</aside>

    <footer>사이트 공통 하단</footer>
  </body>
</html>

2-1

CSS ( Cascading Style Sheet )

• HTML 문서에 정의된 요소들의 시각적 스타일을 지정하는 스타일시트 언어
• 주석 : /* */

스타일 적용 기본 구조

선택자 {
  속성: 값,
  속성: 값,
  ...
}

적용방법

• 인라인 스타일
  • 태그의 style 속성에 직접 적용
• 내부 스타일 시트
  • style 태그 안에 스타일을 정의
• 외부 스타일 시트 ( 주 사용 )
  • css 파일을 따로 생성 후 연동 <link> ...

<!-- 인라인 스타일 -->
<ul>
  <li>사과</li>
  <li>배</li>
  <li style="color: orange; background-color:black; ">감</li>
  <li>귤</li>
  </ul>

<!-- 내부 스타일 -->
    <style>
        li {
            color: blue;
            background-color : gray;
        }
    </style>
    <ul>
        <li>사과</li>
        <li>배</li>
        <li style="color: orange; background-color:black; ">감</li>
        <li>귤</li>
    </ul>

/* style.css */
body {
    background-color : green ;
}

<!-- css 파일 불러오기-->
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<style>
    li {
        color: blue;
        background-color : gray;
    }
</style>
<ul>
    <li>사과</li>
    <li>배</li>
    <li style="color: orange; background-color:black; ">감</li>
    <li>귤</li>
</ul> 

CSS 선택자

• 전체 선택자
  • *
• 태그 선택자
  • 태그명 사용
• 클래스 선택자
  • 여러개 요소 선택
  • .클래스명 => 방식으로 접근
  • 복수 선언, 복수 지정 가능
• 아이디 선택자
  • # 아이디명
  • 아이디명은 하나만 지정 가능, 중복 안됨

스타일 적용 우선 순위

• 선택자의 범위가 넓을수록 우선순위가 낮으며, 좁을수록 우선순위가 높다.

• 태그 < 클래스 < 아이디 < style 속성

• 태그 = 공통 스타일 , 클래스 = 세부 스타일 설정으로 가장 많이 사용

• 우선순위 강제 적용 : !important

    <style>
        li {
            background-color: gray ;
        }
        .Kia {
            background: orange ;
        }
        .discontinued {
            font-style: italic;
        }
        #sorento {
            background: red;
        }
        .kia2{
            background: skyblue;
        }
    </style>
    <ul>
        <li class="Kia" id="sorento">소렌토</li>
        <li>팰리세이드</li>
        <li class="Kia kia2 discontinued">모하비</li>
        <li>트레일블레이져</li>
        <li>카이엔</li>
    </ul>

복합 관계 선택자

• 하위 선택자 ( 조상 - 자손 )
• 자식 선택자 ( 부모 > 자식 )

  <style>
        /* 조상 - 자손 선택자 */
        ol span{
            background : orange;
        }
        /* 부모 > 자녀 선택자 */
        li div > span{
            background: skyblue;
        }
    </style>
    <ul>
        <li>menu1</li>
        <li>menu2</li>
        <li><span>menu3</span></li>
        <li>menu4
            <ol>
                <li>
                    <div>
                        <span>sub menu1</span>
                    </div>
                </li>
                <li><span>sub menu2</span></li>
                <li>sub menu3</li>
            </ol>
        </li>
        <li>menu5</li>
    </ul>

  

• 일반 형제 선택자 ( 형 ~ 동생 )
  • 형을 기준으로 기준 아래에 정의된 요소
• 인접 형제 선택자 ( 형 + 동생 )
  • 형을 기준으로 바로 아래 요소 1개

    <style>
        .menu5 ~ li {
            background: magenta;
        }
        .menu5 + li {
            background: green;
        }
    </style>
    <ul>
        <li>메뉴1</li>
        <li>메뉴2</li>
        <li>메뉴3</li>
        <li>메뉴4</li>
        <li class="menu5">메뉴5</li>
        <li>메뉴6</li>
        <li>메뉴7</li>
        <li>메뉴8</li>
        <li>메뉴9</li>
        <li>메뉴10</li>
    </ul>

Web

• 뼈대 : Hyper Text Markup Language ( 페이지 이동, 매크로 구성 ) / <tag> 사용
• 스타일링 : CSS (Cascading Style Sheet) 상위 요소의 스타일이 하위요소에 전달
• 동적요소 : JavaScript

HTML

1. 웹 표준 (Web Standard)

• 어떤 브라우저를 사용하더라도 동일한 화면, 기능을 제공하도록 만든 국제 공식 규칙

2. 기본 구성

• <!DOCTYPE html> : 현재 HTML5 최신 버전을 사용하고 있다.
• <html> : HTML 문서 시작, 종료 알림
• <head> : 웹페이지의 제목, 인코딩 설정 등 브라우저가 알아야 할 문서의 정보(메타데이터)를 담는 구역
• <body> : 실제로 눈으로 보이는 모든 콘텐츠(텍스트, 이미지, 영상)가 들어가는 구역

3. 태그

• 제목 태그
  • <h1> ~ <h6>
• 본문 서식 태그
  • <p> : 문단 구분
  • <b>, <strong> : 볼드체
  • <i> : 이탤릭체
  • <u> : 밑줄
  • <del>, <strike> : 취소선
  • <br> : 줄 개행

4. 주석

• <!-- --> : 설명, 출력 배제

5. 문단 태그 (Block 속성)

• 줄 개행 O
• p, div, h1 ~ h6, form ...
• 공간 가짐 ( 너비, 높이 지정 가능 )

6. 글 태그 (Inline 속성)

• 줄 개행 X
• i, b, strong, u, a, span ...
• 공간을 가지지 않음 ( 너비, 높이 지정 못함 )

<style>
  div {
    width: 150px;
    height: 150px;
    background-color: blue;
  }

  span {
    width: 150px;
    height: 150px;
    background-color: orange;
  }
</style>
<p>A</p>
<p>B</p>
<div>C</div>

<i>D</i>
<b>E</b>
<span>F</span>

하이퍼링크, 멀티미디어 & 폼 태그

하이퍼링크

• 페이지 이동
• <a> : 하이퍼링크 태그
• 속성 ( Attribute ) : 태그의 추가 정보 -> 태그의 기능을 수행하기 위한 정보
  • href : 이동할 경로
    • 절대 경로
    • 상대 경로
  • target : 출력할 창의 위치
    • _self ( default ) => 현재 창
    • _blank => 새로운 창
    • _parent => 부모 창
      • <iframe>: src -> 창에 출력할 경로(URL)
    • _top : 가장 상위에 있는 창
    • 창의 이름

Form 태그

• action : 제출 처리 URL
• input 태그 : 입력을 위한 태그
  • type : 입력 유형 설정
    • text (default)
    • password : 비밀번호 입력
    • radio : 여러개 중 하나 선택
    • checkbox : 여러개 중 다중 선택
    • submit : 양식 제출, reset - 입력항목 초기화, button
  • name:
    • radio, checkbox 그룹 명칭

<h1>회원 가입</h1>
<form>
  이메일 <input type="text" /> <br />
  비밀번호 <input type="password" /> <br />
  비밀번호 확인 <input type="password" /> <br />
  회원 이름 <input type="'text" /> <br />
  성별 <input type="radio" name="gender" />여성
      <input type="radio" name="gender" />남성 <br />
  취미 <input type="checkbox" name="hobby" /> 게임
      <input type="checkbox" name="hobby" /> 독서
      <input type="checkbox" name="hobby" /> 영화
      <input type="checkbox" name="hobby" /> 낚시
  <br />

  <input type="submit" />
</form>

LLM 한계 & 위험 요소

주요 한계

• 환각 (Hallucination)
• 지식 컷오프 (Knowledge Cutoff)
• 비결정성 (Non-determinism)
• 편향 (Bias)

파이썬 실습: 환각 방지 프롬프트 및 temperature 제어

• top-k : 가장 높은 확률의 k개 만큼의 토큰을 선택, 선택된 토큰을 응답으로 사용
  • ex) top-k = 100, 가장 높은 확률 토큰 100개 중 선택
• top-p : p 확률 이상의 토큰에서 선택
• top-p + top-k 사용하는게 좋음
• temperature : 확률 분포를 조정 ( 0에 가까울수록 정확한 답변, 1에 가까울수록 창의적인 답변 )
  • 0에 가깝게 설정 : 도구선택, 형식의 고정

from langchain_core.prompts import ChatPromptTemplate
# from langchain_ollama import ChatOllama
from langchain.chat_models import init_chat_model # 사용시에 다른 모델을 사용하더라도 코드가 정상작동 가능함
from langchain_core.output_parsers import StrOutputParser # 출력값을 문자열 형태로 변환하는듯

prompt_template = ChatPromptTemplate.from_messages([
  ("system", "당신은 객관적 사실만을 전달하는 정보 검증관입니다.제공된 지식 범위 밖의 내용이거나 사실 확인이 불가능하다면 '해당 정보는 확인할 수 없습니다'라고만 명확히 답변하세요. 절대 거짓 정보를 지어내지 마세요."),
  ("user", "{user_question}")
])


model = init_chat_model(
  model_provider="ollama",
  model="mistral",
  temperature=0.9
)

parser = StrOutputParser()

chain = prompt_template | model | parser

question = "2028년 한국에서 개최된 달 탐사 기념 축제의 주요 행사를 알려줘"

response = chain.invoke({"user_question", question})

response
# " 해당 정보는 확인할 수 없습니다. 2028년 달 탐사 기념 축제의 정보는 현재 알려져 있지 않습니다. 그러나 2028년 예정된 대중 인터넷 축제인 'World Internet Conference' 또는 2028년 예정된 기타 축제의 주요 행사는 아닙니다. 추가적인 정보가 있다면, 최신의 정보를 확인하세요."

System·User·Assistant 메시지 구조

역할별 메세지 템플릿 조립

• System : 모델의 역할(페르소나), 상황, 과업, 규칙 정의, 최우선순위 / SystemMessage

• User : 실제 질의 응답에 대한 사용자 질문, 처리할 데이터의 전달, 가변적, 프롬프트 템플릿 / HumanMessage

• Assistant : AI가 출력한 응답 / AIMessage

• User - Assistant -> 대화의 맥락 정보를 쌍으로 전달, 1쌍 = 턴, 여러쌍 = 멀티턴

• BaseMessage의 하위 클래스(HumanMessage, SystemMessage, AIMessage, ToolMessage)

역할별 메세지 템플릿

from langchain_core.prompts import ChatPromptTemplate

prompt_template = ChatPromptTemplate.from_messages([
  ("system", "당신은 재치있게 컴퓨터의 개념을 설명하는 유치원 교사입니다."),
  ("user", "다음 개념을 설명하세요 : {text}")
])

chain2 = prompt_template | model | parser

response = chain2.invoke({"text" :  "변수"})

response

대화이력 구조 설계

• Assistant 메세지 기반 문맥 유지

  messages: list[BaseMessage] = [
  HumanMessage("내 이름은 김철수야"),
  AIMessage("반갑습니다. 철수님 무엇을 도와드릴까요?"),
  HumanMessage("오늘 점심 메뉴 추천 해줘"),
  AIMessage("오늘 점심은 돈까스가 좋을것 같아요."),
  HumanMessage("오늘 점심 추천이 뭐였지?")
  # HumanMessage("내 이름이 뭐라고 했지?")
  ]
  

response = chain.invoke(messages)

response

' 오늘 점심 추천은 돈까스였습니다.'

```

• 타입을 명시할 뿐이지, 강제하지 않으므로 다른 자료형으로 선언하여도 동작함

• 변수 : 타입

  • num : int = 100
  • title : str = 'ABC'

• 함수

  • def 함수명(...) -> 타입 [반환 타입 / void]:

num1 : int = 100
print(num1) # 100

def list_sum(nums : list[int]) -> int:
    return sum(nums)

list_sum([10, 20, 30]) # 60

데이터 클래스 - @dataclass

from dataclasses import dataclass

# @dataclass (kw_only=True) -> 키워드 매개변수만 사용
@dataclass
class Product:
    name : str
    price : int = 0
    description : str = ""

# 위치 인수 사용
product = Product('iphone', 10000, 'duo')
print(product) # Product(name='iphone', price=10000, description='duo')

# 키워드 인수 사용
product = Product(
    name = 'iphone',
    description = 'Duo',
    price = 3290000
)
print(product) # Product(name='iphone', price=3290000, description='Duo')

PostgreSQL 함수(Function)와 프로시저(Procedure)를 활용한 트랜잭션 제어

저장 프로그램 ( Stored Program )

함수 (Function)

• 매개변수와 반환값
• 단일 트랜잭션, TCL 사용 불가
• SELECT 구문 내에서 사용 가능
• ex) AVG(..), SUM(..)

프로시저 ( Procedure )

• 독립 프로그램
• 트랜잭션 제어 가능(COMMIT, ROLLBACK 정의 가능)
• CALL 프로시저명(...);

CREATE OR REPLACE FUNCTION create_order_transaction(
    p_order_name TEXT,
    p_order_email TEXT,
    p_order_phone TEXT,
    p_receiver_name TEXT,
    p_receiver_phone TEXT,
    p_zipcode TEXT,
    p_address TEXT,
    p_address_sub TEXT,
    p_delivery_memo TEXT,
    p_user_id UUID,
    p_items JSONB -- [{"product_id": "uuid", "quantity": 1}, ...]
)
RETURNS JSONB
LANGUAGE plpgsql
SECURITY DEFINER

AS $$
DECLARE
  v_order_id UUID;
  v_order_no TEXT; -- 20260911113021300
  v_total_price INT := 0;
  v_item RECORD;
  v_product RECORD;
BEGIN
  -- 상품이 있는지 체크
  IF p_items IS NULL OR jsonb_array_length(p_items) = 0 THEN
    RAISE EXCEPTION '주문할 상품이 없습니다.';
  END IF;

  -- 주문번호 생성
  v_order_no := TO_CHAR(CURRENT_TIMESTAMP, 'YYYYMMDDHH24MISS');

  -- orders 테이블에 기본 정보를 주문서 추가, 상품 총합 0
  INSERT INTO orders (
    order_no, order_name, order_email, order_phone,
    receiver_name, receiver_phone, zipcode, address, address_sub, delivery_memo,
    total_price, user_id
  ) VALUES (
    v_order_no, p_order_name, p_order_email, p_order_phone,
    p_receiver_name, p_receiver_phone, p_zipcode, p_address,
    p_address_sub, p_delivery_memo, 0, p_user_id
  )
  RETURNING id INTO v_order_id;

  -- products 테이블에서 상품을 조회한 후 order_items 테이블에 상품 정보를 추가
  FOR v_item IN
      SELECT (elem->>'product_id')::UUID product_id,
              (elem->>'quantity')::INT quantity
      FROM jsonb_array_elements(p_items) elem
  LOOP
    -- 구매 수량 검증
    IF v_item.quantity <= 0 THEN
      RAISE EXCEPTION '주문 수량은 1개 이상이어야 합니다.';
    END IF;

    -- 실제 상품 조회
    SELECT id, name, price INTO v_product
    FROM products WHERE id = v_item.product_id AND deleted_at IS NULL;

    -- 상품 조회의 결과가 없는 경우
    IF NOT FOUND THEN
      RAISE EXCEPTION '등록되지 않거나 삭제된 상품 입니다. (ID: %)', v_item.product_id;
    END IF;

    -- 주문 상품 등록
    INSERT INTO order_items (
      order_id, product_id, item_name, price, quantity
    ) VALUES (
      v_order_id, v_product.id, v_product.name, v_product.price, v_item.quantity
    );

    -- total_price 누적
    v_total_price := v_total_price + (v_product.price * v_item.quantity);
  END LOOP;

  -- orders 테이블에 상품 총금액(total_price)을 업데이트
  UPDATE orders
  SET total_price = v_total_price
  WHERE id = v_order_id;

  -- 결과 반환
  RETURN jsonb_build_object(
    'success', TRUE,
    'order_id', v_order_id,
    'order_no', v_order_no
  );

EXCEPTION
  -- 트랜잭션 실패
  WHEN OTHERS THEN
    RAISE EXCEPTION '주문처리 실패: %', SQLERRM;
END;
$$;

• 선언적 방식

supabase.table(...)
        .select(...)
        .eq(...)
        .execute(...)

class SupabaseEx:
    def __init__(self):
        self.settings = []

    def table(self, table):
        self.settings.append(table)
        return self

    def select(self, fields):
        self.settings.append(fields)
        return self # 생성된 동일 객체

    def eq(self, name, value):
        self.settings.append(f'{name}={value}')
        return self

    def execute(self):
        print(self.settings)
        print('실행..')
        return '처리된 결과'

supabase = SupabaseEx()

response = (
    supabase.table("users")
        .select('*')
        .eq('email', 'user01@test.org')
        .execute()
)

# CRUD Class
class AiLog:

    def __init__(self):
        user = supabase.auth.get_user()
        if not user: # 미로그인 상태
            raise PermissionError('로그인 필요함')

        self.user = user.user

    def create_documents(self, title, content):
        response = (
            supabase.table("documents")
                    .insert({
                        "title" : title,
                        "content" : content,
                        "user_id" : self.user.id
                    }).execute()
        )

        return response.data

    def get_my_documents(self):
        response = (
            supabase.table("documents")
                    .select("*")
                    .eq("user_id", self.user.id)
                    .execute()
        )

        return response.data


ai_log = AiLog()

ai_log.create_documents("세 번째 문서", "본문 내용")
ai_log.get_my_documents()

RLS ( Row Level Security )

• CRUD
  • 회원의 권한 체크

-- 본인 데이터에 대해 모든 작업(SELECT, INSERT, UPDATE, DELETE) 허용
create policy "본인 문서 전체 관리"
on documents
for all
to authenticated
using (auth.uid() = user_id) -- 이미 존재하는 데이터에 대한 통제 (조회, 수정, 삭제)
with check (auth.uid() = user_id); -- 추가, 수정, 삭제시에 권한 확인

ACID : 트랜잭션 원칙

• A
  • 원자성 ( Atomicity ) : 모두 성공하거나 실패
• C
  • 일관성 ( Consistency ) : 규제(제약조건)을 깨뜨리지 않음
• I
  • 격리성 ( Isolation ) : 동시 트랜잭션이 서로를 간섭하지 않음
  • DB LOCK을 통해서 격리성 유지?
• D
  • 지속성 ( Durability ) : Commit 된 것은 장애가 발생해도 남음

트랜잭션

• BEGIN : 트랜잭션 시작
• COMMIT : 트랜잭션 종료 / DB 영구 반영
• ROLLBACK : 트랜잭션 복구 / COMMIT 전에만 가능

SUPABASE SDK

SUPABASE 연결하기

import os
from dotenv import load_dotenv
from supabase import create_client

# .env 파일의 환경변수 로드
load_dotenv()

url = os.getenv("SUPABASE_URL")
key = os.getenv("SUPABASE_PUBLISHABLE_KEY")

# Client 초기화
# supabase 클라이언트 객체 생성
supabase = create_client(url, key)

print(supabase)
# <supabase._sync.client.Client object at 0x10d2cc440>

SUPABASE SDK INSERT

# 사용자 추가
response = supabase.table('users').insert({"email" : "user03@test.org"}).execute()

# documents INSERT
response = supabase.table('documents').insert({
    'title' : '첫 번째 문서',
    'content' : '본문 내용',
    'user_id' : '1320f352-13eb-44fc-8662-3ae945e616cd'
}).execute()

SUPABASE SDK SELECT

# 회원 목록 조회
response = supabase.table('users').select('*').execute()
response.data

# ilike : 대소문자 구분없이 like문 실행
response = (supabase.table('users')
            .select('*')
            .ilike('email', 'user02%')
            .execute()
)


# single Keyword
response = (supabase.table('users')
            .select('*')
            .ilike('email', 'user04%')
            .single() # 레코드 한 개, 딕셔너리 형태로 반환
            # single 키워드 사용시에 레코드가 없거나, 1개 이상 존재하는 경우에 APIERROR 발생
            .execute()
)
response.data # API ERROR


# maybe_single Keyword
response = (supabase.table('users')
            .select('*')
            .ilike('email', 'user04%')
            .maybe_single() # 레코드가 0 ~ 1 일 때 사용, 레코드가 없다고 예외 발생 안함
            .execute()
)
response.data # None



# LIMIT Keyword
response = (supabase.table('users')
            .select('*')
            .ilike('email', 'user%')
            .limit(1) # like문을 사용할 떄 여러개의 레코드를 출력하면,
            #오류가 발생하므로 LIMIT 키워드를 이용해서 강제로 1개의 레코드만 출력
            .single()
            .execute()
)
response.data
# {'id': 'e8057300-87a3-43e2-aee6-e4b0d817d0b2',
#  'email': 'user01@test.org',
#  'created_at': '2026-09-08T03:00:44.799562'}


# OFFSET Keyword
response = (supabase.table('users')
            .select('*')
            .ilike('email', 'user%')
            .limit(1)
            .offset(1) # 1 인덱스에서 1개 조회
            .single()
            .execute()
)
response.data
# {'id': 'bd0f1b0d-5921-4751-9235-3e21dfb722ef',
#  'email': 'user02@test.org',
#  'created_at': '2026-09-09T00:42:22.44246'}


# ORDER BY Keyword
response =(
    supabase.table('users')
    .select('*')
    .order('email', desc=True) # email 컬럼 기준, 내림차순 정렬
    .execute()
)
response.data

# JOIN Keyword
## LEFT JOIN
response = (
    supabase.table('documents')
    .select('id, title, content, users(id, email)')
    .execute()
)
response.data

## INNER JOIN(!inner)
response = (
    supabase.table('documents')
    .select('id, title, content, users!inner(id, email)')
    .execute()
)
response.data

# join table 조건 걸기
response = (
    supabase.table('documents')
    .select('id, title, content, users!inner(id, email)')
    .ilike('users.email', 'user%')
    .execute()
)
response.data

SDK 기반 데이터 수정·삭제 구현

# UPDATE Keyword
response = (
    supabase.table('documents')
    .update({
        'title' : '첫 번째 문서(수정)'
    })
    .eq('id', 'd865df61-ecaa-4117-90e0-84d5a3726118')
    .execute()
)

# DELETE Keyword
response = (
    supabase.table('users')
    .delete()
    .eq('id', 'e8057300-87a3-43e2-aee6-e4b0d817d0b2')
    .execute()
)

SUPABASE Authentication

회원가입 & 로그인

key = os.getenv('SUPABASE_ANON_KEY')
supabase = create_client(url, key)

"""
supabase.auth : 인증(로그인) / 인가(접근 권한) 관련 메서드를 가지고 있는 객체

테이블 명 : auth.users
"""

# 회원가입
response = supabase.auth.sign_up({
    'email' : 'user01@test.org',
    'password' : 'password1234',
    'phone' : '010-1000-1000'
})

# 로그인
response = supabase.auth.sign_in_with_password({
    'email' : 'user01@test.org',
    'password' : 'password1234'
})
response.user

# 현재 로그인된 사용자 확인
user = supabase.auth.get_user() # 현재 로그인한 사용자 정보, 있으면 로그인, None이면 미 인증 상태
if user:
    print(f'로그인 상태 : {user}')
else :
    print(f' 미 로그인 상태 ')

# 로그아웃
supabase.auth.sign_out()

LLM

Langchain

• 사용자의 자연어를 받아 프롬프트로 조립하고 모델을 호출하여 결과를 가공하는 소프트웨어
• 개발자가 복잡한 문자열 처리와 수동으로 API를 호출하지 않도록 표준화된 파이프라인 제공

Langchain을 사용하는 이유

• 순수 API 직접 호출의 한계

  • 매번 긴 문자열 포맷팅과 변수 주입 코드를 수동으로 작성해야 함
  • 모델 응답 객체에서 순수 텍스트만 꺼내기 위해서 딕셔너리 접근을 반복적으로 수행해야 함
  • 추후 문서 검색(RAG)나 도구 연동을 추가로 수행할 때 코드가 복잡해짐

• 장점

  • 레고 블록 조립 방식 (LCEL)
    • 프롬프트 | 모델 | 파서 형태로 파이프 기호를 통해 데이터 흐름을 한눈에 파악 가능
  • 입출력 표준화
    • 변수를 프롬프트에 안전하게 주입하고, 모델 응답에서 텍스트만 추출 가능
  • 일관된 확장성
    • 체인 구조 그대로 RAG, 구조화 출력, AI 에이전트로 자연스럽게 확장 가능

from langchain_ollama import ChatOllama
from langchain_core.prompts import ChatPromptTemplate

# system : 역할, 상황, 제한 조건, 예시 -> 시스템 메세지, SystemMessage(..)
# user : 사용자의 질의 / HumanMessage(..)
# asistant : AI 답변 / AIMessage(..)

# 시스템에게 역할, 상황, 제한 조건, 예시 등 제시
prompt_template = ChatPromptTemplate.from_messages([
    ('system', "당신은 컴퓨터 기초 개념을 일상적인 사물에 빗대어 설명하는 교육 전문가입니다. 2문장 이내로 친절하게 설명하세요."),
    ('user', '{user_question}')
])

# 샘플 프롬프트 선언
sample_prompt = prompt_template.invoke({
    "user_question" : "프로그래밍에서 '변수'가 무엇인가요?"
})

# 모델 호출
model = ChatOllama(
    model='mistral',
)

# 모델에 샘플 프롬프트 삽입
response = model.invoke(sample_prompt)

# 순수 텍스트만 추출하기
from langchain_core.output_parsers import StrOutputParser


parser = StrOutputParser()
text = parser.invoke(response)

# 파이프 연산자를 사용해서 3개의 컴포넌트를 하나의 파이프라인으로 연결
chain = prompt_template | model | parser
res = chain.invoke({
    "user_question" : "'클래스'가 뭔데'"
})

res

SELECT

• 테이블에서 원하는 컬럼을 선택하여 데이터 조회시에 사용

SELECT *

• 실무에서는 SELECT * 을 잘 사용하지 않는다.

• 불필요한 데이터 조회로 인한 성능 저하

• 테이블 구조 변경시에 예상치 못한 열 포함 가능

• 코드 가독성이 떨어져 유지보수 어려움

• SELECT [ *, 컬럼 이름1, 컬럼 이름2....] FROM 테이블명[, 테이블명2.... ] [ WHERE 조건식 ]

• SELECT [ALL | DISTINCT ] 컬럼명 FROM 테이벌명

-- 컬럼 지정 조회
SELECT first_name, last_name, email from customers;

-- 전체 컬럼 조회
SELECT * FROM products

-- 중복 제거
SELECT DISTINCT store_id from orders;

-- store_id + staff_id 조합 중복 제거
SELECT DISTINCT store_id, staff_id FROM orders;

DISTINCT

• 컬럼에 중복 값이 존재 하는 경우, 고유한 값만 남겨 조회 가능

WHERE 조건식 : 조회의 범위 지정

• 비교 연산자 : >, <, >=, <=, =
• 논리 연산자 : AND, OR, NOT
• IN, NOT IN : 포함 여부
• BETWEEN A AND B : A와 B 사이
• IS NULL, IS NOT NULL : NULL인지 아닌지 -> NULL은 데이터가 없는 상태로 비교 및 산술 연산이 불가능
• CASE WHEN : 조건에 따른 다른 값을 부여하는 경우, 필드 명시 위치에 적용
  • SELECT CASE WHEN 조건식1 THEN 결과1 WHEN 조건식2 THEN 결과2 ELSE 결과 END AS 새로운 컬럼 명
• LIKE '키워드': 키워드와 적황히 매칭 LIKE '키워드%' : 키워드 이후 아무글자나 있어도 됨 LIKE '%키워드' : 키워드 이전 아무글자나 있어도 됨 LIKE '%키워드%' : 키워드 전후로 아무글자나 있어도 됨 LIKE '*키워드' : 키워드 앞으로 반드시 *의 길이만큼 데이터가 있어야함

-- 연습문제 4
SELECT DISTINCT store_id FROM orders;

-- 연습문제 5
SELECT DISTINCT state FROM customers;

-- 연습문제 6
SELECT DISTINCT brand_id FROM products;

-- 연습문제 7
SELECT * FROM orders WHERE shipped_date IS NULL;

-- 연습문제 8
SELECT * FROM staffs WHERE store_id = 1;

-- 연습문제 9
SELECT * FROM products WHERE 500 < list_price AND 1000 > list_price;
SELECT * FROM products WHERE list_price BETWEEN 500 AND 1000;

SELECT order_id, product_id, list_price,
    CASE WHEN list_price < 100 THEN '저가'
         WHEN list_price < 500 THEN '중가'
         ELSE '고가'
    END AS price_grade
   FROM order_items;

-- 상품명에 Trek이 포함되는 데이터
SELECT * FROM products WHERE product_name LIKE '%Trek%';
-- 상품명 2018로 끝나는 데이터
SELECT * FROM products WHERE product_name LIKE '%2018';
-- 지정한 날짜 사이에 있는 데이터
SELECT * FROM orders WHERE order_date BETWEEN '2016-01-01' AND '2016-01-31';

SELECT * FROM customers WHERE state = 'CA' or state ='NY';
SELECT * FROM customers WHERE state IN ('NY', 'CA');
SELECT * FROM customers WHERE state NOT IN ('NY', 'CA');

-- 연습문제 11
SELECT 
  CASE WHEN order_status = 1 THEN '처리중'
    WHEN order_status = 2 THEN '거부'
    WHEN order_status = 3 THEN '배송완료'
    ELSE '취소'
  END AS '주문 상태 코드'
  FROM orders;

-- 연습 문제 15
SELECT * FROM stocks WHERE quantity <= 5;

ORDER BY

• 지정한 컬럼 기준 정렬
• 컬럼을 여러개 지정한 경우 순차적으로 정렬하되, 동일한 값의 경우 다음 컬럼 기준으로 정렬
• ASC, DESC : 오름차, 내림차

SELECT * FROM products ORDER BY list_price DESC;

SELECT * FROM orders ORDER BY store_id ASC, order_date DESC;

데이터 집계 및 분석

집계 함수

• COUNT(컬럼명1, [컬럼명2, ...]) : 레코드 갯수 조회
  • count(*): 전체 레코드 조회
  • NULL 배제하고 계산
• SUM(컬럼명) : 합계
• AVG(컬럼명) : 평균
• MIN(컬럼명) : 최솟값
• MAX(컬럼명) : 최댓값

SELECT COUNT(*) from orders;

select avg(list_price), max(list_price), min(list_price) from products;

SELECT sum(quantity) 합계 from order_items;

GROUP BY

• 특정 컬럼의 같은 값을 기준으로 그룹화
• 대부분 집계 함수와 함께 사용
• 레코드 갯수는 그룹화된 결과 갯수 만큼 조회
• 조회 컬럼은 반드시 GROUP BY에 명시된 컬럼만 사용가능
• 집계 함수 포함한 조건은 절대 WHERE 절에서 사용 불가능
• GROUP BY __ HAVING 집계함수 조건

-- brand_id 별 통계
select avg(list_price), max(list_price), min(list_price) from products GROUP BY brand_id ORDER BY brand_id;

-- 실행 불가
SELECT brand_id, COUNT(*) FROM products WHERE count(*) > 100 GROUP BY brand_id;
-- 실행 가능
SELECT brand_id, COUNT(*) FROM products GROUP BY brand_id HAVING count(*) > 100;

-- 연습문제 7
select avg(list_price) from products GROUP BY category_id HAVING avg(list_price) > 500;

테이블 결합

집합

• 합집합 : UNION
• 교집합 : INTERSECT
• 차집합 : EXCEPT

-- 2016-01-17 이전
select order_id, order_date from orders
WHERE order_date <= '2016-01-17' ORDER BY order_date;

-- 2016-01-15 이후 데이터
select order_id, order_date from orders
WHERE order_date >= '2016-01-15' ORDER BY order_date;

-- 공통 레코드 조회 ( INTERSECT )
select order_id, order_date from orders
WHERE order_date <= '2016-01-17'
INTERSECT
select order_id, order_date from orders
WHERE order_date >= '2016-01-15' ORDER BY order_date;

-- 레코드 합치기 ( UNION )
select order_id, order_date from orders
WHERE order_date <= '2016-01-17'
UNION
select order_id, order_date from orders
WHERE order_date >= '2016-01-15' ORDER BY order_date;

-- 레코드 합치기 ( UNION ALL 중복 허용 )
select order_id, order_date from orders
WHERE order_date <= '2016-01-17'
UNION ALL
select order_id, order_date from orders
WHERE order_date >= '2016-01-15' ORDER BY order_date;


-- 차집합
select order_id, order_date from orders
WHERE order_date <= '2016-01-17'
EXCEPT
select order_id, order_date from orders
WHERE order_date >= '2016-01-15' ORDER BY order_date;

JOIN

• 두 테이블에서 공통적인 값을 기준으로 테이블을 하나처럼 조회되도록 결합하는 것

INNER JOIN : 동등, 내부 조인

• INNER 키워드 생략 가능

LEFT OUTER JOIN : 외부 조인

• 왼쪽 테이블을 메인으로 모두 출력하고 오른쪽 테이블은 보조정보

RIGHT OUTER JOIN : 외부조인

• 오른쪽 테이블을 메인으로 모두 출력하고 왼쪽 테이블은 보조정보

FULL OUTER JOIN : 전체 조인

• 두 테이블 모두 주 테이블로 모든 데이터 출력

select * from orders, stores;

-- 주문이 발생한 매장 정보
select * from orders, stores where orders.store_id = stores.store_id;

--INNER JOIN ( 동등, 내부 조인 )
select * from orders o INNER JOIN stores s ON o.store_id = s.store_id;

select DISTINCT store_id FROM orders;

insert into stores (store_id, store_name) values (4, 'sparta market');

-- stores 기준에서 orders 테이블의 정보를 결합
SELECT DISTINCT s.store_id FROM stores s JOIN orders o ON s.store_id = o.store_id;

-- LEFT OUTER JOIN -> stores가 주테이블로 모든 데이터 출력, orders는 보조 테이블로 있는 것만 출력
SELECT * FROM stores s LEFT JOIN orders o ON s.store_id = o.store_id ORDER BY s.store_id DESC;

INSERT INTO orders (order_id, customer_id, order_date) VALUES (1700, 1, current_timestamp );
-- FULL OUTER JOIN -> 양쪽 테이블 모두 주 테이블로 전부 출력
SELECT * FROM stores s FULL OUTER JOIN orders o ON s.store_id = o.store_id ORDER BY s.store_id DESC, o.order_id DESC;

다수 테이블 조인

-- 다수 테이블 조인하기
SELECT 
  o.order_id, o.order_date,
  s.store_name,
  f.first_name staff_first_name,
  f.last_name staff_last_name,
  c.first_name custo_first_name,
  c.last_name  custo_last_name
FROM orders o 
  LEFT JOIN customers c ON o.customer_id = c.customer_id
  LEFT JOIN stores s ON o.store_id = s.store_id
  LEFT JOIN staffs f ON o.staff_id = f.staff_id;

-- 연습문제 1
SELECT store_id FROM staffs
UNION
SELECT store_id FROM orders;

-- 연습문제 2
SELECT order_id, first_name, last_name, order_date
FROM orders o
JOIN customers c ON o.customer_id = c.customer_id;

-- 연습문제 3
SELECT p.product_id, product_name, quantity
FROM products p
FULL OUTER JOIN stocks s ON p.product_id = s.product_id;

-- 연습문제 6
select o.order_id, s.first_name, s.last_name, s.store_id
from orders o
join staffs s ON o.staff_id = s.staff_id AND o.store_id = s.store_id ;

LIMIT

• 조회할 행 수 지정
• [OFFSET 시작 인덱스 번호]

  SELECT * FROM orders LIMIT 10 

• '' [작은 따옴표] : 문자열 리터럴
• "" [큰 따옴표] : 구분 식별자 ( 컬럼, 테이블명 ) -> 특수 문자 or 대소문자 or 예약어

DDL

• 데이터 삭제시 복구 (ROLLBACK) 불가능

• CREATE : 생성

  • CREATE [ TABLE, INDEX, TYPE ... ]

• DROP : 삭제

  • DROP [ TABLE, INDEX, TYPE ... ]

• TRUNCATE : 테이블의 스키마 유지 후 초기화

  • TRUNCATE TABLE 테이블명

• ALTER : 수정

  -- COLUMN 추가
  ALTER TABLE 테이블명 ADD COLUMN 컬럼명 데이터타입 [제약조건];
  -- COLUMN명 변경
  ALTER TABLE 테이블명 RENAME COLUMN 기존컬럼명 TO 신규컬럼명;
  -- COLUMN 제거
  ALTER TABLE 테이블명 DROP COLUMN 컬럼명;
  -- COLUMN 데이터 없는 경우 DATA TYPE 변경
  ALTER TABLE 테이블명 ALTER COLUMN 컬럼명 TYPE 데이터타입;
  -- COLUMN 데이터 존재 + 형변환 필요시 DATA TYPE 변경
  ALTER TABLE 테이블명 ALTER COLUMN 컬럼명 TYPE 데이터타입 USING (컬럼명::데이터타입);
  -- 제약조건 추가
  ALTER TABLE 테이블명 ALTER COLUMN 컬럼명 SET [ 제약조건 or 기본값 ];
  -- 제약조건 제거
  ATLER TABLE 테이블명 ALTER COLUMN 컬럼명 DROP [ 제약조건 or 기본값 ];
  
  -- 기본키 추가
  ALTER TABLE 테이블명 ADD CONSTRAINT 제약조건구분이름 PRIMARY KEY (컬럼명);
  -- 외래키 추가
  ALTER TABLE 테이블명 ADD CONSTRAINT 제약조건구분이름 
  FOREIGN KEY (현재 컬럼명) REFERENCES 참조 테이블명 (참조 컬럼명) [ ON DELETE, CASCADE, SET NULL];
  -- UNIQUE 추가
  ALTER TABLE 테이블명 ADD CONSTRAINT 제약조건구분이름 UNIQUE (컬럼명1, 컬럼명2 ....);
  -- CHECK 추가
  ALTER TABLE 테이블명 ADD CONSTRAINT 제약조건구분이름 CHECK (조건식);
  
  -- 기본키, 외래키, UNIQUE, CHECK 제거
  ALTER TABLE 테이블명 DROP CONSTRAINT 제약조건구분이름;

DML

• INSERT : 추가
  • INSERT INTO 테이블명 [( 컬럼명1, 컬럼명2 ...)] VALUES (값1, 값2...);
• UPDATE : 수정
  • UPDATE 테이블명 SET 컬럼명 = 변경할 값, 컬럼명 = 변경할 값 [ WHERE 조건식 ]
• DELETE : 삭제
  • DELETE FROM 테이블명 [ WHERE 조건식 ]

DQ

데이터 타입

• 각 컬럼에 어떤 종류의 값을 저장할 수 있는지 정의
• 잘못된 형식의 데이터가 저장되는 것을 방지하고, 저장공간을 효율적으로 활용 가능

스키마

• 데이터 베이스의 구조와 제약 조건을 정의한 설계도
• 테이블, 컬럼, 데이터타입, 제약 조건 등의 정보가 포함
• 데이터가 일정한 구조와 규칙을 유지할 수 있도록 돕는다.

DDL ( Data Definition Language )

• 데이터 정의어

  • CREATE

  CREATE 테이블 명 (
    컬럼명1 데이터타입 제약조건
    컬럼명2 .....
  )
  
  -- 제약조건 종류
  -- PRIMARY KEY : 기본키 설정 : 중복 금지, NULL 금지
  -- NOT NULL : NULL 금지
  -- UNIQUE : 중복 금지, NULL 허용
  -- CHECK : 특정 조건에 해당 하는지 체크
  
  -- 자동 증감 : int generated always as identity -> 표준방식
  -- postgreSQL: SERIAL (4byte), BIGSERIAL(8byte)

  • ALTER : 테이블 수정

    # 신규 컬럼 추가
    alter table member
    add column phone varchar(20);
    

  기존 컬럼 수정

  alter table member alter column name type varchar(100);

  신규 제약 조건 추가

  ALTER TABLE member ALTER CONSTRAINT phone_unique UNIQUE (phone)

  - DROP
  ```SQL
  DROP TABLE member

  • TRUNCATE : 테이블 구조를 유지하며 초기화

DML

• 데이터 조작어
  • INSERT

    # 컬럼명 맞춤 값 대입
    INSERT INTO 테이블명 ( 컬럼명 ) values ( 값 )
    # 전체 컬럼 자동 맞춤 값 대임
    INSERT INTO 테이블명 values ( 값)
    # 여러개의 값 한번에 대입
    INSERT INTO 테이블명 values (값1), (값2), (값3) ....

  • UPDATE
  • DELETE
  • SELECT

DCL

• 데이터 제어어
  • GRANT : 권한 부여
  • REVOKE : 권한 취소

트랙잭션

• COMMIT : 데이터를 DB에 영구 반영
• ROLLBACK : COMMMIT 전 반영 내용 돌리기

데이터 무결성 제약조건

• 잘못된 데이터가 존재하면 데이터의 신뢰도가 떨어질 수 있으므로 데이터가 정확하고 일관된 상태를 유지하는것.

도메인 무결성 제약 조건 / 자료형

• 테이블 생성시에 정의된 자료형 외에 다른 자료형 입력 불가능

개체 무결성 제약 조건 / 기본키

• 테이블 내에서 각 행을 유일하게 식별하는 열
• 중복 금지, NULL 금지

참조 무결성 제약조건 / 외래키

• 다른 테이블의 기본키를 참조하는 열
• 부모 쪽 테이블에 없는 참조값을 자식 테이블이 사용 불가능
• 부모 쪽 레코드에 자식 레코드가 있으면 부모 레코드 삭제 불가능
• ON DELETE
  • CASCADE : 부모 레코드 삭제 -> 자식 레코드도 함께 삭제
  • SET NULL : 부모 레코드가 삭제 -> 자식 레코드의 참조 컬럼의 값을 NULL로 변환

데이터베이스 정규화

• 불필요한 데이터 중복, 이상현상 개선을 위해 테이블의 구조를 단계적으로 개선하는 과정
• 테이블을 분리함으로써 데이터 수정 및 관리가 쉬워지고 데이터의 일관성을 유지하기 쉽다

제1정규형 1NF

• 원자값 유지, 하나의 컬럼에는 하나의 데이터만 존재해야 한다

제2정규형 2NF

• 기본키가 두개인 경우

제3정규형 3NF

• 기본키가 한개인 경우임에도 불구하고 데이터의 분리가 가능한 데이터의 집합

DQ

• 시퀀스 투 시퀀스 모델에서 인코더가 디코더에 전달하는 '컨텍스트 벡터'의 내부 구성 요소
  • LSTM 기준 [ 마지막 은닉 상태(h) 및 마지막 셀 상태(c) ]
• 디코더 학습 시, 이전 시점의 예측값 대신 실제 정답 단어를 다음 시점 입력으로 강제 주입하여 학습을 안정화 하는 기법
  • 교사 강요
• 어텐션 메커니즘에서 디코더의 현재 상태 벡터에 해당, 정보를 탐색하기 위한 '질문' 역할을 하는 요소
  • Query
• 시퀀스 투 시퀀스 모델과 비교했을 때, 트랜스포머가 채텍한 설계 철학
  • 순환 신경망을 사용하지 않고 병렬 처리 + 셀프 어텐션
• 트랜스포머 디코더에서 학습 시 미래의 정답 단어를 미리 참조하지 못하도록 차단하는 기법
  • 인과적 마스크

Hugging Face

• Hugging Face
  • 전 세계의 고성능 오픈소스 모델을 표준화된 인터페이스로 제공하는 플랫폼

허깅페이스 구성 요소

• 파이프라인 ( Pipeline )
  • 토큰화, 인코딩, 모델 연산, 소프트맥스 확률 변환 등 추론에 필요한 전 과정을 추상화하여 제공하는 상위 API
• 자동 클래스 ( Auto Class )
  • AutoTokenizer, AutoModel 등의 클래스를 사용하면, 모델 이름 문자열만으로 적합한 전용 아키텍쳐와 가중치를 자동으로 다운로드 및 설정

토크나이저 ( Tokenizer )

• 모델의 임베딩 레이어는 가공되지 않은 텍스트를 직접 처리할 수 없으므로, 정해진 사전에 맞게 단어를 쪼개고 고유 정수 ID로 매핑하는 과정이 필요함

BPF ( Byte Pair Encoding )

• 데이터에서 가장 빈번하게 등장하는 글자 쌍을 반복적으로 병합하여 어휘 사전을 구축하는 알고리즘
• 현대 LLM의 기반

WordPiece

• BPE와 유사하게 빈도 기반으로 작동, 단순히 자주 겹치는 단어 쌍을 합치는 것을 넘어 통합했을때 전체 코퍼스의 우도(Likeihood)를 얼마나 높이는지 통계적으로 계산하여 분할.
• 전체 코퍼스의 우도란?
  • 내가 만든 언어 모델이 학습 데이터 전체를 얼마나 그럴듯하게 설명하느냐
  • 언어 모델은 각 문장에 대해서 확률을 계산하는데, 전체 코퍼스의 우도는 이 확률들을 전부 곱한 값.

SentencePiece

• BPE나 WordPiece와 다르게 문장에 사전 공백이 존재하지 않아도 처리가 가능한 독립형 전처리 라이브러리
• 공백 자체를 특수 기호로 취급하여 처리하므로, 띄어쓰기 규칙이 불규칙한 한국어나 공백이 없는 중국어, 일본어에 효과적

SQL, Data

• 데이터 : 처리되지 않은 원시 값

• 정보 : 데이터에 의미를 부여

• DB

  • 데이터의 집합
  • 단순히 모아두는 것이 아니라 효율적인 저장 및 조회가 가능하도록 구조화된 저장공간

• DBMS ( Data Base Management System )

  • 데이터 베이스 관리 소프트웨어
  • 데이터 무결성 제약조건을 지키기 위해 사용
  • RDBMS ( Relation DBMS )
    • 테이블 간의 관계

• SQL ( Structured Query Language)

  • 데이터베이스에 보내는 질문, 질의의 문법적 규칙

• 테이블

  • 데이터를 저장하기 위한 공간
  • 행과 열로 구성된 2차원 구조
    • 행 ( Row / Record )
    • 열 ( Column / Field / 속성 )
    • 셀 : 각각의 데이터

• 스키마

  • 테이블의 구조 및 제약사항을 정의한 명세서 or 설계도

데이터 무결성 제약 조건

• 도메인 무결성 제약 조건
  • 동일 컬럼은 동일한 자료형 이어야 함

• 개체 무결성 제약 조건 ( 기본키 제약 조건 )

• 참조 무결성 제약 조건

SQL Data type

• 정수형
  • int ( 4 byte )
  • smallint ( 2 byte )
  • bigint ( 8 byte )
• 실수형
  • REAL ( 4 byte )
  • DOUBLE PRECISION ( 8 byte )
  • DECIMAL(p, s) : 소수점이 있는 숫자 ( 전체 p 자리, 소수점 s 자리)
• 문자형
  • CHAR(자리수) : 고정 사이즈 문자
  • varchar(n) : 가변 길이 문자열 (최대 n의 크기만큼)
  • text : 긴 문자열 ( 길이 제한 없는 가변 문자열 )
• Boolean : True / False / Null ( 1 byte )
• 날짜 시간
  • Date : 날짜 YYYY-MM-DD 형식
  • Time : 시간 HH:MM:SS 형식
  • timestamp : 날짜 + 시간
  • timestampz : 날짜 + 시간 + 시간대
• JSON
  • jsonb : 바이너리 형태로 저장 , 속도가 빨라서 권장됨
  • json
• 기타
  • enum : 열거형, 지정된 항목 내에서만 데이터 선택이 가능하도록 함
  • vector(차원수) : 벡터 db에서 사용

회원 테이블 구성

기본키 ( Primary key )

• 하나의 레코드를 식별할 수 있는 대표 컬럼 또는 컬럼의 조합
• 중복 금지 및 Null 금지

• 순환 신경망 이용
• 주로 변역에서 사용 목적으로 연구
• 인코더 ( 문장 이해, 컨텍스트 벡터 ) - 디코더 ( 문장 생성, 인코더의 컨텍스트 벡터를 초기값으로 )
• 인코더는 LSTM 레이어 활용 : 은닉 상태(단기기억), 셀 상태(장기기억)

인코더

• 입력 단어들을 순차적으로 읽으며 문장의 전체 맥락을 하나의 벡터로 압축
• 정보 유실을 방지 하기 위하여 LSTM 레이어 활용
• 단기 기억 담당인 은닉 상태(h), 장기 기억 담당인 셀 상테 (c)를 업데이트

컨텍스트 벡터

• 입력 문장의 마지막 단어 시점에서 도출된 최종 은닉 상태와 셀 상태의 세트
• 입력 문장의 전체 맥락이 컨텍스트 벡터에 압축

디코더

• 인코더가 전달한 최종 컨텍스트 벡터를 초기 은닉 상태와 셀 상태로 설정
• 번역할 언어의 단어를 한 단계씩 예측하여 생성
• 문장 시작 토큰 < sos >, 종료 토큰 < eos >

교사 강요 (Teacher Forcing)

• 학습 초기에 디코더가 잘못된 단어를 예측하더라도, 다음 시점의 입력으로 디코더의 예측값 대신 실제 정답을 강제로 주입

고정 크기 컨텍스트 벡터의 한계

• 병목 현상 ( Bottleneck Problem )
  • 입력 문장의 길이에 상관 없이 컨텍스트 벡터의 길이는 항상 고정되어 있다.
  • LSTM 레이어를 선언할때 Hidden state의 값으로 지정
• 정보 유실
  • 짧은 문장은 효과적으로 압축하지만, 문장이 길어질수록 고정된 크기의 벡터에 많은 정보를 담아야 하므로 앞부분에 입력된 단어 정보가 점차 유실되는 현상

임베딩

• 자연어 토큰을 신경망이 수치 연산을 진행할 수 있도록 고정된 차원의 연속적인 밀집 벡터로 매핑하는 변환 기법

어텐션 메커니즘

기존 시퀀스 투 시퀀스 모델의 한계

• 정보 압축의 한계
  • 입력 문장의 길이에 상관없이 무조건 고정된 크기의 컨텍스트 벡터 하나에 전체 문맥을 압축해야 함
• 정보 손실
  • 짧은 문장은 효과적으로 압축하지만, 문장이 길어질수록 고정된 크기의 벡터에 많은 정보를 담아야 하므로 앞부분에 입력된 단어 정보가 점차 유실되는 현상
• 구조적 결합
  • 대규모 학습 데이터를 사용하더라도 문장이 길어질수록 문장 앞부분의 정보가 점차 유실되는 현상을 해결하기 어려움

어텐션 메커니즘

• 모든 상태를 활용
  • 모든 은닉 상태를 보관
• 선택적 주의 집중
  • 매 단어 생성 시에 인코더의 단어들을 다시 확인
  • 현재 예측하려는 단어와 관련성이 높은 성분에 더 높은 가중치 부여
• Q, K, V 벡터
  • Query : 무엇을 찾을 것인가
  • Key : 어떻게 찾을 것인가 ( 이름표 )
  • Value : Key를 통해서 찾은 의미 정보
• 번역 과정에서 한국어와 영어의 어순의 차이가 있더라도, 어텐션 메커니즘이 단어 간의 올바른 연관 관계를 찾아낸다

언텐션 메커니즘 작동 원리

• 사용자가 입력한 검색어(Query)를 바탕으로 데이터베이스의 키워드(Key)를 검색한 뒤, 이와 가장 매칭 되는 실제 데이터(Value)를 가져오는 과정

어텐션 연산의 3단계 흐름

• 유사도 측정

  • 디코더의 현재 상태와 인코더의 각 단어 이름표를 내적하여 단어 간의 유사도 점수 계산

    $\text{Score}(Q, K) = Q \cdot K^T$

• 가중치 분해

  • 유사도 점수에 소프트맥스를 적용하여 총합이 1(100%)가 되는 확률 분포 형태의 가중치로 변환

    $\text{Attention Weights} = \text{Softmax}(\text{Score})$

• 가중합 계산

  • 계산된 가중치를 각 Value 벡터에 곱한 후 모두 더해서, 현재 시점에 가장 필요한 최종 요약 벡터 생성 $\text{Context Vector} = \sum (\text{Attention Weights} \times V)$

어텐션 메커니즘의 등장

• 모든 상태의 활용
  • 입력 문장의 단어 정보를 버리지 않고, 디코더가 언제든 참조할 수 있도록 인코더의 모든 은닉 상태 보관
• 선택적 주의 집중
  • 디코더가 매 단어를 생성할 때마다 인코더의 단어들을 다시 확인, 현재 예측하려는 단어와 관련성이 높은 성분에 더 높은 가중치 부여
• 번역 품질 향상
  • 모델이 단어 간의 직접적인 연관 관계를 학습하게 되면서, 복잡한 어순이나 긴 문장에서도 변역 성능 크게 개선

토큰 임베딩 벡터 생성, 순서 상실 문제

• 컴퓨터는 자연어 문자열 자체를 연산할 수 없으므로, 문장을 최소 단위인 토큰으로 쪼갠 뒤 고차원 실수 공간의 좌표로 변환하는 임베딩 벡터 생성 과정이 선행
• 각 단어는 고유한 의미적 힌트를 담은 은닉 차원 크기의 숫자 배열 벡터로 재탄생
• 트랜스포머는 문장 속 단어들을 순서대로 읽지 않고, 모든 단어 임베딩 벡터를 한꺼번에 병렬로 모델에 주입하므로 연산 속도가 압도적으로 빠르다

• 위 사진의 토큰의 임베딩 벡터 -> 인코더 블록 적층 구간을 보면 문장이 통째로 유입되는 구조를 볼 수 있다
• 모든 단어가 동시에 연산 레이어에 쏟아지다 보니, 모델 입장에서는 어떤 단어가 몇번째 자리에 왔는지에 대한 선후 관계를 분간하지 못한다
• 위치 인코딩이 없다면, I love you와 you love me라는 완전히 다른 두 문장의 어텐션 스코어 판이 토큰 위치에 상관없이 동일하게 계산되는 치명적인 부작용이 발생
• 단어들의 자리가 바뀌어도 어텐션 점수가 같게 나오는 문제를 해결하기 위해, 단어의 문장 내 절대 위치에 따라 변하는 벡터를 생성하여 기존 임베딩에 더하는 과정이 필수적

pytorch

인공신경망 구축

딥러닝 모델(AI)을 만들고 학습시키는 데 필요한 모든 수학적 연산과 신경망 레이어를 제공합니다.

텐서(Tensor) 연산

파이썬의 넘파이(NumPy)처럼 다차원 행렬 연산을 수행하지만, 핵심은 GPU 가속을 지원하여 엄청나게 빠른 연산이 가능하다는 점입니다.

자동 미분(Autograd)

AI가 스스로 학습할 수 있도록 역전파(Backpropagation) 미분 계산을 자동으로 처리합니다.

단층 퍼셉트론 & 다층 퍼셉트론

단층 퍼셉트론 ( 은닉층 X )

• 입력 신호($X$)에 가중치($W$)를 곱하고 편향($b$)을 더하여 곧바로 최종 출력 점수를 산출하는 구조
• 직선 형태의 판별선만 그릴수 있어서, 곡선형태나 복잡한 실제 데이터를 분류하는데 한계가 있음

다층 퍼셉트론 ( 은닉층 O )

• 입력 정보가 출력층으로 바로 전달되는 것이 아닌, 중간에 정보를 다각도로 연산하는 은닉 뉴련 (Hidden Neuron)층을 거치는 구조
• 첫 번째 층이 저차원의 특징(선,면)을 감지하면, 은닉층은 이 특징들을 조합하여 사물의 형태, 질감과 같은 고차원 정보를 활성화 함수를 통해 학습

모델 파라미터

• 은닉층을 추가하면서 가중치의 개수가 폭증하게 되고, 이를 통해 늘어난 파라미터만큼 모델은 더 복잡한 데이터의 패턴을 포착할 수 있는 잠재력을 갖게 된다

은닉층 증가에 따른 단점

• 단점
  • 과적합의 위험
    • 모델의 표현력인 파라미터 수가 과도해지면, 데이터의 본질적인 규칙을 찾는 것이 아니라 훈련 데이터의 학습할 필요 없는 지엽적인 특징까지 학습하게 된다.
    • 학습에는 정확도가 100% 가까이 나오지만, 한 번도 보지못한 새로운 데이터를 받게 되면 엉뚱한 답을 내놓으며 예측 성능이 떨어지게 된다
  • 연산 비용 및 시간의 급격한 증가
    • 은닉층을 하나씩 추가할 때마다 조율해야 하는 가중치와 편향의 개수가 기하급수적으로 늘어남
    • 파라미터가 많아질수록 모델을 학습시키는데 더 많은 컴퓨터의 메모리와 더 긴 학습시간이 소요되게 된다
  • 기울기 소실
    • 층이 깊어지면 출력층에서 계산된 오차가 입력층 쪽으로 역전파 되는 과정에서 점차 희미해지는 현상이 발생한다.
    • 앞쪽 층에 있는 파라미터들이 제대로 업데이트 되지 않아서, 층을 많이 쌓았음에도 불구하고 학습이 이루어지지 않는 역효과가 발생할 수 있다.

신경망 학습의 4단계 순환 구조

순방향 예측 Forward Pass

• 입력 데이터가 신경망의 각 층을 통과하며 최종 예측값을 산출하는 과정

손실 계산 Loss Calculation

• 실제 정답과 모델의 예측값을 비교하여 오차의 크기를 하나의 Loss로 산출 한다

역방향 오차 전파 Backpropagation

• 출력층에서 발생한 오차를 입력층 방향으로 거꾸로 전파하면서, 미분의 연쇄법칙을 통해 각 가중치가 오차에 미친 영향도(기울기)를 계산

가중치 조정 Optimizer

• 계산된 기울기를 바탕으로 오차가 최소화되는 방향으로 가중치를 업데이트

역전파의 한계선

• 수식에서 기울기를 계산하는 것만 관여한다
• 학습률, 에포크 등은 전혀 모른채, 현재 상태의 미분값만 컴퓨터 메모리에 기록하고 자기 역할을 끝냄

옵티마이저의 시작점

• 역전파가 전달한 기울기를 받으며 작동을 시작한다
• 하이퍼 파라미터로 설정된 학습률을 이 편미분 값 앞에 곱해주는 주체
• 실제 가중치에서 이 값을 빼 새로운 값으로 업데이트 하는 최종 행위자

옵티마이저 종류

SGD (확률적 경사하강법)

• 현재 위치에서 계산된 경사도가 가장 가파른 내리막 방향으로 일정 보폭만큼 이동
• 구조가 단순하지만, 국소 최적점이나 고윈 현상을 만나면 학습이 정체되거나 진행 방향이 불안정하게 흔들릴 수 있다

Momentum

• 경사하강법에 관성의 개념을 도입하여 이전에 이동하던 방향과 속도를 유지하려는 성질을 더함
• 완만한 경사나 국소 최적점을 관성의 힘으로 통과하여 더 빠르게 최적점에 도달 할 수 있음

Adam (Adaptive Moment Estimation)

• 관성을 고려하는 Momentum과 파라미터별 보폭을 조절하는 RMSprop의 장점을 결합한 하이브리드 알고리즘
• 딥러닝 태스크에서 안정적이고 우수한 성능을 보여주어 기본 옵티마이저로 사용됨

활성화 함수 & 비선형성 주입, ReLU

은닉층 활성화 함수(비선형성 주입)

• 은닉층 선형 연산(W * X + b) 결과에 비선형 특성을 부여하는 역할

출력층 활성화 함수 (결과 해석 및 확률 변환)

• 모델이 최종 계산한 점수(Logits)를 문제의 목적에 맞는 형태로 변환
• 다중 분류에서는 점수들을 0과 1 사이의 값으로 만들고 전체 합이 1이 되도록 확률 분포로 압축하기 위해 Softmax 사용

은닉층에 비선형 활성화 함수가 필수인 이유

• 활성화 함수 없이 선형층을 깊게 쌓아도, 수학적으로는 결국 하나의 단층 선형 모델과 동일해진다
• 모델이 선형 분리가 불가능한 복잡한 현실의 패턴을 학습하기 위해서는, 레이터 사이에 선형 결합을 구부리는 비선형 활성화 함수가 필요

시그모이드의 한계 : 기울기 소실

• 초기 딥러닝에는 은닉층에도 시그모이드 사용
• 시그모이드는 입력 값이 양방향 극단(-5 이하 또는 +5 이상)으로 치우치면 그래프의 경사도(미분값)가 0에 가깝게 평평해지는 특성이 있음