DEV FEST 2017 Seoul

• DEV FEST 2017 Seoul

Why Typescript with Clean Architecture(정유진)

• TypeScript(실수를 최소화)
• Clean Architecture
• 빠른 개발 퍼포먼스 = 서비스의 변화에 따른 코드 변화가 최소한 인 것
• Domain(Fact, 100명이 짜도 같다) != UI(Theory, 100명이 짜면 다를 수 있다.) => UI를 보고 Domain을 추측하지 말아라.
• 사실과 해석을 구분하라.

프론트엔드 모던 프레임워크 낱낱히 파헤치기(한성민)

• slide
• 2017 프론트 진형 중요 키워드
  • 동적 렌더링
  • 모듈링 / 번들링
  • 타이핑
  • 테스트 자동화
• JIT
• AOT
• HMR(Hot Module Replacement)
• Shadow DOM
• Webpack with dll

CSS와 BEM(백성훈)

• slide
• Cascade rules
  • inheritance
  • user-agent
  • seletors
  • source order
  • inline
  • !important
• CSS의 확장
  • Global Namespace -> isolation
  • Dead Code -> Sustainable
  • implicit dependencies -> Readable
  • Restyling -> less calculate
• Design Methodology
  • Naming Convention (동일한 이름X, 겹치지 않게)
  • File Structure
• Naming Convention
  • 의미있는 단어로 지정
  • 선택자의 복잡성을 줄임
• BEM ?
  • Block Element Modifier
    • B : Standalone entity that is meaningful on its own. (.navigation)
    • E : A part of a block that has no standalone meaning and is semantically tied to its block. (.navigation__link)
    • M : A flag on a block or element. Use them to change appearance or behavior. (.navigation__link—active)
  • Nameing Convention
  • Bolock__Element—Modifier (—는 단어 연결에서 -의 사용 고려)
  • HTML - interface
  • A rules of BEM
    • Use class name selector only
    • No tag name or ids
    • No dependency on other block
  • Preproccessor
    • SASS
    • LESS
  • File Structure
    • Base
    • Layout
    • Module
    • State
    • Theme
  • Out of CSS
    • CSS Modules(In JavaScript with Webpack)
  • BEM
  • CSS 방법론 (1) — BEM (Block Element Modifier)
  • [CSS방법론] SMACSS, BEM, OOCSS

리액트와 장고로 만드는 Progressive Web App: 빠르고 단단한 웹사이트 제작하기(진유림)

• sw-precache
• Is service worker ready?
• 포어그라운드 푸시, 백그라운드 푸시 모두 서비스 워커로 구현해야한다.
• react-django-pwa-kit

Github와 CloudFlare를 이용한 무료 고성능 웹 어플리케이션 호스팅(박병진)

• slide
• Service에 맞는 Architecture를 선택해야한다.
• JAMstack
  • JavaScript(JS Framework/Library/Vanilla JavaScript)
  • APIs(Custom-built API / 3rd-party API)
  • Markup(Static Site Generater - Jekyll… / Webpack)
• StaticGen
• Why JAMstack?
  • Better Performance
  • Low Cost
  • Higher Security
  • Better Developer Experience
• Deployment
  • Github Pages + CloudFlare
    • 무료
    • 일부 제약 있음
    • CDN/DDOS 방어 등 기능 제공
    • 개인 도메인 필요
    • 네임서버 설정 필요
  • Netlify
    • 무료
    • JAMstack 개념 제안
    • CDN/SSL 등 기능 제공
    • 개인 도메인 필요
    • 네임서버 설정 필요
    • 하나의 서비스만 사용해도 됨
  • AWS S3 + CloudFront
    • 상용 서비스
    • 개인 도메인 필요
    • 네임서버 설정 필요