All Articles

2018 Front-end Trend

본 포스트는 사내 발표 자료로 활용한 내용입니다.

최신 웹개발 트렌드

Keyword

  • Progressive Web App
  • More faster CMS( Google AMP )
  • Static web sites
  • Bot
  • SPA

Progressive Web App

Mobile Web으로 App의 경험을

  • 빌드 X, 배포 X, 설치 O, 오프라인 O, 푸시알림 O
  • 모바일 최적화 성능 + Native 기능 결합

Why Progressive Web App?

  • Mobile 사용자 증가
  • 양분화된 어플리케이션 시장과 개발자의 고민 : Web, mobile, Hybrid
  • Hybrid 앱의 단점 : 성능
  • 번거로운 앱 개발 주기 : 앱 개발, 빌드, 배포, 검색, 다운, 설치, 확인
  • Offline Web App 의 필요성

Technical Advantage

  • Responseive : PC, Mobile, Tablet…
  • Connectivity: 저속 네트워크, 오프라인에서도 가능
  • App-like : Mobile App과 동일한 실행방식, 사용자 UX 제공
  • Discoverable : URL로 사이트 접근 후 원클릭 설치
  • Engageable : Push 알림으로 사용자 재방문 유도
  • Safe : HTTPS 통신

Feature

  • Web App Manifest

    • 홈 화면에 앱 Icon 추가
    • 사이트 방문시 배너, Splash 화면

  • Service Worker

    • 오프라인 서비스, 푸시알림
    • 브라우저 백그라운드에서 돌아가는 스크립트, 브라우저 - 네트워크 미들웨어
  • 웹 페이지에서 네트워크 요청시 요청을 가로챈다.
  • 캐시가 있을 경우 즉시 로딩
  • 캐시가 없으면 네트워크

inline

PWA 마무리

  • Service Worker 디버깅이 어려워요.
  • 기존에 개발된 서비스에 적용하기 어려워요.
  • HTTPS 보안

  • 일부 모바일앱을 대체할 수 있는 사용자 경험

    • 그렇지만 iPhone은 지원하지 않습니다.

Google AMP

유사 서비스

  • Facebook Instance Articles
  • Apple News

정치적인 얘기를 해볼까요?

  • 페이스북이나 애플에 종속족인 서비스들
  • 애플 / 페이스북은 자사 플랫폼을 통해서

  • 그럼 구글은?

    • 구글 검색 엔진으로!

AMP 란?

  • 모바일 컨텐츠 최적화 표준
  • 뉴스 / 블로그 등 정적인 컨텐츠에 적합
  • 15~85% 성능 향상
  • 성능향상을 위해 심한 제약을 걸었다!
  • 속도 떨어뜨리는 기술은 쓰지마세요!

광고, JS, CSS

  • 이런기능들은 어떻게 하죠?
  • 그냥은 못씁니다…
  • AMP에서 제공해주는 걸 써야해요

AMP 구성

  • AMP HTML

    • 기존 HTML 문서에서 속도에 부담을 주는 요소를 배제
    • 몇몇 확장 속성을 추가한 HTML 확장

  • AMP JS

    • AMP HTML을 읽고 렌더링 하는 런타임

  • Google AMP Cache

    • 구글이 제공하는 AMP HTML 문서 캐싱 서비스
  • AMP 문서를 만들어 올리면 구글이 자체 CDN을 통해 더 빠른 엑세스를 제공하게 해준다.
  • 이렇게 작성된 AMP 페이지는 모바일 디바이스 환경에서 구글 검색을 수행할 경우 기존의 웹 페이지를 대체하여 보여지게된다.
  • 따라서 사용자는 빠른 모바일 사용자 경험을 얻게 된다.

너무 좋기만 한거 아니에요?

그렇습니다. 단점을 시작해볼까요?

  • 외부 자바스크립트 사용 불가
  • CSS도 하나만 링크 걸 수 있음.
  • 이미지 / 파일의 경우 AMP 표준에서 제시하는 별도의 커스텀 요소를 써야한다.
  • AMP성능향상방식

문서 간 연결

<!-- AMP에서 원본 연결 -->
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">
<!-- 원본에서 AMP 연결 -->
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

그럼 기존 CMS에서는요?

  • wordpress는 플러그인을 제공합니다. 플러그인이 AMP 문서를 대신 만들어줘요.

    • PageFrog라는 플러그인은 AMP / Instant Articles / Apple News까지 만들어줍니다.
  • jekyll은 플러그인으로 사이트 빌드할 때 AMP를 적용할 수 있습니다.

AMP 마무리

  • 아무래도 정적인 컨텐츠에 맞춰져 있다 보니 SPA등에 적용하기는 힘들어 보입니다.
  • 좋은 방향을 제시해 준 것 같습니다.
  • 저런 제약사항에 맞춰 개발을 한다면 AMP를 쓰지 않더라도 많은 성능 향상이 있으리라 생각됩니다.
  • 결론 : AMP 제약사항 정도면 AMP 안써도 빨라질 것 같다.

Google AMP, PWA 정리

  • 프로젝트에 당장 적용하기는 힘들어 보인다.
  • 모바일 웹 개발시 방향을 가이드 해주는 느낌이다.
  • PWA 서비스 워커의 경우 디버깅이 힘들지만, 고려해볼만 하다.
  • AMP 역시 적용은 못하더라도 극단적인 제약사항을 들여다보면, 어떤 기능이 웹 성능을 하락 시키는지 확인해볼 수 있다.
  • 한마디로 : 적용은 힘들겠지만, 연구해볼만한 가치가 있는 프로젝트.

Static websites

Why static page?

  • 빠르다.
  • 안전하다.
  • 저렴하다.

Bot

  • Facebook Messenger bot
  • Slack bot
  • Telegram bot
  • twitch bot
  • Kakaotalk bot

어떻게 활용할까요?

  • 문의 및 답변
  • 제품 추천
  • 확인 절차 축소
  • 방송 플랫폼에서는 음란 / 비속어 / 도배 / 광고 등을 필터링 하는데도 사용됩니다.
  • 메시지 플랫폼에서는 도착 예정시간, 상품의 배송과정 등을 공유하는데 사용됩니다.

현재 프론트엔드개발자가 갖추어야 할 기본소양

Web Developer roadmap in 2018

Beginner

  • git
  • ssh
  • http / https
  • terminal : bash / cmd( window ) basic
  • 데이터구조 / 알고리즘
  • 캐릭터 인코딩의 이해
  • Github : 프로젝트에 기여하는 방법과 절차에 대한 이해

Basic study

  • HTML
  • CSS
  • Javascript

조금 더 들어가볼까요?

Javascript

  • Task Runner ( npm script / gulp / grunt )
  • Package Manager( npm, yarn )
  • TypeScript, ES6
  • Testing( jest, mocha, jasmin, enzyme )

  • Framework( Angular, Reactjs, Vuejs )

    • Flux, Redux, Mobx, RxJS, TypeScript
  • Module Loader / Bundler ( Webpack )

CSS

  • Responsive Web
  • Framework( Bootstrap, Semantic, Materialize )
  • Preprocessor( Sass, Less )

이제 어느정도 갖추었습니다. 더 업그레이드 해볼까요?

  • CSS -> Flexbox, transform, transition…
  • JS -> Design Pattern, Regex, testing…
  • SVG -> d3

이정도 하시는 분이면 Expert!

  • 이제부터는 Trend에 따라 취향에 따라 Study 하시면 됩니다.
  • 아니시라면 각 선택지에서 하나씩 학습 하시길 추천합니다.

웹 개발은 쉽다고 들었는데, 왜 이렇게 복잡한거죠?

JavaScript

  • 1995년 시작
  • prototype 기반 언어
  • functional language
  • IE에서 독자적으로 표준 무시하고 개발 -> 파편화

JavaScript 어때요?

  • 알면 좋고, 몰라도 지장 없어요
  • 구현이 어려워요.
  • 언어도 모호해요. 동작원리를 잘 모르겠어요.
  • 브라우저 파편화도 심하구요.

어떻게 좀 극복해볼 수 없을까?

  • jQuery
  • AJAX

HTML5

  • 1999 W3C :: XHTML 발표 + HTML 버전업 하지않음.

    • W3C의 방향이 맘에 들지 않습니다.
    • WHATWG 워킹 그룹에서 연구 시작
    • HTML API로 앱을 만들자
    • Client Web Application API 제공
    • 2008 논의 시작 - 2014 표준화

NodeJS

  • 브라우저에서나 쓰던 JS가 브라우저 밖으로!
  • 크롬에 들어가 있던 v8엔진 -> 오픈소스 -> NodeJS 탄생
  • JS로 OS위에서 동작하는 어플리케이션 작성할 수 있음.
  • 이로 인해 신분상승.
  • MEAN stack에 대해 알고계세요?( MongoDB + Express + Angular + NodeJS )
  • 이와 더불어 ES도 진화함.

변화 속도, 도구는 어떤걸로? 너무 빨라요

  • Backend에서 사용하던 프로그래밍 기술, 개발 툴등이 Frontend로 넘어옴 -> 자동화
  • 적절한 리서치(스타, issue closing, 커뮤니티 규모)를 통해 도구를 선택하세요.
  • 더 좋은 도구가 있다면, 항상 환승할 준비를 하세요.
  • 각 주요 파트마다 최소 하나씩은 스터디 한다는 마음의 준비를 하세요.

TypeScript?

  • MS에서 2012년에 발표한 오픈 소스 프로그래밍 언어
  • 대규모 어플리케이션 개발을 위해 만들어짐
  • 컴파일 과정을 가치면 JavaScript가 된다.
  • 이런 프로그래밍을 메타프로그래밍이라고 한다.
  • JavaScript의 superset
  • Google의 공식언어로 채택됨

왜 컴파일 해가면서까지 이걸 써야되요?

  • 기능을 추가할 수 있어요.
  • 현재 JS의 단점들을 보완할 수 있는 기능들을요.
  • Abstract Class, Interface, TypeCheck, Asyc Await
  • OOP 방식으로 JS 개발을 할 수 있어요.

NPM부터 Webpack까지

구식 으로 개발해보기

  • 패키지 매니저 없이 파일을 다운로드 받아 js/libs 폴더 같은 곳에 저장한다.
  • 특정 패키지가 업데이트 된다.
  • 다시 내려받는다.
  • 반복
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript Example</title>
  <script src="js/app/index.js"></script>
  <script src="js/lib/moment.min.js"></script>
</head>
<body>
  <h1>Hello from HTML!</h1>
</body>
</html>

NPM 사용해보기

  • 터미널에서 커맨드를 입력하라구요?
  • 아니 여보세요. NPM은 Nodejs 패키지 관리자 아니에요?
  • 프론트엔드에서 백엔드 패키지 관리자를 어떻게 쓰는데요?
$ npm init
# package.json이 생성 될 거에요
{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
$ npm install moment --save
# package.json에 moment 의존성이 추가될 거에요

```json
{
  "name": "modern-javascript-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "moment": "^2.19.1"
  }
}
<!-- 인덱스 파일을 수정해볼까요? -->
<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript Example</title>
  <script src="node_modules/moment/min/moment.min.js"></script>
  <script src="app/index.js"></script>
</head>
<body>
  <h1>Hello from HTML!</h1>
</body>
</html>

이제부터 다른 사용자와 코드를 공유할 때 package.json 파일과 소스파일만 주시면됩니다. moment.js의 존재는 잠시 잊으셔도 좋습니다.

import 할 때 path가 너무 길어요…

  • 맞습니다. node_modules 아래 깊은 곳 까지 파고들어야 HTML에서 불러올 수 있습니다.
  • nodejs처럼 쉽게 import 하고 싶어요

JS module bundler : Webpack

JS에는 Import 기능이 없습니다.

  • 오직 Browser 환경에서 구동되도록 만들어졌습니다.
  • 보안상의 이유로 computer 파일시스템에 접근할 수 없기 때문입니다.

CommonJS

  • 이제 JS도 Import를 해보자!
  • module Import, Export에 대한 명세.
  • 더이상 전역변수에 할당하지 않아도 됩니다!
  • 누가 이걸 쓰는데요? NodeJS요!
// index.js
var moment = require('moment');
console.log("Hello from JavaScript!");
console.log(moment().startOf('day').fromNow());

달달하쥬?

잠깐..

이거 브라우저 코드 아니잖아요 NodeJS코드 잖아요

Webpack!

$ npm install webpack --save-dev # --save-dev : 개발 의존성 추가
{
  "name": "modern-javascript-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "moment": "^2.19.1"
  },
  "devDependencies": {
    "webpack": "^3.7.1"
  }
}
$ ./node_modules/.bin/webpack index.js bundle.js
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript Example</title>
  <script src="bundle.js"></script>
</head>
<body>
  <h1>Hello from HTML!</h1>
</body>
</html>

명령어가 길어요

// webpack.config.js
module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js'
  }
};

설정파일을 추가하고 아래와 같이 실행하면 됩니다.

$ ./node_modules/.bin/webpack # 이렇게 하면 자동으로 설정파일을 읽고 webpack을 실행합니다.

ES6등 부가기능은 어떻게 사용하나요?

babel, webpack dependency를 추가하고,

{
  "devDependencies": {
    "babel-loader": "^6.1.0",
    "babel-preset-es2015": "^6.1.18",
    "babel-polyfill": "^6.3.14",
    "webpack": "^1.12.6",
    "webpack-dev-server": "^1.12.1",
    "copy-webpack-plugin": "^0.2.0"
  },
  "scripts": {
    "build": "webpack",
    "watch": "webpack --watch",
    "start": "webpack-dev-server --hot --inline"
  },
  "babel": {
    "presets": ["es2015"]
  }
}

webpack.config 파일을 수정 해서 사용합니다.

var dir_js = path.resolve(__dirname, 'js');
var dir_html = path.resolve(__dirname, 'html');
var dir_build = path.resolve(__dirname, 'build');

module.exports = {
    entry: path.resolve(dir_js, 'main.js'),
    output: {
        path: dir_build,
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                loader: 'babel-loader',
                test: dir_js,
            }
        ]
    },
    plugins: [
        // Simply copies the files over
        new CopyWebpackPlugin([
            { from: dir_html } // to: output.path
        ]),
    ],
    // Create Sourcemaps for the bundle
    devtool: 'source-map',
    devServer: {
        contentBase: dir_build,
    },
};

복잡한 frontend 설정 : create-react-app

  • ReactJS의 create-react-app
  • 이런 bundling, transpiling 등의 작업을 간략화 시켜줍니다.
  • 내부적으로 설정 파일을 만들고, 설정파일을 안으로 숨겨 디렉도리 구조를 간략화 시켜줍니다.
  • 앱 생성 후에 npm run reject 하시면 이런 설정들이 밖으로 튀어 나옵니다.

References

Published 1 Aug 2018

대한민국 서울 거주중. Front-end 개발자로 전향중. 어제보다 나은 개발자가 되자. #WebRTC #NodeJS #ReactJS #Typescript #OOP #FP #ReactNative박충희 on Twitter