자바스크립트 압축의 모든 것 / @ABC Talk #6

1. 자바스크립트

2. 압축의

3. 모든

4. 것
ABC

5. Talk

6. /

7. Steve

8. Ahn

9. 오늘은.
-

10. 자바스크립트

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. 좋은지.

38. 자바스크립트

39. 압축.
-

40. 압축(Compress),

41. 최소화(Minify),

42. 최적화(Optimize)
-

43. 리소스

44. 크기를

45. 줄여

46. 네트워크

47. 비용을

48. 줄이기

49. 위함
-

50. 사용자가

51. 많다면

52. 더욱

53. 효과적일

54. 것(예:

55. jquery)

56. 자바스크립트

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. 전역변수는

294. 지역변수에

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. 프로퍼티는

309. 지역변수에

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. 고맙습니다.