my-repository

navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } }).then(stream => {
    video.srcObject = stream; 
    video.setAttribute('playsinline', true); 
    video.play();
    requestAnimationFrame(tick);
});

카메라 접근 권한 요청, 스트림을 video 요소의 소스로 설정합니다. 비디오 재생 tick 반복 호출 navigator.mediaDevices.getUserMedia = 브라우저에서 사용자에게 미디어 스트림 제공

function tick() {
    if (video.readyState === video.HAVE_ENOUGH_DATA) {
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        context.drawImage(video, 0, 0, canvas.width, canvas.height);
        const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
        const code = jsQR(imageData.data, imageData.width, imageData.height, {
            inversionAttempts: 'dontInvert',
        });

        if (code) {
            resultElement.textContent = `QRC 데이터: ${code.data}`;
        } else {
            resultElement.textContent = 'QRC 없음';
        }
    }
    requestAnimationFrame(tick);
}

비디오 데이터 로드되면 캔버스에 뿌린다 QR 코드를 디코딩

generateButton.addEventListener('click', () => {
    const text = textInput.value;
    qrCodeContainer.innerHTML = ''; 
    QRCode.toCanvas(text, { width: 200, margin: 2 }, (error, canvas) => {
        if (error) {
            console.error(error);
            return;
        }
        qrCodeContainer.appendChild(canvas);
    });
});

입력된 텍스트를 QR 코드로 변환

saveButton.addEventListener('click', () => {
    const text = textInput.value;
    if (!text) {
        alert('QR입력');
        return;
    }
    let savedQRCodes = JSON.parse(localStorage.getItem('savedQRCodes')) || [];
    savedQRCodes.push(text);
    localStorage.setItem('savedQRCodes', JSON.stringify(savedQRCodes));
    alert('QR 저장됨');
});

로컬 스토리지에 저장

showSavedButton.addEventListener('click', () => {
    savedQRCodesContainer.innerHTML = ''; 
    let savedQRCodes = JSON.parse(localStorage.getItem('savedQRCodes')) || [];
    if (savedQRCodes.length === 0) {
        savedQRCodesContainer.textContent = '저장안됨';
        return;
    }

    savedQRCodes.forEach((code, index) => {
        const div = document.createElement('div');
        div.classList.add('qrCodeItem');
        
        const qrCodeData = document.createElement('p');
        qrCodeData.classList.add('qrCodeData');
        qrCodeData.textContent = code;

        const deleteButton = document.createElement('button');
        deleteButton.classList.add('deleteButton');
        deleteButton.textContent = '삭제';
        deleteButton.addEventListener('click', () => {
            deleteQRCode(index);
        });

        const shareButton = document.createElement('button');
        shareButton.classList.add('shareButton');
        shareButton.textContent = '공유';
        shareButton.addEventListener('click', () => {
            shareQRCode(code);
        });

        QRCode.toCanvas(code, { width: 200, margin: 2 }, (error, canvas) => {
            if (error) {
                console.error(error);
                return;
            }
            div.appendChild(canvas);
        });

        div.appendChild(qrCodeData);
        div.appendChild(deleteButton);
        div.appendChild(shareButton);
        savedQRCodesContainer.appendChild(div);
    });
});

savedQRCodesContainer의 기존 내용 제거
로컬 스토리지에서 저장된 QR 코드 목록을 가져와 반복하여 표시
QR 코드를 캔버스로 생성하여 컨테이너에 추가

localStorage

키-값 저장소:
- 로컬 스토리지는 키-값 쌍의 형태로 데이터를 저장.
- 각 데이터 항목은 고유한 키를 가지며, 해당 키를 통해 데이터를 저장하고 조회
동기적 API:
- 로컬 스토리지의 모든 메서드는 동기적으로 동작 즉, 데이터 읽기 및 쓰기 작업은 즉시 완료.
- 비동기적 처리를 필요로 하지 않으므로, 간단한 데이터 저장 및 조회
제한된 저장 용량:
- 브라우저마다 다르지만, 일반적으로 약 5MB의 데이터 저장 용량을 제공.
- 데이터 용량이 크거나 복잡한 데이터 구조가 필요한 경우에는 적합X
도메인 기반 저장:
- 로컬 스토리지는 도메인별로 데이터를 저장. 즉, 동일한 도메인에서만 저장된 데이터에 접근 가능.
- 이는 보안을 강화하고 데이터 충돌을 방지.

그럼 Hash Map과 비슷한건가?

유사점

키-값 쌍 저장:
- 둘 다 키-값 쌍의 형태로 데이터를 저장
- 키를 사용하여 값을 저장하고, 키를 사용하여 값을 검색.
빠른 조회:
- 키를 사용하여 값을 빠르게 조회. 해시맵은 일반적으로 O(1)의 시간 복잡도를 사용하고, 로컬 스토리지도 내부적으로 비슷한 방식으로 동작합.

차이점

저장 위치와 생명 주기:
- 로컬 스토리지: 웹 브라우저에 데이터를 영구적으로 저장. 브라우저를 닫았다가 다시 열어도 데이터 유지됨 (비휘발성)
- 해시맵: 메모리에 데이터 직접 저장. 프로그램이 종료되면 데이터(휘발성)
데이터 용량:
- 로컬 스토리지: 5MB 정도에 용량
- 해시맵: 사용 가능한 메모리만큼 데이터를 저장
데이터 형식:
- 로컬 스토리지: 모든 데이터가 문자열로 저장됨 숫자, 객체 등의 다른 데이터 타입을 저장하려면 JSON.stringify()와 JSON.parse()를 사용하여 변환
- 해시맵: 다양한 데이터 타입을 저장 가능, parse같은 특별한 변환 필요 없음
범위 및 접근성:
- 로컬 스토리지: 도메인별로 데이터 저장, 같은 도메인 내에서만 데이터에 접근 가능
- 해시맵: 프로그램 내에서 어디서든 접근 가능, 프로그램의 범위와 생명 주기에 따라 변해짐

로컬 스토리지 API 사용법

// 저장
localStorage.setItem('key', 'value');
// 불러오기
const value = localStorage.getItem('key');
// 삭제
localStorage.removeItem('key');
// 모든 데이터 삭제
localStorage.clear();

해쉬 맵 사용방법

// JavaScript Map
const map = new Map();
// 저장
map.set('key', 'value');
// 불러오기
const value = map.get('key');
// 삭제
map.delete('key');
// 모든 데이터 삭제
map.clear();

this 키워드 사용하기

함수 내부에서의 예제

function sayHello() {
    console.log("Hello, " + this.name + "!")
}
 
var person = {
    name: "이지민",
    sayHello: sayHello
};
var person2 = {
    name: "리짜이밍",
    sayHello: sayHello
};
person.sayHello();
person2.sayHello();

//Hello, 이지민!
//Hello, 리짜이밍!

객체에서 메소드를 호출할때 예제

var car = {
    make: "HYUNDAI",
    model: "ionic",
    year: "2024",
    getCarInfo: function() {
    return this.make + " " + this.model + " (" + this.year + ")";
    }
};
console.log(car.getCarInfo()); 
//HYUNDAI ionic (2024)

then :

한 줄 요약 : 비동기 작업의 결과를 처리하거나 다음 작업을 체인으로 연결 위함

[[프로미스 설명.canvas|프로미스 설명]]

fetchData()
    .then(result => {
        // 성공 시 실행할 코드
        console.log('Success:', result);
    })
    .catch(error => {
        // 실패 시 실행할 코드
        console.error('Error:', error);
    });

WebRTC Steps :

Signaling : SDP (Session Description Protocol.)
Connection : ICE (Interactive Connectivity Establishment)
Security : DTLS (Datagram Transport Layer Security), SRTP (Secure Real-time Transport Protocol)
Communicating :RTP (Real-time transport Protocol), SCTP (Stream Control Transmission Protocol), RTCP (Real-time Transort Control Protocol)

SDP : 생성할 세션의 타입의 정보를 전송 ![[Pasted image 20240520122248.png]]

This site is open source. Improve this page.