Event Driven Programming & Library vs. Framework

1. 1 2 3 4 5
Overview
Expressions
& statements
Function & Object
Event & Library
Storage & Network
& SCM(git)
Learn Programming with Web Language
For non-developers

3. 아들바보

4. 프로그래밍이란
매 순간순간 최선을
찾아 선택하는 행위
“
”

5. 많은 프로그래머들의
실험과 고민의 결과로 다양한
패턴과 도구들이 존재한다

6. Event Driven!
Programming

7. 프로그램의 실행 흐름을
프로그래머가 예측할 수
없을 때 사용되는 패턴

8. 객체 홍길동씨가 발생시키는 이벤트
7am 9am 11am 1pm 3pm 5pm 7pm 9pm 11pm 1am 3am
회의
기상
출근
점심

9.
식사
티타임
집중

10.
근무
퇴근
운동
드라마

11.
시청
만화

12.
보기
취침
“홍길동씨”의

13. 하루

14. 객체 김태희씨가 발생시키는 이벤트
5am 8am 10am 12:30pm 1pm 3pm 8pm 10pm 12am 1am 3am
회의
기상
출근
점심

15.
식사
티타임
회의
퇴근
뉴스

16.
시청
독서
취침
…⋯
“김태희씨”의

17. 하루

18. 두 객체가 발생시킨 이벤트를 모아보면?
이벤트가

19. 발생하는

20. 객체(홍길동씨,

21. 김태희씨)가

22. 있다.

23.
똑같은

24. 이벤트도

25. 있고

26. 객체만의

27. 이벤트도

28. 있다.

29.
이벤트를

30. 발생시키는

31. 다양한

32. 원인(ex:

33. 시간)이

34. 있다.
“김태희씨”의

35. 하루
“홍길동씨”의

36. 하루
회의
기상
출근
점심

37.
식사
티타임
집중

38.
근무
퇴근
운동
드라마

39.
시청
만화

40.
보기
취침
회의
기상 출근
점심

41.
식사
티타임
회의
퇴근
뉴스

42.
시청
독서 취침

43. 이벤트가 발생하는 환경 안에서 할 일 만들기
“아무개씨”가

44.
점심식사를

45. 할

46. 때

47.
통닭집

48. 정보

49.
문자메시지를

50.
보내자
이벤트
환경
}이벤트를
기준으로
할 일 만들기

51. 이벤트가 전해주는 정보 활용
“아무개씨”가

52.
점심식사를

53. 할

54. 때

55.
통닭집

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. 핸들러(함수)
이벤트

88. 핸들러

89. 함수에는

90. 이벤트

91. 정보가

92. 전달된다

93. UI 객체는 수 많은 이벤트를 제공한다

94. 내용이

95. 변경됐어!
마우스

96. 클릭했어!
마우스

97. 더블

98. 클릭했어!
잡아끌기를

99. 하고있어!
잡아끌기를

100. 시작했어!
뭔가를

101. 떨구었어!
내가

102. 활성화

103. 되었어!
키가

104. 누르고

105. 있어!
마우스

106. 커서가

107. 떠났어!
마우스

108. 커서가

109. 올라왔어!

110. 이벤트(사건) 기반 프로그래밍이 필요한 이유
“내가”

111. 아침에

112. 일어나

113. 밥을

114. 먹고

115. 출근을

116. 하고

117. 회의를

118.
하고

119. 점심을

120. 먹고

121. 일을

122. 하고

123. 퇴근을

124. 한다
“누군가가”

125. 아침에

126. 일어나

127. 밥먹을

128. 때,

129. 출근할

130. 때,

131. 회
의할

132. 때,

133. 점심

134. 먹을

135. 때,

136. 일할

137. 때,

138. 퇴근할

139. 때

140. 내가

141. 무엇을

142. 한다.
행위자

143. 중심

144. 프로그래밍.

145. 사건

146. 흐름

147. 자체를

148. 진행한다.
이벤트

149. 중심

150. 프로그래밍.

151. 사건

152. 발생시

153. 해야할

154. 일은

155. 알
지만

156. 언제

157. 어떤

158. 순서로

159. 사건이

160. 발생될지

161. 알

162. 수

163. 없다.
즉,

164. 사용자가

165. 언제

166. 어떤

167. 버튼을

168. 터치

169. 하게될

170. 것인지

171.
어떤

172. 링크를

173. 클릭할

174. 지

175. 예측할

176. 수

177. 없기

178. 때문에

179. 이벤트

180.
기반

181. 프로그래밍이

182. 필요하다

183. 실습: 초 간단 포토샵을 만들겠습니다
요구사항은

184. 무엇인가?
1. 마우스로

185. 화면에

186. 점을

187. 그릴

188. 수

189. 있다

190.
2. 마우스의

191. 위치가

192. 표시된다

193.
3. 점의

194. 크기와

195. 색을

196. 지정할

197. 수

198. 있다

199.
4. 점의

200. 투명도를

201. 조절할

202. 수

203. 있다

204.
5. 화면을

205. 지울

206. 수

207. 있다
버전은

208. 0.000000000000000000001에서

209. 시작합니다.

210.
우리

211. 애자일하게

212. 점진적으로

213. 발전시켜나가보죠!

215.
;-)

216. 초 간단 포토샵을 만들겠습니다

217. CANVAS/CANVAS
HTML에는

218. 점과

219. 선을

220. 그릴

221. 수

222. 있는
“CANVAS”

223. 태그가

224. 제공된다
캔버스의

225. 폭과

226. 높이

227. (픽셀)

228. CANVAS/CANVAS

229. 그림을 그릴 준비 #1 UI 만들기

230. 그림을 그릴 준비 #2 캔버스 붓 얻기
Canvas가

231. 제공하는

232. 붓(Context)를

233. 얻는다.

234. 이

235. 붓
으로

236. Canvas가

237. 제공하는

238. 기능을

239. 사용할

240. 수

241. 있다.

242. 그림을 그릴 준비 #3 UI와 연결지점 설정하기
사용자가

243. 소통하는

244. UI

245. 요소(컨트롤)의

246. 값을

247.
얻거나

248. 넣기

249. 위한

250. 코드를

251. 작성한다.

252. 그림을 그릴 준비 #4 이벤트 알아내기
캔버스는

253. 다양한

254. 사건에

255. 대하여

256. 이벤트를

257. 발생시킴.

258. 이벤트를

259.
소비하는

260. 소비자에게

261. 이벤트

262. 정보도

263. 제공.

264. 어떤

265. 사건에

266. 대하여

267.
어떤

268. 일을

269. 할지만

270. 결정하면

271. 됨

272. -

273. 이벤트

274. 기반

275. 프로그래밍

276. 그림을 그릴 준비 #4 이벤트 알아내기
요구사항은

277. 무엇인가요?
1. 마우스로

278. 화면에

279. 점을

280. 그릴

281. 수

282. 있다

283.
2. 마우스의

284. 위치가

285. 표시된다

286.
3. 점의

287. 크기와

288. 색을

289. 지정할

290. 수

291. 있다

292.
4. 점의

293. 투명도를

294. 조절할

295. 수

296. 있다

297.
5. 화면을

298. 지울

299. 수

300. 있다
mousemove mousedown mouseup
마우스

301. 커서가

302.
캔버스

303. 위를

304. 돌아다닐

305. 때

306.
발생
마우스

307. 커서가

308.
캔버스

309. 위에서

310. 버튼이

311. 눌렸을

312. 때

313.
발생
마우스

314. 커서가

315.
캔버스

316. 위에서

317. 버튼을

318. 땠을

319. 때

320.
발생

321. 그림을 그릴 준비 #5 이벤트 연결하기
*이벤트를

322. 소비할

323. 함수(이벤트

324. 핸들러)
를

325. 만들고

326. 이벤트에

327. 연결시킵니다.

328. 그림을 그릴 준비 #6 마우스 위치(좌표) 표시
이벤트

329. 발생의

330. 주체인

331. 캔버스가

332. 전달해준

333.
이벤트

334. 정보(event)에서

335. 마우스

336. 위치

337. 값
(offsetX,

338. offsetY)를

339. UI에

340. 넣으면

341. 끝!

342. 그림을 그릴 준비 #7 화면(캔버스)에 점 그리기
마우스가

343. 클릭되면

344. (mousedown)

345. 클릭된

346. 마우스

347. 좌표에

348. 캔버
스가

349. 제공해준

350. 붓(Context)의

351. 사각형

352. 박스

353. 그리기

354. 도구(fillRect)
를

355. 이용하여

356. 점을

357. 그린다
잘

358. 될까?
점은

359. 그려지지만

360. 클릭한번에

361. 하나의

362. 점

363. 만이

364. 그려진다.
왜

365. 그럴까?
실제

366. 동작은

367. 마우스

368. 버튼을

369. 누른

370. 후(mousedown)

371. 마우스

372. 버튼을

373.
땔

374. 때까지(mouseup)

375. 점을

376. 계속(mousemove)

377. 그려야

378. 한다.

379. 즉

380. 세
개의

381. 이벤트를

382. 사용해야한다.

384. 그림을 그릴 준비 #8 점 그리기 동작 보완
마우스

385. 버튼이

386. 눌린

387. 상태인지를

388. 공유(세가지

389. 이
벤트

390. 핸들러가)

391. 하기

392. 위해

393. 변수를

394. 준비
마우스

395. 버튼이

396. 눌리면

397. 참
으로

398. 버튼이

399. 떨어지면

400. 거
짓으로

401. 설정한다
mousedown

402. 에

403. 있던

404. 그리기

405. 코
드를

406. mousemove로

407. 이동시킴

408.
마우스

409. 버튼이

410. 눌렸을

411. 때만

412. 그린다

414. 그림을 그릴 준비 #9 39라인의 포토샵 앱 완성
}
}
}
1
3
2
UI와

415. 연결하고
이벤트를

416. 연결하고
그린다

417. 그림을 그릴 수 있는 초 간단 포토샵 완성

418. 편리한 도구 만들기 체험

419. 1. 불편함을 개선하기
2. 불편한 점 찾아보기

420. 매번 할 때 마다 반복
길고 불편해 개선해 봅시다

421. 길고 복잡해 보이는 이벤트
핸들러 대입문을 대체할 완료란
의미가 명확한 done 함수 개발

422. 간단히 done 함수를 호출하여
코드를 줄이고 의미를 명확히 하여
가독성을 증가시킴

423. 잠깐!
해석에 따라 달라지는
주관적 관점과
잃어 버린 것이 존재

424. 주관적 관점
done 보다 complete가 낫지 않을까?
documentLoaded 가 더 명확하지 않을까?
원래대로 window.onload 가 좋은데…
관점과 취향의 문제가 존재

425. 잃어버린 것
주관(철학)을 주입하여 형태를 가공하는 순간 원
형의 향기가 희석된다. 가공된 정도가 강하며 개
성이 독특할 수록 원본 메커니즘을 감추며 이는
득이 될 수 도, 독이 될 수 도 있다.

426. Library
•상대적으로 규모가 작음
•특정 작업 해결을 위한 목적
•독립적인 동작구조
•사용자 코드(어플리케이션)의 구조에 관여치 않음
Framework
•상대적으로 규모가 큼
•사용자 코드(어플리케이션)의 구조에 개입
•독창적인 관점(패턴, 형태, 철학) 제공
•다양한 라이브러리를 포함할 수 있음

427. 초 간단 포토샵을 라이브러리와
프레임웍을 적용하여 수정한 후
무엇이 다른지 비교해 봅니다

428. JS 최고의 라이브러리
jQuery
http://codepen.io/ibare/full/ECljr/
작은 코드로 더 많은 일 하기
(Write less, do more)

429. $() 함수로 축약된 수 많은
기능들을 제공

430. CSS 셀렉터 문법으로
DOM 선택의 편리함을
제공함

431. jQuery 적용 후 달라진 코드

432. 구글이 만든 MVC 프레임웍
AngularJS
http://codepen.io/ibare/full/ktuyi/

433. 질문
지금까지 사용해왔던 아래의 코드는
어떤 문제를 가지고 있을까?

434. input 의 id 속성 값을 바꾸면 어떻게 될까?
UI 와 프로그램 코드의 연관성이 너무 강력하여 협업
유연성이 떨어지고 오류 가능성을 항상 포함함. 규모
가 커질수록 단점은 더욱 도드라짐.

435. MVC
(Model View Controller)
UI(View)와 코드의 결합 관계
느슨하게 유지하며 유연성과 복
잡성을 개선한 프로그래밍 패턴

436. HTML의 형태가 달라지고 처음 보는 ng-* 속성 등장

439. 1

440. “다음시간에”;

441.
2

442. “만나요~~;
Unclosed string.
Kim min tae @ibare!
NCSOFT http://ibare.kr https://medium.com/@ibare