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. 전달인자의

406. 타입

407.
정보도

408. 제공한다.

410. DEMO

411.
전달인자를

412. 입력하게

413. 되면

414. 툴팁으로

416.
함수가

417. 기대하는

418. 전달인자

419. 갯수와

420.
이름

421. 타입

422. 정보를

423. 제공한다.

425.
사용자는,

426. 함수

427. 코드를

428. 알

429. 필요

430. 없이

431.
적절한

432. 값을

433. 전달하여

434. 함수를

435. 사용할

436. 수

437.
있다.

439. DEMO

440.
전달인자를

441. 입력하는

442. 위치를

443.
하일라이팅

444. 하여

445. 알려준다.

447. 타입

448. 오류

449. 경고

451.
형을

452. 추론하여

453. 변수

454. 대입이나

456.
사용에

457. 문제가

458. 있다고

459. 판단되면

460.
경고

461. 메시지를

462. 출력하는

463. 기능

465. DEMO/1

466.
정수형이나

467. 문자열

468. 타입을

469.
가지는

470. some이라는

471. 변수를

473.
선언했다.

475. DEMO/1

476.
정수를

477. 대입하면

478. 문제

479. 없다.

480.
문자열을

481. 대입해도

482. 문제

483. 없다.

484.
리터럴

485. 객체를

486. 대입하니

487.
잘못된

488. 타입을

489. 대입했다고

490.
경고한다.

492. 변수

493. 뿐만

494. 아니라

495. 전달인자의

496.
타입도

497. 검증한다.

498.
DEMO/2

500. 복잡한

501. 관계

502. 역시

503. 분석하여

504. 검증한다.

505.
이

506. 예제는

507. number

508. 타입은

509. 반환하는

511.
location

512. 함수의

513. 결과값을

514. boolean

516.
타입의

517. result

518. 변수에

519. 대입했기

520.
때문에

521. 경고창을

522. 출력한다.

523.
DEMO/3

525. 객체와

526. 배열의

527. 멤버

528.
자동

529. 완성

530.
객체의

531. 키나

532. 배열의

533. 원소

536.
타입을

537. 추론하여

538. 자동

539. 완성

541.
해주는

542. 기능

544. 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;
}
};

545. 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;
}
};

546. DEMO

547.
Phone

548. 객체가

549. 있다.

550. 이

551. 객체는

552. 핸드폰의

554.
id,

555. type,

556. model,

557. name

558. 같은

559. 정보를

560. 갖는다.

562. DEMO

563.
여러개의

564. Phone

565. 객체를

566. 배열로

567. 가지고

568. 있는

569.
컬렉션

570. 객체다.

571. getPhones

572. 메서드는

573. Phone

574. 객체를

575.
원소로

576. 갖는

577. 배열을

578. 반환한다.

580. DEMO

581.
이제

582. 각

583. 엘리먼트에

584. 첫

585. 번째

586. 핸드폰의

587. 정보를

588.
대입해야

589. 한다고

590. 하자.

592. DEMO

593.
먼저

594. Phones

595. 객체의

596. 인스턴스를

597. 생성한다.

599. DEMO

600.
이제

601. 값을

602. 대입해보자.

603. Phones

604. 객체가

605.
가진

606. 메서드를

607. 자동

608. 완성

609. 해준다.

610.
여기에서

611. phones

612. 객체에

613. getPhones

614.
메서드가

615. 있다는걸

616. 알

617. 수

618. 있다.

620. DEMO

621.
getPhones()

622. 메서드의

623. 리턴

624. 값에

625.
접근하니

626. 배열

627. 메서드들이

628. 자동

629. 완성

630. 된다.

631.
사용자는

632. getPhones

633. 메서드가

634. 배열을

636.
반환

637. 한다는

638. 것을

639. 알

640. 수

641. 있다.

643. DEMO

644.
반환되는

645. 배열의

646. 원소는

647. Phone

648. 객체

649. 이므로

650.
Phone

651. 객체가

652. 가지고

653. 있는

654. 프로퍼티가

656.
자동

657. 완성

658. 된다.

660. DEMO

661.
이

662. 기능을

663. 이용해면

664. 빠르고

665. 오타율이

666. 적은

667.
타이핑을

668. 할

669. 수

670. 있게

671. 된다.

673. WebStorm과

674.
Refactoring

675. 05

676.
background

677. :

678. http://goo.gl/xBkwRe

680. Refactoring

681.
코드

682. 수정으로

683. 발생할

684. 수

686. 있는

687.
오류를

688. 최대한

689. 낮추면서

691.
코드를

692. 정리하는

693. 기법

695. Rename

696.
메서드의

697. 이름이

698. 그

699. 목적을

700. 드러내지

701.
못하고

702. 있다면

703. 메서드의

704. 이름을

706.
바꿔라.

708.
마틴

709. 파울러

710.
Refactoring

712. DEMO/1

713.
TranslateX

714. 함수가

715. 있다.

716.
이

717. 함수의

718. 지역

719. 변수인

720.
velocity의

721. 이름을

722. speed로

723.
rename

724. 하고

725. 싶다고

726. 하자.

728. DEMO/1

729.
변경하고자

730. 하는

731. 지역

732. 변수를

733.
오른쪽

734. 마우스

735. 클릭하고

736.
Refactor

737. -

738. rename

739. 순으로

740.
메뉴를

741. 클릭한다.

743. DEMO/1

744.
지역

745. 변수

746. Rename

747. 모드로

749.
변환

750. 됐다.

751. 이제

752. 이름을

753. 변경한다.

755. DEMO/1

757. DEMO/1

759. DEMO/1

761. DEMO/1

763. DEMO/1

764.
이처럼

765. 함수나

766. 메서드

767. 몸체내의

768.
지역

769. 변수를

770. 한꺼번에

771. 변경

772. 가능하다.

774.
직접

775. 지역

776. 변수를

777. Rename

778. 하는

779. 것은

780.
실수

781. 할

782. 수

783. 있지만

784. 이

785. 기능을

786. 사용하면

787.
미연에

788. 방지할

789. 수

790. 있다.

792. DEMO/2

793.
Greeter.js의

794. Greeter

795. 객체는

796.
sayHello

797. 메서드를

798. 가지고

799. 있다.

801. DEMO/2

802.
그리고

803. playground.js에서

804.
Greeter

805. 객체의

806. sayHello

807. 메서드를

808.
사용

809. 중

810. 이다.

813. DEMO/2

814.
그럼

815. sayHello를

816. rename

817. 해보자.

818.
sayHello

819. 메서드에서

820. 마우스

821. 오른쪽

822. 버튼을

823.
클릭하여

824. Refactor

825. -

826. rename

827. 순으로

829.
메뉴를

830. 클릭한다.

832. DEMO/2

833.
Rename

834. 팝업

835. 창이

836. 열리면

837. 변경

838. 하고자

839.
하는

840. 메서드

841. 명을

842. 입력한

843. 후

844. Refactor

845. 버튼을

846.
클릭한다.

848. DEMO/2

849.
sayHello

850. 메서드를

851. greet

852. 메서드로

853.
Rename

854. 했다.

855. 그럼

856. 이

857. 메서드를

859.
사용하는

860. 측은

861. 어떻게

862. 되었을까?

864. DEMO/2

865.
playground.js의

866. 소스

867. 코드

868. 역시

869.
Rename이

870. 반영

871. 됐다.

874.
이처럼

875. 의존하고

876. 있는

877. 코드를

878. 분석하고

879.
반영하여

880. 안전성이

881. 보장되도록

882. rename을

883.
지원한다.

885. Safe

886. Delete

887.
삭제하려고

888. 하는

889. 변수나

890. 객체의

892.
의존

893. 관계를

894. 파악하여

895. 안전성을

897.
검사해

898. 알려준다.

899.
Refactoring

901. DEMO

902.
greet

903. 메서드를

904. 삭제하려고

905. 한다.

906.
이

907. 메서드는

908. public

909. 메서드이므로

910.
다른

911. 곳에서

912. 사용하고

913. 있을

914. 가능성이

915.
많다.

917. Greet

918. 메서드를

919. playground.js에서

920.
사용하고

921. 있다.

922. 유지보수

923. 개발자가

924. 이

925. 사실을

926.
모른체

927. 삭제한다면

928. 오류가

929. 날

930. 것이다.

932.
그렇다고

933. 여러개의

934. 파일을

935. 전부

936. 검색해서

937.
의존

938. 코드를

939. 찾을

940. 수도

941. 없다.

942.
DEMO

944. Greet

945. 메서드에서

946. 마우스

947. 오른쪽

948. 버튼을

949.
클릭하여

950. Refactor

951. -

952. safe

953. Delete

954. 순으로

955.
메뉴를

956. 클릭한다.

957.
DEMO

959. Greet

960. 메서드에서

961. 마우스

962. 오른쪽

963. 버튼을

964.
클릭하여

965. Refactor

966. -

967. safe

968. Delete

969. 순으로

970.
메뉴를

971. 선택한다.

972.
DEMO

974. Safe

975. Delete

976. 팝업창이

977. 열리면

978.
OK

979. 버튼을

980. 클릭하여

981. 진행한다.

982.
DEMO

984. 그러면

985. 어디선가

986. 사용되고

987. 있어

988.
위험하다고

989. 경고한다.

991.
View

992. usages

993. 버튼을

994. 클릭한다.

995.
DEMO

997. 하단

998. 패널에

999. 어느

1000. 파일의

1001. 몇번째

1002. 라인에서

1003.
의존하고

1004. 있는지

1005. 읽기

1006. 쉽게

1007. 출력한다.

1008.
DEMO

1010. DEMO

1011.
해당하는

1012. 코드에서

1013. 오른쪽

1014. 마우스

1015. 버튼을

1016.
클릭하여

1017. Jump

1018. to

1019. Source

1020. 메뉴를

1021. 선택하면

1023. DEMO

1024.
의존하는

1025. 코드로

1026. Trace

1027. 된다.

1029. Inline

1030. Method

1031.
메서드의

1032. 몸체가

1033. 메서드의

1034. 이름만큼

1035.
이나

1036. 명확할

1037. 때는

1038. 호출하는

1039. 곳에

1040.
메서드

1041. 몸체를

1042. 넣고,

1043. 메서드를

1044. 삭제

1045.
하라.

1047.
마틴

1048. 파울러

1049.
Refactoring

1051. DEMO

1052.
_createMessage

1053. 메서드는

1054. 로직이

1055.
단순하고

1056. 코드

1057. 자체로

1058. 의미를

1059. 잘

1060. 나타내

1061.
주고

1062. 있기

1063. 때문에

1064. 별도의

1065. 메서드를

1066. 만들

1067.
필요가

1068. 없다.

1070. DEMO

1071.
마우스

1072. 오른쪽

1073. 버튼을

1074. 클릭하여

1075.
Refactor

1076. -

1077. Inline

1078. 순으로

1079. 메뉴를

1080.
선택한다.

1082. DEMO

1083.
상단의

1084. 라디오

1085. 버튼을

1086. 선택한

1087. 후

1088.
Refactor

1089. 버튼을

1090. 클릭한다.

1092. DEMO

1093.
_createMessage

1094. 메서드는

1095. 삭제되고

1096. 메서드를

1097.
사용하고

1098. 있던

1099. greet

1100. 메서드에

1101. inline

1102. 되었다.

1104. Extract

1105. Parameter

1106.
함수나

1107. 메서드

1108. 몸체에

1109. 하드코딩

1111.
되어있는

1112. 값을

1113. 전달인자로

1114. 대체한다.

1115.
Refactoring

1117. DEMO

1118.
엘리먼트의

1119. ID값과,

1120. 메시지

1121. 값이

1122.
하드

1123. 코딩

1124. 되어있다.

1125. 처음엔

1126. 문제

1127. 없었지만

1128.
요구사항의

1129. 변동으로

1130. 이

1131. 값이

1132. 동적으로

1133.
바뀌어야

1134. 한다.

1136. DEMO

1137.
하드

1138. 코딩된

1139. 값을

1140. 드래그

1141. 하여

1142. 마우스

1143.
오른쪽

1144. 버튼을

1145. 클릭한

1146. 후

1147. Refactor

1148. -

1149.
Extract

1150. -

1151. Parameter

1152. 순으로

1153. 메뉴를

1154.
선택한다.

1156. DEMO

1157.
그러면

1158. 전달인자로

1159. ID

1160. 값을

1161. 받을

1162. 수

1163. 있고,

1164.
만약

1165. 생략되면

1166. 하드

1167. 코딩이었던

1168. 값이

1169. 초기화

1171.
되도록

1172. 리팩토링

1173. 된다.

1175. DEMO

1176.
같은

1177. 방법으로

1178. 2번째

1179. 값

1180. 역시

1182.
리팩토링

1183. 한다.

1185. Extract

1186. Method

1187.
그룹으로

1188. 함께

1189. 묶을

1190. 수

1191. 있는

1192. 코드

1193.
조각이

1194. 있으면,

1195. 코드의

1196. 목적이

1197. 잘

1198.
드러나도록

1199. 메소드의

1200. 이름을

1201. 지어

1202.
별도의

1203. 메서드로

1204. 뽑아낸다.

1206.
마틴

1207. 파울러

1208.
Refactoring

1210. DEMO

1211.
배너를

1212. 출력하는

1213. 로직은

1214. 메서드로

1215. 작성되어

1216. 있지만

1217.
이

1218. 코드는

1219. 무엇을

1220. 하는

1221. 코드인지

1222. 쉽게

1223. 읽기

1224. 어렵다.

1226. DEMO

1227.
Extract

1228. 할

1229. 코드를

1230. 선택한

1231. 후

1232. 마우스

1233. 오른쪽

1234. 버튼을

1235.
클릭하고

1236. Refactor

1237. -

1238. Extract

1239. -

1240. Method

1241. 순으로

1242.
메뉴를

1243. 선택한다.

1245. DEMO

1246.
그러면

1247. 자바스크립트

1248. 친화적으로

1249. 어느

1250.
공간에

1251. Extract

1252. 할

1253. 것이지

1254. 묻는다.

1255.
Global은

1256. 전역

1257. 공간,

1258. Object

1259. assigned는

1260.
객체

1261. 내부에,

1262. function

1263. 은

1264. 현재

1265. 함수

1266. 안을

1267.
뜻한다.

1269.
Object

1270. assigned

1271. to

1272. Greeter3.prototype을

1273.
선택한다.

1275. DEMO

1276.
메서드

1277. 명을

1278. 지정하고

1279. OK

1280. 버튼을

1281. 클릭한다.

1283. DEMO

1284.
코드가

1285. 리팩토링되어

1286. 한결

1287. 읽기

1288. 쉬워졌다.

1290. WebStorm과

1291.
코드

1292. 품질

1293. 검증

1294. 03

1295.
background

1296. :

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

1299. JSLint

1300.
자바스크립트

1301. 코드의

1302. 구문
을

1303. 검사할

1304. 목적으로

1305. 만들어진

1306.
품질

1307. 검증

1308. 도구

1310. Setting

1312. Setting

1314. DEMO/1

1315.
변수

1316. i

1317. 에

1318. 빨간색

1319. 밑

1320. 줄이

1321. 보인다.

1323.
var

1324. 키워드는

1325. 스코프를

1326. 나타내는

1328.
키워드로써,

1329. 필요하지

1330. 않다면

1331.
여러번

1332. 선언하지

1333. 않는게

1334. 좋다.

1336.
이같은

1337. 사항을

1338. JSLint가

1339. 실시간

1341.
검증

1342. 하여

1343. 에러임을

1344. 나타내고

1346.
있는

1347. 것이다.

1349. DEMO/1

1350.
또한,

1351. 우측