SmileCat.

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: 빠르고 단단한 웹사이트 제작하기(진유림)

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
      • 상용 서비스
      • 개인 도메인 필요
      • 네임서버 설정 필요
#review#gdg
Loading comments...

Recent Posts