* 참조 사이트
- 웹사이트 처음부터 자세히 설명한 사이트
- https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web#%EA%B0%99%EC%9D%B4_%EB%B3%B4%EA%B8%B0
- 자바 스크립트 등 코딩시 바로 확인할 수 있는 사이트
- https://jsfiddle.net/
- HTML 태그 설명
- https://ofcourse.kr/html-course/HTML-%EC%9E%85%EB%AC%B8
1. FrontEnd
1.1. 로컬 http 서버 (BackEnd 이나, 테스트 로컬서버라서 여기에 명시)
1.1.1. python을 이용한 로컬 서버 열기
- python 설치 : https://www.python.org/ 이동 -> download 에서 알맞은 설치파일로 설치 (설치시 환경변수인 path 설정 확인)
- cmd창 -> index.html 등, html이 있는 폴더로 이동
- python -m http.server 포트번호 입력시 해당 포트번호로 서버를 열게됨
- 브라우저에서, localhost:포트번호 입력시 index.html을 불러오게 됨
1.2. HTML
- 태그로 구성된 웹페이지를 작성하는 기본 코드
- header 태그에는 사용자에게 보여주지 않고, 모든 컨텐츠 항목에 적용되는 폰트 등을 설정. css도 설정
- body 태그에는 사용자에게 보여줄 항목 작성
1.2.1. 태그
1.2.1.1. 리스트 태그
- ul 태그 : 하위 항목인 <li> 태그의 아이템들을 리스트로 표시하나, 순서가 없이 표시함
- ol 태그 : 하위 항목인 <li> 태그의 아이템들을 리스트로 표시하며, 위에서부터 순차적으로 1. 2. 3. ... 으로 순서를 표시함
1.2.1.2. 링크 태그
- <a href="링크 주소">텍스트 내용</a>
- 같은 폴더내 연결할 링크 : 파일명
- 하위폴더에 있을경우 : 하위폴더명/파일명
- 같은 레벨의 다른 폴더에 있을경우 : ../폴더명/파일명
- 다른 웹에 연결 : 웹 주소
1.2.1.3. meta 태그
- 문자열 집합을 나타내는 태그로, header 태그 안에 삽입
- <meta charset="utf-8"> 로 작성하면 됨.
1.2.1.4. img 태그
1.2.1.4.1. src 속성
- 같은 폴더내 있을경우 : 파일명
- 하위폴더에 있을경우 : 하위폴더명/파일명
- 같은 레벨의 다른 폴더에 있을경우 : ../폴더명/파일명
- 다른 웹에 있는 파일 : 웹 주소
1.2.1.4.2. alt 속성
- 이미지 링크가 깨졌거나 할 경우 표시할 텍스트. (description)
1.2.1.4.3. title 속성
- 이미지 마우스 오버시 보여주는 텍스트
1.2.1.5. figure 태그 (html5)
- figure 태그 안에 정의한 내용과 figcaption 태그에 작성한 텍스트를 엮어주는 역할
- 예 : 이미지 추가 후, 하단에 설명을 작성할 때 다음의 두가지 방법으로 가능
- 기본방식인 img 태그 추가, 하단에 p 태그를 통한 설명 삽입
- figure 태그 안에 img태그, 하단에 figcaption 태그에 설명 삽입
1.2.1.6. div 태그
- 레이아웃을 분리하는 역할
- 예 :
<html>
<body>
<div style="background-color:cyan">구역1</div>
<div style="width:100px; height:100px; background-color:#CF0">구역2</div>
</body>
</html>
1.2.1.7. span 태그
- div처럼 영역을 구분하나, div는 줄바꿈이 되는것에 반해 span은 줄바꿈 하지 않는다.
1.2.1.8. audio 태그 (html5)
- <audio controls src="주소" />
* 이후 태그는 검색을 통해 필요할때 마다 활용. 내용정리하지 않음
1.2.2 Form
- 사용자가 웹사이트 또는 어플리케이션과 통신
- 데이터 전송
- 하나이상의 위젯으로 만들어 지며, 버튼, 체크박스 등이 위젯임
- 각 위젯에 name을 설정해주어야함. 통신시 key,value를 통해 name이 key가 됨
- action : 전달 대상
- method : get, post 등 전달방식
- 예 :
<form action="http://foo.com" method="get">
<div>
<label for="say">What greeting do you want to say?</label>
<input name="say" id="say" value="Hi">
</div>
<div>
<label for="to">Who do you want to say it to?</label>
<input name="to" id="to" value="Mom">
</div>
<div>
<button type="submit">Send my greetings</button>
</div>
</form>
- 참조 : https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data
https://developer.mozilla.org/ko/docs/Learn/HTML/Forms
1.2.3. 테이블
1.2.3.1 태그
- table : 테이블 생성
- th : 헤더
- tr : 행
- td : 열
- 참조 : https://coding-factory.tistory.com/184
1.3. CSS
- html 태그들에 스타일을 일괄적용하는 스타일 시트 언어
- 사용법 예 : p { color:red; } 작성 -> 확장자가 css 인 파일로 저장
- 부트스트랩을 적극적으로 활용하자.
- https://getbootstrap.com/
- html과 css 프레임워크로 이미 꾸며놓음
1.3.1. 설명
- html 태그이름 { 해당html태그의 속성: 값; }
- 속성값을 정하기 위해서는 { } 블록 안에 적어야 함
- 속성값 별 ; 로 구분해야함.
- 예 : color: red; width:500px;
- body의 크기 , 배경색 등도 변경가능
- 한번에 여러 태그를 동시에 적용 가능
- 예 : p,li,h1 { .....
* html 태그이름 부분을 셀렉터 라고 함
1.3.2. 셀렉터 종류
- html 태그명
- 아이디
- html 의 속성으로 주어진 아이디 (아이디는 고유함)
- 예 : <p id="id1" /> 의 경우, #id1 {...}
- 클래스
- html 의 속성으로 주어진 클래스 (아이디와 다르게 고유하지 않음)
- 예 : <p class="class1" /> <a class="class1" />의 경우, .class1 {...}
- 속성
- 특정 속성에 해당하는 태그에 반영
- 예 : <img src="...." /> 의 경우, img[src] {...}
- Pseudo(수도) 클래스
- 특정 태그에 적용되나, 해당 태그가 특정 상태에 있을때만 적용
- 예 : <a> 태그의 마우스 포인터가 위에 있을경우만, a:hover {...}
... 등등 있음
* 전체에 반영하고 싶을 경우 셀렉터를 html로 하면 됨
- 참조 : https://developer.mozilla.org/ko/docs/Learn/CSS/Introduction_to_CSS/%EC%84%A0%ED%83%9D%EC%9E%90
1.3.3. html에서 css 호출하기
- head 태그 안쪽에 <link href="css 파일위치 및 파일명 혹은 url" rel="stylesheet" type="text/css"> 작성 시, 스타일이 반영됨
- https://getbootstrap.com/ 접속시, 주소 있음. 기본으로 많이 씀.
1.3.4. 구글 폰트 반영
- head 태그 안쪽에 <link href="구글 폰트url" rel="stylesheet" type="text/css">
- 본인이 작성한 css 파일을 열어, html { font-family: 구글에서 적용하라고 안내한 css내용;}
예 : font-familiy: 'Noto Sans KR', sans-serif;
* 본인이 작성한 css 파일 참조 내용이 없는데 적용이..?
1.3.5. 박스 (margin, padding등)
- body, header 등 margin, padding, background 등을 이용하여 크기 및 간격 조절, 배경색 변경등이 가능
- 이미지 중앙정렬 등도 가능하다. display를 이용해야함..
- 이미지 태그는 바디 처럼 블록영역이 아니라, 한줄 영역이므로 별도의 조취가 필요
- img { display:block; margin: 0 auto;}
- display 상세 설명 : https://developer.mozilla.org/en-US/docs/Web/CSS/display
1.4. Java Script
- 동적 프로그래밍 언어로, 웹사이트 상에서 다양한 작업을 할 수 있다.
- 브라우저 내장 API 및 서드파티 API와 연동하여 HTML을 동적으로 생성, CSS 스타일 적용, 오디오 생성 등 다양한 작업
- 참조 : https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/JavaScript_basics
- 웹 API 리스트 참조 : https://developer.mozilla.org/ko/docs/Web/API
- 자바스크립트 안내서 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide
- 자바스크립트 학습 : https://developer.mozilla.org/ko/docs/Learn/JavaScript
- 자바스크립트 함수들?? : https://www.w3schools.com/jsref/met_win_settimeout.asp
1.4.1. html에서 javascript 호출하기
- html 태그 -> </body> 태그 앞줄에 <script src-="스크립트 위치 및 파일명" /> 입력
=> html은 위에서부터 순차적으로 로딩하는데, 자바스크립트가 영향을 미치는 태그보다 먼저 로딩될 경우, 자바스크립트 동작이 안된다.
즉, 적용 대상이 되는 항목이 먼저 로딩되고 난 후에 자바스크립트가 로딩되어야 동작한다. 따라서 맨 마지막줄에서 자바스크립트 호출한다
- 혹은, <script></script> 태그 안에 직접 코딩할 수 있다. 마찬가지로, script 태그는 body 맨 아래에 위치한다
1.4.2. 자바스크립트 생성 및 Hello world
- 메모장에서 파일 저장 -> 확장자가 js인 파일로 저장
- hello world 예제 코드
- var myHead = document.querySelector('h1');
=> myHead 변수에 html페이지의 h1 태그를 배정
- myHead.textContent = 'Hello World';
=> h1 태그를 배정받은 변수에서, h1 태그의 프로퍼티인 textContent에 값을 입력
1.4.3. 변수
- string, number, boolean, object 등 타 언어에서 사용되는 변수 있음. 대소문자 구분
- 문자열의 경우 '' 또는 "" 로 둘러싸임.
- array 예 : var arrayVar = [1,'aaa','bbb', 10]; 으로 선언, arrayVar[0] ... 으로 접근 가능
- var objectVar = document.querySelector('h1'); 처럼 h1 태그를 배정할 수 있음
1.4.4. 연산자
- 타 언어와 다른 연산자만 내용정리
- 참조 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators
1.4.4.1. === 연산자 (일치 연산자)
- 두값이 서로 같은지 비교하여 결과값 반환 (true/false)
- 예 : var test = 3;
test === 4;
1.4.4.2. 부등 연산자
- != 연산자 이며, 타입이 다르더라도, 자바스크립트가 적절한 타입으로 변환하여 비교함. 같지않을경우 true, 같으면 false 리턴
- 예 : 1 != '1' 은 false
2 != '1' 은 true 리턴
1 != true, 0 != false 또한 false 리턴
1.4.4.2. 불일치 연산자
- !== 연산자 이며, 타입이 다를경우에도 true를 리턴한다. 같지않은경우 true, 같으면 false를 리턴한다
- 예 : 1 !== '1' 은 true, 1 !== 1 은 false 리턴
1 !== 2 도 true 리턴
1.4.5. 함수
- function 함수명 (인자값) { } 으로 구성
- 리턴형은 따로 명시가 없는듯. 자유롭게 리턴 가능한듯
- 참조 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/%ED%95%A8%EC%88%98
1.4.5.1. argument 이용하여 인자값을 유동적으로 받기
- arguments[i] 를 이용하여 인수를 유동적으로 받을 수 있다.
- 예 :
function myConcat(separator) {
var result = ""; // 리스트를 초기화한다
var i;
// arguments를 이용하여 반복한다
for (i = 1; i < arguments.length; i++) {
result += arguments[i] + separator;
}
return result;
}
// returns "red, orange, blue, "
myConcat(", ", "red", "orange", "blue");
1.4.5.2. 나머지 매개변수 (1.4.5.1. argument와 비슷한 방법인듯?)
function multiply(multiplier, ...theArgs) {
return theArgs.map(x => multiplier * x);
}
var arr = multiply(2, 1, 2, 3);
console.log(arr); // [2, 4, 6]
1.4.6. 이벤트
- 웹사이트의 상호작용을 위해 사용됨. (예 : 버튼 클릭 이벤트)
document.querySelector('html').onclick = function() {
alert('Ouch! Stop poking me!');
}
1.4.6.1. 이벤트 예제
var myImage = document.querySelector('img');
myImage.onclick = function() {
var mySrc = myImage.getAttribute('src');
if(mySrc === 'images/firefox-icon.png') {
myImage.setAttribute ('src','images/firefox2.png');
} else {
myImage.setAttribute ('src','images/firefox-icon.png');
}
}
// 이미지 클릭시, 현재 이미지 파일명에 따라 다른 이미지 파일로 대체
* 사이트를 나갔다 들어오더라도 데이터가 저장될수 있도록 하는 예제 (웹저장소 api 사용)
참조 : https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage
//html에 다음을 추가
<button>Change User</button>
//자바스크립트 내용
var myButton = document.querySelector('button');
var myHeading = document.querySelector('h1');
function setUserName() {
var myName = prompt('Please enter your name.');
localStorage.setItem('name', myName);
myHeading.innerHTML = 'Mozilla is cool, ' + myName;
}
if(!localStorage.getItem('name')) {
setUserName();
} else {
var storedName = localStorage.getItem('name');
myHeading.innerHTML = 'Mozilla is cool, ' + storedName;
}
myButton.onclick = function() {
setUserName();
}
1.4.7. 유용한 기본 메서드
1.4.7.1. 문자열 (다른 항목만 정리)
- substring에 대응하는 함수 : slice
- 소문자 변경 : toLowerCase();
- 대문자 변경 : toUpperCase();
1.4.7.2. 기본 메서드
- 참조 : https://developer.mozilla.org/ko/docs/Web/API/Window
- prompt : 팝업 윈도우를 통해 사용자 입력을 받는 메서드. 인자값으로는 타이틀 string
- alert : 팝업 메세지 창
1.4.8. 디버깅
- 페이지에서 f12 (크롬 기준) 누름 -> console 탭 클릭시 오류 목록이 출력됨
- console 에서는 연산자 및 자바스크립트를 실행 해 볼 수 있음
1.4.9. Javascript로 Json 다루기
- 웹 어플리케이션에서 데이터 전송시 일반적으로 사용하는 표준 포멧
- 문자열로 이루어진 포멧으로, 데이터에 억세스하기 위해서는 Json 객체로 변환해야 함 : 파싱이라고 함
- 기본적으로 javascript 문법과 유사. 다수의 프로그래밍 환경에서 json 연동기능을 제공
- 확장자는 .json
- json은 순수히 데이터 포멧으로, 프로퍼티만 담을 수 있고 메서드는 담을 수 없음
- https://jsonlint.com/ 에서 json 유효성 검사를 할 수 있음
* XMLHttpRequest의 responsetype 참조 : https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseType
1.4.9.1. 변수 설정 예제
- 변수 설정은 "변수명" : 값 으로 설정함
- "first" : "A"
- "second" : 2
- "third" : true
- "forth" : [ { "name" : "aaa", "age" : 30, "ability": [ "aa", "bb", "cc"] }, { "name" : "vvv", "age" : 35, "ability": [ "dd", "ee", "ff"] } ]
1.4.9.2. javascript에서 json 파싱
- XMLHttpRequest의 responseType : json 으로 함으로서 자동 파싱
- var url변수 = 'json 파일 위치 혹은 url'
- var request변수 = new XMLHttpRequest();
- request변수.open('GET' ,url변수);
- request변수.responseType = 'json';
- request변수.send();
- request변수.onload = function()
{
var return변수명 = request.response;
var temp변수명 = return변수명['json변수명 예 : first'];
var temp변수명1 = return변수명['json변수명 예 : forth'][0]['예 : name'];
var temp변수명2 = return변수명['json변수명 예 : forth'][0]['예 : ability'][0];
}
만일 위의 예제에서 배열이라 for문을 활용하고 싶다면,
for (var i = 0; i<return변수명['json변수명 예 : forth'].length;i++) 을 통해 반복문 사용가능
해당 json변수가 배열임을 미리 알아야 할듯.
1.4.9.3. javascript에서 json 수동파싱
- 종종 raw json만 수신 가능할 수도 있다.
- XMLHttpRequest의 responseType : text 으로 함으로서 json을 text로 받아오고, 이후 수동 파싱
- var url변수 = 'json 파일 위치 혹은 url'
- var request변수 = new XMLHttpRequest();
- request변수.open('GET' ,url변수);
- request변수.responseType = 'text'; //json의 raw 텍스트를 가져옴
- request변수.send();
- request변수.onload = function()
{
var return변수명 = JSON.parse(request.response);
var temp변수명 = return변수명['json변수명 예 : first'];
var temp변수명1 = return변수명['json변수명 예 : forth'][0]['예 : name'];
var temp변수명2 = return변수명['json변수명 예 : forth'][0]['예 : ability'][0];
}
1.4.9.4. javascript를 json으로 변환하여 전송하기
- javascript의 오브젝트를 전송하고 싶을경우, json으로 치환하여 전송해야 함
var myJSON = { "name": "Chris", "age": "38" };
var myString = JSON.stringify(myJSON);
var xhr = new XMLHttpRequest();
xhr.open("POST", 'url위치');
//Send the proper header information along with the request
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() { // Call a function when the state changes.
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
// Request finished. Do processing here.
}
}
xhr.send(myString);
1.4.10. XMLHttpRequest 함수
- 웹 통신을 위해 사용하는 함수.
- 참조 : https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
1.4.10.1. open()
- 인자값 : HTTP Method, url, async (bool) , user, password
- async 부터는 옵션 인자값임
- 참조 : https://developer.mozilla.org/ko/docs/XMLHttpRequest
1.4.10.1.1. HTTP Method (대부분 보안상의 이유로 GET, POST 2개 또는 OPTIONS까지 3개만 허용함)
- GET : 데이터를 가져옴
- HEAD : http 헤더 정보만 가져옴
- POST : 내용 전송 (파일전송 가능)
- PUT : POST와 비슷하나 덮어씌우는 기능
- OPTIONS : 서버측에서 가능한 메소드 옵션들을 물어봄. 응답으로 서버에서 사용가능한 옵션들이 리턴됨
1.4.10.1. send()
- 인자값 : 전송할 데이터로 null 가능
- 1.4.9.4. 참조
1.4.11. Client side Web api
- 브라우저 API , 서드 파티 api 존재
- 참조 : https://developer.mozilla.org/en-US/docs/Web/API
https://developer.mozilla.org/ko/docs/Learn/JavaScript/Client-side_web_APIs
1.4.11.1. Local Storage (데이터 저장) : 브라우저를 꺼도 유지함, 텍스트 및 숫자 등 저장
- localStorage.setItem('저장키값','저장할 값');
- let 변수 = localStorage.getItem('저장키값');
- localStorage.removeItem('저장키값');
1.4.11.2. Indexed DB (데이터 저장) : 이미지 등 저장 가능
let db;
window.onload = function()
{
// db가 없을경우 생성함. 비동기 동작
let request = window.indexedDB.open('db명','1'); // 1은 버전임. 사용자 명시이며, 버전 변경시 onupgradeneeded 발생함
request.onerror = function() {
console.log('Database failed to open');
};
request.onsuccess = function() {
console.log('Database opened successfully');
db = request.result;
};
//DB가 셋업되지 않았거나, 저장된 DB버전보다 높은 버전의 DB가 open 되었을경우 이벤트 발생함. 처음 create시에도 발생하는듯 함.
request.onupgradeneeded = function(e) {
let db = e.target.result;
let objectStore = db.createObjectStore('db테이블명', { keyPath: '키값으로 사용되는 명칭 예 : id', autoIncrement:true });
// Define what data items the objectStore will contain
objectStore.createIndex('db컬럼명 예 : name', '클래스 맴버변수 혹은 변수와 매칭되는 명 예 : name', { unique: false });
// 예를들어, { name : "aa", id : 1} 항목을 저장 할 수 있음.
};
};
// form.onsubmit = addData; 를 통해 e에 데이터를 실어 넘겨주는것이 필요.
function addData(e)
{
e.preventDefault();
let newItem = { name : "aa", id : 1};
let transaction = db.transaction(['db테이블명'],'readwrite');
let objectStore = transaction.objectStore('db테이블명');
let request = objectStore.add(newItem);
request.onsuccess = function()
{
//원하는 항목 진행
};
transaction.oncomplete = function()
{
//원하는 항목 진행. db 트랜잭션 성공시 발생.
};
transaction.onerror = function()
{
//db 드랜잭션 실패시
};
};
//db에서 항목 조회
function selectData()
{
let transaction = db.transaction(['db테이블명'],'readwrite');
let objectStore = transaction.objectStore('db테이블명');
objectStore.openCursor().onsuccess = function(e)
{
while(true)
{
let cursor = e.target.result;
if(cursor == null)
break;
let valueItem = cursor.value.컬럼명;
};
};
};
//db에서 항목 삭제
function deleteData()
{
let transaction = db.transaction(['db테이블명'],'readwrite');
let objectStore = transaction.objectStore('db테이블명');
//단일 삭제 혹은 다중삭제 가능함. key값 1개 혹은 KeyRange를 통해 범위삭제 가능
// IDBKeyRange.lowerBound(숫자) : 숫자포함 이하
// IDBKeyRange.lowerBound(숫자, true) : 숫자 미만
// IDBKeyRange.upperBound(숫자) : 숫자 포함 이상
// IDBKeyRange.upperBound(숫자, true) : 숫자 초과
// IDBKeyRange.bound(숫자1, 숫자2) : 숫자 1이상, 숫자2 이하
// IDBKeyRange.bound(숫자1, 숫자2, true, true) : 숫자1 초과 숫자2 미만 ...
// IDBKeyRange.only(숫자) : 해당 인덱스만 삭제. delete(숫자) 와 동일
let request = objectStore.delete(키값 예 : id);
transaction.oncomplete = function()
{
//삭제 성공
};
};
1.4.11.3. Indexed DB : 다중데이터 저장 및 비디오 저장
let db;
let videos = [ {'컬럼명 예 : name' : '비디오명1'},{'컬럼명 예 : name' : '비디오명2'},{'컬럼명 예 : name' : '비디오명3'},];
window.onload = function()
{
// db가 없을경우 생성함. 비동기 동작
let request = window.indexedDB.open('db명','1'); // 1은 버전임. 사용자 명시이며, 버전 변경시 onupgradeneeded 발생함
request.onerror = function() {
console.log('Database failed to open');
};
request.onsuccess = function() {
console.log('Database opened successfully');
db = request.result;
init();
};
//DB가 셋업되지 않았거나, 저장된 DB버전보다 높은 버전의 DB가 open 되었을경우 이벤트 발생함. 처음 create시에도 발생하는듯 함.
request.onupgradeneeded = function(e) {
let db = e.target.result;
let objectStore = db.createObjectStore('db테이블명', { keyPath: '키값으로 사용되는 명칭 예 : id', autoIncrement:true });
// Define what data items the objectStore will contain
objectStore.createIndex('db컬럼명 예 : name', '클래스 맴버변수 혹은 변수와 매칭되는 명 예 : name', { unique: false });
objectStore.createIndex('db컬럼명 예 : origin', '클래스 맴버변수 혹은 변수와 매칭되는 명 예 : origin', { unique: false });
};
};
function init()
{
for(let i = 0; i < videos.length; i++)
{
let transaction = db.transaction(['db테이블명'],'readwrite');
let objectStore = transaction.objectStore('db테이블명');
let request = objectStore.get(videos[i].키값 예 : name);
request.onsuccess = function()
{
if(request.result)
// 저장된 비디오가 있는 경우.
getVideo(request.result.origin, request.result.name);
else
// 저장된 비디오가 없기에, 저장해야 하는 경우
addVideo(videos[i]);
};
}
};
function addVideo(video)
{
let origin = fetch(경로명 예 : video.name).then(response => response.blob());
Promise.all([video.name,origin]).then(function(e)
{
let transaction = db.transaction(['db테이블명'],'readwrite');
let objectStore = transaction.objectStore('db테이블명');
let addItem = { name : e[0], origin : e[1] }
let request = objectStore.add(addItem);
...
};
};
//db에서 항목 조회
function getVideo(video, name)
{
let url = URL.createObjectURL(video);
let videoTag = document.createElement('video');
let source = document.createElement('source');
source.src = url;
source.type = 'video/mp4';
video.appendChild(source);
};
* Jquery : https://mintpot.synology.me:30000/boards/2/topics/290
'FrontEnd' 카테고리의 다른 글
| vue js 내용정리 (1. 설치 ~ 2.3.8. 컴포넌트 - 이벤트 발생시 사용자 정의함수 호출) (0) | 2022.03.25 |
|---|---|
| FrontEnd 개발 관련 내용정리 (0) | 2022.03.25 |
| HTTPS 상에서 Front-end 페이지 테스트 (0) | 2022.03.24 |
| AWS with JavaScript (0) | 2022.03.24 |
| JQuery 관련 기초 내용 (0) | 2022.03.24 |