Karma 시연 영상 : http://youtu.be/IsvLKNqwgV0 Node.js 디버깅 시연 영상 : http://youtu.be/nPQPzAIiQyI Grunt 시연 영상 : http://youtu.be/Y8TxUCPaFZ0

1. 진보한

2. 개발

3. 환경에서

4.
품질

5. 좋은

6. 코드

7. 생산

8. !

9.
background

10. :

11. http://goo.gl/OFXKv0

13. NHN

14. Technology

15. services

16.
Front-End

17. Development

18. Team

19.
이름

20.
이메일

21.
TECH@NAVER

22. 프런트엔드

23. 개발의

24. 모든

25. 것(가제)

26. 집필

27. 중

28.
방법론,

29. 패턴,

30. 설계

31. 등

32. 공학적인

33. 것

34.
힙합과

35. 사케를

36. 좋아하는

37. 프런트엔드개발팀의

38. 코드소총수

39.
주우영(코드소총수)

40.
uyeong21c@gmail.com

41.
짧은소개

42.
관심분야

43.
특이사항

48.
진보한

49. 개발

50. 환경

51.
품질

52. 좋은

53. 코드

54. 생산

55.
성숙한

56. 방법론

57.
연구된

58. 설계와

59. 패턴

60.
고수준

61. 라이브러리

62.
통합된

63. 개발

64. 환경

65. 도구

66.
Unit

67. Test

68.
Code

69. Lint

70.
Task

71. Automation

72.
Test-runnerCoverage

73.
background

74. :

75. http://goo.gl/9C6UOQ

80.
성숙한

81. 방법론

82.
연구된

83. 설계와

84. 패턴

85.
고수준

86. 라이브러리

87.
통합된

88. 개발

89. 환경

90. 도구

91.
Unit

92. Test

93.
Code

94. Lint

95.
Task

96. Automation

97.
Test-runnerCoverage

98.
WebStorm

99.
Karma

100.
JSLint

101.
Grunt

102.
background

103. :

104. http://goo.gl/9C6UOQ

109.
WebStorm

110.
Karma

111. JSLint

112. Grunt

113. Debugger

114.
background

115. :

116. http://goo.gl/9C6UOQ

118. 좋은

119. IDE란

120.
무엇인가?

121. 01

122.
background

123. :

124. http://goo.gl/aNOKJ6

126. 오류없는

127. 코드를

128. 빠르게

129. 생산할

130. 수

132.
있도록

133. 하는

134. 쾌적한

135. 개발

136. 도구

137.
Code

138. lint

139.
Refactor

140.
Test-runner

141.
Debugger

143.
Auto-complete

144.
Hinting

145.
Code

146. Trace

147.
Highlighter

148.
Reliability

149.
Scalability

150.
오류없는

151. 코드를

152.
빠르고

153.
쾌적하게

154.
Integrated

156.
Development

158.
Environment

160. 좋은

161. IDE를

162.
소개합니다.

163. 02

164.
background

165. :

166. http://goo.gl/eHqY5O

168. Sublime

169.
Text

171. 구글의

172. 엔지니어였던

173. Jon

174. Skimmer는

176.
2005년

177. 12월

178. 부터

179. 3D

180. 가속

181. 기능을

183.
갖춘

184. 텍스트

185. 편집기를

186. 상상해

187. 왔다가

189.
2007년

190. 11월에

191. 첫

192. 프로토타입을

194.
개발했다.

196.
이후

197. 편집기를

198. 완성하고자

199. 구글

201.
엔지니어를

202. 그만두고

203. 개발에

204. 몰두

205.
하여

206. SublimeText1을

207. 2008년에

209.
발표했다.

211.
가볍고

212. 편리하여

213. 많은

214. 프런트엔드

215.
개발자들이

216. 주

217. 에디터로

218. 사용하고

219. 있
다 .

220.
Sublime

221.
Text

223. Web

224. WebStorm은

225. IntelliJ로

226. 유명한

227.
JetBrains사

228. 에서

229. 개발한

230. 크로스

232.
플랫폼

233. 프런트엔드

234. 전용

235. IDE다.

238.
2009년

239. 부터

240. 개발하여

241. 2010년에

242. 1.0

244.
베타를

245. 발표했으며

246. 지금은

247. 버전

248. 8이다.

250.
프런트엔드

251. 개발

252. 도구에는

253. 없던

254. 많은

255.
기능을

256. 갖추고

257. 있어

258. 매니아

259. 사용층이

261.
생기기

262. 시작했다.

264.
Storm

266. Why

267. did

268. we

269. choose

271.
이전까지의

272. 프런트엔드

273. 개발

274. 도구는

275.
기능이나

276. 안정성이

277. 상당히

278. 미흡했다.

280.
WebStorm은

281. Auto-complete

282.
Code

283. trace,

284. lint,

285. Test-runner

286. 그리고

288.
Debugger

289. 등을

290. 지원하며

291. 무엇보다

293.
신뢰할

294. 수

295. 있는

296. 리팩토링

297. 기능을

299.
지원하면서

300. 프런트엔드

301. 개발

302. 환경은

304.
한층

305. 진보했다.

307.
우리는

308. 여기에서

309. 얻을

310. 수

311. 있는

312. 수

313. 많은

314.
장점을

315. 취하고자

316. 채택하여

317. 사용하고

319.
있다.

320.
Web

321.
Storm

323. 문서화를

324. 위한

325.
JSDoc3

326. 03

327.
background

328. :

329. http://goo.gl/uxWq1E

331. JSDoc3

332.
JAVADoc과

333. 비슷한

334. 형식의

336.
구문을

337. 사용하는

338. 자바스크립트

340.
문서화

341. 도구

343. 변수나

344. 전달인자의

345. 타입을

346. 나타낸다.

347.
@type(@param)

348.
/**
* @param {Object} obj
* @param {string|number} key
*/
var findBy = function(obj, key){
// do something...
};
/**
* @type {string}
*/
var any = ‘name’;

349. 함수나

350. 메서드의

351. 반환

352. 타입을

353. 나타낸다.

354.
@returns

355.
/**
* @returns {boolean}
*/
function isString(){
return false;
}

356. 원시타입,

357. 객체타입,

358. 배열타입

359. 등

360. 다양한

361. 타입을

362. 나타낼

363. 수

364. 있다.

365.
Type

366. names

367.
/**
* @type {number|string}
* @type {Object}
* @type {ClassName}
* @type {Array.string}
*/

368. WebStorm의

369.
정적

370. 분석

371. 능력

372. 04

373.
background

374. :

375. http://goo.gl/SzRHgs

377. 전달인자

378. 타입

379. 힌팅

381.
전달인자가

382. 기대하는

383. 형을

385.
분석하여

386. 사용자에게

387. 힌팅

388.
해주는

389. 기능

391. CODE

392.
/**
* @param {Array} arr
* @param {string|number} key
*/
var findBy = function(arr, key){
// do something...
};

393. DEMO

395. DEMO

396.
작성된

397. 함수를

398. 찾아

399. 자동

400. 완성

401. 한다.

402.
JSDoc3

403. 주석을

404. 분석하여

405. 전달인자의

407.
타입

408. 정보도

409. 제공한다.

411. DEMO

412.
전달인자를

413. 입력하게

414. 되면

415. 툴팁으로

417.
함수가

418. 기대하는

419. 전달인자

420. 갯수와

421.
이름

422. 그리고

423. 타입

424. 정보를

425. 제공한다.

427.
사용자는,

428. 함수

429. 코드를

430. 알

431. 필요

432. 없이

433.
적절한

434. 값을

435. 전달하여

436. 함수를

437. 사용할

438. 수

439.
있다.

441. DEMO

442.
전달인자를

443. 입력하는

444. 위치를

445.
하일라이팅

446. 하여

447. 알려준다.

449. 타입

450. 오류

451. 경고

453.
형을

454. 추론하여

455. 변수

456. 대입이나

458.
사용에

459. 문제가

460. 있다고

461. 판단되면

462.
경고

463. 메시지를

464. 출력하는

465. 기능

467. DEMO/1

468.
정수형이나

469. 문자열

470. 타입을

471.
가지는

472. some이라는

473. 변수를

475.
선언했다.

477. DEMO/1

478.
정수를

479. 대입하면

480. 문제

481. 없다.

482.
문자열을

483. 대입해도

484. 문제

485. 없다.

486.
리터럴

487. 객체를

488. 대입하니

489.
잘못된

490. 타입을

491. 대입했다고

492.
경고한다.

494. 변수

495. 뿐만

496. 아니라

497. 전달인자의

498.
타입도

499. 검증한다.

500.
DEMO/2

502. 복잡한

503. 관계도

504. 분석하여

505. 검증한다.

506.
이

507. 예제는

508. number

509. 타입을

510. 반환하는

512.
location

513. 함수의

514. 결과

515. 값을

516. boolean

518.
타입의

519. result

520. 변수에

521. 대입했기

522.
때문에

523. 경고창을

524. 출력한다.

525.
DEMO/3

527. 객체와

528. 배열의

529. 멤버

530.
자동

531. 완성

532.
객체의

533. 키나

534. 배열의

535. 원소

538.
타입을

539. 추론하여

540. 자동

541. 완성

543.
해주는

544. 기능

546. CODE/1
var Phone = function(){this.init.apply(this, arguments);};
Phone.prototype = {
id : 0,
type : '',
model : '',
name : '',
/**
* @constructs
*/
init : function(id, type, model, name){
this.id = id;
this.type = type;
this.model = model;
this.name = name;
}
};

547. CODE/2
var Phones = function(){this.init.apply(this, arguments);};
Phones.prototype = {
/**
* @type {Array.Phone}
*/
_phones : null,
/**
* @constructs
*/
init : function(){
this._phones = [];
},
/**
* @returns {Array.Phone}
*/
getPhones : function(){
return this._phones;
}
};

548. DEMO

549.
Phone

550. 객체가

551. 있다.

552. 이

553. 객체는

554. 핸드폰의

556.
id,

557. type,

558. model,

559. name

560. 같은

561. 정보를

562. 갖는다.

564. DEMO

565.
Phone

566. 객체를

567. 배열로

568. 가지고

569. 있는

570. 컬렉션

571. 객체다.

573.
getPhones

574. 메서드는

575. Phone

576. 객체를

577. 원소로

578. 갖는

579.
배열을

580. 반환한다.

582. DEMO

583.
이제

584. 각

585. 엘리먼트에

586. 첫

587. 번째

588. 핸드폰의

589. 정보를

590.
대입해야

591. 한다고

592. 하자.

594. DEMO

595.
먼저

596. Phones

597. 객체의

598. 인스턴스를

599. 생성한다.

601. DEMO

602.
이제

603. 값을

604. 대입해보자.

605. Phones

606. 객체가

607.
가진

608. 메서드를

609. 자동

610. 완성

611. 해준다.

612.
phones

613. 객체에

614. getPhones

615. 메서드가

617.
있다는걸

618. 알

619. 수

620. 있다.

622. DEMO

623.
getPhones()

624. 메서드의

625. 리턴

626. 값에

627.
접근하니

628. 배열

629. 메서드들이

630. 자동

631. 완성

632. 된다.

633.
사용자는

634. getPhones

635. 메서드가

636. 배열을

638.
반환

639. 한다는

640. 것을

641. 알

642. 수

643. 있다.

645. DEMO

646.
반환되는

647. 배열의

648. 원소는

649. Phone

650. 객체

651. 이므로

652.
Phone

653. 객체가

654. 가지고

655. 있는

656. 프로퍼티가

658.
자동

659. 완성

660. 된다.

662. DEMO

663.
이

664. 기능을

665. 이용해면

666. 빠르고

667. 오타율이

668. 적은

669.
타이핑을

670. 할

671. 수

672. 있게

673. 된다.

675. WebStorm과

676.
Refactoring

677. 05

678.
background

679. :

680. http://goo.gl/xBkwRe

682. Refactoring

683.
코드

684. 수정으로

685. 발생할

686. 수

688. 있는

689.
오류를

690. 최대한

691. 낮추면서

693.
코드를

694. 정리하는

695. 기법

697. Rename

698.
메서드의

699. 이름이

700. 그

701. 목적을

702. 드러내지

703.
못하고

704. 있다면

705. 메서드의

706. 이름을

708.
바꿔라.

710.
마틴

711. 파울러

712.
Refactoring

714. DEMO/1

715.
translateX

716. 함수가

717. 있다.

718.
이

719. 함수의

720. 지역

721. 변수인

722.
velocity의

723. 이름을

724. speed로

725.
rename

726. 하고

727. 싶다고

728. 하자.

730. DEMO/1

731.
변경하고자

732. 하는

733. 지역

734. 변수를

735.
오른쪽

736. 마우스

737. 클릭하고

738.
Refactor

739. -

740. rename

741. 순으로

742.
메뉴를

743. 선택한다.

745. DEMO/1

746.
지역

747. 변수를

748. rename할

749. 수

750. 있는

751.
모드로

752. 변환

753. 됐다.

756.
이제

757. 이름을

758. 변경한다.

760. DEMO/1

762. DEMO/1

764. DEMO/1

766. DEMO/1

768. DEMO/1

769.
이처럼

770. 함수나

771. 메서드

772. 몸체

773. 내의

774.
지역

775. 변수를

776. 한꺼번에

777. 변경할

778. 수

779. 있다.

781.
직접

782. 지역

783. 변수를

784. rename

785. 하는

786. 것은

787.
실수

788. 할

789. 수

790. 있지만

791. 이

792. 기능을

793. 사용하면

794.
미연에

795. 방지할

796. 수

797. 있다.

799. DEMO/2

800.
Greeter.js의

801. Greeter

802. 객체는

803.
sayHello

804. 메서드를

805. 가지고

806. 있다.

808. DEMO/2

809.
그리고

810. playground.js에서

811.
Greeter

812. 객체의

813. sayHello

814. 메서드를

815.
사용

816. 중

817. 이다.

820. DEMO/2

821.
그럼

822. sayHello를

823. rename

824. 해보자.

825.
sayHello

826. 메서드에서

827. 마우스

828. 오른쪽

829. 버튼을

830.
클릭하여

831. Refactor

832. -

833. rename

834. 순으로

836.
메뉴를

837. 클릭한다.

839. DEMO/2

840.
Rename

841. 팝업

842. 창이

843. 열리면

844. 변경

845. 하고자

846.
하는

847. 메서드

848. 명을

849. 입력한

850. 후

851. Refactor

852. 버튼을

853.
클릭한다.

855. DEMO/2

856.
sayHello

857. 메서드를

858. greet

859. 메서드로

860.
Rename

861. 했다.

862. 그럼

863. 이

864. 메서드를

866.
사용하는

867. 측은

868. 어떻게

869. 되었을까?

871. DEMO/2

872.
playground.js의

873. 소스

874. 코드

875. 역시

876.
Rename이

877. 반영

878. 됐다.

881.
이처럼

882. 의존하고

883. 있는

884. 코드를

885. 분석하고

886.
반영하여

887. 안전성이

888. 보장되도록

889. rename을

890.
지원한다.

892. Safe

893. Delete

894.
삭제하려고

895. 하는

896. 변수나

897. 객체의

899.
의존

900. 관계를

901. 파악하여

902. 안전성을

904.
검사해

905. 알려준다.

906.
Refactoring

908. DEMO

909.
greet

910. 메서드를

911. 삭제하려고

912. 한다.

913.
이

914. 메서드는

915. public

916. 메서드이므로

917.
다른

918. 곳에서

919. 사용하고

920. 있을

921. 가능성이

922.
많다.

924. Greet

925. 메서드를

926. playground.js에서

927.
사용하고

928. 있다.

929. 유지보수

930. 개발자가

931. 이

932. 사실을

933.
모른체

934. 삭제한다면

935. 오류가

936. 날

937. 것이다.

939.
그렇다고

940. 여러개의

941. 파일을

942. 전부

943. 검색해서

944.
의존

945. 코드를

946. 찾을

947. 수도

948. 없다.

949.
DEMO

951. Greet

952. 메서드에서

953. 마우스

954. 오른쪽

955. 버튼을

956.
클릭하여

957. Refactor

958. -

959. safe

960. Delete

961. 순으로

962.
메뉴를

963. 선택한다.

964.
DEMO

966. Safe

967. Delete

968. 팝업창이

969. 열리면

970.
OK

971. 버튼을

972. 클릭하여

973. 진행한다.

974.
DEMO

976. 그러면

977. 어디선가

978. 사용되고

979. 있어

980.
위험하다고

981. 경고한다.

983.
View

984. usages

985. 버튼을

986. 클릭한다.

987.
DEMO

989. 하단

990. 패널에

991. 어느

992. 파일의

993. 몇번째

994. 라인에서

995.
의존하고

996. 있는지

997. 읽기

998. 쉽게

999. 출력한다.

1000.
DEMO

1002. DEMO

1003.
해당하는

1004. 코드에서

1005. 오른쪽

1006. 마우스

1007. 버튼을

1008.
클릭하여

1009. Jump

1010. to

1011. Source

1012. 메뉴를

1013. 선택하면

1015. DEMO

1016.
의존하는

1017. 코드로

1018. Trace

1019. 된다.

1021. Inline

1022. Method

1023.
메서드의

1024. 몸체가

1025. 메서드의

1026. 이름만큼

1027.
이나

1028. 명확할

1029. 때는

1030. 호출하는

1031. 곳에

1032.
메서드

1033. 몸체를

1034. 넣고,

1035. 메서드를

1036. 삭제

1037.
하라.

1039.
마틴

1040. 파울러

1041.
Refactoring

1043. DEMO

1044.
_createMessage

1045. 메서드는

1046. 로직이

1047.
단순하고

1048. 코드

1049. 자체로

1050. 의미를

1051. 잘

1052. 나타내

1053.
주고

1054. 있기

1055. 때문에

1056. 별도의

1057. 메서드를

1058. 만들

1059.
필요가

1060. 없다.

1062. DEMO

1063.
마우스

1064. 오른쪽

1065. 버튼을

1066. 클릭하여

1067.
Refactor

1068. -

1069. Inline

1070. 순으로

1071. 메뉴를

1072.
선택한다.

1074. DEMO

1075.
상단의

1076. 라디오

1077. 버튼을

1078. 선택한

1079. 후

1080.
Refactor

1081. 버튼을

1082. 클릭한다.

1084. DEMO

1085.
_createMessage

1086. 메서드는

1087. 삭제되고

1088. 메서드를

1089.
사용하고

1090. 있던

1091. greet

1092. 메서드에

1093. inline

1094. 되었다.

1096. Extract

1097. Parameter

1098.
함수나

1099. 메서드

1100. 몸체에

1101. 하드코딩

1103.
되어있는

1104. 값을

1105. 전달인자로

1106. 대체한다.

1107.
Refactoring

1109. DEMO

1110.
엘리먼트의

1111. ID값과,

1112. 메시지

1113. 값이

1114.
하드

1115. 코딩

1116. 되어있다.

1117. 처음엔

1118. 문제

1119. 없었지만

1120.
요구사항의

1121. 변동으로

1122. 이

1123. 값이

1124. 동적으로

1125.
바뀌어야

1126. 한다.

1128. DEMO

1129.
하드

1130. 코딩된

1131. 값을

1132. 드래그

1133. 하여

1134. 마우스

1135.
오른쪽

1136. 버튼을

1137. 클릭한

1138. 후

1139. Refactor

1140. -

1141.
Extract

1142. -

1143. Parameter

1144. 순으로

1145. 메뉴를

1146.
선택한다.

1148. DEMO

1149.
그러면

1150. 전달인자로

1151. ID

1152. 값을

1153. 받을

1154. 수

1155. 있고,

1156.
만약

1157. 생략되면

1158. 값이

1159. 초기화

1160. 되도록

1161. 리팩토링

1162. 된다.

1164. DEMO

1165.
2번째

1166. 값도

1167. 같은

1168. 방법으로

1169. 리팩토링

1170. 한다.

1172. Extract

1173. Method

1174.
그룹으로

1175. 함께

1176. 묶을

1177. 수

1178. 있는

1179. 코드

1180.
조각이

1181. 있으면,

1182. 코드의

1183. 목적이

1184. 잘

1185.
드러나도록

1186. 메소드의

1187. 이름을

1188. 지어

1189.
별도의

1190. 메서드로

1191. 뽑아낸다.

1193.
마틴

1194. 파울러

1195.
Refactoring

1197. DEMO

1198.
배너를

1199. 출력하는

1200. 로직은

1201. 메서드로

1202. 작성되어

1203. 있지만

1204.
이

1205. 코드는

1206. 무엇을

1207. 하는

1208. 코드인지

1209. 쉽게

1210. 읽기

1211. 어렵다.

1213. DEMO

1214.
Extract

1215. 할

1216. 코드를

1217. 선택한

1218. 후

1219. 마우스

1220. 오른쪽

1221. 버튼을

1222.
클릭하고

1223. Refactor

1224. -

1225. Extract

1226. -

1227. Method

1228. 순으로

1229.
메뉴를

1230. 선택한다.

1232. DEMO

1233.
그러면

1234. 자바스크립트

1235. 친화적으로

1236. 어느

1237.
공간에

1238. Extract

1239. 할

1240. 것이지

1241. 묻는다.

1242.
Global은

1243. 전역

1244. 공간,

1245. Object

1246. assigned는

1247.
객체

1248. 내부에,

1249. function

1250. 은

1251. 현재

1252. 함수

1253. 안을

1254.
뜻한다.

1256.
Object

1257. assigned

1258. to

1259. Greeter3.prototype을

1260.
선택한다.

1262. DEMO

1263.
메서드

1264. 명을

1265. 지정하고

1266. OK

1267. 버튼을

1268. 클릭한다.

1270. DEMO

1271.
코드가

1272. 리팩토링되어

1273. 한결

1274. 읽기

1275. 쉬워졌다.

1277. WebStorm과

1278.
코드

1279. 품질

1280. 검증

1281. 03

1282.
background

1283. :

1284. http://goo.gl/33IXCG

1286. JSLint

1287.
자바스크립트

1288. 코드의

1289. 구문
을

1290. 검사할

1291. 목적으로

1292. 만들어진

1293.
품질

1294. 검증

1295. 도구

1297. Setting

1299. Setting

1301. DEMO/1

1302.
변수

1303. i

1304. 에

1305. 빨간색

1306. 밑

1307. 줄이

1308. 보인다.

1310.
var

1311. 키워드는

1312. 스코프를

1313. 나타내는

1315.
키워드로써,

1316. 애써

1317. 여러번

1318. 선언하지

1319.
않아도

1320. 된다.

1322.
이

1323. 같은

1324. 사항을

1325. JSLint가

1326. 실시간

1328.
검증

1329. 하여

1330. 에러임을

1331. 나타내고

1333.
있다.

1335. DEMO/1

1336.
또한,

1337. 우측

1338. 상단에서

1339. 코드

1340. 품질

1341. 상태를

1342.
바로

1343. 알

1344. 수

1345. 있다.

1346. 빨간색에

1347. 가까울수록

1348.
코드에

1349. 오류나

1350. 경고가

1351. 많다는