JSCON:16

세미나 정리 및 후기.

Posted by kingbbode on September 1, 2016

Recently by the same author:


3년차 웹 개발자

4년차로 접어든 웹 개발자의 3년차 늦은 회고

You may find interesting:


Spring 에서 @ConditionalOnClass, @ConditionalOnBean 사용할 때 주의할 점

Spring Boot 기반의 자동 설정을 위한 AutoConfiguration 클래스를 만들다가 발생한 이슈 공유 (ClassNotFoundException, ArrayStoreException)


Spring Boot 와 Properties(or Yaml) Environment

Spring의 PropertySource 의 Yaml 미지원과 ConfigurationProeprties 의 locations Deprecated 의 배경을 알아보자!.

Session 1. Reactive, Component 그리고 AngularJS 2.0

  • 프레임워크에서 플랫폼으로!(Framework to Platform)
    • Material, Angular Mobile, Universal(서버사이드 랜더링), CLI, Augury 등등

Angular CLI

  • 기본적인 환경설정을 ‘ng’ command 사용으로 쉽게.
  • webpack을 사용하기 위해선 브랜치를 설정해야 함.
  • beta 버전이라 아직 바뀌는 것이 많음.
  • ng -g
    • model, component 등 모듈 생성

컴포넌트

Directive + Controller = Component
  • 웹 프레임워크의 발전
    • Library -> Framework -> Component
  • 컴파일 방식의 변화
    • app과 randering 로직의 분리
    • 서버사이드 랜더링 가능.

Reactive

  • Observables
    • 연속적인 Async, Stream Data를 처리
    • Promise는 Single?, Observable은 Muilti?

Session 2. Webpack 실무 적용전략

자료

Webpack이란?

  • bundling 도구
    • css, image, js 등 모두
  • grunt, gulp 등 대체?
  • 비동기 로딩 지원
  • loader, plugin이 많음

bower -> NPM

- jquery plugin moved to npm
- npm에 플러긴이 더 많음
- 주요모듈들이 npm에 등록

NPM Version Management

npm install -g npm-check-updates
  • ncu
  • updtr
  • GreenKeeper

Session 3. ECMA2015 Inside

자료

  • ECMA 스펙의 가장 큰 변화
  • ES5의 완벽한 상위 집합
  • 완벽한 상위 집합이기 때문에 ECMA5에서 가지고 있던 버그를 수정하지 못했음.

Promise

  • 실무에서 new Promise()보다는 Promise.resolve를 사용.

  • Promise 동작은 체이닝(연쇄 then)

  • Promise.all
    • 값을 전부 확인
  • Promise.race
    • 값을 순차적 확인
  • Job Queue
    • Promise 흐름을 잘 쓰기 위해 Job Queue를 이해해야함.
    • 연속되는 이벤트 큐의 마지막에 추가되는 큐.
    • then 함수를 Job Queue에 적재.
    • Job Queue를 해소한 후에 Event가 넘어감.
  • Promise의 한계
    • 예외처리
      • 논리적으로 완벽한 catch가 불가능
    • 단일귀결
      • Promise가 귀결되었기 때문에 내부 동적 Event를 캐치할 수 없음
      • 해결하기 위해서는 내부에서 Promise 새로 생성
    • 취소 불가
      • 한번 실행된 Promise는 취소할 수 없음.

Generator

  • iterable / iterator
       const arr = [1,3,5,7,9]
       const it = arr[Symbol.iterator]();
       console.log(it.next().value); // 1
       console.log(it.next().value); // 3
       console.log(it.next().value); // 5
       console.log(it.next().value); // 7
       console.log(it.next().value); // 9
    
  • 호출시 iterator를 반환
  • yield
          *gen(){
              yield 1;
              yield 1;
          }
    
    • yield를 만나면 제어권을 상위 호출로 넘겨줌
    • 제어권을 넘어갔다는 것은 generator 함수가 종료된 것이 아닌, 일시정지 상태?라고 보면 됨.
  • return 예외처리 내/외부 [try, catch, throw] 등 사용

Generator + Promise

  • generator에서 비동기적인 코드를 깔끔하게 처리
  • 항상 같은 코드를 작성하기 어려우므로 Generator 실행기 사용
    • Git 참고
    • http://github.com/shallaa/async
    • kangax.github.io/compat-table/es5/
    • http://es6-feture..

Session 4. react.js 실 서비스 적용하기

쿠팡 React 도입 시도

  • 문제점
    • 환경적인 문제
    • 개발시의 문제점
      • 별도의 gulp watch를 실행해야 함
      • gulp를 통한 rebuild가 너무 오래 걸림
    • deploy process 문제
    • IE7 미지원
  • 결국 여행딜 React 도입 Drop
  • 후에 호텔예약에 IE7을 버리고 도입
  • 결국 IE7은 버려야함…

Front-End Tool

  • Babel
  • Webpack
    • 의존성 추적으로 패키지 리펙토링 가능
    • 외부 라이브러리는 CDN 사용. 번들링 x.
  • Webpack-dev-server
  • dummy-server

좋았던 점

  • state와 props를 통해서만 Component 간의 데이터가 흐르므로 데이터 흐름 파악이 용이해서 좋았음.
  • propTypes를 통한 type checking
  • 일관된 this context
  • state update시 알아서 화면이 바뀌므로 rendering에 신경 쓸 부분이 줄어듦
  • Component 재사용 좋았음

별로인 점

  • 학습비용이 큼
  • probs chaining 문제
    • input 처리(한글 밀림)
    • 간단한 DOM 조작도 복잡할 경우 있음

Tips

  • window 7 문제
    • npm 2.x.x가 긴 경로명 때문에 문제 생기므로 npm 3.x.x 사용 권장
    • 일부 모듈 window7 안깔림
    • watch 성능 떨어짐.
  • Client Side Rendering
    • Dummy Markup 처리
  • IE
    • react.js 0.14 버전은 IE 8부터 지원
    • 차기 버전(.15)부터는 IE 9 부터 지원

Session 5. React Native

‘쏘카’의 ‘제로카’가 React Native로!

선택 동기

  • 기간이 촉박
  • 개발 리소스가 웹 개발자 뿐
  • 웹뷰는 속도도 느리고 별로.
  • NativeScript는 신뢰 떨어짐.

장점

  • React + Redux + ES6
  • Flex Layout
  • No compile, Hot-reload
  • javascript(npm 모듈 사용)
  • code push
  • Unit Test

단점

  • Navigation
  • Schrodinger’s cat in box
  • Performance
  • 등등..

Session 6. Spring과 nodejs의 공존!!

J2V8을 활용한 자바에 빌붙기

자료
git

Nashorn

  • Java에서 javascript를!
  • 속도도 빠름
  • React Isomorphic에 적합

ScriptTemplate

  • ScriptTemplateView
    • Spring 4.2

Node.js

  • 서버단과 프론트단을 분리하여 사용.

J2V8

  • 속도가 빠름
  • 아직 몇몇 문제가 많음
  • JNI performance bottleneck
  • CPU 사용률이 높음.(조금)
  • require를 사용 가능
  • 커스터미아징을 거쳐 isomorphic이 나즈혼보다 빠름.
  • ScriptTemplate의 Nashorn 부분만 J2V8로 교체하여 Spring 사용.

후기

  • 각 세션의 구성과 내용은 정말 좋았다. 관심있는 분야가 아닌 세션도 있었지만 발표자분들의 개발에 대한 열정에 감탄하였다.
  • 계속 백엔드 분야의 개발 세미나만 참석하다가 GDG 세미나에 이어 JSCON까지 연속으로 프론트엔드 분야의 세미나에 참석하게 되었다. 두 번째 프론트엔드 세미나를 참석하며 느낀 것은 프론트엔드와 백엔드 개발의 주된 관점과 포커스가 다른 것을 많이 느낄 수 있었다. 그동안 백엔드, 프론트엔드를 함께 개발하며 내가 각 영역에서 무엇을 생각하며 개발하였었는지를 다시 한번 돌아보는 계기가 되었다.
  • 마지막 세션에서 소개한 ‘Nashorn’은 ‘Scouter APM’과 더불어 최근 내 최대 관심사였다. 이 세션이 공개되고나서 엄청나게 기대를하였다. 정말 완벽하게 기대했던 내용 이상이여서 정말 감사하였다. 장동수님은 ‘J2V8’을 주인공으로 사용하였지만, 나는 나대로 ‘Nashron’을 좀 더 깊게 공부해보려고 한다.