WEB Front-End 개발과정 살펴보기

1. Web

2. Front-End

3. 개발과정

4. 살펴보기 윤지수 SK Planet 2015. 07

5. 이

6. 문서는,

7. 웹

8. 프론트엔드

9. 개발과정의

10. 많은

11. 것들을

12. 담고

13. 있습니다.

15. 본인도

16. 막상

17. 지키기

18. 어려운

19. 것들이며

20. 표준도

21. 아닙니다.

22. 이를

23. 참고로

24. 프론트엔드

25. 개발의

26. 특징을

27. 이해하고,

28. 어울리는

29. 개발과정을

30. 만들기

31. 바랍니다.

32. 3가지

33. 주제를

34. 다룹니다 FE관점에서의

35. 서비스개발

36. 절차 개발

37. 컨벤션빌드

39. 배포

40. 1. FE관점에서의

41. 서비스개발

42. 절차 개발

43. 컨벤션빌드

45. 배포

46. 1.

47. FE관점에서의

48. 서비스

49. 개발절차 기획 설계 개발 검증 크게

50. 4단계

51. 그리고,

52. JavaScript개발자

53. 위주의

54. 절차

55. 1.

57. 서비스

58. 개발절차 기획 설계 개발 검증 개발자도

59. 기획(?)해야

60. 하는

61. 단계.

62. 1.

64. 서비스

65. 개발절차 기술

66. 검토

68. Prototyping 기획 설계 개발 검증

69. 1.

71. 서비스

72. 개발절차 WHY

73. ? HOW

74. ? 기획자가

75. 기획할

76. 때

77. 손놓고

78. 있으면

79. 큰일남.

81. 초기에

82. 개발비용을

83. 적합하게

84. 할

85. 수

86. 있는

87. 시기.

88. 프로토타이핑을

89. 통해서

90. 개발

91. 위험요소

92. 제거.

94. 기능과

95. 인터랙션에

96. 대한

97. 컨세서스

98. 확립. 기획단계에서

99. 적극

100. 미팅

101. 참여.

102. 가벼운

103. 코드

104. 기반의

105. 프로토타이핑

106. 구현으로

107. 동작되는

108. 실체를

109. 미리미리

110. 공유.

111. 기획 설계 개발 검증 기술

112. 검토

114. Prototyping

115. 1.

117. 서비스

118. 개발절차 기획 설계 개발 검증 브라우저

119. 지원환경과

120. 개발

121. 여건

122. 확인 기술

123. 검토

125. Prototyping

126. 1.

128. 서비스

129. 개발절차 브라우저

131. 개발

132. 여건

133. 확인 WHY

134. ? HOW

135. ? 브라우저

137. 개발기간은

138. 어느정도

139. 비례.

140. 프로젝트를

141. 위한

142. 여건은

143. 대부분

144. 완전하지

145. 못함. 지원해야

146. 할

147. OS/브라우저를

148. 확인하여

149. 브라우저별

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. 검토

181. Prototyping

182. 1.

184. 서비스

185. 개발절차 기획 설계 개발 검증 시간을

186. 투자할수록

188. 비용이

189. 절감되는시기.

190. 1.

192. 서비스

193. 개발절차 Test

194. Case

195. 도출 기획 설계 개발 검증

196. 1.

198. 서비스

199. 개발절차 Test

200. Case

201. 도출 기획 설계 개발 검증 WHY

202. ? HOW

203. ? 이것이

204. 있다면

205. 개발자가

206. 개발중에

207. 수시로

208. 테스트

209. 할

210. 수

211. 있음.

212. 기획서에

213. 대한

214. 보충자료로

215. 활용할

216. 수

217. 있음.

219. 내가

220. 개발을

221. 어느정도

222. 한

223. 것인지

224. 중간중간

225. 가늠할

226. 수

227. 있음. 개발자

228. 또는

229. 테스트전문요원이

230. 작성하며,

231. 개발자는

232. 그내용을

233. 이

234. 시기에

235. 반드시

236. 확인.

237. 개발자는

238. 이를

239. 토대로

240. 개발task

241. 도출하는데

242. 활용

243. 가능.

244. 기획서와

245. 1:1

246. 매핑될수록

247. 좋음.

249. 추가된

250. 내용을

251. 계속

252. 업데이트함으로써

253. ‘얼마나

254. 많은

255. 추가

256. 요구사항이

257. 있었는지

258. 표시가능’

259. 사용자

260. 입장에서

261. 어떻게

262. 인터랙션이

263. 이뤄지는지

264. 작성.

265. ex)

266. ‘하단

267. 노란색

268. 영역을

269. 마우스를

270. 클릭했을

271. 때

272. 번쩍하면서

273. 1초간

274. 위쪽

275. 파란색영역이

276. 새로운

277. 내용을

278. 바뀐다’

279. 수시로

280. 쉽게

281. 볼

282. 수

283. 있는

284. 곳에

285. 작성해서

286. 확인.

289. test

290. case를

291. 다르게

292. 작성할

293. 필요

294. 있음.

295. 1.

297. 서비스

298. 개발절차 기획 설계 개발 검증 개발

299. task(feature)

300. 도출

301. 1.

303. 서비스

304. 개발절차 개발

305. task(feature)

306. 도출 기획 설계 개발 검증 WHY

307. ? HOW

308. ? 분석되지

309. 않은만큼

310. 리스크를

311. 남겨두고

312. 가는

313. 것.

314. 일정

315. 예측을

316. 조금이라도

317. 정확하게

318. 하기

319. 위해. 1-2-3-4-5…⋯

320. depth를

321. 파고들어

322. 최대한

323. 자세하게

324. 나누기.

325. UI

326. 인터랙션을

327. 자세하게

328. 표현.

329. 무엇을,

330. 누가,

331. 언제,

332. 어떻게,누구와

333. 해야

334. 할지를

335. 표현.

336. ‘backlog

337. template'

338. 을

339. 찾아봐도

340. 도움.

341. 엑셀은

342. 이런거

343. 하라고

344. 있는

345. 것임.

346. 주니어/시니어

347. 모두

348. 다

349. 달라붙어서

350. 작업.(어쩔

351. 수

352. 없다

353. ..개발자가

354. 직접해야

355. 한다)

356. 1.

358. 서비스

359. 개발절차 기획 설계 개발 검증 일정

360. 예측

361. (일정은

362. 산정이

363. 아니라

364. 그저

365. 예측)

366. 1.

368. 서비스

369. 개발절차 기획 설계 개발 검증 WHY

370. ? HOW

371. ? 일정을

372. 예측하는

373. 건

374. 품질을

375. 사수하기

376. 위해서임.

377. 아무

378. 말도

379. 안하면

380. 정해진

381. 일정내로

382. 다

383. 되는

384. 줄

385. 안다.

386. 일정을

387. 근거로

388. 기능과

389. 일정에

390. 대한

391. trade-off

392. 를

393. 해야

394. 함. 개발

395. task

396. 를

397. 기초로

398. 시간을

399. 취합하여

400. 일정

401. 예측.

402. 모든

403. 잡다구리

404. 한

405. 일을

406. 다

407. 포함해서

408. 예측.  (각종미팅,

409. 데모,

410. 워크샵,

411. 휴가,

412. 리팩토링,

413. 개발중

414. 테스트시간,

415. 그리고도

416. 버퍼약간

417. 더)

419. 지원비용

420. 까지도

421. 포함

423. (특정

424. 브라우저의

425. 이상

426. 동작으로

427. 인한

428. 삽질

429. 시간을

430. 버퍼로

431. 당연히

432. 포함해야

433. 함)

434. 일정

435. 산정은

436. sprint

437. 나

438. milestone

439. 단위로

440. 계속

441. 예측하고

442. 주변에

443. 공유해주기. 일정

444. 예측

445. (일정은

446. 산정이

447. 아니라

448. 그저

449. 예측)

450. 1.

452. 서비스

453. 개발절차 기획 설계 개발 검증 Back-End

454. 개발자와

455. 역할

456. 분담

457. 1.

459. 서비스

461. ? HOW

462. ? 좋은

463. 서비스는

464. 프론트-백엔드의

465. 역할이

466. 분명하고

467. 조화로와야

468. 가능.

469. back-end해야

470. 할

471. 것을

472. front-end에서

473. 하거나

474. 그

475. 반대의

476. 경우가

477. 생김. API

478. interface

479. 설계는

480. Font-end

481. 개발자가

482. 고객이라고

483. 생각하는

484. 마인드

485. 갖기.(조심.

486. 백엔드

487. 개발자가

488. 안좋아함)

489. XHR

490. 통신과정을

491. 처리하는데

492. 효율적이지

493. 않은

494. 부분이

495. 없는지

496. 협의.(불필요한

497. 요청을

498. 자주보내야한다던가)

499. 첫

500. 페이지

501. 로딩과정을

502. 어떻게

503. 구현해야,

504. 무지

505. 빠른

506. 첫페이지를

507. 만들지

508. 협의.

509. 빌드/배포

510. 단계에서

511. client-server

512. 구현물을

513. 어떻게

514. 해서

515. 통합하고

516. 자동화

517. 할

518. 수

519. 있을지

520. 협의. Back-End

521. 개발자와

522. 역할

523. 분담

524. 1.

526. 서비스

528. 컨벤션

529. 정하기

530. 1.

532. 서비스

534. 컨벤션

535. 정하기 WHY

536. ? HOW

537. ? 나

538. 혼자

539. 개발하는

540. 것이

541. 아니다.

542. 계속

543. 돌아가게

544. 하는

545. 서비스를

546. 만들기

547. 위한

548. 기반. coding

549. convention

550. 은

551. 어떤

552. 것을

553. 기준으로

554. 할지

555. 어떻게

556. 검증할지,

557. jslint

558. 룰을

559. 사용할지,

560. 어떤

561. 기준을

562. 적용할지,

563. commit

564. 단위는?

565. commit

566. log는

567. 어떤

568. convention

569. 을

570. 할지,

571. test

572. code는

573. 어느수준으로

574. 구현할지,

576. 빌드를

577. 어떤

578. 방식으로

579. 어떤

580. 주기로

581. 할지.

582. 1.

584. 서비스

585. 개발절차 기획 설계 개발 검증 code

586. design

587. 1.

589. 서비스

591. ? HOW

592. ? code

593. and

594. fix

595. (x)

597. javascript

598. 언어의

599. 유연성이

600. 우릴

601. 공격할

602. 것이다

603. ! 서비스

604. UI

605. 코드의

606. 구조

607. 잡기.

609. 설계

610. 결과물

611. 업데이트

612. 잘

613. 되게

614. 하는

615. 법

616. 고민..

618. namespace

619. 기준

620. 설정.

621. 모듈화와

622. class

623. 단위는

624. 어떤

625. 단위로,

626. 어떻게

627. 구현할지

629. (jquery

630. plugin?,

631. javacript

632. prototype?,

633. es6

634. class?)

635. 의존성을

636. 어떻게

637. 구현할지.(require

638. ?

639. es6

640. import?)

641. 개발

642. 디렉토리

643. 룰

644. 셋

645. 정의.

646. 사용할

647. 라이브러리

648. 정하고

649. 관리하기.

650. 만들

651. UI컴포넌트와

652. 사용할

653. UI컴포넌트

654. 구분해두기. code

655. design

656. 1.

658. 서비스

659. 개발절차 기획 설계 개발 검증 쉬어가는

660. 페이지..

661. 아직

662. 개발

663. 전..

664. 1.

666. 서비스

667. 개발절차 기획 설계 개발 검증 지금까지

668. 것을

669. 정리하고

671. 그걸

672. 기준으로,

673. 잘

674. 지키며

675. 개발하기

676. 돌입!

677. 1.

679. 서비스

680. 개발절차 기획 설계 개발 검증 목표

681. 수립

682. /

683. 데모

684. 반복

685. 진행

687. 1.

689. 서비스

690. 개발절차 기획 설계 개발 검증 목표

691. 수립

692. /

693. 데모

694. 반복

695. 진행

696. WHY

697. ? HOW

698. ? 계속

699. 자주

700. 보여주지

701. 않으면

702. 나중에

703. 딴

704. 소리

705. 듣는다.

706. UI

707. 개발은

708. 직접

709. 써

710. 봐야

711. 그

712. 느낌을

713. 안다.(미리미리

714. 수정할

715. 기회가

716. 생김) 적당한

717. iteration

718. 주기를

719. 설정하고

720. 계획수립/데모

721. 주기적으로

722. 실행.

723. 데모는

724. 모든

725. 협업관련

726. 자들이

727. 다

728. 볼

729. 수

730. 있고

731. 쓸

732. 수

733. 있게

734. 공유.

735. 동시에

736. 일정을

737. 예측하고

738. 공유.

739. 회사의

740. 표준

741. 개발

742. 방법론을

743. 따르되

744. 융통성

745. 있게

746. 의미를

747. 상기하며

748. 재활용.

749. (프로세스를

750. 지키는

751. 것이

752. 아닌

753. 가치를

754. 지키며

755. 활용하려고

756. 노력)

757. 1.

759. 서비스

760. 개발절차 기획 설계 개발 검증 자주

761. 쉽게

762. build하기

763. 1.

765. 서비스

766. 개발절차 기획 설계 개발 검증 자주

767. 쉽게

768. build하기 WHY

769. ? HOW

770. ? 잦은

771. 통합은

772. 나중

773. 문제를

774. 미리

775. 발견할

776. 기회(좀

777. 뻔하고

778. 당연한

779. 이야기..)

780. 성능도

781. 확인하기도

782. 하고. Javascript

783. -

784. CI

785. 연동을

786. 통해서

787. 구현

788. (jenkins,

789. Travis

790. (github연동))

791. grunt

792. 또는

793. gulp

794. 를

795. 통한

796. 빌드.(watch

797. 기능

798. 활용) image : http://iamemmanouil.com/

799. 1.

801. 서비스

803. 중

804. 기본

805. Test

806. case

807. 점검

808. 1.

810. 서비스

812. 중

813. 기본

814. Test

815. case

816. 점검 WHY

817. ? HOW

818. ? 개발

819. 중간중간

820. 미리미리

821. 문제를

822. 스스로

823. 발견할

824. 수

825. 있음.

826. 기능의

827. 완전함을

828. 스스로

829. 확인

830. 할

831. 수

832. 있음. Test

833. case

834. 항목을

835. 기준으로

836. sprint

837. demo를

838. 하면서,

840. TC의

841. 중요성을

842. 프로젝트

843. 멤버들이

844. 더

845. 느낄

846. 수

847. 있게

848. 하기.

849. 개발자가

850. 스스로

851. TC를

852. 기준으로

853. 개발

854. 중

855. 자가

856. 테스트

857. 실시.

858. 1.

860. 서비스

861. 개발절차 기획 설계 개발 검증 test

862. code

863. 구현.

864. 1.

866. 서비스

867. 개발절차 기획 설계 개발 검증 test

868. code

869. 구현. WHY

870. ? HOW

871. ? 내

872. 코드

873. 품질의

874. 보증

875. 수표.

876. 함수가

877. 기능단위로

878. 간결해진다.

880. 기타

881. 등등... 일단

882. 왜

883. 해야

884. 하는지

885. 공감하고

886. 출발.

888. TDD를

889. 할지는

890. 동료와

891. 협의

892. 후

893. 진행.(컨세서스

894. 무지

895. 중요)

896. 어떤류의

897. 함수를,

898. 어느정도의

899. 커버리지를

900. 목표로

901. 할

902. 것인가.

903. core

904. 기능이나

905. common

906. 기능은

907. test

908. code는

909. 가급적

910. 구현하는걸로.

911. qunit,

912. jasmin

913. 등

914. 참고할

915. 수

916. 있는

917. 예제가

918. 풍부함.

919. gulp

920. /

921. grunt

922. build

923. 단계에서

924. 콘솔기반의

925. 테스트

926. pass/fail

927. 확인

928. 가능.

929. (phantomJS

930. 등

931. 활용)

932. 1.

934. 서비스

935. 개발절차 기획 설계 개발 검증 code

936. review. https://blog.bitbucket.org/2012/10/09/introducing-the-redesigned-bitbucket/

937. 1.

939. 서비스

941. ? HOW

942. ? 팀

943. 단위의

944. 튼튼한

945. 코드

946. 만들기.

947. 개개인의

948. 성장은

949. 팀의

950. 성장.

951. 공개하는

952. 것만으로도

953. 코드

954. 품질이

955. 좋아짐. 건전한

956. 토론

957. 문화가

958. 형성되는

959. 것도

960. 중요.

961. 기분

962. 나쁘지

963. 않는

964. 분위기

965. 조성.

966. online

967. 방식도

968. 추천.

970. 소스

971. 저장

972. 전에

973. 리뷰단계를

974. 거치도록

975. 프로세스화

976. 가능. code

977. review.

978. 1.

980. 서비스

982. 기간

983. 만큼

984. 시간이

985. 소요될

986. 수도

987. 있는,

988. 1.

990. 서비스

991. 개발절차 기획 설계 개발 검증 도구

992. 학습이

993. 중요.

994. 1.

996. 서비스

998. 학습이

999. 중요. WHY

1000. ? HOW

1001. ? Front-end

1002. 는

1003. 대체로

1004. 디버깅이

1005. 어려움.

1006. 반면

1007. 다양하고

1008. 쓸만한

1009. 도구들이

1010. 계속

1011. 나오고

1012. 있음. JIRA와

1013. 같은

1014. 이슈트래킹

1015. 도구를

1016. 잘

1017. 쓰는

1018. 건

1019. 기본.

1021. chrome

1022. developer

1023. tool

1024. 잘

1025. 사용하기.(source,

1026. console,element

1027. 등)

1028. fiddler를

1029. 활용한

1030. 운영서비스

1031. 파일

1032. 치환

1033. 테스트.

1034. weinre나

1035. Ghostlab

1036. 을

1037. 활용한

1038. 모바일웹

1039. remote

1040. 디버깅.

1041. virtualBox를

1042. 활용한

1043. 로컬기반

1044. 테스트.

1045. 1.

1047. 서비스

1049. 학습이

1050. 중요. 이미지 : https://css-tricks.com/using-chrome-devtools-to-debug-javascript-in-any-browser-with-ghostlab-2/?utm_source=dlvr.itutm_medium=facebook Mobile

1051. web

1052. -

1053. USB로

1054. 쉽게

1055. 연결하여

1056. inspection!

1057. (chrome,

1058. safari)

1059. 1.

1061. 서비스

1063. 학습이

1064. 중요. 이미지 : https://css-tricks.com/using-chrome-devtools-to-debug-javascript-in-any-browser-with-ghostlab-2/?utm_source=dlvr.itutm_medium=facebook Mobile

1065. web

1066. 쓸만한

1067. 유료

1068. 도구

1069. 활용

1070. (회삿돈)

1071. 1.

1073. 서비스

1075. 학습이

1076. 중요. 특히

1077. 모바일

1078. 디버깅

1079. 도구는

1080. 계속

1081. 발전하고

1082. 있으며,

1084. 새로운

1085. 도구를

1086. 계속

1087. 지켜보고

1088. 사용해야

1089. 함.

1090. 1.

1092. 서비스

1093. 개발절차 기획 설계 개발 검증 좀

1094. 어려운

1095. ..성능

1096. 검증/개선

1097. 1.

1099. 서비스

1101. ? HOW

1102. ? 개발

1103. 단계에서

1104. 이미

1105. 충분히

1106. 확인했지만서도,,

1107. 출시전

1108. 이야기는

1109. 반드시

1110. 이슈로

1111. 등장. 초기화면은

1112. 일단

1113. 빠르게(server

1114. rendering,

1115. request

1116. count,

1117. resources

1118. size

1119. 신경쓰기)

1120. chrome

1121. 개발자도구의

1122. Tileline

1123. ,

1124. network,

1125. audit

1126. 기능

1127. 잘

1128. 익혀보기.

1129. javascript

1130. 동적

1131. 로딩

1132. 사용하기.

1133. 의외로

1134. javascript

1135. 코딩

1136. 기법은

1137. 아주

1138. 큰

1139. 차이가

1140. 없음.

1141. gulp,

1142. grunt

1143. 를

1144. pagespeed로

1145. 연동해서

1146. 빌드

1147. 단계에서

1148. 성능

1149. 측정하기. 좀

1150. 어려운

1151. ..성능

1152. 검증/개선

1153. 2. FE관점에서의

1154. 서비스개발

1155. 절차 개발

1156. 컨벤션빌드

1157. /

1158. 배포

1159. 2.

1160. 개발

1161. 컨벤션. 1.

1163. 선택. 모바일웹에서

1164. jquery

1165. 와

1166. 같은

1167. 기본

1168. 라이브러리가

1169. 필요할까?

1170. 최근

1171. 모바일

1172. 브라우저는

1173. ES5

1174. 수준까지

1175. 잘

1176. 지원하고

1177. 있으며

1178. HTML5,CSS3

1179. 많은

1180. 기능을

1181. 잘

1182. 지원함.

1183. 기본

1184. 프레임워크

1185. 없이도

1186. 부족하고

1187. 선택적으로

1188. 다양한

1189. polyfill

1190. 라이브러리를

1191. 활용. 기본

1192. 라이브러리.

1193. 2.

1194. 개발

1195. 컨벤션. 1.

1197. 선택. 2015년

1198. 현재는

1199. ES6

1200. 방식의

1201. 코딩패턴의

1202. 인기가

1203. 말도

1204. 못함.

1206. babel,

1207. Traceur

1208. 등의

1209. transpiler의

1210. 도움으로

1211. ES6

1212. 문법을

1213. 당장

1214. 쓸

1215. 수

1216. 있음. 기본

1217. 라이브러리. function timeout(duration = 0) { return new Promise((resolve, reject) = { setTimeout(resolve, duration); }) } var p = timeout(1000).then(() = { return timeout(2000); }).then(() = { throw new Error(hmm); }).catch(err = { return Promise.all([timeout(100), timeout(200)]); }) code : https://github.com/lukehoban/es6features

1218. 2.

1219. 개발

1220. 컨벤션. 1.

1222. 선택. Framework AngularJS

1223. ,

1224. reactJS,

1225. BackboneJS

1226. 과

1227. 같은

1228. 대표

1229. 프레임워크

1230. 중

1231. 고르기.

1232. (http://todomvc.com/

1233. 같은

1234. 걸

1235. 써보면서

1236. 비교해

1237. 보자)

1238. 잘

1239. 모르겠으면

1240. 가장

1241. 잘

1242. 아는

1243. 걸

1244. 쓰는

1245. 것도

1246. 방법.

1247. 닭

1248. 잡는데

1249. 소잡는

1250. 칼을

1251. 잡지는

1252. 말기.

1253. 이

1254. 모든

1255. 게

1256. 필수는

1257. 아니다라는..

1258. 팀단위

1259. 사용이라면

1260. 구성원들간에

1261. 충분한

1262. 학습이

1263. 선행되야

1264. 함.

1266. 프레임워크를

1267. 쓰는

1268. 것보다

1269. ‘구조설계’를

1270. 어떻게

1271. 잘

1272. 하는가가

1273. 더

1274. 중요함.

1275. 이왕이면

1276. 단순하고

1277. 좀더

1278. 직관적인

1279. 상대적으로

1280. 쉬운

1281. 프레임워크를

1282. 사용하는

1283. 것을

1284. 권장.

1285. (reactJS

1286. 살짝

1287. 추천)

1288. 2.

1289. 개발

1290. 컨벤션. 2.

1291. 컴포넌트

1292. 개발 재사용이

1293. 가능한

1294. 수준으로

1295. 개발해야

1296. 함.

1297. 몇

1298. 가지

1299. 페이지에서

1300. 재사용이

1301. 가능한

1302. 수준으로

1303. 개발

WEB Front-End 개발과정 살펴보기

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to WEB Front-End 개발과정 살펴보기

Similar to WEB Front-End 개발과정 살펴보기 (20)

More from 지수 윤

More from 지수 윤 (20)

WEB Front-End 개발과정 살펴보기