2.네이버 프론트엔드 김지태

Download 2.네이버 프론트엔드 김지태

Post on 15-Jan-2015

10.147 views

Category:

Documents

0 download

Embed Size (px)

DESCRIPTION

 

TRANSCRIPT

  • 1. NHN

2. Technology 3. Services 4. 5. 6. in 7. 1 14 6 26 8. 2 jitae.kim@nhn.com NHNTechnologyServices My Works: Line for Firefox OS CHS 14 6 26 9. -? 3 14 6 26 10. 4 (Web) 14 6 26 11. 4 (Web) HTML CSS Javascript - 14 6 26 12. 4 (Web) HTML CSS Javascript - - JAVA PHP ASP Web SER- VER DB 14 6 26 13. 4 (Web) HTML CSS Javascript - - JAVA PHP ASP Web SER- VER DB 14 6 26 14. 4 (Web) HTML CSS Javascript - - JAVA PHP ASP Web SER- VER DB HTTP Protocol 14 6 26 15. - in : HTML, CSS, JavaScript UI - JavaScript 5 14 6 26 16. 6 14 6 26 17. 7 14 6 26 18. 8 14 6 26 19. YouTube 9 14 6 26 20. 10 14 6 26 21. - in NAVER 11 - 14 6 26 22. - in NAVER 11 - 14 6 26 23. - in NAVER 11 - JavaScript 14 6 26 24. - in NAVER 11 - JavaScript JavaScript UI Ajax - 14 6 26 25. - in NAVER 11 - JavaScript JavaScript UI Ajax - HTML5 node.js , , - 14 6 26 26. ! KEY POINT IT UI - - UI 12 14 6 26 27. - 13 14 6 26 28. : NHN Technology Services / UIT : 14 + @ : - - IT R&D - - https://www.facebook.com/groups/webfrontend/ 14 14 6 26 29. - 15 - / - 14 6 26 30. - 15 - / - 14 6 26 31. - 15 - / - 14 6 26 32. - 15 - / - 14 6 26 33. - 15 - / - 14 6 26 34. - * 16 14 6 26 35. 17 14 6 26 36. 18 UI/ 14 6 26 37. UI & 19 14 6 26 38. UI & 19 14 6 26 39. UI & 19 40. 41. 1. 42. 43. 2. 44. 45. 46. 3. 47. 48. 49. 4. 50. 51. 52. 53. 54. 14 6 26 55. UI & 19 56. 57. 1. 58. 59. 2. 60. 61. 62. 3. 63. 64. 65. 4. 66. 67. 68. 69. 70. 71. 72. 1. 73. 74. 75. 2. 76. 77. & 78. 79. () 3. 80. 81. 82. 83. 14 6 26 84. UI & 19 85. 86. 1. 87. 88. 2. 89. 90. 91. 3. 92. 93. 94. 4. 95. 96. 97. 98. 99. 100. 101. 1. 102. 103. 104. 2. 105. 106. & 107. 108. () 3. 109. 110. 111. 112. 113. 114. 1. 115. 116. 117. 118. 2. 119. 120. 121. 3. 122. 123. 4. 124. 125. 5. 126. 127. 128. 129. 14 6 26 130. UI & 19 131. 132. 1. 133. 134. 2. 135. 136. 137. 3. 138. 139. 140. 4. 141. 142. 143. 144. 145. 146. 147. 1. 148. 149. 150. 2. 151. 152. & 153. 154. () 3. 155. 156. 157. 158. 159. 160. 1. 161. 162. 163. 164. 2. 165. 166. 167. 3. 168. 169. 4. 170. 171. 5. 172. 173. 174. 175. 176. 177. () 1. 178. 179. 180. 181. 182. 2. 183. 184. 185. 186. 3. 187. 188. 189. 14 6 26 190. UI & 19 191. 192. 1. 193. 194. 2. 195. 196. 197. 3. 198. 199. 200. 4. 201. 202. 203. 204. 205. 206. 207. 1. 208. 209. 210. 2. 211. 212. & 213. 214. () 3. 215. 216. 217. 218. 219. 220. 1. 221. 222. 223. 224. 2. 225. 226. 227. 3. 228. 229. 4. 230. 231. 5. 232. 233. 234. 235. 236. 237. () 1. 238. 239. 240. 241. 242. 2. 243. 244. 245. 246. 3. 247. 248. 249. 250. 251. 252. 14 6 26 253. 20 UI/ 14 6 26 254. 21http://designzum.com/2014/02/19/top-best-javascript-framework-2014/ 14 6 26 255. 22 14 6 26 256. 23 14 6 26 257. 23 258. 259. 260. 261. 262. 263. ? 14 6 26 264. 23 265. 266. 267. 268. 269. 270. ? 271. 272. 273. 14 6 26 274. 24 UI/ 14 6 26 275. DOM , , UI, 25http://html5experts.kr/archives/2039 14 6 26 276. 26 14 6 26 277. 26 14 6 26 278. 26 279. 280. 281. 282. ... 14 6 26 283. 26 284. 285. 286. 287. ... 14 6 26 288. 26 289. 290. 291. 292. ... DOM 293. 294. 295. 296. ? 297. 298. 299. 300. 301. 302. ? 14 6 26 303. 26 304. 305. 306. 307. ... DOM 308. 309. 310. 311. ? 312. 313. 314. 315. 316. 317. ? 14 6 26 318. 26 319. 320. 321. 322. ... 323. 324. & 325. 326. 327. 328. 329. 330. 331. . DOM 332. 333. 334. 335. ? 336. 337. 338. 339. 340. 341. ? 14 6 26 342. 26 343. 344. 345. 346. ... 347. 348. & 349. 350. 351. 352. 353. 354. 355. . DOM 356. 357. 358. 359. ? 360. 361. 362. 363. 364. 365. ? 366. 367. 368. 369. 370. 371. . 14 6 26 372. 27 UI/ 14 6 26 373. , , 28 14 6 26 374. ? 29 14 6 26 375. 1. 2. 3. , 4. 5. 30 14 6 26 376. ! KEY POINT () ... 31 14 6 26 377. 32 14 6 26 378. 33 API 14 6 26 379. UI UI 34 14 6 26 380. 35 API 14 6 26 381. API - Ajax UI - API API - 36 14 6 26 382. API 37 14 6 26 383. API 37 14 6 26 384. API 37 14 6 26 385. API 37 14 6 26 386. API 37 14 6 26 387. API 37 14 6 26 388. API 37 14 6 26 389. ! KEY POINT API - API 38 14 6 26 390. 39 14 6 26 391. 40 / 14 6 26 392. git gitlab github 41 14 6 26 393. 42 / 14 6 26 394. Yeoman, Grunt-init, HTML5 boilerplate, github 43 14 6 26 395. 44 / 14 6 26 396. & npm, bower / NPM : https://www.npmjs.org Bower: http://bower.io/search/ 45 14 6 26 397. bower & 46 14 6 26 398. bower & 46 14 6 26 399. bower & 46 14 6 26 400. bower & 46 14 6 26 401. bower & 46 14 6 26 402. bower & 46 --save bower.json 14 6 26 403. & 47 14 6 26 404. & 47 14 6 26 405. & 47 14 6 26 406. & 47 14 6 26 407. & 47 14 6 26 408. 48 / 14 6 26 409. JavaScript UI - JavaScript 49 14 6 26 410. 50 14 6 26 411. 50 14 6 26 412. 50 14 6 26 413. 50 14 6 26 414. 50 14 6 26 415. 50 14 6 26 416. 50 14 6 26 417. 50 14 6 26 418. 50 14 6 26 419. 51 14 6 26 420. 51 14 6 26 421. ! KEY POINT (, ) yeoman, bower, npm, grunt & , , 52 14 6 26 422. / 53 14 6 26 423. 1. CSS, JS 2. CSS, JS 3. CSS, JS html 4. API 54 14 6 26 424. 1. CSS, JS 2. CSS, JS 3. CSS, JS html 4. API 54 425. 426. 427. 428. 429. 14 6 26 430. 55 14 6 26 431. Grunt Copy, Clean, Uglifyjs, JSDoc CoffeeScript, SASS Grunt 56 14 6 26 432. 57 14 6 26 433. 57 14 6 26 434. 57 14 6 26 435. 57 14 6 26 436. 57 14 6 26 437. 57 14 6 26 438. 58 14 6 26 439. 58 14 6 26 440. 58 14 6 26 441. 58 14 6 26 442. 58 14 6 26 443. 59 14 6 26 444. YSlow, PageSpeed 60 14 6 26 445. 70~80% 61 14 6 26 446. Chrome Network Timeline Profiles JavaScript CPU 62 14 6 26 447. 63 14 6 26 448. 64 1 2 14 6 26 449. 64 1 2 14 6 26 450. 64 1 2 14 6 26 451. 64 1 2 QA 14 6 26 452. 64 1 2 QA 14 6 26 453. 64 1 2 QA 14 6 26 454. 64 1 2 QA 14 6 26 455. 65 14 6 26 456. - - 66 14 6 26 457. ! KEY POINT Grunt Grunt (YSlow, Pagespeed ) 70~80% 67 14 6 26 458. - 68 14 6 26 459. ( ), ( ) API API 69 14 6 26 460. Jindo ,,UI 70 14 6 26 461. Line for Firefox OS OSFirefoxOS- localStorage, Indexeddb, web worker HTML5 long-polling push FirefoxOSAPI(,sdcard,) 71https://marketplace.refox.com/app/line 14 6 26 462. 2014 - 72 14 6 26 463. D2 in HTML5 mongodb, express, nodejs - - - Full-Stack 73 14 6 26 464. ! KEY POINT - , Silver light HTML5 node.js full-stack 74 14 6 26 465. 75 14 6 26 466. 75 . 14 6 26 467. 75 . 14 6 26 468. 76 14 6 26 469. 76 . 14 6 26 470. 76 . 14 6 26 471. 76 . 14 6 26 472. 76 . 14 6 26 473. 76 . 14 6 26 474. 77 14 6 26 475. 78 14 6 26 476. 78 IT 14 6 26 477. 78 IT . 14 6 26 478. 79http://www.internetlivestats.com/internet-users/ 14 6 26 479. 70 79http://www.internetlivestats.co