JavaScript Minification

1. 자바스크립트

2. 압축의

3. 모든

4. 것 ABC

5. Talk

7. Steve

8. Ahn

9. 오늘은. -

11. 압축을

12. 왜

13. 하는지. -

14. 코드에서

15. 어떤

16. 부분을

17. 압축할

18. 수

19. 있는지. -

20. 어떤

21. 부분은

22. 압축할

23. 수

24. 없는지. -

25. 어떤

26. 도구들이

27. 있고

28. 어떤

29. 게

30. 가장

31. 좋은지. -

32. 압축한

33. 코드는

34. 어떻게

35. 디버깅하는

36. 게

37. 좋은지.

39. 압축. -

40. 압축(Compress),

41. 최소화(Minify),

42. 최적화(Optimize) -

43. 리소스

44. 크기를

45. 줄여

46. 네트워크

47. 비용을

48. 줄이기

49. 위함 -

50. 사용자가

51. 많다면

52. 더욱

53. 효과적일

54. 것(예:

55. jquery)

57. 압축의

58. 목표 -

59. 압축한

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. 방법! ---- /** * 구입할 수 있는 차종을 추천한다. * @param {Number} money * @return {String} */ function recommendCar(money) { } ---- function recommendCar(money){}

88. 지역변수를

89. 짧게! -

90. 안전하다! ---- function canBuyCar(brand, money, color) { var result = false; } ---- function canBuyCar(a, b, c) { var d = false; }

91. 어떤

92. 것들은

93. 압축할

94. 수

95. 없을까? -

96. 원시값은

97. 압축할

98. 수

99. 없다. ---- “문자열”, 2000, null, undefined, true, false -

100. 키워드

101. 또한

102. 압축할

103. 수

104. 없다. ---- this, var, return, for, if, else, ...

105. 전역변수와

106. 객체의

107. 프로퍼티 -

108. 다른

109. 스콥에서

110. 사용할

111. 가능성이

112. 있으므로

113. 안전하지

114. 않다. ---- var globalMessage = { 'SORRY': '죄송합니다' }; // globalMessage // globalMessage.SORRY

115. 나쁜

116. 건

117. 역시

118. 나쁘다. -

119. eval

120. 내의

121. 코드는

122. 지역변수에

123. 접근할

124. 수

125. 있기

126. 때문에

128. 안전하지

129. 않다. ---- function canBuyCar(brand, money, color) { eval('console.log(brand, money, color);'); } ---- function canBuyCar(a, b, c) { eval('console.log(brand, money, color);'); }

130. 쓰지

131. 말라는

132. 건

133. 쓰지

134. 않는

135. 게

136. 좋다. -

137. with

138. 구문에서

139. 컨텍스트의

140. 프로퍼티와

142. 지역변수를

143. 구분할

144. 수

145. 없기

146. 때문에

147. 안전하지

148. 않다. ---- function printCarMessage(message) { var vw = 'Das Auto'; with (message) { // message.vw ? // 지역변수 vw? console.log(vw); } }; printCarMessage({ vw: '다스 오토~' });

149. 쓰지

150. 말라는

151. 건

152. 쓰지

153. 않는

154. 게

155. 좋다. ---- function printCarMessage(a) { var b = 'Das Auto'; with (a) { console.log(vw? b?); } }

156. 좀

157. 더

158. 압축할

159. 만한

160. 게

161. 있을까? -

162. 객체의

163. 키

164. 따옴표를

165. 제거한다. ---- { 'brand': 'benz' } -- { brand: 'benz' } -

166. 프로퍼티

167. 정의를

168. dot

169. 연산자를

170. 사용하게

171. 바꾼다. ---- brand['benz'] -- brend.benz

172. 세미콜론 -

173. 안전한

174. 범위

175. 내에서

176. 세미콜론을

177. 삭제한다. ---- function buyCar(money) { return money * -1; } ---- function buyCar(money) { return money * -1 }

178. 브레이스 -

179. 안전한

180. 범위

181. 내에서

182. 브레이스를

183. 삭제한다. ---- if (money 5000) { buyBenz(money); } ---- if (money 5000) buyBenz(money);

184. var

185. 키워드 -

186. 함수

187. 내에서

188. var

189. 키워드를

190. 한

191. 번만

192. 사용하도록

193. 정리한다. ---- var brand = 'benz'; var money = 5000; ---- var brand = 'benz', money = 5000;

194. true/false를

195. 좀

196. 더

197. 짧게! -

198. true/false를

199. 키워드

200. 대신

201. 다른

202. 값으로

203. 사용한다. ---- true -- !0 false -- !1

204. 사용하지

205. 않는

206. 변수 -

207. 사용하지

208. 않는

209. 변수와

210. 함수를

211. 삭제한다. ---- $buyBtn.click(function (e) { console.log('BUY!'); }); ---- $buyBtn.click(function () { console.log('BUY!'); });

212. if

213. 구문 -

214. 단순한

215. if

216. 구문은

217. 표현식으로

218. 압축한다. ---- if (money) { buyCar(); } ---- money buyCar();

219. if~else

220. 구문 -

221. if~else

222. 구문은

223. 삼항

224. 연산자로

225. 압축한다. ---- if (money) { buyCar(); } else { workHard(); } ---- money ? buyCar() : workHard();

226. 문자열

227. 병합 -

228. 단순

229. 문자열의

230. 합은

231. 미리

232. 계산한다. ---- var str = buy + car + now; ---- var str = buycarnow;

233. 숫자

234. 연산 -

235. 단순한

236. 숫자

237. 연산은

238. 미리

239. 계산한다. ---- var hour = 1000 * 60 * 60; ---- var hour = 3600000;

240. 긴

241. 숫자 -

242. 긴

243. 숫자는

244. 지수법으로

245. 표현한다. ---- var hour = 3600000; ---- var hour = 36e5;

246. 지금까지

247. 찾아본

248. 압축

249. 대상 -

250. 주석,

251. 공백

252. 제거 -

253. 지역변수

254. 압축

255. 및

256. 정리 -

257. if/else

258. 구문

259. 압축 -

260. 키워드

261. 간소화

262. 및

263. 대체 -

264. 정적인

265. 연산

266. 선처리

267. 이제

268. 사람의

269. 관점에서. -

270. 저걸

271. 다

272. 신경쓰는

273. 건

274. 오바고,

277. 웬만한

278. 건

279. 압축

280. 도구가

281. 해줄

282. 것

283. 같은데. -

284. 실질적으로

285. 어떤

286. 걸

287. 신경쓰면

288. 될까?

289. 전역변수를

290. 지역변수로. -

291. 자주

292. 쓰이는

293. 전역변수는

295. 담아둔다. ---- var buyButton = document.getElementById('btn_buy_car'); ---- var doc = document; var buyButton = doc.getElementById('btn_buy_car');

296. 전역변수는

297. 필요할

298. 때만. -

299. 필요하지

300. 않는

301. 전역변수를

302. 만들지

303. 않는다. ---- function getPrivateInfo() {} function getPublicInfo() { return getPrivateInfo(); } ---- (function () { function getPrivateInfo() {} window.getPublicInfo() { return getPrivateInfo(); } }());

304. 프로퍼티는

305. 지역변수에. -

306. 자주

307. 쓰이는

308. 프로퍼티는

310. 담아둔다. ---- console.log(message.brand.benz.copy); ---- var benzMessage = message.brand.benz; console.log(benzMessage.copy);

311. 그

312. 외에~ -

313. 자주

314. 쓰이는

315. 문자열과

316. 숫자는

317. 상수로

318. 할당한다. -

319. eval과

320. with는

321. 쓰지

322. 않는다.

323. 정~말

324. 아쉬운

325. 상황이라면. -

326. 정말

327. 네트워크

328. 리소스를

329. 줄여야

330. 하는

331. 상황이라면,

333. 몇

334. 가지

335. 더

336. 고려할

337. 수

338. 있다.

339. this는

340. 지역변수로. -

341. 자주

342. 쓰이는

343. this는

344. 지역변수로

345. 할당한다. ---- function Car(brand, money, color) { this.brand = brand; this.money = money; this.color = color; } ---- function Car(brand, money, color) { var self = this; self.brand = brand; self.money = money; self.color = color; }

346. null과

347. undefined. -

348. null과

349. undefined도

350. 지역변수로

351. 할당해둔다. ---- var NULL = null, UNDEFINED; 또는 (function (NULL, UNDEFINED) { }(null));

352. return은

353. 한

354. 번만. ---- function getCar(money) { if (money 10000) { return 'PORSCHE'; } else if (money 5000) { return 'BMW'; } else { return 'VW'; } } ---- function getCar(money) { var result = 'VW'; if (money 10000) { result = 'PORSCHE'; } else if (money 5000) { return = 'BMW'; } return result; }

355. 압축

356. 도구엔

357. 어떤

358. 것들이

359. 있나? -

360. UglifyJS -

361. Closure

362. Compiler -

363. YUI

364. Compressor -

365. JSMin,

366. Packer,

367. ...

368. UglifyJS -

369. http://lisperator.net/uglifyjs/ -

370. 추천! -

371. 가장

372. 인기있는

373. 압축

374. 도구 -

375. 빠르고

376. 압축율도

377. 좋음 -

378. jQuery

379. 등

380. 여러

381. 상용

382. 라이브러리에서

383. 채택 -

384. Node

385. 기반으로

386. 구현 -

387. 온라인

388. 도구:

389. http://lisperator.net/uglifyjs/#demo -

390. Ruby

391. Wapper:

392. https://github.com/lautis/uglifier -

393. Maven

394. Plugin:

395. https://github.com/tqh/uglifyjs-maven-plugin

396. Closure

397. Compiler -

398. 구글에서

399. 개발 -

400. 압축률은

401. 가장

402. 좋으나,

403. 압축

404. 속도가

405. 느림 -

406. Advanced

407. 옵션에서는

408. 굉장히

409. 높은

410. 압축률을

411. 제공함 -

412. 구글의

413. 여러

414. 서비스에서

415. 사용하고

416. 있음 -

417. 압축

418. 뿐

419. 아니라

420. 코드

421. 분석

422. 기능도

423. 제공 -

424. 간혹

425. 압축

426. 코드가

427. 제대로

428. 동작하지

429. 않는

430. 경우가

431. 있다고

432. 함 -

433. Java

434. 기반으로

435. 구현 -

436. 온라인

437. 도구:

438. http://closure-compiler.appspot.com/

439. -

440. Ruby

441. Wapper:

442. https://github.com/documentcloud/closure-compiler

444. YUI

445. Compressor -

446. Yahoo

447. 에서

448. 개발 -

449. 한

450. 때

451. 잘

452. 나갔으나,

453. 현재는

454. Deprecated

455. 되었음. -

456. Yahoo에서는

457. Ugilfy를

458. 커스터마이징

459. yuglify를

460. 사용하고

461. 있음 -

462. yuglify:

463. https://github.com/yui/yuglify

465. 코드로

466. 직접

467. 압축해보기! -

468. 데모

469. 타~임!

470. 압축한

471. 코드

472. 디버깅하기 -

473. 소스맵(Source

474. Map) -

475. 압축한

476. 코드를

477. 원본에서

478. 확인할

479. 수

480. 있음 -

481. UglifyJS,

482. Closure

483. Compiler

484. 에서

485. 제공 -

486. http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/

487. 소스맵

488. 생성하기 1.

489. 압축

490. 도구에서

491. 소스맵

492. 옵션

493. 추가

497. Uglify:

498. --source-map

502. Closure

503. Compiler:

504. --create_source_map 2.

505. 압축된

506. 소스에

507. 주석

508. 추가

512. //@

513. sourceMappingURL=./source.js.map

514. (크롬)

518. //#

519. sourceMappingURL=./source.js.map

520. (크롬

521. 카나리) 3.

522. 크롬

523. 개발자

524. 도구에서

525. 소스맵

526. 옵션

527. 켜기

528. 코드에서

529. 직접

530. 디버깅해보기! -

531. 데모

532. 타~임!

533. #

534. 참고 -

535. http://alistapart.com/article/better-javascript-minification -

536. http://www.peterbe.com/plog/comparing-google-closure-with-uglifyjs -

537. http://net.tutsplus.com/tutorials/tools-and-tips/source-maps-101/

538. -

539. http://badassjs.com/post/971960912/uglifyjs-a-fast-new-javascript- compressor-for-node-js -

540. http://www.yuiblog.com/blog/2012/10/16/state-of-yui-compressor/

541. 끝!

542. 고맙습니다.

JavaScript Minification

More Related Content

Viewers also liked (15)

Similar to JavaScript Minification (20)

More from Ohgyun Ahn (6)

JavaScript Minification