1. HTML5

2. API를

3. 활용한

4.
“실시간

5. 대전

6. 테트리스

7. 게임”

8. 개발
NHN

9. Technology

10. Services
프론트엔드개발팀

11. 이진권

12. NHN

13.
Technology

14. Services

15.
!
Front-End

17.
Development

18. Team
이진권
PHP개발자,

19.
Javascript

20. 의

21. 매력에

22. 빠지다
Naver

23. 고객센터

24. Javascript

25. 개발

26.
Naver

27. 자동차

28. 서비스

29. Javascript

30. 개발
Line

31. Messanger

32. for

33. Firefox

34. OS

35.
사내

36. 웹

37. 메신저

38. 개발

39. 참여
코드

40. 농사꾼

41.
Code

42. Farmer

43. Agenda
Tetris로

44. 개발하기까지

45.
Game

46. UI

47. Design

48.
Architecture
Front-End
Background-End

49.
Start

50. Development

51.
Play

52. with

53. Full

54. Stack

55. JS

56. Tetris

57. 네개의

58. 사각형으로

59.
이뤄진

60. 테트리스

61. 블록

62.
오리지널의

63. 경우,
블록

64. 종류는

65. 총

66. 7가지
테트리스

67.
with

68. 테트리미노

69. Tetris

70. 를

72.
주제로

73. 선택한

74. 이유
• 게임

75. 로직이

76. 단순

77. 심플
(개발

78. 용이)

79.
• 개인

80. 프로젝트로

81.
재밌는

82. 개발을

83. 해보자

84.
• 프론트엔드

85. 개발

86. 중심
서버

87. 개발까지

88.
• 이왕

89. 하는거

90. 1:100
(멀티

91. 게임)

92. Game

93. UI

94. Design

95. 게임

96. 인트로

97. 화면이자

98. 사용자와

99. 첫

100. 접합점

101.
사용자

102. 분별을

103. 위한

104. 로그인,

105.
로그인과

106. 가입을

107. 하나의

108. 스크린으로!
INTRO

110. LOGIN

111. 화면

112. 간

113. 이동을

114. 위한

115. 대시보드

116.
메뉴

117. 이동이

118. 직관적이면

119. 좋겠다
DASHBOARD

120. 게임

121. 스테이지

122. 인터페이스

123. 디자인
네트워크

124. 게임과

125. 싱글

126. 게임을

127. 공용으로!
(코드

128. 분산

129. 최소화)
SINGLE

130. STAGE

131. 게임

132. 스테이지

133. 인터페이스

134. 디자인
네트워크

135. 게임과

136. 싱글

137. 게임을

138. 공용으로!
(코드

139. 분산

140. 최소화)
MULTI

141. STAGE

142. 게임

143. 중간의

144. 옵션

145. 메뉴

146.
게임

147. 상태를

148. 전달하기

149. 위한

150. 인포

151. 스크린

152. (Ex.

153. Game

154. Over)
OPTION

155. MENU

156. 화면 전환 효과의 예시를 위한
기본 예제 스크린
CREDIT

157. 사용자

158. 목록

159. 보기
Dashboard

160. for

161.
ADMIN

162. What

163. technology

164. needs?
스크린

165. 라우팅

166.
멀티

167. 플레이를

168. 위한

169. 소켓

170. 네트워크

171.
효과음을

172. 추가를

173. 위한

174. 사운드

175. 제어

176.
게임

177. 화면을

178. 위한

179. 캔버스

180. 스테이지

181.
UI

182. 인터페이스의

183. 이펙트

184. What

185. more?
Git

186. 레파지토리와

188.
WebStorm

189. IDE만

190. 있으면?
개발

191. 준비

192. 끝!

193. Architecture

194. 프론트엔드에서

196.
서버를

197. 넘어

199.
DB까지
with

200. Javascript

201. Web Socket
socket.io
Server
MongoDB
Mongoose.js
Node.js
Express.js
socket.io
Node-webkit (for Mac, windows)
Phonegap (for Android, iOS, ETC)
Build with Grunt
Client
MVC Framework
Backbone.js
UI Effect
Animate.css
Network
Socket.io-client
Game Stage
Canvas WebGL

202. Front-End

203. SPA?
Single

204. Page

205. Application
하나의

206. html

207. 로

208. 구성된

209. 어플리케이션

210.
페이지

211. 이동이

212. 발생하지

213. 않음

214.
페이지는

215. 오직

216. 하나!
Inner

217. Content만

218. 바꿔서

219. 화면을

220. 갱신

221.
Google

222. Map,

223. Facebook

224. Main,

225. ETC.

226. SPA를

227. 도입한

228. 이유
게임의

229. Status를

230. 계속

231. 가지고

232. 있어야

233. 하는데

234. 페
이지가

235. 바뀌면

236. 값이

237. 모두

238. 사라짐

239.
서버에

240. 매번

241. 요청할

242. 수도

243. 있지만,

244. 그러기에는

245.
리소스

246. 부담이

247. 커짐

248.
페이지

249. 전환시

250. 깜빡이는

251. 현상을

252. 보고

253. 싶지

254. 않음

255. SPA의

256. 의문점
화면

257. 전환(라우팅)

258.
URL

259. 접근에

260. 따른

261. 뷰

262. 노출

263.
모든

264. 라이브러리를

265. 모두

266. 처음부터

267. 로드?

268.
검색엔진

269. 최적화

270. 화면

271. 전환은

272. 어떻게

273. 할

274. 것인가?
메인이

275. 아닌

276. 특정

277. URL을

278. 통해

279. 들어왔을

280. 때

281. 해
당

282. view를

283. 어떻게

284. 갱신

285. 시킬지에

286. 대한

287. 고민
URL

288. Segment
http://{domain}/{class}/{method}/{seq}
http://helloworld.com/board/freeboard/29

289. Backbone.js way
Router
유저가

290.
http://game.com/#login
을

291. 접속하면

292. moveToStart

293.
메서드를

294. 자동

295. 호출
(Hash

296. Tag

297. 이용

298. 방식)
moveToStart

299. 메서드에는,
login

300. 관련

301. View

302. 호출

303. 로직이

304.
포함되어

305. 있음

307. SPA의

308. 화면

309. 간

310. 전환

311. 방식
템플릿

312. 엔진들을

313. 사용하여

314. 컨테이너를

315. 교체해

316. 주는

317. 방식
로직이

318. 가능한

319. 엔진과

320. 로직

321. less인

322. 엔진이

323. 있음

324. (if,

325. for

326. 등)
(Mustache,

327. Handlebars,

328. Jade,

329. ejs)

330. Source

331. Load

332. 문제?
대용량

333. 자바스크립트의

334. 시대가

335. 도래
-

336. 관리

337. 할

338. 파일들이

339. 너무

340. 많음
-

341. 테트리스

342. js

343. loc

344. :

345. 4000

346. Line,

347. 소스

348. 파일만

349. 30개
-

350. 라이브러리는?

351.
require.js를

352. 이용한

353. 파일

354. 의존성

355. 관리

356.
이제

357. js도

358. 필요할

359. 때

360. 불러서

361. 쓴다.

362. JS Load
with Original way

363. JS Load
with Require.js

364. Spaghetti JS Code
뷰를

365. 위한

366. 로직과

367. 모델

368. 등이

369. 혼재

370. 되기

371. 쉬운

372.
javascript
어떻게

373. 역할을

374. 분담해서

375. 효과적으로

376. 프로그래밍

377. 할

378.
수

379. 있을까?

380. 구조를

381. 잡아주는

382. Framework를

383. 쓰자
MVC

384. 프레임워크가

385. 필요

386.
Model과

387. View와

388. Controller의

389. 역할을

390. 분리

391.
모델이

392. 바뀌면

393. UI도

394. 편하게

395.
갱신할

396. 수

397. 있으면

398. 좋겠다

399.
여러사람이

400. 함께

401. 개발할

402. 수

403. 있게

404.
구조를

405. 잘

406. 잡아줬으면

407. 좋겠다

408. Backbone.js
가벼운

409. js

410. MVC

411. 프레임워크
(6.5kb,

412. Packed

413. and

414. gzipped)

415.
js에서도

416. 클래스들에게

417. 역할을

418. 분담시키자

419.
이벤트

420. 방식의

421. “모델

422. 변화

423. 감지”는

424. 보너스
(Pub/Sub)

425.
• Router

426.
• View

427.
• Model

428.
• Collection

429. 2

430. Way

431. data

432. binding
모델

433. 변화시

434. 뷰

435. 갱신,

436. 뷰

437. 변화시

438. 모델

439. 갱신
(Angular.js는

440. 2way

441. binding이

442. 기본)

443.
Backbone.js

444. 는

445. 기본적으로

446.
1Way

447. Data

448. binding만을

449. 지원

450.
외부

451. 라이브러리를

452. 이용하면?
2

453. Way

454. Binding도

455. 가능
(Backbone.ModelBinder)

456. 게임

457. 인터페이스는

458. 어떻게?
Canvas에

459. UI

460. 전부

461. 그리기는

462. 너무

463. 어렵다

464.
Input등의

465. UI는

466. 어떻게

467. 할

468. 것인가?

469.
그렇다면,
UI는

470. DOM으로

471. 만들고,
게임

472. 스테이지만

473. Canvas

474. Draw!
(혹은

475. WebGL을

476. 이용)

477. HTML5

478. 기반

479.
Painter

480. 어플리케이션
프로토타이핑

481.
Canvas에

482.
input을

483. 구현해본

484. 경험
결과는?
input

485. 제어는

486. 진짜

487. 너무

488. 힘듬
모바일이

489. 정말

490. 힘듬

491. 메뉴

492. 인터페이스에

493.
활기를

494. 불어넣자
• animate.css

495.
http://daneden.github.io/
animate.css

496.
Easy to Use
클래스를

497. 추가

498. 하는

499. 것

500. 만으로

501.
괜찮은

502. 애니메이션

503. 효과를

504.
얻을

505. 수

506. 있음

507. Sound

508. 재생은?
html5의

509. sound

510. API를

511. 이용한

512.
라이브러리로

513. 효과음

514. 재생

515.
howler.js
https://github.com/goldfire/howler.js

516. Network
http통신만으로

517. 실시간

518. 게임을

519. 만들기는

520. 무리

521.
Web-Socket을

522. 이용한

523. socket

524. 통신

525.
훌륭한

526. Web-socket

527. 라이브러리
socket.io를

528. 이용하기로

529. 결정

530.
채널링

531. (방

532. 관리)은

533. 보너스

534. Back-End

535. Node.js

536. with

537. Express.js
Node.js는

538. 구글의

539. 크롬

540. V8

541. 자바스크립트

542. 엔진
을

543. 기반으로

544. 한,

545. 고성능

546. 네트워크

547. 서버

548.
Single

549. Thread

550. 기반의

551. Event

552. Loop

553. 방식

554.
서버

555. 미들웨어

556.
Express.js
Node.js

557. 기반의

558. Http

559. server

560. Framework
쉬운

561. 설치와

562. 빠른

563. 개발

564. MongoDB

565. with

566.
mongoose.js
• NoSQL

567.
Document

568. Database

569.
• Mongoose는

570. 비동기

571. 환
경에서

572. 작동하게

573. 설계된

574.
MongoDB

575. 객체

576. 모델링

577.
도구

578. (클라이언트

579. 도구)

580.
• MongoDB는

581. 기본적으
로

582. Schema

583. Less
Mongoose

584. 를

585. 이용해

586.
schema를

587. 이용할

588. 수

589. 있
음

590. Start

591. Development

592. 서버와

593. 클라이언트를

594.
한

595. IDE에서,

596. 한

597. 언어로

598. 개발하는

599. 기이한

600. 현상

601. Easy

602. JS

603. Library

604. Manager
Bower
커맨드에서

605. 쉽게

606.
자바스크립트

607. 라이브러리를

609.
관리할

610. 수

611. 있음

612.
bower

613. install

614. jquery
bower

615. search

616. underscore

617.
File result
bower_components/jquery
bower_components/underscore

618. Bower DEMO

619. JS

620. Build

621. with
Task

622. Runner

623. Tool,

624. Grunt
javascript도

625. 프로젝트

626. 규모가

627. 커짐에

628. 따라

629.
build를

630. 해야

631. 되는

632. 상황이

633. 왔음

635.
테트리스도

636. 파일

637. 30개,

638. loc

639. 3000

640. 라인
빌드는

641. 자동화

642. 하기로

643. 결정
js

644. minification,
js

645. file

646. merge,
Unit

647. Test

648. Runner,
And

649. packaging
…⋯

650. Save

651. your

652. times

653. with

654. Grunt.js
개발시에는

655. console.log

656. 를

657. 추가하고

658. 빌드시에는

659. 자동으로

660. 제거
개발이

661. 완료후

662. uglify를

663. 이용해

664. 파일

665. 난독화

666. 및

667. 압축
용량

668. 절감

669. 효과
30개의

670. 파일을

671. 하나로!

673. (리퀘스트

674. 비용

675. 최소화)
node-webkit

676. plugin을
이용하여

677. nw

678. 자동

679. 빌드
(mac에서도

680.
window

681. pack

682. 생성

683. 가능

684. What

685. is

686. Node-Webkit?
Front-Side에서도

687. node.js가

688. 동작하게

689. 랩핑한

690.
일종의

691. 브라우저

692.
Node-Webkit으로

693. 웹

694. 리소스를

695. 랩핑하면

696.
크로스플랫폼

697. 데스크탑

698. 어플리케이션이

699. 됨
(독립

700. 실행

701. 가능한

702. exe

703. 혹은

704. dmg

705. 파일로

706. 산출)

707. What’s

708. Next?
Play

709. with

710. Full

711. Stack

712. Javascript

713. 자

714. 이제

715. 무엇을

716. 만들까요?
빠른

717. 프로토타이핑이

718. 가능한“동작하는

719. 서비스”

720.
만능이라고는

721. 할

722. 수

723. 없지만,
서비스

724. 개발을

725. 위한

726. 개발

727. 퍼포먼스는

728. 쓸만함

729.
JS의

730. 탄탄한

731. Echo

732. System
(Third

733. party

734. modules)

735.
최근

736. 해외에서는

737. MEAN

738. 이

739. 각광받고

740. 있음
(여기서

741. Backbone.js

742. 를

743. Angular.js

744. 로

745. 바꾸면)

746. Javascript
Full Stack
Front-End부터 Back-End까지
Javascript 만으로 만들어 내는 서비스
!
단일 언어로 처음부터
끝까지 개발할 수 있다는 것은?

747. Play

748. Time

749. http://goo.gl/HZaqzZ
User Dashboard : http://goo.gl/SksUrk

750. 감사합니다!!

751.
lee.jinkwon@nhn.com