Skip to content

Commit 1b11f99

Browse files
j2wooj2woo
committed
221115 -html5
1 parent 7afce08 commit 1b11f99

File tree

8 files changed

+452
-0
lines changed

8 files changed

+452
-0
lines changed

‎html5.md

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,157 @@ coords: latitude(위도), logitude(경도), altitude(고도- GPS가 아니면
1616
timestamp: 위치 정보를 가져온 시간
1717

1818
- 위치 정보를 가져오는데 실패했을 때 호출되는 함수에도 매개변수가 넘어가는데 이 경우에는 에러 객체가 전달되고 code 속성을 확인하면 실패한 이유를 알 수 있습니다.
19+
20+
> location.html
21+
22+
### 4) 위치 정보를 계속 가져와서 사용하기
23+
- let 변수 = navaigetor.geolocation.watchPosition(위치 정보를 가져오는데 성공했을 때 호출되는 함수, 위치 정보를 가져오는데 실패했을 때 호출되는 함수, 옵션)로 위치 정보를 계속해서 파악하고 clearWatch(변수)를 호출하면 더 이상 위치 정보를 가져오지 않습니다.
24+
25+
### 5) 옵션
26+
- 객체 형태로 대입
27+
``` javascript
28+
{
29+
enableHighAccuracy //정확도가 높은 위치 정보를 사용하도록 하는 옵션인데 기본값은 false
30+
time
31+
}
32+
```
33+
34+
### 6) 웹화면에 현재 위치에 해당하는 카카오 맵을 이용
35+
> kakaomap.html
36+
> https://apis.map.kakao.com/web/guide/
37+
> Kako Open API: https://developers.kakao.com/
38+
data.go.kr
39+
- 애플리케이션 생성하고 javascript 키 복사: f2e17aeed3c1967e0b52038107786813
40+
키는 바로 사용이 불가능- 플랫폼을 등록해야 한다.
41+
네이티브 앱은 앱의 패키지 이름을 등록해야 휍의 경우는 도메인을 등록해야 합니다.
42+
연습할 때는 웹으 경우는 http://localhost:포트번호 형태로 등록하고 실제 서비스에 사용을 할 때는 localhost:포트번호 대신에 등록한 도메인이나 실 사용이 가능한 공인 IP 형태로 변경을 해야합니다.
43+
44+
## 2. File API
45+
- File을 읽고 쓰기 위한 API
46+
- input 타입의 file에 multiple 속성이 추가되서 이 속성의 값을 설정하면 여러 개의 파일을 선택하는 것이 가능
47+
- 텍스트 파일을 읽을 때는 인코딩 설정에 주의해야 합니다.
48+
- 일반 파일을 읽을 때는 FileReader 객체를 생성한 후 reader.readAdDataURL(파일 객체)를 호출하고 load 이벤트와 error 이벤트를 처리합니다.
49+
***load***는 전부 읽었을 때 FileReader 객체의 result에 읽은 내용을 저장하고 ***error*** 이벤트는 읽기에 실패했을 때 실패한 이유를 저장하고 있는 객체를 넘겨줍니다.
50+
<br/><br/>
51+
- 이미지 미리보기
52+
>imagepreview.html
53+
54+
## 3. Drag And Drop API
55+
- 브라우저 내에서 사용할 수도 있고 외부 프로그램과 브라우저 사이에서도 사용할 수 있음
56+
외부 프로그램과 사용할 때는 외부 프로그램에서 드래그를 하고 브라우저에 드랍을 해야합니다.
57+
파일을 첨부할 때 많이
58+
59+
## 4. 브라우저에 데이터를 저장
60+
### 1) 브라우저에 데이터를 저장하는 이유
61+
- 불필요한 트래픽을 줄이기 위해서
62+
메일 앱의 경우 매번 서버에 접속해서 서버의 데이터를 받아노는 것은 자원의 낭비가 될 수 있습니다.
63+
맨 처음 접속을 할 때는 데이터를 다운로드 받고(파일의 존재 여부를 확인) 다음 부터는 마지막 업테이트 된 시간을 비교해서 양쪽의 시간이 다르면 데이터가 수정된 것이므로 다운로드를 받고 양쪽의 시간이 같다면 업데이트 된 내용이 없으므로 다운로드를 받지 않도록 구현
64+
<br/><br/>
65+
- offline 상태에서도 데이터를 사용할 수 있도록 하기 위해서
66+
67+
### 2) 브라우저에 데이터를 저장하는 방법
68+
- Web Storage: Map의 형태로 저장
69+
- Web SQL: 관계형 데이터베이서(SQLites3- 외부에서는 접속이 불가능한 저용량 데이터베이스, 사용법은 MySQL과 유사) 이용
70+
- Indexed DB: 자바스크립트 객체 형태로 저장- NoSQL과 유사
71+
72+
<br/>
73+
- 기존에는 Cookie를 사용했는데 Cookie 사용하게 되면 문자열만 저장할 수 있고 서버에게 매 번 전송됩니다.
74+
전송 여부를 클라이언트가 결정할 수 없습니다.
75+
76+
### 3) Web Storage
77+
=> 종류는 2가지
78+
LocalStorage: 브라우저에 저장해서 지우지 않는한 절대 삭제가 되지 않는 저장소
79+
<br/>
80+
SessionStorage: 현재 접속 중인 브라우저에 해당하는 저장소 접속이 종료되면 소멸
81+
82+
- 데이터 저장과 가져오기 그리고 삭제
83+
저장
84+
스토리지.키 이름= 데이터
85+
스토리지.["키이름"]=데이터
86+
스토리지.setItem("키이름",데이터);
87+
가져오기
88+
스토리지.키 이름
89+
스토리지.["키이름"]
90+
스토리지.getItem("키이름")
91+
삭제
92+
delete 스토리지.키 이름
93+
delete 스토리지.["키이름"]
94+
스토리지.removeItem("키이름")
95+
96+
- 저장소에 데이터가 변경되면 window 객체에 storage 이벤트가 발생하고 이벤트 객체에는 key, oldValue, newValue, url, storageArea 같은 속성이 만들어집이다.
97+
98+
- Local Storage는 전역 변수 localStorage로 사용할 수 있고 Session Storage는 sessionStorage로 사용할 수 있습니다.
99+
100+
- 저장된 내용을 확인하는 방법은 브라우저의 검사 창에서 application을 확인하면 됩니다.
101+
102+
- 세션 스토리지 - 브라우저를 종료했을 때 내용이 소멸되는지와 현재 창에서 새창을 출력했을 때 내용이 복제가 되는지 확인
103+
> sessionstorage.html
104+
105+
- 로컬 스토리지 - id 저장을 구현하는데 브라우저를 종료하고 다시 연결했을 때 내용이 존재하는지 여부를 확인
106+
> localstorage.html
107+
108+
- 로컬 스토리지는 보안이 중요하지 않은 많지 않은 양의 데이터를 저장하는데 용이
109+
장바구니 구현이나 아이디 저장에 유용하게 사용할 수 있습니다.
110+
111+
- 동일한 패턴의 데이터가 많은 경우는 로컬 스토리지 보다는 Web SQL이나 Indexed DB를 권장
112+
113+
## 5. Web Worker
114+
>webworker.html
115+
>worker.js
116+
- javascript를 이용한 백그라운드 처리(스레드)
117+
- Javascript에서는 Thread 표현 대신에 Worker라는 표현을 사용
118+
- HTML과 함꼐 있는 Javascript 코드에서 긴 작업을 수행하게 되면 작업이 끝날때까지 다른 작업을 수행할 수 없음(UI는 아무것도 할 수 없는 상태)
119+
- Web Worker는 UI 변경을 하지 못하고 DOM 객체 제어를 할 수 없지만 localStorage와 XMLHttpRequest(ajax) 사용은 가능
120+
- Web Worker 생성
121+
let 변수= new Worker("자바스크립트 파일 경로"); // 워커는 별도의 스크립트 파일에 만들어야 함
122+
- 워커와 브라우저 사이의 메세지 전송
123+
워커변수.postMessage("메세지") -> 워커에서는 message 이벤트 발생
124+
워커 파일에서는 postMessage("메세지") => 워커 변수에 message가 발생함
125+
- sendMessage는 바로 처리해달라는 요청이고 postMessage는 다른 작업이 없으면 처리해달라고 하는 요청입니다.
126+
- message 이벤트가 발생하면 매개변수에 data와 error를 가진 객체가 전달됩니다.
127+
data는 data이고 error는 에러가 발생했을 때 에러에 대한 정보를 가진 객체입니다.
128+
- 워커는 terminate()를 호출해서 중지가 가능
129+
130+
131+
## 6. Application Cache
132+
- 리소스의 일부분을 로컬에 저장하기 위한 기능
133+
- 오픈소스 브라우징이 가능해지고 리소스를 빠르게 로드할 수 있고 서버 부하를 감소시킬 수 있습니다.
134+
css나 js 그리고 이미지 파일등을 캐싱
135+
136+
## 7. Web Push
137+
- Server Sent Events: 클라이언트의 요청 없이 서버가 클라이언트에게 메세지를 전송하는 것
138+
사용하는 이유는 알림
139+
Apple Server가 보내는 Push를 APNS(Apple Push Notification Service)라고 하고 Google Server가 보내는 Push를 FCM(Firebase Cloud Message)라고 합니다.
140+
141+
## 8. WebSocket
142+
- Web에서의 T6
143+
- 일반적인 Web 요청의 처리 방식은 Client가 Server에게 접속을 한 후 하나의 request를 전송하고 그 request를 server가 받으면 처리를 하고 response를 Client에게 전송하고 접속이 끊어집니다.
144+
연속되는 작업을 처리하기 위해서 Cookie(클라이언트의 브라우저에 저장)와 Session(서버에 저장)이라는 개념을 도입
145+
일반적인 Web 요청(HTTP나 HTTPS)은 본문 이외에 헤더 정보를 같이 전송해야 합니다.
146+
작은 사이즈의 데이터를 보내는 경우 오버헤드가 너무 큽니다.
147+
Web Socket을 이용하면 헤더가 거의 없기 때문에 이러한 오버헤드를 줄일 수 있음
148+
- 작은 양의 메세지를 자주 주고 받는 경우는 ajax나 Fetch API 보다는 Web Socket을 사용하는 것을 권장
149+
150+
---
151+
# XHTML, CSS, Javascript, HTML%
152+
- 웹 브라우저에 무엇인가를 출력하고 제어하기 위한 기본 기술
153+
154+
화면 출력: XHTML, HTML5
155+
출력된 화면에 디자인을 적용: CSS
156+
출력된 화면의 요소들을 동적으로 제어: JavaScript
157+
서버에서 데이터를 받아오는 기술: Javascript에서도 ajax와 fetch API
158+
159+
이 기술 만으로 웹의 모든 화면을 만들 수 있는데 그렇게하면 소스 코드가 길이가 길어지고 비효율적인 코딩을 할 수도 있음
160+
대부분의 경우는 이러한 작업을 간결한 코드로 어느 정도 효율이 보장된 형태로 할 수 있는 프레임워크나 라이브러리를 많이 이용합니다.
161+
162+
jQuery: 속도가 느리다는 단점이 있지만 크로스 브라우징을 쉽게 구현하고 다양한 플로그인을 제공해서 UI를 쉽게 구현하도록 해줍니다.
163+
얼마전까지 가장 많이 사용되던 라이브러리 중 하나
164+
165+
bootstrap: 반응형 웹 구현을 쉽게 해주는 라이브러리, 모바일 웹을 구현할 때 많이 사용함.
166+
167+
react, vue, SPA(Single Page Application):ㄴ 많은 웹 개발자들이 지금은 react나 vue 플로그인으로 다양한 기능을 제공
168+
169+
axios: 서버에서 데이터를 받오는 것을 쉽게 구현할 수 있도록 해주는 라이브러리
170+
171+
> 버튼으로 css, js 불러오기
172+

‎imagepreview.html

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="ko">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>이미지 미리보기</title>
9+
</head>
10+
11+
<body>
12+
<!-- 이미지 파일만 선택할 수 있는 file 객체-->
13+
<input type="file" id="imginput" accept="image/*" />
14+
<!-- <input type="file" accept=".png,.jpg,.jpge,.gif" /> -->
15+
<!-- 이미지 미리보기 영역 -->
16+
<img id="display" width="250" height="250" />
17+
18+
<script>
19+
// 필요한 DOM 객체 찾아오기
20+
let imginput = document.getElementById("imginput");
21+
let display = document.getElementById("display");
22+
23+
// imginput의 선택이 변경되면
24+
imginput.addEventListener("change", (e) => {
25+
// 선택한 파일의 내용을 읽기
26+
let reader = new FileReader();
27+
// 파일이 선택되었는지 확인
28+
// javascript는 0이 아닌 숫자나
29+
// null이나 undefined가 아니면 true로 간주- truthy
30+
if(!(imginput.files &&imginput.files[0])){
31+
alert("선택된 파일이 없음");
32+
display.src=null;
33+
return;
34+
}
35+
reader.readAsDataURL(imginput.files[0]);
36+
// 파일의 내용을 전부 읽으면
37+
reader.addEventListener("load", () => {
38+
// 읽은 내용을 이미지의 소스로 사용
39+
display.src = reader.result;
40+
})
41+
});
42+
</script>
43+
</body>
44+
45+
</html>

‎kakaomap.html

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>Kakao 지도 시작하기</title>
7+
</head>
8+
9+
<body>
10+
<div id="map" style="width:500px;height:400px;"></div>
11+
<script type="text/javascript"
12+
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=f2e17aeed3c1967e0b52038107786813"></script>
13+
<script>
14+
navigator.geolocation.getCurrentPosition((position) => {
15+
//https://apis.map.kakao.com/web/guide/
16+
var container = document.getElementById('map');
17+
var options = {
18+
center: new kakao.maps.LatLng(position.coords.latitude, position.coords.longitude),
19+
level: 3
20+
};
21+
22+
var map = new kakao.maps.Map(container, options);
23+
24+
// 마커가 표시될 위치입니다
25+
var markerPosition = new kakao.maps.LatLng(position.coords.latitude, position.coords.longitude);
26+
27+
// 마커를 생성합니다
28+
var marker = new kakao.maps.Marker({
29+
position: markerPosition
30+
});
31+
32+
// 마커가 지도 위에 표시되도록 설정합니다
33+
marker.setMap(map);
34+
35+
// 아래 코드는 지도 위의 마커를 제거하는 코드입니다
36+
// marker.setMap(null);
37+
}, (error) => {
38+
alert(error.code);
39+
}, {
40+
maximumAge: 5000,
41+
enableHighAccuracy: true
42+
})
43+
44+
</script>
45+
</body>
46+
47+
</html>

‎localstorage.html

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html lang="ko">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>로컬 스토리지를 이용한 ID 저장</title>
9+
</head>
10+
11+
<body>
12+
<form method="post" action="login" id="loginform">
13+
아이디:<input type="text" id="id" /><br />
14+
비밀번호:<input type="password" id="pwd" /><br />
15+
<input type="checkbox" id="idsave" />아이디 저장<br />
16+
<input type="submit" value="로그인" />
17+
</form>
18+
<script>
19+
let loginform = document.getElementById("loginform");
20+
let id = document.getElementById("id");
21+
let pwd = document.getElementById("pwd");
22+
let idsave = document.getElementById("idsave");
23+
24+
// form의 데이터를 전송할 때(submit)
25+
loginform.addEventListener("submit", (e) => {
26+
// 체크 여부 확인
27+
if (idsave.checked === true) {
28+
// 로컬 스토리지에 저장
29+
localStorage.ids = id.value;
30+
} else {
31+
// 로컬 스토리에서 삭제
32+
delete localStorage.ids;
33+
}
34+
});
35+
36+
//메모리 로드가 끝나면 ids 저장되어있으면 가져오기
37+
window.addEventListener("load", () => {
38+
if (typeof(localStorage.ids) != 'undefined') {
39+
id.value = localStorage.ids;
40+
idsave.checked = true;
41+
}
42+
});
43+
44+
</script>
45+
46+
</body>
47+
48+
</html>

‎location.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="ko">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>GeoLoation</title>
8+
<script>
9+
//navigator.geolocation.getCurrentPosition
10+
//(위치 정보를 가져오는데 성공했을 때 호출되는 함수,
11+
//위치 정보를 가져오는데 실패했을 때 호출되는 함수, 옵션)
12+
navigator.geolocation.getCurrentPosition((position)=>{
13+
alert("위도: "+position.coords.latitude+", 경도: "+ position.coords.longitude)
14+
},(error)=>{
15+
alert(error.code);
16+
},{
17+
maximumAge:5000,
18+
enableHighAccuracy: true
19+
})
20+
</script>
21+
</head>
22+
<body>
23+
24+
</body>
25+
</html>

0 commit comments

Comments
 (0)