NEXT WEB UI Advanced 수업자료

1. 웹UI개발자를

2. 괴롭히는,

3.
하지만

4. 훌륭한

5. 전략이

6. 있어

8.
우리가

9. 다시

10. 행복해질

11. 수

12. 있는

13. 것.

14.
!
Cross

15. browsing

16. 잘하기

17. [몇

18. 년

19. 전

20. 설문조사]
IE6

21. 때문에

22. 업무량이

23. 얼마나

24. 더

25. 추가되나요?
20~30%

26. 안타깝게도..

28. 모든

29. 브라우저에서

30. 동작가능한

31.
웹서비스를

32. 만든다는

33. 것은

34. 어려운

35. 일이며,

36.
UI개발자의

37. 중요한

38. 역할이기도

39. 하다.

40.
!
더구나

41. 당신의

42. 서비스가

43. 지원해야

44. 할

45. 브라우저가..

47. 범

48. 국민적인

49. 것이라면…⋯.

50. 어쩌겠나

51.
헤쳐나가자.

53.
!
방법은

54. 있고

55. 상황은

56. 더

57. 좋아지고

58. 있다

60.
;-)

61. 배

62. 경

63. 웹브라우저

64. 업체는

65. 말이야,,

66.
!
최신기능을

67. 너무

68. 빨리

69. 지원하는

70. 곳이

71. 있는가

72. 하면,

73.
나온지

74. 꽤

75. 된

76. 안정적인

77. 기능을

78. 아직도

79. 적용하지

80. 않는

81. 경우가

82. 있음

83.
과거에는

84. 잘못

85. 적용한

86. 경우도

87. 있었다(브라우저

88. 버그)

89.
!
!

90. 아무튼

91.
표준을

92. 지키는

93. 건

94. 전적으로

96.
브라우저

97. 제조사

98. 마음.

100. 도대체

101. 얼마나

102. 다르길래?

103. 구글링

104.
‘comparison

105. of

106. layout

107. engines

108. wikipedia’

110. 그래서,

111.
전략이

112. 필요하다

113. i

114. wanna..

115.
!
“최신기능을

116. 이용해서

118.
사용자에게

119. 새로운

120. 경험을

121. 주고

122. 싶어요”

123. 상황

124.
!
네이버서비스에

126.
CANVAS

127. API로

128. 총선결과를

129. 표시하고

130. 싶다.

131. canvas를

132. 지원하는

133. 브라우저?

134. 확인해보자

136. caniuse.com

137.
IE8,

138. Android

139. browser

140. 2.3까지

141. 지원이

142. 안된다!

143.
우리

144. 서비스에서

145. 이

146. 브라우저

147. 지원을

148. 해야

149. 하나?

150.
우리

151. 고객이

152. 사용하는

153. 환경에

154. IE8이

155. 있을까?

156. 젠장..

157.
‘안타깝게도

158. IE8을

159. 사용하는

160. 고객이

161. 겁나

162. 많다.’

163. 검색

165.
‘IE8

167. CANVAS’

171. using

172. exCanvas

173. !!

174.
이런

175. 걸

176. polyfill

177. library라고도

178. 한다

179. 업데이트

180. 된지

181. 8년..

182. ㅠ.ㅠ

183.
성능까지

184. 느린

185. 걸

186. 확인..
그

187. 러

188. 나

189. …⋯

190. 다시

191. 원점.

192.
CANVAS를

193. 쓰지

194. 않고

195. 다른

196. 방법은?

197.
!
• 서버

198. 생성

199. 이미지

200.
• flash

201.
• activeX

202. 다시

203. 원점.

204.
CANVAS를

205. 쓰지

206. 않고

207. 다른

208. 방법은?

209.
!
• 서버

210. 생성

211. 이미지

212.
• flash

213.
• activeX

214.
• canvas를

215. 사용하되

216. 구

217. 브라우저

218. 포기
[점진적인

219. 개선]

220. 점진적인

221. 개선
멋진

222. 새로운

223. 기능이

224. 있다고

225. 가정하자.

226.
구

227. 브라우저에서

228. 원하는

229. 기능을

230. 쓸

231. 수

232. 없다면

233. ?

234.
!
구

235. 브라우저

236. :

237. 핵심기능만

238. 쓸만하게

239. 동작하게

240. 하자

241.
신

242. 브라우저

243. :

244. 멋지고

245. 향상된

246. UX를

247. 제공하자

248. 아무튼,

249.
라이브러리는

250.
호환성

251. 이슈를

252. 해결하기

253. 위한

254. 아주

255. 좋은

256. 전략
jQuery

257.
underscore.js

258.
extJS

259.
‘HTML5

260. polyfill

261. 라이브러리’

262. 를

263. 검색해보시라

264.
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

265. mobile

266. 기기안의

267. browser는

268. 대체로

270.
HTML5나

271. ECMAScript5

272. 와

273. 같은

274. 최신기능을

275. 대부분

276. 지원한다.

277.
!
따라서

278. PC보다

279. 라이브러리의

280. 필요성이

281. 상대적으로

282. 덜하다

283. 크로스

284. 브라우징을

285.
우아하게

286. 하는

287. 방법

288. if(isIE) {!
attachEvent(,,);!
}else if(isFirefox) {!
addEventListener(,,);!
}!
!
음..

289. 나중에

291.
ie가

293. addEventListener를

294. 지원하기

295. 시작한다면?

296. addHandler: function(element, type, handler) {!
! ! // modern browsers : chrome, safari, firefox!
! ! if (element.addEventListener) {!
! ! ! element.addEventListener(type, handler, false);!
! ! }!
! ! // Internet Explorer!
! ! else if (element.attachEvent) {!
! ! ! element.attachEvent(on + type, handler);!
! ! }!
! ! // Old Browsers!
! ! else {!
! ! ! element[on + type] = handler;!
! ! }!
! },!
feature

297. detection

298. !
addEventListener
EMERGENCY in NEXT

299. if (window.Promise) {!
var promise = new Promise(function(resolve, reject) {!
//do something…!
});!
} else {!
console.log(‘promise가 지원되지 않는군요’);!
}
feature

300. detection

301. !
Promise

302. //Detect browser support for CORS!
if ('withCredentials' in new XMLHttpRequest()) {!
/* supports cross-domain requests */!
document.write(CORS supported (XHR));!
}!
else{!
if(typeof XDomainRequest !== undefined){!
//Use IE-specific CORS code with XDR!
document.write(CORS supported (XDR));!
}else{!
//Time to retreat with a fallback or polyfill!
document.write(No CORS Support!”);!
//JSONP와 같은 방식을 적용하는 걸 검토해야 함.!
}!
}!
feature

303. detection

304. !
http://docs.telerik.com/kendo-ui/howto/use-cors-with-all-modern-browsers
CORS

305. this.nVersion = parseFloat(jindo.m.getDeviceInfo().version.substr(0,3));!
if(this.isClickBug || this.nVersion 4.1) {!
we.oEvent.stop(jindo.$Event.CANCEL_DEFAULT);!
}!
feature

306. detection이

307. 좋지만

309.
때로는…⋯
//이런코드야

310. 말로

311. 주석이

312. 필요한

313. 코드다

314. HTML

315. ,

316. CSS

317. HTML,

318. CSS

319.
의

320. 표준

321. 방법을

322. 사용하자

323. !

324. 당신이

325. 웹

326. 표준을

327. 지키고

328. 있는지

329. 검사해보시라

330. !
HTML
http://validator.w3.org
!
!
CSS
http://jigsaw.w3.org/css-validator/validator.html.en

331. 브라우저에게

332. 렌더링

333. 방식을

334. 지정해

335. 줄

336. 수

337. 있는데

339.
그것이

340. DOCTYPE

341. !

342.
!
쉽게

343. 생각해서

344. HTML5

345. DOCTYPE를

346. 사용하자!
!DOCTYPE html

347. browser의

348. 기본

349. 스타일이

350. 제각각인

351. 경우가

352. 있음

353.
line

354. height,font

355. weight,

356. link

357. outlines

358. 등등

359.
reset.css

360. CSS3

361.
border-radius,

362. transition,transform,

363. keyframe,

364.
#menu{!
!
border-radius:15px;!
box-shadow:0 0 5px black;!
}
#menu{!
!
/*border-radius*/!
-webkit-border-radius:15px;!
-moz-border-radius:15px;!
border-radius:15px;!
!
/*box-shadow*/!
-webkit-box-shadow:0 0 5px black;!
-moz-box-shadow:0 0 5px black;!
box-shadow:0 0 5px black;!
}!
Prefix

365. !

366. IE

367. 만을

368. 위한

369. 분기!

370.
http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx
!--[if IE 8]!
style!
div {!
color : red;!
font-size : 10em;!
}!
/style!
![endif]--

371. 브라우저별

372. 차이를

373. 확인하자

374. !

375.
!
http://mashable.com/2014/02/26/browser-testing-tools/

376. 총

377. 정

378. 리

379. cross

380. browsing은

381. 전략이다
적용기능의

382. 지원

383. 브라우저를

384. 파악하자

385.
고객의

386. 환경을

387. 이해하자

388.
모든

389. 환경을

390. 지원해야

391. 한다면

392. 라이브러리를

393. 쓰자

394.
!
직접

395. 구현시에는

396. ‘기능’을

397. 탐지해서

398. 분기처리

399. 하자

400.
점진적인

401. 개선은

402. 아주

403. 좋은

404. 전략이다

405.
웹

406. 표준을

407. 지키려고

408. 노력하자

409.
검색하자.

410. 이미

411. 다른

412. 분들이

413. 경험한

414. 것들이다