2018년 1월 22일 월요일

Typescript Meetup

Typescript Korea MeetUp 2018

2018년 1월 18일 강남 마루180 19:00 ~ 21:10


Typescript 로 부터 얻은것과 잃은 것

  • 발표자 손찬욱 (네이버) eg.js 개발중

Typescript 사용기

egjs 작업중 movablecoord

참조

  1. 마우스, 터치로 이동하는것을 x,y값으로 변경후 ui로 반응
  2. x,y 이동만 가능
  3. 줌, 키보드 , 휠 도 가능하게 요구사항 생김

문제 발생

  1. 다형성의 필요성을 느낌
  2. 동일 형태 동일 역할이므로 인터페이스를 구현하면 됨
  3. js에는 인터페이스가 없음
  4. 그냥 만드면서 문서화만함
  5. 더 많은 요구 사항 발생 (다중의 축을 적용)

해결법

  1. 다양한 입력 타입은 인터페이스 적용
  2. 기능별로 implement 함

Typescript로 얻은것

  1. 코드 의도가 분명해짐
  2. definition 파일까지 자동으로 만들어줌
  3. 안정성
  4. 데이터 타입 관리 수월
  5. 코드 이동
  6. 데이터 흐름 추적(함수형으로 작성할때 특히 좋음)
  7. 높은 커버리지(config에서 target을 변경하면 es3까지 지원가능)

Typescript로 잃은것

  1. 3’rd party

특정 라이브러리는 UMD 형식을 사용해서 es6이상으로 작동 될때 CommenJS방식으로 개발된다. 그 상황에서 babel과 es6사이에 호출방식에 차이점을 보여준다.

package.js에서 main에서 찾는데 module을 선언하면 es6로 불러올 수 있다.

  1. 3’rd party @types

라이브러리 내부에 옵션값으로 선언을 안 할 수 있지만 옵션값 내부에 필수 값이 있을 경우 문제가 발생

  1. 코드 가독성이 낮아 질 수 있다.

Q&A

  1. babel로 트렌스파일 할때와 아닐때 용량 차이

크다


코드 한 줄 없는 Typescript 사용기

  • 김상원 (텀블벅)

steadio 제작기

Typescript는 어떻게 신뢰를 주었나

  • 과거의 코드를 믿을 수 있다.
  1. 빠른 디버깅
  2. 적지만 믿을 수 있는 코드

테스트 코드의 양이 줄어들기 때문에 결국 코드의 양이 줄어 들게됨

  1. 코드 자체가 문서가 되기 때문에
  2. 팀 협업

단점

  1. 빌드 프로세스 수립과정이 복잡

지원하지 않는 라이브러리는 타입스크립트 컴파일후 웹팩 빌드를 해야함

  1. XXX as any
  2. 코드와 타입이 불일치

타입 업데이트가 코드를 따라 가지 못한 경우

코드의 일부분만 선언된경우

타입과 코드가 다른경우


React with Typescript

  • 발표자 최종욱 (후이서울)

리액트

  • 스스로를 UI를 위한 라이브러리
  • 리액트는 간단하지만 엄격한 방식으로 한가지를 매우 잘하는 함수이다.

With 타입스크립트

  • self describing

Q&A

  • 디렉토리 구조?

???

2017년 12월 30일 토요일

GDG 정리

GDG fest 17/11/19 in Seoul UNI


Why Typescript with Clean Architecture

  • 발표자 장유진
  • banksalad 상품 -> 금융 솔루션이라 프로젝트의 사이즈가 커짐-> 관리가 어려움
    1. 제품관점

      제품의 궁극적인 모습을 상상해보면?
      같은 주제도 여러 관점에서 다룬다.
      * Microservice Acrhitecture :: 각 기능별로 서버를 구현


클라이언트는 다양한 기능이 모이는곳이라 중요함
2. 협업관점
같은 주제도 다르게 생각한다.
관점을 통일하지 않으면 문제가 생긴다.
3. 개발 환경 관점
JS의 근본적인 문제 오류 검출이 힘들다
* 해결방안 typesafe 언어 지식기반으로 만든다.
* 지식 중심의 명확한 아키택쳐
DDD(Domain Driven Design)
도메인 전문가와 엔지니어가 모델을 만들어서 아키택쳐를 만든다.
* 빠른 개발 속도

> 변경이 적은 코드

프론트엔드 프레임 워크 낱낱히 파해치기


react, Django 로 만드는 progressive web app

  • PWA 웹의 장점과 앱의 장점을 더한 개념
  • 어느 브라우저를 선택하든 상관없이 점진적 기능 개선을 통해 모든 사용자에게 제공
  • 반응형
  • 따로 앱을 만들지 않아도 앱아이콘 푸쉬 가능
  • 업데이트를 하지 않고 항상 최신화
  • service worker
  • mainjs 요청하면 서비스 워커가 가로 챈다-> 캐시를 확인하여 캐시가 있는지 확인 한다.->(네트워크 연결X )캐시에 있으면 화면 랜더링
  • 업데이트는 랜더링 다음에 한다.
  • 서비스 워커는 cra에 저장 되어있음
  • 파일명 해쉬도 cra가 해준다.
  • 브라우저 캐시 vs 서비스 워커
  • 브라우저 캐시는 일정 기간 마다 없어지는 경우가 있음 그리고 크기가 제한적(모든 사이트를 저장하기 때문에)

Typescript Meetup

Typescript Korea MeetUp 2018 2018년 1월 18일 강남 마루180 19:00 ~ 21:10 Typescript 로 부터 얻은것과 잃은 것 발표자 손찬욱 (네이버) eg.js 개발중 Typescript 사용기 eg...