woolta

2019 jsconf 행사를 다녀오며..

wooltaUserImgb00032 | etc | 2019-09-08

들어가며

드디어 기다리고 기다리던 jsconf 를 참석하게 되었습니다.!! 짝짝짝!!!!!! 식사쿠폰도 무려 만원이나.!!! 컨퍼런스의 묘미중 하나인 여러 굿즈까지.. https://image.woolta.com/3fe406e7b12d79b4.png 이번에는 jsconf 를 참석해서 발표자 분들이 발표하신 간단한 내용과 그에대한 후기 입니다.!! 중간중간 발표에 집중해 일부 없는 내용이 있을수 있으니 관심있으신 발표자료는 추후 공개되는 발표영상을 꼭꼭 봐주세요.!!

1. 다마고치로 배우는 제너레이터 - 젠 크레이튼

canvers 와 svg를 통해 다마코치 웹 버전 제작을 시도하였습니다. 다마고치가 통통 튀는 듯한 드로잉을 위해 0, 200, 400으로 주며 바운스 하도록 처리하였으나 통통튀는 드로잉이 겹치는 현상이 발생이 발생하여 주기적으로 드로잉을 clear 하는 것으로 해결하였습니다.! 그리고 다음과 같은 문제가 발생하였습니다.ㅠㅠㅠ

첫번째 문제. 동작을 하지않는것처럼 보임

이는 실제로는 동작은 진행되지만 너무 빨리 실행되고 끝나버려서 사용자가 브라우저에서 볼때는 동작자체를 안한것으로 인식을 하지 않는것 처럼 느껴졌습니다. 이에 대한 딜레이를 주기위해 처음은 setTimeout 으로 처리 하고 애니메이션은 비동기에 대한 처리를 위해 promise 로 드로우 함수를 만들어 보았습니다.

두번째 문제 thenable hell.

promise 를 사용하여 callBack 지옥 을 벗어난것처럼 보이나 then 을 적게 사용할땐 보기에는 좋아보이나 많이 사용하는 케이스에서는 여전히 좋지 않다고 생각하였습니다. 또한 다마코치는 같이 놀아주거나, 밥을 주는 이런 사용자의 상호작용을 하는 작업에 대한액션이 필요한데 이 사이의 유휴시간의 대기가 필요한 상황이였습니다. 예를들어 게속 바운스하는 기본모드에서 사용자가 클릭이벤트 진행시 진행중이던 바운스 작업이 취소되고 새로운 액션이벤트가 바로 잔행되어야 하였습니다. 그러나 promise에러, 성공을 반드시 응답하는 구조이기 때문에 즉각적인 pause에 대응을 못하기 때문에 pause 이벤트를 위해 제너레이터를 도입하여 yield 를 사용해 대기하는 상태를 만들 수 있었습니다.

canceling a generator

generator 룰 사용하면 promise 에서 못한 취소 작업을 진행 가능합니다. 이것이 가능한 이유는 실행제어를 외부에서 할 수 잇기 때문입니다. 외부 호출에서 xxx.return() 을 통해 실행을 중단 시키는 것이 가능합니다.

후기.

제너레이터를 아직 redux-saga 를 사용하면서 도입하긴 했으나 정확히 개념이 잡히지 않는 상황이였는데 이번 발표를 들으며 pause 에 대한 처리를 보고 활용성이 높다고 생각하였습니다. 열심히 공부만이 살길.!!

2. Don't block the event loop! 매끄러운 경험을 위한 자바스크립트 비동기 처리 - 강재석

callStack ??

지바스크립트는 요청이 올때마다 callStack에 넣어서 순차적으로 런 투 컴플리션 하게 처리를 합니다. callStack에서 요청온 순서대로 처리하다가 딜레이가 있는 task를 만나게 된다면 당연히 그 뒤에 모든 task처리가 지연 됩니다. 그렇다면 이런 단일 스택구조에서 브라우저에서 일어나는 다수의 동시성 문제는 어떻게 해결할까요? 이는 webApiseventLoop 를 통해서 해결하고 있습니다.

EventLoop

while(queue.waitForMessage(){
	queeue
})

eventLoop는 자바스크릅트 엔진의 구성요소는 아닙니다. eventLoop의 동작원리는 테스크가 존재하면 가장 오래된 태스크를 실행하고 테스크가 없다면 게속 기다리게 됩니다. 또한 테스크를 기다릴때 마이크로테스크를 먼저 찾고 실행합니다.

Task & microTask

task는 브라우저 환경에서 순차적으로 실행되어야 하는 작업을 의미합니다. ps. (setTimeout running script, ui event)

마이크로테스크는 일반 task보다 우선순위가 높은것들을 의미합니다. 대표적인 예로는 promise가 있습니다. 그러나 결국 마이크로테스크에서 헤비한 작업이 있으면 그 다음 테스크는 해당 작업이 끝날때까지 이벤트 루프에 의해 블락됩니다. 이는 UI/UX가 깔끔하게 나오지 않을 수 있습니다.

이런 블로킹은 어떻게 해결할 수 있을까?

  • 다른 쓰레드를 사용하는것은 어떨까? -> webWorkers
  • 테스크 한개가 너무 무겁다면 나누어서 처리하도록 하면 어떨까? -> limitations

webWorkers

메인쓰레드가 아닌 워커쓰레드에서 작업하는 방식입니다. 메인쓰레드와의 통신은 postMessage() 를 통해 가능합니다. 이를 통해 메인쓰레드와 워커쓰레드에서 각각 따로 동시에 통신작업이 가능 합니다. 그러나 webWorkers의 경우 돔컨텍스트에 직접 통신하는 방법은 없는 단점이 있습니다..

limitations

가장 큰 태스크를 잘게 나누어서 테스크 사이사이에 넣어주어 좀더 최적화를 높힐 수 있게 됩니다. 또한 테스크가 진행중일때 게속 중첩하는 것이 아닌 제너레이터를 사용해 취소를 시키고 다시 실행하는 방식으로 최적화 가능합니다. 즉 webWorkers를 사용해 백그라운드에서 실행시키거나 큰 작업을 작은 단위로 나누어 처리하도록 해서 최대한 사용자 경험을 최적화 시켜줄 수 있습니다.

후기

사실상 이런 작업이 쓰일일은 별로 없지만..(정말 대형 서비스나 엄청난 성능이 필요하다면 쓰지만) 이러한 내부 구조와 최적화된 내용을 알게 되어 나중에 코드 작성 및 설계시 좀더 탄탄한 배경지식으로 작업을 할수 있을것으로 생각되어 재미지게 본 발표였습니다.

3. 오픈소스 프로젝트 mocha에서 배운 것들 - 변정훈

mocha는 자바스크립트 테스트 프레임워크로node 와 브라우저와 사용. 작년에는 jest가 가장 많이 사용하고 그다음이 mocha 를 사용

어떻게 메인테이너로 합류하게 되었나?

작년 3월경 리드 메인테이너에게 제안을 받게 조인!! 17년 12월에 퇴사 직후 쉬는 동안 무엇을할까 하다가 오픈소스에 열심히 참여 하고 싶어 mocha에 열심히 PR을 해서 commit을 올린것 으로 인해 제안을 받은거고 합류 이후 확인해보니 마침 메인테이너를 늘리려는 시기.!!

mocha는 커뮤니티 기반 풀타임 서비스 입니다. 즉 메인테이너들이 본업은 따로 있고 짬날때 마다 참여하는 방식입니다. 보통 짧은 기간에 자주 PR 이나 commit 으로 열심히 활동하는것이 눈에 자주 띄고 기억이 나게 됩니다. 처음합류시점에서 좋은 개발자 들과 유명한 것을 작업하며 성장할것이라 기대가 되었습니다.

그렇게 1년을 하며 느낀것.

메인테이너는 너무 힘이듭니다... 물론 그전에도 오픈소스를 몇년간 대충 해본 경험이 있어 발표도 해본적이 있고 때문에 어느정도 알것이라 생각했는데 그것 이상으로 훨씬더 힘들었습니다. mocha의 경우 하루에 2~3개 정도 이슈가 오게됩니다. 이슈를 보게되면 살펴보고 다른 메인테이너들도 볼수있도록 레이블링 작업을 처리 이후 해결가능하면 댓글을 달고 이슈를 닫아주도록 처리하고 있습니다. 보통 이슈1개처리에 짧으면 20~30분 길면 1~2시간 정도 소요됩니다.. 보통 퇴근하고 2~3시간은 써야 어느정도 이슈 소화가 가능합니다.

왜 내 PR은 머지되지 않는가?

  • 너무바빠서.. 놓치는 이슈가 있을 수 있습니다.
  • 메인테이너들은 보통 하나만 활동하지 않고 여러곳에서 활동해서 하나에 집중하지 않기때문에 위에 설명한것처럼 놓치는 이슈가 있을 수 있습니다.

이러한 작업은 자발적으로 본업과 병행하며 진행하기 때문에 메인테이너 들이 번아웃 되지 않도록 일정의 압박을 느끼지 않게 해주어야 합니다. (한두달의 크런치모드로 집중해서 끝나는것이 아닌 오랜기간 해야하기 때문입니다) 커뮤니티에서 무례하게 커뮤니케이션을 한다면 이는 경고조치가 들어가게 됩니다. (자발적으로 참여하는 사람에게 빈정거리는 일이나 일을 요구하지 않는다.)

메인테이너들이 가장 중요하것 - 느긋한 마음 가짐

급하고 중요하다 생각하는 사람이 코드를 직접 수정하면 됩니다. 본인이 작업해서PR을 올리고 컨펌을 되는 문제.(오프소스에도 기여를!!) 본인의 PR이 롤백이 되었을때는 좌절도 하고 자존감이 떨어지게 됩니다. 롤백이 되는 가장큰 이유는 주로쓰는 기능 말고는 사용해본적이 없어 완벽한 프로젝트 분석이 안되기때문입니다. 이를 위해 내가 기여할 수 있는 부분에 기여하고 코어한 부분은 따로 공부하는 편이 좋습니다.

영어의 한계

영어가 잘하는 편이 아니다 보니 단건단건은 문제가 없으나 논의가 길어지면 점차 이해하기가 힘들고 LGTM 신공을... 이슈의 쓰레드가 길어지게 되면 다른 메인테이너들이 이를 처음부터 다 읽다보니 너무 시간을 소비하게 됩니다. 때문에 일정기간 지나면 댓글을 못달도록 락을 걸어버리고 해당 이슈를 링크로 걸어 다시 질문하도록 하는 논의도 있습니다.

모든 요구사항을 받아줄 수는 없다.

사이드 이펙트, 요구사항의 정합성, 기간 등등 의 여러 이유가 있기때문에 전부를 받아줄수는 없습니다.

node,js LTS 정책은 메인테이너들에게도 좋다.

node가 지원을 안하면 mocha도 지원을 안해도 좋으므로 스펙을 정할 수 있는 장점이 있씁니다.

4.생명을 살리는 AI 그리고 자바스크립트 - 안재만

의료 인공지능의 소개

만약 당신이 짠 코드가 누군가의 생명을 살릴수 있다면? 생존률을 1%이상 올릴수 있다면? 미국에서는 의료과실로 인한 사망자가 25만명에 이릅니다. 이를 자신의 코드로 생존률을 올린다면 이는 큰 사람의 수를 살릴 수 있게됩니다.

의료인공지능을 살리는 솔루션 개발기

처방, 의료기록, CT, 엑스레이 등의 자료를 토대로 머신러닝을 통해 환자의 상태를 측정하도록 작업하였습니다. 이런 솔루션을 만들기 위해 다음과 같은 과정을 통해 제작됩니다.

  • 인공지능을 위해 필수적으로 작업하기 위해 열심히 데이터를 모으고 정제하는 작업을 진행. 또한 outcome 을 제작하여 예측할수 있도록 작업
  • 위에서 만든 모델을 통해 tensorFlow 를 통해 브라우저 위에 deploy 이때 최적화와 경량화 작업을 진행. ai모델이 잘못된 결과를 주는것에 대해 최대한 고려할것.
  • 예측하지 못하는 입력값에 대한 테스팅을 열심히 검사하여 데이터 신뢰성을 올린다.
  • 프론트엔드는 만드는 과정

... 더 듣고 싶었으나 점심 직후 발표라 그런지 어느새가 잠들어버렸습니다. 강의 주제도 그렇고 초반 코드로 생존률을 올린다는 주제에 감명받아 추후 동영상 자료 공개되면 시청 후 업데이트 예정입니다.!

5. 백 투 더 퓨처 오브 자바스크립트 II: 미래를 넘어 - 윌리언 마르틴쉬

Pattern matching

자바스크립트의 조건문은 현재 if-else, switch, 3항 연산자가 존재합니다. 그러나 이와 다른 다른 조건문이 새로 생길수도 있는데 이는 바로 패턴 매칭(Pattern matching) 입니다. case 문에 object 를 넣고 when 절에 매칭이 되는 {} 를 넣어주게 되고 이를 arrow로 결과식을 주는 방입니다. 설명보다는 첨부된 사진과 예제 소스를 보면 바로 이해하실 수 있습니다.!

https://image.woolta.com/3fec391fad029b5f.png

const getLength = vector => case (vector) {
  when { x, y, z } -> Math.sqrt(x ** 2 + y ** 2 + z ** 2)
  when { x, y } -> Math.sqrt(x ** 2 + y ** 2)
  when [...etc] -> vector.length
}
getLength({x: 1, y: 2, z: 3}) // 3.74165

과거에는 if-else문을 많이 사용하였으나 이제는 Pattern matching 을 사용해도 됩니다. 그리고 when이 아닌 let으로 바꿀 수 있으나 이건 아직 논의중 단계 입니다.

pipleline operator

함수합성은 함수들을 합성하여 만드는 것입니다. 함수안에 함수를 넣게 되면 가시성이 떨어지게 됩니다.

reutrn a(b(c());

해당 코드는 가독성이 떨어지게 때문에 보통 중간 연산자를 사용해 다음과 같이 작성하곤 합니다.

const cResult = c();
const bResult = b(cResult);
return a(bResult);

pipleline operator 은 이러한 부분을 해결하기 위해 태어났습니다. pipleline operator 은 합수의 합성 사이에 |> 를 넣어주어 선언하게 됩니다.

return a |> b|> c;

이전에 선언한 reutrn a(b(c()); 보다 훨씬 직관적으로 이해할 수 있게 됩니다. 또한 파라미터를 넣어주어야 한다면 다음과 같이 arrowFinction 을 사용해서 표현할 수 있습니다.

return a |> ((param) => b(param))|> c

비동기에서는 다음과 같이 처리하려면 어떻게 해야할까.? 비동기 파이프 라인 처리는 다음과 같은 방법들로 처리할 수 있도록 논의 중 입니다.

첫번째. smart pipleline proposal

return a |> b |> await c

두번째. handling currying

|> a()#

F# 파이브라인 제안

return a |> b |> await 

현재 바벨7.3 에는 smart pipleline proposal 가 적용되어있습니다.

js cold start

우선 js 엔진에 대해 간단하게 설명을 드리겠습니다. 에디오스만이 만든 표현식을 발려 말하면 브라우저가 js 를 만나면 다음과 같은 처리를 합니다.

  • js 파싱
  • 추상화 문법 트리 작성
  • 바이트코드를 생성
  • 생성한 바이트코드에 피드백을 주고 최적화 작업을 진행

js 라이브 사이클 단계는 여러개가 있으나 이때 중요한건 파싱 단계입니다. 파싱과 컴파일러에 들어가는 시간이 메인쓰레드 성능에 30%를 넘게 사용됩니다. 1MB 같은 js 파일은 1초정도 소요될수 있어 모바일 기기에는 성능 저하의 원인이 되기때문에 이를 위해 Binary AST 가 등장하였습니다.

Binary AST

Binary AST 는 아직 브라우저가 지원하지는 않습니다. js 파일을 바벨같은 트랜스파일러를 통해 .min.js 등을 얻을수 있는데 여기에 추가적으로 binary ast 를 통해 bin.js 를 얻을 수 있게됩니다. 추후 브라우저가 이를 지원하면 bin.js 를 읽을 수 있음. 시간단축을 테스트 한 결과 FullAst의 경우 500~800 ms 가 소요되었으나 Binary AST 의 경우 약 절반정도의 시간이 소요되었습니다. 결론적으로 Binary AST를 사용할 경우 컴파일에 걸리는 시간이 다운로드 시간보다 훨씬 적은 시간에 컴파일이 가능하게 되는 장점이 있습니다. 코드를 통한 별도의 작업을 안해도 자동으로 최적화가 진행되는 마법을 경험하실 수 있습니다.!!!

후기

가장 임팩트있는 발표로 새로운 패턴매칭, 파이프라인 등에 대해 많은것을 배웠고 함수형에 대해 좀더 심도있는 공부를 해야겠다고 생각되는 세션이였습니다. 또한 뒤쳐져서 공부하는것이 아닌 어떤것이 불편해서 이렇게 개선되가는 흐름에 대해서도 알고있어야 한다는것을 다시한번 느끼게 해준 발표세션 이였습니다. 짝짝짝!!!

6. 함수형, Redux와 Canvas에 적용하면서 배워나가기 - 조규진

리덕스와 함수형 프로그래밍

리덕스자바스트립트의 전역 상태를 괸리할 수 있도록 도와주는 라이브러리 처음등장해 당시에는 혁신적으로 평가되었습니다. 이와 비슷하게 주목받은 것이 하나더 있는데 이것이 바로 함수형 프로그래밍 입니다.

함수형 프로그래밍의 관심사

리덕스를 사용하게 되면관심사가 자연스레 분리되는 장점이 있습니다. 이 이후 함수형 자바스크립트를 스터디 하며 순수함수, 사이드이펙트 피하기, 선형구조로 작업 에 대한 필요성을 느끼고 함수가 단순하기때문에 신뢰성이 높고 재사용성이 높으며 상위 로직을 파악하기 쉬운장점을 알게 되었습니다. 그러나 막상 실무에 들어가게 되니 제대로 적용하지는 못하였습니다. 사용한건 단순히 filter, map 을 사용한 정도..?

함수형 프로그래밍으로 레거시 리팩토링!!

이후 회사를 이직하게 되어 기존의 레거시를 리팩토링 하게되어 combineReducers 를 사용하여 리팩토링 을 시작하였습니다. 또한 미들웨어를 통해 api 요청등의 액션등을 해주었습니다. 기존에는 saga에서 비즈니스 로직을 한번에 모아서 처리하는 것을 Ramda.js 를 사용하여 각 action 함수들을 curry로 감싸서 pipe을 사용한 메소드로 처리하는 방식을 통해 처리하였습니다. 이때 compose 를 사용안하고 pipe를 사용하였는데 이는 compose는 밑에서 위로 읽는 가독성 문제때문에 pipe를 사용하였습니다.

후기

개인적으로도 비즈니스 로직이 겹치는 부분이나 API 미들웨어를 Saga를 통해서 처리해서 이를 pipe 라인으로 변경한 부분에 관심이 많았으나 가장 궁금했던 비동기 통신 처리에 대한 파이프라인은 아직 pipe 가 아닌 기존의 미들웨어만 사용한다고 해서 이점은 살짝 아쉬웠습니다.ㅠㅠ 그래도 순수 비즈니스 로직은 다음기회에. pipe 라인 처리로..

7. Typescript로 디자인 시스템에 날개 달기 - 이샤 카슬리왈

디자인시스템은 추상적, 실물적인 엘리멘트들을 모두 포함합니다. 또한 일관성 있는 패턴 라이브러리를 제공하여 이를 이용해 여러 추상적인 엘리먼트 그리고 브랜드와 같은 작업의 공유 등에 대한 BestPractice를 경험할 수 있습니다. 디자인시스템은 제한 요소와 원리가 포함되어 있어 이를 통해 작업에 있어 표준을 정할 수 있습니다.

제일 초점을 맞추는것은 표준 컴포넌트의 개발. 작업순서는 다음과 같습니다. 1. 컴포넌트가 필요한지 아이디어 단계 2. 컴포넌트 디자인 3. 디자인된 컴포넌트를 코드로 작성 (view 레이어에 집중) 4. 출시

이때 react, ts 를 사용하여 제작하는데 특히 ts를 통해 props 에 대한 명확한 규정이 가능합니다.

타입스크립트란?

타입스크립트는 js에 컴파일링 될수있는 일종의 상위 단계 입니다. 가장 중요한 것은 특정한 props 에 대한 명확한 규정이 가능하다는 것 입니다. 이를 통해 변수의 변화를 강제할 수 있습니다. 또한. IDE 를 통해 자동완성, 스니펫과 같은 편리한 기능을 사용할 수 있습니다. 그리고 interface를 export 함으로써 어떤 컴포넌트가 준수해야하는 규약을 정의할 수 있습니다.

타입스크립트 && 디자인 시스템

타입스크립트는 디자인과 개발 사이에서 강력한 신뢰관계를 줄 수 있는 장점이 있습니다. 디자인 작성만이 아닌 컴포넌트에 대한 문서화를 작성하고 컴포넌트 단위로 props 를 넣어가며 테스트 할수있는 플레이 그라운드 영역도 개발 하였습니다. 프로그레스 바와 같은 간다한 컴포넌트에서도 enum 타입등을 통해 좀더 디자인을 정확하게 구현하고 표현할 수 있는 장점이 있습니다.. 또한 자동완성 기능으로 더욱 빠르게 작성 가능힙니다. 때문에 트위치 컴포넌트는 아주 엄격한 props 들로 이루어져 있습니다. 또한 타입스크립트르 사용하면 15% 가량 버그가 줄어든다는 연구결과도 존재합니다.

후기

개인적으로 가장 기대가 많았고 아쉬움도 많이 생긴 세션입니다... 트위치에서는 ts + React의 조합을 통해 컴포넌트에 대한 작성방법이나 트위치내에서의 패턴 등에 대한 기술적인 부분에 대해 설명을 들을줄 알고 기대했으나 실제 발표내용은 타입스크립트가 좋다는 내용과 단순 트위치내에서의 디자인 시스템에 대한 설명정도로 느껴져서 개인적으로 기대했던것보다 많이 아쉬운 내용이였습니다.ㅠㅠㅠ

8. The Man who Sold the Amp: 자바스크립트로 음악 처리하기 - 비탈리 보브로프

web audio란?

웹음악을 input 을 받으면 스피커로 출력되는 output으로 가기전 여러 노드가 존재하는데 이를 통해 여러 작업이 가능합니다. 웹 표준상 대부분의 브라우저는 web audio를 지원합니다. 사용하려면 우선 AudioContex 를 생성해야 합니다. 또한 대부분의 브라우저에서는 사후처리를 하기때문에 echoCancellation, autoGainConroll 등의 기능을 꺼야 정상적으로 소리를 만들수 있습니다. 볼륨 조절은 gainNode 를 통해 값을 변경하며 0 ~ 1 사이로 컨트롤 하며 소리 증폭을 컨트롤 할 수 있고 distortion 을통해 사운드웨이브를 변경시켜서 메탈과도 같은 소리를 낼수 있습니다.

후기

마지막 발표세션이라 피로감이 있고 음악 처리에 대해서는 관심이 별로 없던터라 관심이 덜하였으나 기타를 들고오셔서 발표처음부터 기타 퍼포먼스와 이전까지 알지 못했던 webAudio 기능과 이를 통해 웹으로 음악을 실제로 처리하고 소리를 변조하여 이펙트 등을 만들어 버리는 모습에 나도 모르게 빠져드는 신나는 강의였습니다.

전체적인 후기

jsonConf 는 입장료도 생각보다 가격이 나가고 발표세션에 대한 시간표를 들었을때 기대감이 엄청 컸으나 실제로 전부 듣고나니 개인적으로 느끼기에는 기대의 완전 만족하지는 않았으나 몇개의 발표세션이 임팩트있게 다가와 전혀 후회하지 않게 된 하루였다고 생각됩니다. jsonConf 또 해주세요.!!!!!!!!!

Copyright © 2018 woolta.com

gommpo111@gmail.com