재사용UI 컴포넌트설계

1. 자동완성UI로

2. 알아보는

4. 재사용을

5. 고려한

6. 웹UI

7. 컴포넌트

8. 설계 윤 지 수

9. 자동완성이란?

10. 검색어를

11. 알아서

12. 채워주는

13. 편리한

14. 기능.

15. VIEW는

16. 제각각.

17. 재사용하기에는

18. 애매한

19. UI

20. 규모. 자동완성이란?

21. 검색어를

22. 알아서

23. 채워주는

24. 편리한

25. 기능.

26. VIEW는

27. 제각각.

28. 재사용하기에는

29. 애매한

30. UI

31. 규모. = 재사용을 목적으로 만들어보자 자동완성이란?

32. 현실에서

33. 재사용이란?

34. UI

35. 코드는

36. VIEW

37. 중심인

38. 경우가

39. 많음.

40. 디자인은

41. 늘

42. 자주

43. 바뀜.

44. 기능하나

45. 추가하려는데

46. 코드

47. 다

48. 뜯어고칠

49. 수도...

50. 좋은

51. 걸

52. 가져다가

53. 쓰려니

54. 결정적인

55. 뭐가

56. 잘

57. 안되고,,

58. UI

59. 재사용의

60. 성공

61. 방법 작은

62. 단위의

63. UI

64. 재사용이

65. 현실적이다.

66. 요구사항이

67. 변화가

68. 없어야

69. 한다.

70. 디자인은

71. 조금의

72. 변화도

73. 없어야

74. 한다.

75. 컴포넌트는

76. 디자인(UI,UX)을

77. 포함하고

78. 있어야

79. 한다.

81. UI

82. 재사용의

83. 성공

84. 방법 작은

85. 단위의

86. UI

87. 재사용이

88. 현실적이다.

89. 요구사항이

90. 변화가

91. 없어야

92. 한다.

93. 디자인은

94. 조금의

95. 변화도

96. 없어야

97. 한다.

98. 컴포넌트는

99. 디자인(UI,UX)을

100. 포함하고

101. 있어야

102. 한다.

103. 대체로

104. 비현실적..

105. 자동완성

106. 요구사항. 다양한

107. 뷰(view)

108. 지원.

109. 특정시점에

110. 사용자가

111. 원하는

112. 커스텀

113. 기능

114. 제공.

115. 최근검색어

116. 같은

117. 꼽사리

118. 기능이

119. 필요할

120. 수도

121. 있음.

122. 다양한

123. UI

124. 서비스구조에

125. 적용가능해야

126. 함.

127. 모바일웹에서만

128. 우선

129. 사용.

130. 요구사항이

131. 일어날때

132. 큰

133. 수정이

134. 없어야겠음.

135. XHR,

136. JSONP

137. 지원.

138. 최근검색어를

139. 다양한

140. 방식으로

141. 저장할

142. 수

143. 있어야

144. 함.

146. …⋯

147. 자동완성

148. 따위가

149. 이리

150. 복잡할

151. 수

152. 있다니.. http://thepoisedlife.com/1382/stop-worrying-troubled-world/

153. 자동완성

154. 컴포넌트의

155. 단순한

156. 목표! 쉽게

157. 사용하고,

158. 변화에

159. 잘

160. 견디자.

161. 작전 1. 쉬운

162. API.

163. 2. 공통

164. 컴포넌트를

165. 만들어

166. 상속.

167. 3. 가벼운

168. 메인

169. 컴포넌트

170. 만들기.

171. 4. 플러그인

172. 방식

173. 지원으로

174. 기능

175. 추가를

176. 쉽게.

177. 5. 자잘한

178. 옵션도

179. 허용.

180. 6. view

181. 제어

182. 하지

183. 않기.

184. 7. 컴포넌트간의

185. 직관적인

186. 호출

187. 흐름.

188. 8. vanillaJS,

189. ES6.

190. { firstName: John, lastName: Smith, isAlive: true, age: 25, address: { streetAddress: 21 2nd Street, city: New York, state: NY, postalCode: 10021-‐3100 }, phoneNumbers: [ { type: home, 1. 쉬운

191. API

192. 컴포넌트

193. 사용자(개발자)가

194. 쉽게

195. 사용할

196. 수

197. 있는

198. 코드

199. 구현

200. =

201. JSON

202. 처럼

203. 쉽게

204. 설정하기 { firstName: John, lastName: Smith, isAlive: true, age: 25, address: { streetAddress: 21 2nd Street, city: New York, state: NY, postalCode: 10021-‐3100 }, phoneNumbers: [ { type: home, number: 212 555-‐1234 }, { type: office, number: 646 555-‐4567 } ], children: [], spouse: null } 1. 쉬운

205. API

206. 컴포넌트

208. 쉽게

209. 사용할

210. 수

211. 있는

212. 코드

213. 구현

214. =

215. JSON

216. 처럼

217. 쉽게

218. 설정하기 oSS = new SweetSearch(elFormComtainer, { 'sAutoCompleteURL' : sAutoCompleteURLSyrupTable, 'requestType' : 'jsonp', 'jsonp_callbackName' : 'ac_done' }); option을

219. 설정할때도, 1. 쉬운

220. API

221. oSS.registerUserMethod({ 'FN_AFTER_INSERT_AUTO_WORD' : fnInsertAutoCompleteWordSyrupTable, 'FN_AFTER_SELECT_AUTO_WORD' : fnSelectAutoCompleteWord, 'FN_AFTER_SUBMIT' : fnSubmitForm }); custom

222. method를

223. 등록할때도, 컴포넌트

225. 쉽게

226. 사용할

227. 수

228. 있는

229. 코드

230. 구현

231. =

232. JSON

233. 처럼

234. 쉽게

235. 설정하기 1. 쉬운

236. API

237. oSS.onPlugins([ { 'name' : 'RecentWordPlugin', 'option' : { 'maxList' : 7, }, 'userMethod': { 'FN_AFTER_INSERT_RECENT_WORD' : fnInsertRecentSearchWord, 'FN_AFTER_SELECT_RECENT_WORD' : fnSelectRecentSearchWord } } ]); 컴포넌트에

238. 필요한

239. plugin을

240. 등록할

241. 때도,

242. 컴포넌트

244. 쉽게

245. 사용할

246. 수

247. 있는

248. 코드

249. 구현

250. =

251. JSON

252. 처럼

253. 쉽게

254. 설정하기 1. 쉬운

255. API

256. oSS = new SweetSearch(elFormComtainer, { 'sAutoCompleteURL' : sAutoCompleteURLSyrupTable, 'requestType' : 'jsonp', 'jsonp_callbackName' : 'ac_done' }); oSS.registerUserMethod({ 'FN_AFTER_INSERT_AUTO_WORD' : fnInsertAutoCompleteWordSyrupTable, 'FN_AFTER_SELECT_AUTO_WORD' : fnSelectAutoCompleteWord, 'FN_AFTER_SUBMIT' : fnSubmitForm }); oSS.onPlugins([ { 'name' : 'RecentWordPlugin', 'option' : { 'maxList' : 7, }, 'userMethod': { 'FN_AFTER_INSERT_RECENT_WORD' : fnInsertRecentSearchWord, 'FN_AFTER_SELECT_RECENT_WORD' : fnSelectRecentSearchWord } } ]); 컴포넌트

258. 쉽게

259. 사용할

260. 수

261. 있는

262. 코드

263. 구현.

264. =

265. JSON

266. 처럼

267. 쉽게

268. 설정하기. plugins options methods 1. 쉬운

269. API

270. 2. 공통

272. 만들어서

273. 상속하자

274. 컴포넌트

275. 형식의

276. 공통부분은

277. 공통컴포넌트에서

278. 처리 메인컴포넌트

279. 자동완성 공통

280. 컴포넌트 플러그인 플러그인 탭

281. UI 2. 공통

283. 만들어서

284. 상속하자

285. class SweetSearch extends CommonComponent { … } class RecentWordPlugin extends CommonComponent { …. } 상속 컴포넌트

286. 형식의

287. 공통부분은

289. 처리 2. 공통

291. 만들어서

292. 상속하자

293. setOptionsetInitValue constructor new SweetSearch(elFormComtainer, {}); CommonComponent oSweetSearch.onPlugin({…}) onPlugin 2. 공통

295. 만들어서

296. 상속하자 공통부분은

298. 처리 initValue constructor registerEvents oSweetSearch.registerUserMethod({…}) registerUserMethod( runCustomFn runCustomFn

299. 3. 가벼운

300. 메인

301. 컴포넌트

302. 만들기

303. 요구사항만

304. 보면

305. 꽤

306. 무거운

307. 녀석이

308. 될

309. 것이다... 3. 가벼운

310. 메인

311. 컴포넌트

312. 만들기 다양한

313. 뷰(view)

314. 지원.

315. 특정시점에

316. 사용자가

317. 원하는

318. 커스텀

319. 기능

320. 제공.

321. 최근검색어

322. 같은

323. 꼽사리

324. 기능이

325. 필요할

326. 수도

327. 있음.

328. 다양한

329. UI

330. 서비스구조에

332. 함.

333. 모바일웹에서만

334. 우선

335. 사용.

336. 요구사항이

337. 일어날때

338. 큰

339. 수정이

340. 없어야겠음.

341. XHR,

342. JSONP

343. 지원.

344. 최근검색어를

345. 다양한

346. 방식으로

347. 저장할

348. 수

349. 있어야

350. 함.

352. …⋯…⋯..

353. 3. 가벼운

354. 메인

355. 컴포넌트

356. 만들기 책임을

357. 하나씩

358. 갖고

359. 모듈별로

360. 분리하자

362. 책임을

363. 하나씩

364. 갖고

365. 모듈별로

366. 분리하자

367. 메인컴포넌트

368. ‘자동완성’ 3. 가벼운

369. 메인

370. 컴포넌트

371. 만들기

372. 책임을

373. 하나씩

374. 갖고

375. 모듈별로

376. 분리하자

378. ‘자동완성’ 공통

379. 컴포넌트 3. 가벼운

380. 메인

381. 컴포넌트

382. 만들기

383. 책임을

384. 하나씩

385. 갖고

386. 모듈별로

387. 분리하자

388. 플러그인

389. ‘최근검색어’ 메인컴포넌트

391. 컴포넌트 플러그인 3. 가벼운

392. 메인

393. 컴포넌트

394. 만들기

395. 책임을

396. 하나씩

397. 갖고

398. 모듈별로

399. 분리하자

400. 플러그인

401. ‘최근검색어’ 로컬스토리지

402. 모듈 메인컴포넌트

405. 메인

406. 컴포넌트

407. 만들기

408. 책임을

409. 하나씩

410. 갖고

411. 모듈별로

412. 분리하자

413. 플러그인

414. ‘최근검색어’ VIEW

415. 조작 로컬스토리지

419. 메인

420. 컴포넌트

421. 만들기

422. 컴포넌트 서비스

423. 임의로

424. 구현 간단한

425. 클래스 컴포넌트 컴포넌트 컴포넌트 모조리

426. 컴포넌트

427. 형태로

428. 구현 3. 가벼운

429. 메인

430. 컴포넌트

431. 만들기

432. #

434. 기본형태 class Polygon { constructor(height, width) { this.height = height; this.width = width; } get area() { return this.calcArea(); } calcArea() { return this.height * this.width; } } ES6

435. Classes

436. format

437. class CommonComponent { constructor(elTarget, htOption) { this.htOption = htOption; this.htCacheData = {}; this.elTarget = elTarget; this.init(htOption); } init(htOption) { this.setInitValue(); this.setOption(htOption, this._htDefaultOption, this.option); this.initValue(); this.registerEvents(); } setInitValue() { let _d = this.COMPONENT_CONFIG(); this.bMainComponent = !!_d.PLUGINS; //do something… } registerUserMethod(htFn) { this.setOption(htFn, this.htDefaultFn, this.htUserFn); } registerPluginMethod(htFn) { this.appendPluginMethod(htFn, this.htDefaultPluginFn, this.htPluginFn); } ….

438. #

440. CommonComponent.js

441. 4. 플러그인

442. 방식

443. 지원으로

444. 기능

445. 추가를

446. 쉽게

447. 4. 플러그인

448. 방식

449. 지원으로

450. 기능

451. 추가를

452. 쉽게 덩어리

453. 기능을

454. 통째로

455. 넣다

456. 뺏다

459. 자동완성 플러그인

460. (최근검색어) 플러그인

461. (에러메시지표시) 땡땡

462. 플러그인어머나

463. 플러그인 덩어리

464. 기능을

465. 통째로

466. 넣다

467. 뺏다.

468. 플러그인

469. 추가/삭제로

470. 기능의

471. 범위를

472. 넓게

473. 유지 4. 플러그인

474. 방식

475. 지원으로

476. 기능

477. 추가를

478. 쉽게

479. oSS.onPlugins([ { 'name': 'RecentWordPlugin', 'option': { 'maxList': 7, }, 'userMethod': { 'FN_AFTER_INSERT_RECENT_WORD': fnInsertRecentSearchWord, 'FN_AFTER_SELECT_RECENT_WORD': fnSelectRecentSearchWord } }, { 'name': 'TTViewPlugin', 'option': {}, 'userMethod': {} } ]); 4. 플러그인

480. 방식

481. 지원으로

482. 기능

483. 추가를

484. 쉽게 두

485. 개의

486. 플러그인을

487. 추가하는

488. 예제.

490. 자동완성

491. 컴포넌트 플러그인

492. 컴포넌트 컴포넌트와

493. 플러그인의

494. 결합은

495. 느슨하게 플러그인

497. 컴포넌트 …⋯ 4. 플러그인

498. 방식

499. 지원으로

500. 기능

501. 추가를

502. 쉽게

503. 이

504. 들은

505. 부모,자식처럼

506. 친한

507. 관계지만,

509. 서로를

510. 잘

511. 모른다 4. 플러그인

512. 방식

513. 지원으로

514. 기능

515. 추가를

516. 쉽게 자동완성

520. 컴포넌트 …⋯

521. onPlugins()공통

522. 컴포넌트 자동완성

523. 컴포넌트 느슨한

524. 결합. 공통컴포넌트를

525. 통해

527. plugin

528. 초기화 dockingPluginMethod() injectParentObject() 플러그인

529. 컴포넌트 부모

530. 객체를

532. 플러그인에

533. injection해서

534. 필요한

535. 함수를

536. 받을

537. 수

538. 있게. 플러그인

539. 함수

540. 등록요청을

541. 한다 'FN_AFTER_FOCUS'

543. :

544. this.showRecentSearchWord.bind(this),

545. 'FN_AFTER_INPUT'

546. :

547. this.handlerCloseLayer.bind(this),

548. 'FN_AFTER_SUBMIT'

549. :

550. this.saveQuery.bind(this) registerPluginMethod() 4. 플러그인

551. 방식

552. 지원으로

553. 기능

554. 추가를

555. 쉽게

556. showRecentSearchWord()자동완성

558. 컴포넌트들 공통

559. 컴포넌트 runCustomFn() FN_AFTER_FOCUS 적절한

560. 시점에

561. 실행. 느슨한

562. 결합. 4. 플러그인

563. 방식

564. 지원으로

565. 기능

566. 추가를

567. 쉽게

568. 플러그인

569. (최근검색어) 플러그인

570. (에러메시지표시) 플러그인플러그인 cookielocal

571. storage 메인컴포넌트

572. 자동완성 플러그인도

573. 하위

574. 기능을

575. 포함할

576. 수

577. 있음 4. 플러그인

578. 방식

579. 지원으로

580. 기능

581. 추가를

582. 쉽게

583. init(htOption) { this.setInitValue(); super.setOption(htOption, this.htDefaultOption, this.option); this.registerEvents(); this.oStorage = new RecentWordPluginLocalStorageAddOn(searchQuery, this.option.maxList); } 플러그에서

584. 하위

585. 기능(모듈)을

586. 추가하는

587. 코드. 4. 플러그인

588. 방식

589. 지원으로

590. 기능

591. 추가를

592. 쉽게

593. 5. 자잘한

594. 옵션도

595. 허용

596. 5. 자잘한

597. 옵션도

598. 허용. 소소한

599. 옵션은

601. 범용성을

602. 올려준다

604. 5. 자잘한

605. 옵션도

606. 허용 소소한

607. 옵션은

609. 범용성을

610. 올려준다

611. oSS = new SweetSearch(elFormComtainer, { 'sAutoCompleteURL' : sAutoCompleteURLSyrupTable, 'AjaxRequestType' : ‘jsonp', //ajax, jsonp, user 'jsonp_callbackName' : 'ac_done' }); XHR로

612. 할래,

613. JSONP로

614. 할래,

615. 니가

616. 직접

617. Ajax처리할래?

618. JSONP면

619. callback

620. name은

621. 뭘로

622. 할래?

623. 5. 자잘한

624. 옵션도

625. 허용. option

626. 설정

627. 방법

628. :

630. 옵션값과

631. 기본값을

632. 통해

633. 값을

634. 결정

635. //CommonComponent.js setOption (htValue, htDefaultValue, htStorage) { Object.keys(htDefaultValue).forEach((v) = { if (typeof htValue[v] === undefined) { htStorage[v] = htDefaultValue[v]; } else { if(Object.prototype.toString.call(htValue[v]) !== [object Object]) { htStorage[v] = htValue[v]; return; } htStorage[v] = {}; this.setOption.call(this, htValue[v], htDefaultValue[v],htStorage[v]); } }); }

636. 6. view

637. 제어

638. 하지

639. 않기.

640. 6. view

641. 제어

642. 하지

643. 않기. VIEW는

645. 영역이

646. 아니므이다 플러그인

647. (최근검색어) VIEW

650. 자동완성 공통

652. 제각각인

653. VIEW

654. 처리는

655. 서비스

656. 개발에서

657. 알아서

658. 한다..

659. 제각각인

660. VIEW

661. 처리는

662. 서비스

663. 개발에서

664. 알아서

665. 한다.. var fnInsertAutoCompleteWordSyrupTable = function(sData) { console.log(fnInsertAutoCompleteWord); var result = ; var sHTML = ; var sTemplate = lispan[%sKeyword%]/span/li; var sInputValue = elInputField.value; var sInputValueNoBlank = sInputValue.replace(/s+/g, ); var bHighlightMatchedWord = true; if(!sData) return; sData['kwds'].forEach( function(v) { result = sTemplate.replace(/[%sKeyword%]/, v[0]); if(bHighlightMatchedWord) { if(v.indexOf(sInputValue) -‐1) { result = result.replace(sInputValue, b+sInputValue+/b); } else { result = result.replace(sInputValueNoBlank, b+sInputValueNoBlank+/b); } } sHTML += result; }); elAutoCompleteLayer.querySelector(ul).innerHTML = sHTML; }

666. registerUserMethod자동완성

667. 컴포넌트 6. view

668. 제어

669. 하지

670. 않기. view

671. 조작

672. 함수는

673. 등록

674. 후,

675. 필요할

676. 때

677. 실행

678. fnInsertAutoCompleteWord,VIEW 필요한

679. 메서드를

680. 등록

681. (subscribe) 적절한

682. 시점에

683. 발행

684. (publish)

685. registerUserMethod자동완성

686. 컴포넌트 6. view

687. 제어

688. 하지

689. 않기. view

690. 조작

691. 함수는

692. 등록

693. 후,

694. 필요할

695. 때

696. 실행

697. fnInsertAutoCompleteWord,VIEW 필요한

698. 메서드를

699. 등록

700. (subscribe) 적절한

701. 시점에

702. 발행

703. (publish) view

704. 관련

705. 된

706. 것을

707. 포함해서,

709. 플러그인이나

710. 사용자

711. 정의

712. 메서드는

713. 모두

714. 동일한

715. 방식으로

716. 처리.

717. 7. 컴포넌트

718. 간의

719. 직관적인

720. 호출

721. 흐름

724. (최근검색어) 공통

725. 컴포넌트 VIEW

727. 모듈 플러그인

728. (에러메시지표시) 7. 컴포넌트

729. 간의

730. 직관적인

731. 호출

732. 흐름 실행

733. 시,

734. 메인

736. 중심으로

737. 단방향

738. 흐름을

739. 유지

742. (최근검색어) 공통

743. 컴포넌트 VIEW

745. 모듈 플러그인

746. (에러메시지표시) 7. 컴포넌트

747. 간의

748. 직관적인

749. 호출

750. 흐름 실행

751. 시,

752. 메인

754. 중심으로

755. 단방향

756. 흐름을

757. 유지

758. 8.vanillaJS,

759. ES6

760. 8. vanillaJS,

761. ES6 “컴포넌트코드는

762. 생명이

763. 길고,

764. 다양한

765. 환경에서

767. 함”

768. 방향

769. :

770. 라이브러리

771. 의존성

772. 제거.

773. ES6

774. 기반

775. 코드

776. 구현. Classes,

778. Spread,

779. Arrows,

780. let

782. …⋯

783. Common

784. Component AA

785. Component BB

786. Component CC

787. Component A-1

788. plugin

789. A-2

790. plugin

791. B-1

792. plugin

793. B-2

794. plugin

795. C-1

796. plugin

797. C-2

798. plugin

799. Component의

800. 공통

801. 기능

802. option

803. 설정

804. plugin

805. 등록 utility

806. library 모든

807. 파일에서

808. 참고하는

809. 유틸리티

810. 메서드

811. animation

812. 처리

813. css

814. 속성

815. 추가

816. null

817. 체크

819. .. Components

820. 해당

821. component에

822. 필요한

823. 기능 Plugins

824. option으로

825. 제공되는

826. 추가기능. 결국

827. 컴포넌트는

828. 이런

829. 모습

830. Common

831. Component SweetSearch

832. Component

833. RecentWor dPlugin Component의

834. 공통

835. 기능

836. option

837. 설정

838. plugin

839. 등록 SweetSearch

841. keyboard

842. 이벤트

843. 리스너

844. 등록

845. 자동완성

846. 데이터

847. 반영. RecentWordPlugin

848. 최근

849. 검색어

850. 노출. LocalStorag eaddOn AddOn

851. 최근

852. 검색어

853. 저장

854. 창고.

855. localstorage. 자동완성

856. 컴포넌트는

857. 이런

858. 모습

859. 본기능,

860. 플러그인,

861. 옵션의

862. 경계는

863. 무엇일까?

864. 어디까지

865. 추상화를

866. 해야

867. 할까?

868. 마크업의

869. 규칙

870. 제약은

871. 어느수준으로

872. 필요할까?

873. 더

874. 쉽게

875. 사용할

876. 수는

877. 없을까?

878. ES5빌드의

879. 크기를

880. 더

881. 줄일

882. 수

883. 없을까? 여전한

884. 고민..

885. 뷰는

886. 분리하고

887. 컴포넌트에

888. 느슨하게

889. 결합.

890. 옵션과

891. 플러그인

892. 방식으로

893. 다양한

894. 가능성을

895. 제공.

897. 직접

898. 호출을

899. 제거해서

900. 결합도

901. 낮추기.

902. 다른

903. 라이브러리에

904. 의존하지

905. 않기.

906. summary.

907. https://github.com/skplanet/sweetsearch/ Code.

908. 감사합니다.

재사용UI 컴포넌트설계

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

More from 지수 윤

More from 지수 윤 (20)

재사용UI 컴포넌트설계