NEXT WEB UI Advanced 수업자료

1. WEB

2. UI

3. 디버깅
WEBUI

4. Advanced

6. |

9. 2주차

10. 목표
sources을

11. 충분히

12. 활용하면서

13. 디버깅

14. 도구를

15. 활용해

16. 문제를

17. 해결할

18. 수

19. 있다.

20.
비동기

21. 상황에서도

22. 디버깅

23. 할

24. 수

25. 있다.

26.
sources탭

27. 이외

28. 탭의

29. 기능도

30. 부분적으로

31. 이해하고

32. 있고,

33. 어떻게

34. 찾아서

35. 공부
하면

36. 되는

37. 줄

38. 알고

39. 있다.

40. Sources

41. 탭

42. Image : http://helloworld.naver.com/helloworld/59361
JavaScript

43. 디버깅

44.
network상태와

45. Ajax

46. 디버깅

47.
css

48. 해석된

49. 결과

50. 들여다보기

51.
network

52. 진단,

53. JavaScript

54. 프로파일링

55. Image : http://helloworld.naver.com/helloworld/59361
메뉴

56. 설명

57.
!
디버깅

59. breakpoints

61. watch

62. expressions

64. scope

65. variables

68.
Breakpoints

70. DOM

71. Breakpoints

73. XHR

74. Breakpoints

76. Event

77. Breakpoints

78.
!
live

79. edit

80. 디버깅

81. 실습

82. espn.go.com

84. 오류

85. 원인

86. 찾기

87. 박민근

88. 입력

89. 후

91.
엔터를

92. 치거나

93. ‘+’버튼을

94. 누름
박민근

95. 추가

96. 됨

97.
‘X’

98. 눌러서

99. 삭제가능
박민근

100. 삭제

101. 됨

102. ‘ㅍ’

105. 누르면 임의

106. 커플이

107. 형성됨

108. Image : http://helloworld.naver.com/helloworld/59361
git clone https://github.com/nigayo/UIA.git

109. ls!
PairPicker.html PairPickerMain.css PairPickerMain.js!
!

110. 문제1.

112. x

113. 버튼이

114. darkgray가

115. 아닌

116. 원인

117. 찾기

118. 문제2.

121. enter

122. 를

123. 눌렀지만

124. 추가되지

125. 않는

126. 문제

127. 찾기

128. 문제3.

131. 동일

132. 이름이

133. 중복되는

134. 문제

135. 찾기

136. 문제를

137. 해결하면서

139.
!
source탭에서

140. live

141. 수정을

142. 했나요?

143.
!
watch

144. expressions

145. ,

146. Event

147. Listener

148. Breakpoints

149. 등을

150.
잘

151. 활용하고

152. 있나요?

154. 비동기상황에서의

155. 디버깅

156. 실습

157. 비동기상황에서의

158.
디버깅
function call(num) {!
debugger;!
console.log(call called + num);!
}!
!
function callback() {!
debugger;!
console.log(timeout 1000); !
}!
!
function run() {!
call(1);!
!
setTimeout(function() {!
callback();!
}, 1000);!
!
call(2);!
}!
!
run();

159. callstack

160. 을

161. 보자

162.
!
두개는

163. 어떻게

164. 다른가?
function call(num) {!
debugger;!
console.log(call called + num);!
}!
!
function callback() {!
debugger;!
console.log(timeout 1000); !
}!
!
function run() {!
call(1);!
!
setTimeout(function() {!
callback();!
}, 1000);!
!
call(2);!
}!
!
run();

165. async

166. 옵션

167. 후

168. 비교
function call(num) {!
debugger;!
console.log(call called + num);!
}!
!
function callback() {!
debugger;!
console.log(timeout 1000); !
}!
!
function run() {!
call(1);!
!
setTimeout(function() {!
callback();!
}, 1000);!
!
call(2);!
}!
!
run();

169. Call

170. Stack

171. Async

172. 체크해제.

173.
amazon.com

174. 접속

175.
XHR

176. Breakpoints

178. -

179. any

180. XHR

181.
검색어

182. 입력

183. 후

184. 자동완성

185. 노출

186.
XHR

187. callback

188. 함수

189. 찾기.

190. Call

191. Stack

192. Async

193. 체크해제.

194.
amazon.com

195. 접속

196.
XHR

197. Breakpoints

199. -

200. any

201. XHR

202.
검색어

203. 입력

204. 후

205. 자동완성

206. 노출

207.
XHR

208. callback

209. 함수

210. 찾기.
callback

211. 함수에

212. breakpoint

214.
Async

215. 체크한

216. 후

217. 확인

218. 다른

219. 탭

220. sources timeline console 그

221. 외

222. sources을

223. 충분히

224. 활용하면서

225. 디버깅

226. 도구를

227. 활용해

228. 문제를

229. 해결할

230. 수

231. 있다.

232.
비동기

233. 상황에서도

234. 디버깅

235. 할

236. 수

237. 있다.

238.
sources탭

239. 이외

240. 탭의

241. 기능도

242. 부분적으로

243. 이해하고

244. 있고,

245. 어떻게

246. 찾아서

247. 공부
하면

248. 되는

249. 줄

250. 알고

251. 있다.
피드백

252. End
;-D