NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드

빠르게 훑어보는 웹 개발 트렌드
｜한장현

한장현
(전) 삼성SDS 선임
(전) Angular Development with TypeScript 출간
(전) GDG WebTech 운영진
(전) PICK하소 CTO
(현) 카카오뱅크 빅데이터파트 leo.han
(현) Angular 컨트리뷰터
(현) 오픈 소스 프로젝트 Owner
- ejv@1.1.3
- badak@0.0.5
(현) angular.kr 운영자
(현) GitHub 일일 commit 845일째
발표자

오늘 이야기할 것
https://github.com/kamranahmedse/developer-roadmap

Avengers: Endgame을 보려면

영화를 다 보지 못했다면…

Marvel 영화에는 Phase가 있다.

웹 개발에도 트렌드가 있었다.
서버
중심으로 개발
클라이언트
중심으로 개발
고도화

1978 19891969 19981990 1991 1992 1993 1994 1995 1996 1997
미리 만들어 두거나 서버에서 만든 웹페이지를 제공
서버 중심으로 개발
<HTML>TCP/IP
URI
HTTP
cookie
Java
Applet
ASP
Java
Servlet
… …Internet WWW
DHTML

사용자가 요청한 화면을
서버에서 페이지 단위로 생성해서 제공
서버 중심으로 개발

1999 2000 2001 2002 2003 2004 2005 2006 2008 20092007
페이지를 부분적으로 갱신, 서버는 API 역할에 집중
클라이언트 중심으로 개발
XHTML

일단 클라이언트를 준비하고
추가로 필요한 데이터를 클라이언트가 주도적으로 요청해서
이미 화면에 떠있는 페이지 부분에 추가,
DOM에 적극적으로 개입
클라이언트 중심으로 개발

20112010 20132012 20152014 20172016 2018 2019
프론트엔드 로직이 복잡해지면서 라이브러리 적극 활용
고도화
4.0
ES6

복잡해지는 프론트엔드 로직을
체계적으로 관리하기 위해
프레임워크, 라이브러리를 적극적으로 사용
고도화

+α
PhoneGap(Cordova)
NativeScript
ReactNative
PWA
Node-webkit(nw.js)
Electron
웹 기술로 Native 앱을 만들어보자.
오프라인일 때도 실행되게 하자.
웹 앱을 데스크탑에 설치해보자.

모든 프로젝트에 해당되는 것은 아닙니다.
트렌드가 향하는 방향일 뿐
※ 주의

프레임워크, 라이브러리 적극 활용
AngularMaterial

Component 기반
HTML CSS
JavaScript /
TypeScript
템플릿 스타일 로직
컴포넌트
빌드
CSSJavaScript
.css.js.html .css
.scss
.styl
.js
.ts
.jsx
.tsx
.vue
babel
webpack
tsc
parcel
웹 브라우저에서 실행

Task Runner / CLI 사용
npm
Yeoman
mean.js
IDE
gulp
grunt
Webpack
tsc
node.js
lite-server
webpack-dev-servermocha
karma
protractor
git
AWS-cli
TaskRunner/CLI
Boilerplate
Making
Components
Build RunningServer
Unit/
End-to-endTest
Deploy

Task Runner / CLI 사용
AngularCLI
create-react-app
VueCLI

스타일 라이브러리,
전처리기
flex,gridmodel
CSS3
HTML5
기본 지식
HTML
프레임워크
CSS
TypeScript
ES6
JavaScript
레이아웃 구성 스타일 지정 사용자 동작에 반응, 로직 처리

프론트엔드 개발 트렌드는 빠르게 변합니다.
계속 찾아보고 공부해야 합니다…
정리

Full-stack에는 물리적인 한계가 존재합니다.
전문분야을 선택하는 것이 효율적일 수 있습니다.
정리
4시간 4시간
vs.

질문하시면 Angular 스티커 드립니다.
Q&A

EasyJSONValidator
홍보 - ejv
ejv(newUser, [
{
key : 'userId', type : 'string',
minLength : USER_ID_LENGTH, maxLength : USER_ID_LENGTH, pattern : RANDOM_STR_REG_EXP
},
{ key : 'birth', type : 'date', optional : true },
{ key : 'email', type : 'string', format : 'email' },
{ key : 'password', type : 'string', pattern : PASSWORD_FORMAT_EXP },
{ key : 'encryptionKey', type : 'string', minLength : 1, pattern : RANDOM_STR_REG_EXP },
{ key : 'gender', type : 'string', enum : Object.values(GENDER_TYPE), optional : true },
{ key : 'created', type : 'date' },
{ key : 'withdrawal', type : 'date', optional : true }
]);

공식 가이드 문서 한국어판
홍보 - angular.kr

NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드

Related slideshows

More Related Content

NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드