Plactic Code

2019-06-30 TIL

2019-06-30

Google I/O extended (GDG Seoul)

행사 참여한 후기 겸 들은 내용을 정리? 해보았다.

What’s new in Web

-장한보람 (Actwo frontend 개발자)

신속성

브라우저 성능 개선

1. V8 - parsing속도 2배, async/await 속도 11배, 메모리감소 20%
2. native lazy-loading (loading="lazy")

chrome 카나리아 : 개발버전

Portal

  • 기존 iframe과는 다른, 웹페이지 임베드 및 이동 기능 지원.
  • 카나리아에서 사용가능

Lighthouse

  • performance budget (budget.json)

    • 얼만큼의 리소스 예산을 사용할지 지정해둔다..
  • http://performancebudget.io : 초기 버짓 산출 가능한 사이트.

확장성(Performance)

Web Perception Toolkit

  1. Sensing

  2. Meaning

  3. Rednering

  4. QR코드 감지 - 의미파악 - 사용자에게 렌더

(url) share기능 지원

native app에 있는 기능을 웹앱에서 가능

google assistant

많이 똑똑해졌다고. keynote 25:00에 데모 시연. gmail에 저장돼있다든지, 이미 알고있는 정보를 활용할 수 있음.

안정성(Safety)

개인정보 보호

“sameSite: strict” <- 쿠키 헤더에 넣으면 된다고. (2016년부터 크롬은 지원중. 올해말부터 required될 가능성) 효과: CSRF공격으로부터 보호받는다.

Fingerprint Protection

아직은 계획 단계인 것 같다.

App Gap

native app에선 가능한데 web에선 못하는것: 사용자의 파일시스템에 접근, 연락처목록에 접근 등..

관련 프로젝트가 있다. 복어-잘 요리하면 맛있는데 잘못하면 치명적 즉, 사용자의 보안에 악영향을 주지 않으면서 좋은 기능을 만들겠다는 의도

Badge API

window.badge. ..

앱의 배지 기능과 같은걸 제공한다.

PWA

웹의 큰 단점 : 오프라인 경험 제공 불가. (연결이 끊기면 무한 스피너 혹은 아무것도 없는 빈 화면) pwa는 이걸 해결할 수 있다.

크롬 76부터는 desktop app도 가능하다고

웹의 진화 방향?

스마트폰이 나오면서 디바이스 사이즈 등에 의존했지만 이제는 단일 코드베이스에서 다양항 기기를 지원하도록 하는 움직임. (flutter, pwa)

Flutter를 소개합니다!

-김석용 (RootOne 개발자. GDG 송도 운영)

여러 프레임웤이 나와있다. Kotlin/Native도 있다.

cross flatform은 기존 native앱 유저의 경험을 해칠 수 있는 단점이 있다. (성능도 있고)

Fuchsia 16년 8월에 레포가 생기며 주목받음. 리눅스 커널 os가 아닌 지르콘 사용

Flutter

18년에 1.0 릴리즈.

빠르고 효과적으로 애니메이션을 그려낼 수 있는 장점. HMR 지원.

Dart 2.1 현재는 2.3버전까지 나옴

SKIA -안드로이드 내부에서 화면을 그릴 때 사용하는 그래픽 엔진

플러터가 과거의 Flash와 비슷하단 인상을 받았다고 하심.

하위 호환성도 지원(안드 젤리빈, v16, 4.1.x 이상, ios 8, iphone 4s이상)

Flutter Components

  • Material : Android
  • Cupertino : iOS
  • Widget : 위 둘 말고 새로 가능

배포 os마다 다른걸 쓰려면 각각 개발해야 함. 물론 platform 구분을 알려줄 수 있고, if else로 한 코드에 넣을수는 있음

위젯 트리구조로 플러터 앱을 구성하게 된다.

복잡한 뷰를 그릴수록 따로 모듈화를 자주 해야한다. (흠. 이건 계층구조 코드는 다 마찬가지 아닐까?) (네이티브 개발할때는 계층구조가 보편적인건 아니었나 봄. 난 근본이 리액트니깐..)

// 작성하신 예제 코드 설명

https://itsallwidgets.com <- 위젯모음 https://pub.dev/ <- 라이브러리들 모음(npm처럼) https://flutter.dev/ <- 공식문서가 잘 돼있다

아직 본격 도입하기엔 약간 문제가 있다고?

  • 모바일 외 플랫폼 지원 계획이 있다. (픽셀로 그려지는 모든 플랫폼)
  • 인앱결제, 등 지원 될것. 현재 firebase는 쉽게 붙일 수 있다고함

flutter desktop

Dart언어로 된걸 각 os에 맞는 언어로 변환

flutter web

dart -> js (html, css, js 모두 dart.js로 작성) 아직은 프리뷰버전.

(멀티플랫폼 관련은 flutter everywhere 레포 참조)

flare

developer’s quest - flutter demo

구글 검색과 자바스크립트 사이트

-조은(네이버 프론트엔드 개발자. Google Developers Experts)

네이버 검색과 관련없다고 하심. medium 개발 블로그 하심. (발표내용도 이미 올라가있다)

데이터를 모으자

googlebot이 데이터 수집. crawler

과거에는 서버에서 완성된 컨텐츠를 내려줬지만, 지금은 js에서 ajax로 데이터를 받아 js가 컨텐츠를 생성한다.

그래서 chrome(41버전)을 사용해 렌더된 내용을 수집하는 변화가 있었다. 버전이 너무 낮아서, puppeteer+node로 headless 크롬 최신버전을 이용해 render. -> googlebot이 최신 SPA 크롤링을 지원한다.

SEO(검색엔진최적화)

구글 검색이 정확히 어떻게 동작하는가? -백명이 넘는 팀원이 각자의 알고리즘을 붙여 구글 검색을 이룬다. 알 수가 없음.

robots.txt

googlebot이 어디까지만 접근가능한지 명시. 딱히 막을것이 없다면 작성할 필요 없다.

robots에 예를들어 /admin으로 접근하는 관리페이지를 명시해 막는다면, 크롤러는 막겠지만 robots.txt를 일반 유저들이 읽을수도 있고 접근 시도가 발생한다.

검색이 안되어야 한다면

  1. 도메인을 아예 분리해, 도메인 통째로 차단
  2. 검색되지 않아야 하는 내부 페이지 등은 인증 거쳐야지만 볼 수 있도록 한다

</h4> <p>각 페이지마다 컨텐츠를 설명하는 내용을 부여해야 한다. + 현재 사이트를 설명하는 동일한 내용도 필요. 타이틀 하나로 퉁치면 안됨.</p> <p>ex) <code class="language-text">치킨 recipe - 조은의 Recipe</code>, <code class="language-text">냉면 recipe - 조은의 Recipe</code></p> <p>SEO를 고려한다면, 서비스명도 너무 길지 않게 하는게 좋다.</p> <p>너무 긴 title은 구글봇이 알아서 짜름.</p> <p>description을 선언하지 않는다면, 적당히 긁어온 내용을 검색결과로 노출시킴. (부정확하며 필요없는 데이터 노출 가능성)</p> <p>opengraph 선언과 content 선언도 같이 잘 해야함. (< .. og:title=.. content=.. ..> 등)</p> <h4 id="올바른-html-사용"><a href="#%EC%98%AC%EB%B0%94%EB%A5%B8-html-%EC%82%AC%EC%9A%A9" aria-label="올바른 html 사용 permalink" class="anchor"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>올바른 HTML 사용</h4> <p>태그를 적절히. (시맨틱하게 ?)</p> <ul> <li> <p>구글봇은 a태그를 보고 다른 페이지의 컨텐츠를 인식함. button이나 div로 하면 크롤링하지 않음.</p> </li> <li> <p>제목 역시 h1 태그를 긁어감. (h1 ~ h6 모두 보고 페이지의 outline을 그린다. 검색 상위노출 가능성 높아진다.)</p> </li> </ul> <h4 id="반응형-웹-디자인"><a href="#%EB%B0%98%EC%9D%91%ED%98%95-%EC%9B%B9-%EB%94%94%EC%9E%90%EC%9D%B8" aria-label="반응형 웹 디자인 permalink" class="anchor"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>반응형 웹 디자인</h4> <p>모바일을 지원하는 페이지를 우선 노출시킨다.</p> <h4 id="structured-data"><a href="#structured-data" aria-label="structured data permalink" class="anchor"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Structured Data</h4> <p>HTML을 넘어서 이 컨텐츠에 대해 설명하는 요소 및 데이터 . (JSON처럼?) (HTML만으로는 내부 데이터를 설명하기 부족한것이 당연하다)</p> <p>schema.org 에 되어있는 것 중 골라 사용하면 좋다.</p> <p>ex) “만개의 레시피” 사이트가 이걸 지원하고있어서 상위노출되고 적절한 UI가 적용되어 노출된다!!</p> <p><a href="https://developers.google.com/search/docs/data-types/article">https://developers.google.com/search/docs/data-types/article</a></p> <h4 id="lighthouse-1"><a href="#lighthouse-1" aria-label="lighthouse 1 permalink" class="anchor"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>lighthouse</h4> <p>웹 페이지를 종합적으로 검사. SEO를 포함.</p> <p>총 100개가 넘는 항목을 체크해줌.</p> <p>(PWA 점수는 SEO에 영향 없음</p> <p><a href="https://web.dev/">https://web.dev/</a> 에서 항목들을 알 수 있다</p> <h4 id="그-외에도"><a href="#%EA%B7%B8-%EC%99%B8%EC%97%90%EB%8F%84" aria-label="그 외에도 permalink" class="anchor"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>그 외에도</h4> <ul> <li>속도가 빨라야 한다(amp? 라는 라이브러리에 속도에 대한 기준있다.)</li> <li>모바일 지원</li> <li>기타 등등</li> </ul> <p>“나무위키”가 항상 검색어 최상위에 노출되는것엔 이유가 있다. 거의 best practice임. (description은 선언 안했지만 잘 나오는 사이트이기도 함) 망고플레이트도 좋다고함</p> <p>질답)</p> <ul> <li> <p>모바일을 지원한다 의 기준이 무엇인지?</p> <blockquote> <p>puppeteer가 mobile-agent + 모바일 해상도로 사이트에 접근해서 .. 어쩌구. 정확히는 모르신다고.</p> </blockquote> </li> </ul> <ul> <li> <p>url에 포함되는 단어들이 SEO에 영향을 미치는지?</p> <blockquote> <p>한국어로 되어있다면 영향이 있을 수 있고, url에 외계어가 들어가는건 괜찮다(언어 인코딩 관련). url이 명확하면 좀더 위로 올라갈 수 있다.</p> </blockquote> </li> </ul> <ul> <li> <p>구글 검색에 반영되기까지 걸리는 시간은?</p> <blockquote> <p>알려진 바 없어서 정확히 알 수는 없다. 다만 search console에서 요청하면 좀 줄일 수 있다.</p> </blockquote> </li> </ul> <h2 id="all-you-need-is-googles-ai-tech"><a href="#all-you-need-is-googles-ai-tech" aria-label="all you need is googles ai tech permalink" class="anchor"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>All you need is Google’s AI Tech</h2> <p>-김준성(스캐터랩 머신러닝엔지니어-pingpong ai research team)</p> <p>18-19년 구글의 AI, 머신러닝 연구 결과를 소개하는 발표.</p> <h3 id="bert-2018"><a href="#bert-2018" aria-label="bert 2018 permalink" class="anchor"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>BERT (2018)</h3> <p>문장에서 15%내외 단어를 지워서(마스킹) 맞는 내용을 맞추도록 하는 학습방법. 결과는 사람을 이길 정도의 성능. (대량의 텍스트를 많은 시간을 들여 초기 학습)</p> <p>깃헙 repo도 있음. google-research/bert</p> <h3 id="evolved-transformer-2019"><a href="#evolved-transformer-2019" aria-label="evolved transformer 2019 permalink" class="anchor"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Evolved Transformer (2019)</h3> <p>기존 방식의 최적화? (대량의 컴퓨팅 파워 필요. 구글.)</p> <h3 id="self-supervised-traking-via-video-colorization-2018"><a href="#self-supervised-traking-via-video-colorization-2018" aria-label="self supervised traking via video colorization 2018 permalink" class="anchor"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>self-supervised traking via video colorization (2018)</h3> <p>유튭 데이터를 레이블링 없이 모션 트래킹?</p> <h3 id="towards-end-toend-prosody-transfor-for-expressive-speech-synthesis-with-tacotron"><a href="#towards-end-toend-prosody-transfor-for-expressive-speech-synthesis-with-tacotron" aria-label="towards end toend prosody transfor for expressive speech synthesis with tacotron permalink" class="anchor"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Towards End-toEnd Prosody Transfor for Expressive Speech Synthesis with Tacotron</h3> <p>tacaron 2</p> <p>사람의 감정을 담은 보이스를 생성하는것. (억양 추가) (특정 인물의 음성 정보 + 다른 인물의 억양 정보를 합성할 수 있다)</p> <h3 id="introducing-translatotron--an--end-to-end-speech-to-speech-translation-model"><a href="#introducing-translatotron--an--end-to-end-speech-to-speech-translation-model" aria-label="introducing translatotron an end to end speech to speech translation model permalink" class="anchor"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Introducing Translatotron : An End-to-End Speech-to-Speech Translation Model</h3> <p>기존 방식: 음성 인식 -> 텍스트 -> 번역 -> 음성</p> <p>이건 voice-to-voice 번역. (+억양. 모바일 사용)</p> <h3 id="streaming-end-to-end-speech-recognition-for-mobile-devices"><a href="#streaming-end-to-end-speech-recognition-for-mobile-devices" aria-label="streaming end to end speech recognition for mobile devices permalink" class="anchor"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Streaming End-to-End Speech Recognition for Mobile Devices</h3> <p>프로그램 용량 최적화. 2기가 -> 80메가</p> <blockquote> <p>아.. 머신러닝.. 모든것이 어렵다..</p> </blockquote> <h2 id="flutter와-dart-20"><a href="#flutter%EC%99%80-dart-20" aria-label="flutter와 dart 20 permalink" class="anchor"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Flutter와 Dart 2.0</h2> <p>-조환(Hyperconnect)</p> <p>적은 인력으로 양쪽 플랫폼을 개발 할 목적으로 flutter 사용중.</p> <p>Dart 언어를 소개하는 시간.</p> <p>google analytics는 dart로 만들었다고 함.</p> <p>Dart가 보급률이 안좋아서 구글에서도 다른 언어로 변환 툴같은걸 배포하며 보급률을 신경쓰고 있다고 함.</p> <ul> <li>dart 2.0부터 타입 추론이 swift, kotlin 수준으로 올라온 것 같다고 함</li> <li>UI를 표현하기 편리함 (java보다는. 요즘 다른 언어랑 비슷한 편리함?)</li> </ul> <p>보완, 성장 중인 언어. (유저 피드백 반영해 nullable / non-nullable 지원 예정)</p> <h3 id="dart의-매력"><a href="#dart%EC%9D%98-%EB%A7%A4%EB%A0%A5" aria-label="dart의 매력 permalink" class="anchor"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Dart의 매력</h3> <ol> <li>일급 함수 지원</li> <li>Constant canonicalization (상수 정규화/단일화?)</li> <li>Mixin</li> </ol> <h4 id="mixin"><a href="#mixin" aria-label="mixin permalink" class="anchor"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>mixin</h4> <p>(smalltalk의 유니크한 기능이었다고)</p> <p>상속은 상속받은 클래스가 구현하지 않을 부분까지 부모 클래스의 메서드 등을 모두 상속받는것이 경우에 따라 문제가 될 수 있다. (엄청 복잡한 코드를 인수인계 받지않고 유지보수 해야 하는 경우 등)</p> <p>믹스인은 이런 문제를 해결해준다.</p> <p>interface는 상태를 표현할 수 없다고. (걷는다 는 가능한데 걸을 때 몇미터 움직이는지는 못한다고 한다)</p> <p>(mixin이 뭔지 자체는 잘 설명 안해주셔서 아쉽..)</p> <h3 id="왜-flutter는-dart를-선택했나"><a href="#%EC%99%9C-flutter%EB%8A%94-dart%EB%A5%BC-%EC%84%A0%ED%83%9D%ED%96%88%EB%82%98" aria-label="왜 flutter는 dart를 선택했나 permalink" class="anchor"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>왜 Flutter는 Dart를 선택했나?</h3> <p>(공식문서에 길고 길게 적혀있다고 함. 관련 질문을 많이 받아서..)</p> <ol> <li> <p>JIT/AOT 모두 지원</p> <ol> <li>JIT - Hot (stateful) reload (JIT는 프로그램 실행 중에 점점 빨라진다)</li> <li>AOT - Production 최적화 (바이너리 빌드시)</li> </ol> </li> <li>UI 표현에 최적화된 문법 (swiftUI의 문법이 비슷하다고)</li> <li>기타 등등</li> </ol> <h3 id="맺으며"><a href="#%EB%A7%BA%EC%9C%BC%EB%A9%B0" aria-label="맺으며 permalink" class="anchor"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>맺으며</h3> <p>dart 2.x 가 되며 좋아지고 있다. 1.0은 구렸다.</p></div><div class="social-share"><a class="resp-sharing-button__link" href="#" target="_blank" rel="noopener" aria-label="Share on Facebook"><div class="resp-sharing-button resp-sharing-button--facebook resp-sharing-button--large"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z"></path></svg></div><span class="service-label">Share on Facebook</span></div></a><a class="resp-sharing-button__link" href="#" rel="noopener" aria-label="Share on Twitter"><div class="resp-sharing-button resp-sharing-button--twitter resp-sharing-button--large"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.44 4.83c-.8.37-1.5.38-2.22.02.93-.56.98-.96 1.32-2.02-.88.52-1.86.9-2.9 1.1-.82-.88-2-1.43-3.3-1.43-2.5 0-4.55 2.04-4.55 4.54 0 .36.03.7.1 1.04-3.77-.2-7.12-2-9.36-4.75-.4.67-.6 1.45-.6 2.3 0 1.56.8 2.95 2 3.77-.74-.03-1.44-.23-2.05-.57v.06c0 2.2 1.56 4.03 3.64 4.44-.67.2-1.37.2-2.06.08.58 1.8 2.26 3.12 4.25 3.16C5.78 18.1 3.37 18.74 1 18.46c2 1.3 4.4 2.04 6.97 2.04 8.35 0 12.92-6.92 12.92-12.93 0-.2 0-.4-.02-.6.9-.63 1.96-1.22 2.56-2.14z"></path></svg></div><span class="service-label">Share on Twitter</span></div></a></div><div class="sponsor-button"><a class="bmc-button" target="_blank" rel="noopener noreferrer" href="https://www.buymeacoffee.com/floydkim"><span>Buy me a coffee</span></a></div><hr class="custom-hr"/><div class="bio"><div class="author"><div class="author-description"><div class="author-image gatsby-image-wrapper" style="position:relative;overflow:hidden;display:inline-block;width:72px;height:72px;border-radius:100%"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAXCAYAAAALHW+jAAAACXBIWXMAAAsSAAALEgHS3X78AAAEKUlEQVQ4y5WVa0ybVRjH+82omTG6T+KWjbhlfjDLosNEE51z+mFxTJ1zuIuGabzMRTMyNeqSZSwu2SLKLgYXyHSKRGCbDNgojItCNq5tgVFKKdcChbV92/KWS4HCz+eUsqBxwj6cnPd9z3n+z/95zvn/X4Ov38Fih9bXHhnq2SNzQOax/g6G+uy31w2LAopungtyy1BAQRn7W/8iw1HP5EBnJInhblh5ZVZBMwNdmHpaeKqxCENtNj866pgSQPdCgHNAaqjNwzJPS+DJ9hrua7jEAVslzzUZ+V7ewwsxnF/iLRmqJJf0auvNUpaa8sjpMIGrmw3NxXwngNPC+p8MVWnR2Tev8QoQ2VzU1UiMOZ8XBKDb2UZIEoxID19qLokwVMw9TrsAyqKvNzrkWRvoQHPNZlMB4zI+t1VFSjzadiPC1C/J1JqaV5oL+NYeZShxBs0zgNd3C6/fjaYN4uu6idbWwLQs2npbibNcIdaUT2V3szBVjbdHgmvkfZWAxcnB2Hqs6IpYaw2GYG4qo2mfMZa6n+HCdPTMY3AkgYw+Kw/UXWCPoxptqJdxdV0kyZj07bgwvcecx8f26wxLZUEh5GuuYmrvWgzhbTFMfBXPyJkDhPLPQsYhfv/kGZa0lvJTTxPUGglYKgh4Xeht9exsKOBBSz4XW6qg3YLm7kMTsGBeGuE3lwvg7tXo2SmEWqopclpJO72PuqSNVPtcIKzH3n4cdq+hMjeF5PSDlCVtwDzihy/j8V88RVBiwwmxTH4QR/iNGAHctYrxPWvgvSd5P+sIL6fuhcM7mLHWENryEN6ORqaKf6EsYRlxf5yIgI9K8lFJFLhRSHjHCoYrcgmYygTwUQW4mmHjz+hC3eJxUnzyI/IObSGz+jK8HsNQwIPfXE54+zI2W65y7tNnIWkTfP0qmhzEVPxS/NZq/HaTMF0pgNuXo189h9fdT0BOHOlF2+YlrLh2lux96+GLV+DDp5lIfovB8RHKS39lKs6A8fxh9LERpo/uYiLxCULJO5kWcIN+LRN/ay0+uRLeiCrszBSk09D0Jy/KldmW8g5Nvx1jRk7X67AweekMISl3fc0FNlnLcSqW8i0oN0UvzZJ7KMw0V+esUqIKcXsHGB/sjlzyxB4L91tLONUrJ551gvC769CN5+l3O3mtqZjHLIXU3epBl9Z4pG2zSonK7rZNyTePMPUr2fU5yGmv52HR71YBGJQ9IWmNT2SmXGdd4xWO264zI/vcEmf4P7ua8z7lJF1Om+i4hEdEz8YOc0QtSn4bRdupc1pejNvMWZcyU6Xjb0Ql94quD4q+FUNlDin2/3KbRZirN+o8StexouPnpQVrpeTT7bUL++Gd7F95Yyh6IxKtFeLYOfwQBXQv9p/yb7bu6A9KsU0X+8/tNEWSeO4G8E4tUECBeVX8Db0WD6cXF24CAAAAAElFTkSuQmCC" alt="Minchang Kim" style="position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:1;transition-delay:500ms"/><noscript><picture><img loading="lazy" width="72" height="72" srcset="/static/94740a857a5e969519ce4376e828b3bb/350c6/profile.png 1x, /static/94740a857a5e969519ce4376e828b3bb/ad9fd/profile.png 1.5x, /static/94740a857a5e969519ce4376e828b3bb/588bd/profile.png 2x, /static/94740a857a5e969519ce4376e828b3bb/1a604/profile.png 3x" src="/static/94740a857a5e969519ce4376e828b3bb/350c6/profile.png" alt="Minchang Kim" style="position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/></picture></noscript></div><div class="author-name"><a class="author-name-content" href="/about"><span>Minchang Kim</span></a><div class="author-introduction">웹/앱 개발자 김민창입니다! 좋은 하루 되세요!</div><p class="author-socials"><a href="https://github.com/floydkim"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path></svg></a></p></div></div></div></div><ul class="navigator"><li><a rel="prev" href="/TIL/2019-06-22-TIL/">← <!-- -->2019-06-22 TIL</a></li><li><a rel="next" href="/TIL/2019-07-06-TIL/">2019-07-06 TIL<!-- --> →</a></li></ul><div><div id="disqus_thread"></div></div><footer class="footer">©<a href="https://github.com/JaeYeopHan">Jbee</a>, Built with<!-- --> <a href="https://github.com/JaeYeopHan/gatsby-starter-bee">Gatsby-starter-bee</a></footer></div></div></div><script> if(true) { (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); } if (typeof ga === "function") { ga('create', 'UA-135509771-2', 'auto', {}); } </script><script id="gatsby-script-loader">/*<![CDATA[*/window.page={"componentChunkName":"component---src-templates-blog-post-js","jsonName":"til-2019-06-30-til-b24","path":"/TIL/2019-06-30-TIL/"};window.dataPath="492/path---til-2019-06-30-til-b-24-8d9-sAbq0H72BGOKYycDE2YuwPvcc0";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"app":["/app-6e98c4ddd3ae13dd32e2.js"],"component---src-templates-blog-post-js":["/component---src-templates-blog-post-js-29603135d76e066c8c33.js"],"component---src-pages-404-js":["/component---src-pages-404-js-51bfe96f62ea44369bc0.js"],"component---src-pages-about-js":["/component---src-pages-about-js-9c5d066aa1a457c6e0c3.js"],"component---src-pages-index-js":["/component---src-pages-index-js-2c95a1b1c655bcb92b61.js"],"pages-manifest":["/pages-manifest-24a7cc74833941a06664.js"]};/*]]>*/</script><script src="/webpack-runtime-833997ff1b8aca0944c5.js" async=""></script><script src="/styles-0827b3d126e704e9295c.js" async=""></script><script src="/1-73cf287f6bcecf3f1bf1.js" async=""></script><script src="/app-6e98c4ddd3ae13dd32e2.js" async=""></script><script src="/11-917ff2144f9360849178.js" async=""></script><script src="/component---src-templates-blog-post-js-29603135d76e066c8c33.js" async=""></script><script src="/2-794d014d5852921f8982.js" async=""></script></body></html>