[D2대학생세미나] frontend개발자가 들려주는 개발 이야기

1. Front-End

2. 개발자가

3. 들려주는

4.
개발

5. 이야기

6.
작성자:

7. 손찬욱

8. 과장

9.
공통플랫폼개발랩

10.
ⓒ

11. NAVER

12. Corp.

14. 손찬욱

31. 공통플랫폼개발랩

65. 공공S/W

66. 아키텍처팀

69. Jindo

70. Mobile

71. Component

72. 개발

74. 네이버

75. 모바일웹

76. 기술지원

78.
“쉽고

79. 빠른

80. 모바일

81. 웹

82. UI

83. 개발”

85. Front

86. End

87. 진화의

88. 시작

90. 4

91. /

92. Front

93. End

94. 개발자가

95. 들려주는

96. 개발

97. 이야기

98.
1.

99. Web이

100. 나오기

101. 까지

102.
network

103.
App

104. Res

105.
Server

106.
Res

107.
S/W

108. Res

109. App

110. Res

111.
자원(Resource)이

112. 중복?

113. 공유하고

114. 싶은데…⋯

115.
소프트웨어(App)변경

116. 시마다

117. PC에

118. 다시

119. 설치해야

120. 하나?

122.
App

123.
HTTP

125. 5

126. /

127. Front

128. End

129. 개발자가

130. 들려주는

131. 개발

132. 이야기

133.
2.

134. Server

135. 중심의

136. Web

137. Architecture

138. (Thin

139. client)

140.
network

141.
S/W

142. Res

143.
Server

144.
Res

145.
S/W

146. Res

147. S/W

148. Res

149.
App

150.
HTTP

151.
HTML

152.
CSS

153.
Javascript

154.
Java,

155. Servlet,

156. JSP

157.
C#,

158. ASP.NET

159.
C,

160. C++

161. …⋯

162.
View

163. 영역

164.
Programming

165. 영역

167. 6

168. /

169. Front

170. End

171. 개발자가

172. 들려주는

173. 개발

174. 이야기

175.
3.

176. Web

177. 기술의

178. 발전

179.
Ajax

180. (Asynchronous

181. Javascript

182. And

183. XML)

185. 7

186. /

187. Front

188. End

189. 개발자가

190. 들려주는

191. 개발

192. 이야기

193.
3.

194. Web

195. 기술의

196. 발전

197.
HTTP

198. request

199.
HTTP

200. response

201.
action

202.
BLOCK

203.
action

204.
HTTP

205. request

206.
HTTP

207. response

208.
None-Ajax

209.
Ajax

210.
전체

211. 페이지

212. 전환

213. 없이…⋯

214.
Block

215. 없이…⋯

216.
서버당

217. 처리

218. User수

219. 증가로

220.
비용감소

221.
Request

222. 용량

223. 감소로

224.
비용감소

225.
Application

227. 8

228. /

229. Front

230. End

231. 개발자가

232. 들려주는

233. 개발

234. 이야기

235.
4.

236. Web

237. Application의

238. 확산

240. 9

241. /

242. Front

243. End

244. 개발자가

245. 들려주는

246. 개발

247. 이야기

248.
5.

249. Front

250. End

251. 영역

252. (Rich

253. client)

254.
HTML

255.
CSS

256.
Javascript

257.
Java,

258. Servlet,

259. JSP

260.
C#,

261. ASP.NET

262.
C,

263. C++

264. …⋯

265.
network

266.
S/W

267. Res

268.
Server

269.
Res

270.
S/W

271. Res

272. S/W

273. Res

274.
HTTP

275.
View

276. 영역

277.
Programming

278. 영역

279.
App

280.
App

281. App

282.
Programming

283. 영역

284.
Back-End

285.
Front-End

286.
Javascript

287.
Res

288.
HTML5

289.
CSS3

290.
Res

292. 10

293. /

294. Front

295. End

296. 개발자가

297. 들려주는

298. 개발

299. 이야기

300.
6.

301. Front

302. End

303. 영역

304. 수요의

305. 증가

307.
Google

308. Trend

310. 11

311. /

312. Front

313. End

314. 개발자가

315. 들려주는

316. 개발

317. 이야기

318.
6.

319. Front

320. End

321. 영역

322. 수요의

323. 증가

325.
Indeed

327. 12

328. /

329. Front

330. End

331. 개발자가

332. 들려주는

333. 개발

334. 이야기

335.
6.

336. Front

337. End

338. 영역

339. 수요의

340. 증가

342.
Forbes

343.
포브지가

344. 예측한

345. 미래의

346. 고액

347. 연봉

348. 직업

350. 13

351. /

352. Front

353. End

354. 개발자가

355. 들려주는

356. 개발

357. 이야기

358.
What

359. 14

360. /

361. Front

362. End

363. 개발자가

364. 들려주는

365. 개발

366. 이야기

367.
1.

368. Language

369.
HTML

370.
CSS

371.
Javascript

373. 15

374. /

375. Front

376. End

377. 개발자가

378. 들려주는

379. 개발

380. 이야기

381.
network

382.
HTTP

383.
S/W

384. Res

385.
Front-End

386.
Back-End

387. DNS,

388. CDN,

389.
Cache,

390. TCP/IP,

391.
Socket,

392. Proxy,

393. …⋯

394.
Cross-Browsing,

395. Web

396. Accessibility,

397.
Responsive

398. Web,

399.
Image

400. format,

401. Resource

402. Optimization,

403.
Performance(Cache,

404. Prefetching,

405. lazy

406. loadi
ng,

407. H/W

408. Acc,

409. CSS

410. splite,

411. …⋯),

412.
Security

413. (Cross

414. origin

415. resource

416. sharing,

417. XSS
,

418. …⋯),

419.
Internal

420. browser

421. (Rendering,

422. Memory

423. man
agement,

424. single

425. thread,

426. gc,

427. …⋯),

428. …⋯

429.
Front-End

430.
2.

431. Technical

433. 16

434. /

435. Front

436. End

437. 개발자가

438. 들려주는

439. 개발

440. 이야기

441.
MVC

442.
3.

443. Library

445. Framework

447. Tools

448.
DOM

449. UI

450.
Graphic/Chart

451.
Test

452.
Lazy/

453.
Template

456. a.

457. Library

459. Framework

461. 17

462. /

463. Front

464. End

465. 개발자가

466. 들려주는

467. 개발

468. 이야기

469.
3.

470. Library

472. Framework

474. Tools

475.
Browser

476.
개발자

477. 도구

478.
Network

479.
형상관리

480.
Task/Build

481.
Package

482.
Test

485. b.

486. Tools

488. 18

489. /

490. Front

491. End

492. 개발자가

493. 들려주는

494. 개발

495. 이야기

496.
중요한

497. 것은

499.
선택을

500. 할

501. 수

502. 있는

503. 능력

504.
필수가 아닌 선택
• 서비스의

505. 특징

506. 파악

507.
• 회사

508. 규모

509. 및

510. 인력

511. 상황

512.
• Library,

513. framework의

514. 장단점

515.
• 라이선스

516. 비용

517.
• …⋯

518.
Tool, Library, Framework은
생산성 향상을 위한 도구일 뿐
3.

519. Library

521. Framework

523. Tools

525. 19

526. /

527. Front

528. End

529. 개발자가

530. 들려주는

531. 개발

532. 이야기

533.
4.

535. 네이버

536. 개발

537. (예)

538.
요구사항

539. 분석

540.
Framework,

541. Library

542. 선정

543.
개발

544. 환경

545. 준비

546.
설계

547.
개발

548. /

549. 테스트

550.
배포

551. 환경

552. 준비

569.
무한

570. 컨텐츠

573.
좌,우

574. 플리킹

575.
자동완성

576.
기술이슈

577. 여부

578. 점검

580. 20

581. /

582. Front

583. End

584. 개발자가

585. 들려주는

586. 개발

587. 이야기

588.
4.

590. 네이버

591. 개발

592. (예)

593.
서비스

594. 특징

596.
• 네이버

597. 메인은

598. 국내

599. 80%

600. 검색

601. 점유율을

602. 가지고

603. 있을

604.
정도로

605. 많은

606. 사용자와

607. 다양한

608. 환경의

609. 사용자가

610. 접속

611.
• identity를

612. 확보하기

613. 위해

614. 네이버

615. LookFeel

616.
• 검색의

617. 시작이

618. 되는

619. 페이지

620.
네이버

621. 개발

622. 인력

624.
• Jindo,

625. jQuery에

626. 익숙한

627. 개발

628. 인력이

629. 있음

630.
구분

631. JindoJs

632. JQuery

633. Mobile

634.
용량

635. 하

636. 중

637.
Cross-browsing

638.
상

639.
(국내

640. 단말기에

641. 완벽호환)

642.
하

643.
개발생산성

644. 중

645. 상

646.
플리킹

647.
컴포넌트

648.
O

649. O

650.
무한스크롤

651.
컴포넌트

652.
O

653. 3’rd

654. 파티에

655. 있음

656.
기술

657. 지원

658. 지원조직

659. 존재

660. 없음

661.
디자인변경

662. 쉬움

663. 어려움

664.
초기

665. 로딩속도

666. 상

667. 중

668.
요구사항

669. 분석

670.
Framework,

671. Library

672. 선정

673.
개발

674. 환경

675. 준비

676.
설계

677.
개발

678. /

679. 테스트

680.
배포

681. 환경

682. 준비

684. 21

685. /

686. Front

687. End

688. 개발자가

689. 들려주는

690. 개발

691. 이야기

692.
4.

694. 네이버

695. 개발

696. (예)

697.
형상관리

698. 환경

700.
• Git

701. 기반의

702. gitlab

703. 시스템에

704. 환경

705. 구성

706.
Framework

707. 설치

708.
• Bower를

709. 이용하여

710. jindo

711. 환경

712. 구성

713.
CI

714. 서버

715. 설치

716.
• Jenkins를

717. 이용하여

718. CI

719. 환경

720. 구성

721.
요구사항

722. 분석

723.
Framework,

724. Library

725. 선정

726.
개발

727. 환경

728. 준비

729.
설계

730.
개발

731. /

732. 테스트

733.
배포

734. 환경

735. 준비

737. 22

738. /

739. Front

740. End

741. 개발자가

742. 들려주는

743. 개발

744. 이야기

745.
4.

747. 네이버

748. 개발

749. (예)

750.
Front

751. End의

752. 관심사는

753. “사용자의

754. 인터렉션”

755.
UI

756. 영역을

757. 기준으로

758. 기능

759. 영역

760. 설계

776.
UI

793.
UI

810.
UI

812.
panel
UI

813.
Panel

814.
Manager

815.
panel
UI

816. panel
UI

817.
PanelModel

818.
요구사항

819. 분석

820.
Framework,

821. Library

822. 선정

823.
개발

824. 환경

825. 준비

826.
설계

827.
개발

828. /

829. 테스트

830.
배포

831. 환경

832. 준비

834. 23

835. /

836. Front

837. End

838. 개발자가

839. 들려주는

840. 개발

841. 이야기

842.
4.

844. 네이버

845. 개발

846. (예)

847.
IDE

848. 로

849. 개발

850.
• SublimeText,

851. WebStorm,

852. Eclipse,

853. intelliJ

854.
등을

855. 활용

857.
Web

858. browser로

859. 기능

860. 테스트

861.
• Cross-browsing

862.
요구사항

863. 분석

864.
Framework,

865. Library

866. 선정

867.
개발

868. 환경

869. 준비

870.
설계

871.
개발

872. /

873. 테스트

874.
배포

875. 환경

876. 준비

877.
단위

878. 테스트

879. 작성

880.
• Qunit을

881. 이용하여

882. 모듈

883. 단위

884. 테스트

886. 24

887. /

888. Front

889. End

890. 개발자가

891. 들려주는

892. 개발

893. 이야기

894.
3.

896. 네이버

897. 개발

898. (예)

899.
배포

900. 작업

901. 자동화

902.
• Grunt의

903. task를

904. 이용

905.
• Js,css

906. 머지

907. 및

908. 압축

910.
• Image

911. 최적화

912.
• 단위

913. 테스트

914. 자동화

915.
요구사항

916. 분석

917.
Framework,

918. Library

919. 선정

920.
개발

921. 환경

922. 준비

923.
설계

924.
개발

925. /

926. 테스트

927.
배포

928. 환경

929. 준비

931. 25

932. /

933. Front

934. End

935. 개발자가

936. 들려주는

937. 개발

938. 이야기

940. 26

941. /

942. Front

943. End

944. 개발자가

945. 들려주는

946. 개발

947. 이야기

948.
어떻게

949. 얻는가?

951.
Javascript

952. Weekly

953.
HTML

954. Weekly

955.
CSS

956. Weekly

957.
Node

958. Weekly

959.
Responsive

960. Design

961. Weekly

962.
…⋯

963.
HTML5Rocks.com

964.
블로그

965.
…⋯

968. Front

969. End

970. 반격의

971. 서막

972.
감사합니다.