24
9월
2019

JSCONF KOREA 2019 돌아보기

저는 이전에 Deview(https://deview.kr/) 등을 참여한 경험은 있지만, 국내 IT기업 위주로 진행되는 대형 컨퍼런스들은 사실 프론트엔드 개발자에게 큰 도움이 안된다는 생각을 하고 있습니다.
게다가, 여느 개발자가 거의다 그렇듯 샤이한 성격의 본인이 컨퍼런스에서 기대했던 것은 “순수한 기술 습득 및 공유“였지만, 최근엔 해외 컨퍼런스처럼 개발자간의 네트워킹을 유도하거나, 또는 자사/조직의 PR 등이 더 많은 것 같아서 컨퍼런스는 언젠가부터 잘 안가게 된 것 같습니다.

그러나 Jsconf(https://2019.jsconfkorea.com/)는 자바스크립트 개발자만을 위한 컨퍼런스이고 세계적으로 많은 도시를 순회하면서 개최하고 있기 때문에 꽤 기대를 했습니다.
모든 세션이 자바스크립트 및 프론트엔드 개발을 위한 대규모 컨퍼런스는 처음이었고, 티켓 가격도 가격인지라 앞으로도 갈 수 있는 기회가 얼마나 있을지 알 수 없기 때문입니다.

이번 jsconf에서는 메인발표, 라이트닝 토크, 튜토리얼의 3트랙으로 진행되었는데요, 일단 튜토리얼에는 전혀 참여하지 못했습니다.

모든 세션에 대한 후기나 리뷰는 할 수 없지만, 각 세션에 대한 개인적 회고를 평어체로 몇자 남겨보고자 합니다. ^^


다마고치로 배우는 제네레이터

  • 특정 애니메이션이 끝난 후 통상 애니메이션으로 돌아가는 과정을 구현하면서 Promise 대신 제네레이터를 응용했다.

Don’t block the event loop!

  • event loop의 개념 이해는 호출 스택과 태스크 큐와 함께 해야한다.
    참고 동영상은 Help, I’m stuck in an event-loop 영어이긴 하지만 전혀 이해못할 정도는 아니다.
  • setTimeout은 task, Promise는 micro task이다.
  • 이벤트루프에서는 micro task의 우선순위가 높으며 micro task의 queue가 비워지면 남은 task를 실행하게 된다.
  • 렌더링은 task queue에서 실행되기 때문에 micro task가 계속 실행될 경우 UI를 막는 현상이 발생할 수 있으며 이는 사용자 경험에 크게 방해된다.
  • task, micro task의 우선순위를 잘 조절하여 UI를 막지 않도록 작업해야 한다. web worker의 이벤트루프는 별도이기 때문에 필요하다면 이쪽으로 무거운 작업을 옮기는 것도 고려하자.

NPM package를 활용한 사내 라이브러리, 컴포넌트 관리

  • Mono-repo란 여러개의 모듈 및 패키지를 개별 리포지토리로 두지 않고 단일 리포지토리에서 통합하여 관리하는 방식이다.
  • 퍼블리시를 위한 라이브러리로 Yarn WorkspaceLerna가 주로 사용된다.

오픈소스 프로젝트 mocha에서 배운 것들

  • FE계의 인싸 아웃사이더 님의 발표
  • 오픈 소스 개발은 쉬운일이 아니다. 풀타임이 아닌 이상 개인의 24시간에서 1-2시간 정도는 꼭 빼야하는게 결코 쉽지 않다.
  • mochajest를 사실상 경쟁 구도로 인식하는 경향이 있다. mocha의 컨트리뷰터 내부에서도 jest의 기능을 도입하자는 이슈가 나온 적이 있었으나, 메인 컨트리뷰터가 “경쟁하지 말고 사용자를 위해 노력하자”는 내용으로 정리한 적도 있다고 함.
    • 해당 이슈와 댓글은 여기

백 투 더 퓨터 오브 자바스크립트 II

  • TC39에서 stage 1에 해당하는 몇가지 신기능을 소개했다.
  • 패턴 매칭 : https://github.com/tc39/proposal-pattern-matching
    • -> 연산자
  • 파이프라인 연산자 : https://github.com/tc39/proposal-pipeline-operator
    • |> 연산자
  • Binary AST : min.js 대신 binjs를 얻는 과정
    • 텍스트 형태의 전통적인 소스코드 대신 바이너리 형태로 전달. 바이트코드 등 컴파일한 중간 단계는 아니고 단순한 바이너리 형태로 전환.
    • 전송속도의 향상과 파싱 속도의 향상
    • 바벨에서도 현재 논의 대상이다.

함수형, Redux와 Canvas에 적용하면서 배워나가기

  • redux를 이용하여 개발하면서 함수형 프로그래밍 패러다임을 도입하면서 겪었던 시행착오를 공유. reducer를 개발하면서 함수형 프로그래밍의 분해와 합성을 도입했다.
  • 주요 라이브러리로 Ramda.js를 사용했다.
  • 개인적으로 함수형 프로그래밍은 어렵기도 어렵지만, 자바스크립트 개발에 적용하기 힘들다는 생각도 하고 있다. 물론 어려워서… 라는 것을 부정할 수는 없다. ㅎㅎ
  • 아직까지는 함수형 프로그래밍의 장점이 확 와닿진 않지만, 계속 모니터링할 예정.

TypeScript로 디자인시스템에 날개 달기

  • 디자인 시스템의 대표적인 예는 가깝게는 bootstrap, 유명한 것으로 구글의 Material design 등이 있다.
  • 디자인 시스템이란 단순한 UI 컴포넌트 또는 스타일 가이드, 코드 컨벤션 뿐만 아니라 이를 모두 포함하는 디자인 언어라고 할 수 있다.
  • 따라서 엄격한 룰이 적용된 설계가 매우 중요하며, 트위치에서는 이를 위해 타입스크립트를 도입했다. 타입스크립트의 특징은 디자인 시스템의 설계에 효율성과 명확성을 부여해주었다.
  • StoryBook은 디자인 설계와 컴포넌트별 개발에 적합한 좋은 솔루션.

JS bundle size 최적화를 통한 성능개선

  • 프론트엔드 개발에 단골 화제인 webpack 번들링 최적화에 관한 내용
  • react를 사용하여 개발할 경우 다국어 지원에 대해서는 react-i18next를 고려할 것.
  • 코드 스플리팅을 위해 dynamic import를 사용할 경우 서버사이드 렌더링(SSR)에 불리할 수도 있다.
  • url-loader의 경우 config에서 지정한 크기 이하의 이미지는 base64 encoding을 통해 번들에 통합할 수 있다. 하지만 이것은 번들 사이즈를 키우는 주범.
    • 사실 url-loader는 항상 최적화 문제를 일으키는 것 같다.
    • 유리한 경우가 있는 것은 사실이지만, 도입하려면 많은 고민을 해야하고, 유지보수 시에도 계속 모니터링할 필요가 있겠다.
  • 성능 측정에 Calibre(https://calibreapp.com/)를 고려해보자.

웹어셈블리 지침서

  • 모든 언어가 웹에서 구동이 가능한 세계를 꿈꾼다.
  • 솔직히 아직까지도 막연한 신기술. 심지어 발표자도 예상할 수 없다고 한다.
  • 설계 측면에서 native code이기 때문에 자바스크립트와 함께 동작하는 것은 어려울 것이다.

자바스크립트로 음악 처리하기

  • web audio api 를 사용해 기타 이펙터를 만든 과정과 실제 기타로 연주하면서 시연하기
  • 발표장이 발표장인지라 실제 기타를 이용한 데모의 사운드는 나빴지만, 라스트 세션으로는 인상적이었다.
  • 개인적으로는 기타 이펙터들의 원리를 대충 알고 있는데, 이들을 실제 자바스크립트로 구현할 수 있다는 것이 인상적이었다.
  • 아직은 진짜 기타리스트를 만족시키기엔 어려운 토이프로젝트이지만, 앞으로의 audio api의 발전과 브라우저의 발전을 거듭하면 상용으로 판매할 수 있는 수준도 되지 않을까 기대하게 한다.

간단하게 메모만 한 것도 있고 관심이 있어 자료를 더 찾아본 세션도 있는데요, 나름 얻어온 것이 많은 좋은 컨퍼런스였다고 생각합니다.

개인적으로는 디자인 시스템의 구축에 타입스크립트를 도입했다는 내용이 가장 인상적이었고, 타입스크립트를 열심히 공부해야겠다는 동기 부여를 받았기에 만족하고 있습니다. 🙂

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다

%d 블로거가 이것을 좋아합니다: