Tag: melbjs

Viewport Trickery

Bugherd 개발사인 Macropod의 Jessica 발표였다. Bugherd는 웹서비스에서 사용할 수 있는 간편한 point-and-click 버그 트래커인데 실제로 우리 회사에서도 자주 사용하고 클라이언트도 편하게 피드백을 줄 수 있어 요긴하게 쓰는 도구다. 모든 모바일 브라우저도 지원하는 것을 목표로 새 버전을 만들고 있는데 수많은 해상도를 위해 Viewport 대응을 어떻게 했는지에 대해 발표했다.

Viewporter 현재 브라우저의 Viewport를 판단

postcss-px-to-em px를 em으로 변환, 확대 축소에도 같은 크기의 버튼을 제공하는데 도움

Viewport Trickery 발표 슬라이드

Introduce to AWS Lambda

Ben Teese의 발표로 AWS Lambda 서비스에 대해 소개했다. 이 서비스는 말 그대로 함수를 구동해준다. 함수에서 필요로 하는 인자를 넘겨주면 결과를 반환하거나 백그라운드 작업의 형태로 수행한다. 이 함수는 다양한 언어를 지원하고 있다. 언어를 고르고 함수의 Timeout, 사용 메모리를 지정해 lambda를 생성할 수 있다.

AWS 서비스에서의 Event Sources를 통해 해당 함수를 호출하게 하거나 API Endpoint를 생성해서 RESTful API와 같이 사용할 수 있고, AWS에서 제공하는 API Gateway을 endpoint로 지정해 microservice와 같이 구축해 사용할 수 있다는 부분이 인상적였다. 로그도 AWS CloudWatch에서 확인 가능해 AWS에 익숙하고 백그라운드 작업이 필요하다면 큰 도움이 될 것 같다. 시연에서는 문장 합치기, S3 버킷에 이미지가 등록되면 자동으로 섬네일을 생성하는 백그라운드 작업, API를 API Gateway에 연결해 postman으로 호출하는 것을 보여줬다.

시연에서 대부분 AWS의 대시보드를 이용해서 처리를 했는데 생각보다 깔끔하고 클릭 몇 번으로 쉽게 구축할 수 있어서 좋아보였다.

아직 모든 지역에서 lambda를 지원하는게 아니라고 하며 같은 지역이 아니면 s3 버킷에 접근을 못하는 등 제약이 있다고 하니 필요하다면 잘 알아봐야겠다. 비용은 pay-per-run인데 메모리 사용량이나 timeout에 따라 비용도 달라질 것 같다.

그리고 최근에 이런 서비스를 모아서 JAWS 프레임워크로 묶어 발표했다는데 잠깐 살펴보니 상당히 재밌다. 무려 타이틀이 The server-less Stack이다. 진짜 없는 것 같은 느낌은 나질 않는다. 😛 이름은 정말 잘 지었다.

JAWS stack server-less serverless aws nodejs express dynamodb lambda

Redux

Sebastian Porto의 발표로 Redux 라이브러리를 전반적으로 소개했다. React 라이브러리 중 하나라고 막연하게 알고 갔는데 생각보다 많은 차이가 있었다.

기존 Flux에서는 모두 singleton 형태로 작성되어 있어 매번 state를 다 흘려야만 최종적인 view를 만들 수 있는 상황이라 서버 구현이 특히 어려웠다고 한다. Redux는 dispatch와 state를 합쳐 store로 만들고, 상태를 직접 변환하는게 아니라 reducer로 함수의 형태로 그 변환 과정에 대해서만 저장하는 등 함수적인 아이디어를 많이 살펴볼 수 있었다. 그 외에도 action 사이 미들웨어가 구현되어 있는 부분이나 async action에 대한 처리, 핫 로딩 등 개발에 편리한 부분이 많아서 확실히 다른 라이브러리에 비해 편하게 느껴졌다.

조만간 제대로 살펴봐야겠다는 생각을 했다. Redux 문서 한국어 번역도 한참 진행중이다.

5월은 여러가지 일이 있어 참 바빴던 달이라 이제서야 후기를 적는다. MelbJS은 매달 정기적으로 열리는 멜번 JavaScript 밋업이다. 멜번에서도 다양한 밋업이 정기적으로 열리고 있는데다 한결 같이 흥미로운 주제라 자주 가고 싶지만 끝나고 집에 가는 것이 애매해서 1년에 두어 번 정도 가지 못할 뿐더러 가더라도 막차를 타야해서 앞 세션만 듣고 나와야 하는 아쉬움이 늘 있다. 관심있는 주제도 있고 새로운 자극도 받을 겸 시간내서 참가했다.

밋업은 매월 Aconex 오피스에서 진행하고 있다. 식당 공간을 다용도로 사용할 수 있도록 잘 만들어둬서 올 때마다 사무실이 생기면 꼭 이렇게 공간을 꾸며야겠다는 생각이 든다. 벽 한 켠은 칠판으로 만들어 둬 현재 이 회사에서 진행중인 프로젝트를 힐끔 살펴볼 수도 있다. (밋업을 가면 분위기라는게 있는데 Python 밋업은 학구적인 모임, JS 밋업은 힙스터 모임, .Net 밋업은 제2의 회사로 출근한 분위기다. 흐흐.) 스폰서가 많아 생맥주에, 피자에, 장소까지 풍성하다. 음식을 제공하는 행사마다 채식, 할랄 푸드를 먹는 사람을 위한 메뉴를 두는 모습이 참 보기 좋다.

Smarter CSS Builds with Webpack

envato의 개발자인 Ben Smithett의 세션이었는데 Webpack을 이용해서 CSS를 패키징하는 방법을 보여줬다. 패키징 자체는 크게 새로운 얘기가 아니었지만 컴포넌트 단위의 개발에서 CSS를 편리하게 적용할 수 있는 방법을 제시했다. 어플리케이션에서 실제로 필요하지 않은 CSS까지 전부 불러오는 것이 아니라 컴포넌트에서 필요한 CSS만 불러오는 형태로 작성해, 컴포넌트 단위 구성을 스타일까지 확장할 수 있게 된다.

물론 컴포넌트 단위로 사용하려고 하면 CSS도 컴포넌트 단위에 맞는 접근이 필요하다. CSS pre-compiler를 사용하게 되면 변수의 scope가 전역적으로 다뤄지기 마련이라 각 컴포넌트를 독립적인 css로 관리하는데 불편함이 있는데 각각 독립된 컴포넌트에서 필요한 변수셋을 불러오는 형태로 그 의존성을 분산할 수 있다.

컴포넌트를 더 컴포넌트답게 활용할 수 있게 하는 아이디어라서 더욱 마음에 들었던 세션이었다. react로 개발하고 있다면 살펴볼 만한 좋은 주제다. 전체 세션의 내용은 Ben Smithett의 블로그 포스트에서 확인할 수 있다.

React Native — One of these things is not like the other

Matt Delves의 세션으로 react native에 대한 전반적인 이야기를 다뤘다. 이전에 공식 문서 튜토리얼을 살펴봤을 때랑 많이 달라지지 않아 크게 새로운 이야기는 없었지만 flux 아키텍쳐에 대해 알게된 후 듣는 react native라서 기분이 새로웠다. 세션 중간에 Colin Eberhardt를 인용했는데 react에 대해 정확하게 표현하는 느낌이다.

“React는 사용자 인터페이스를 생성하는데 독창적이며 급진적인, 고수준의 함수형 접근을 도입했다. 간단히 말해, 어플리케이션의 UI는 단순히 현재 어플리케이션의 상태를 표현하는 함수 역할을 한다.”

“React introduces a novel, radical and highly functional approach to constructing user interfaces. In brief, the application UI is simply expressed as a function of the current application state.”

아직 구현되지 않은 view도 많고 부족한 부분이 있지만 계속 개선되고 있어서 더욱 더 기대되는 라이브러리다. 전체 발표 내용은 GitHub Repo.에 올려져 있다.

요즘 쏟아지는 수많은 라이브러리를 다 써보지 못해서 늘 아쉬운 기분이 든다. 실무에서 사용하지 않고 있다면 개인 프로젝트로라도 진행해서 써봐야 이해도 되고 손에도 익는데 무언가 만들고 싶은 욕구가 덜해서 고민이 많다. 아무리 바쁘더라도 한 발자국 물러나면 별 일도 아닌 일인 경우가 너무나도 많은데 쉽지 않다. 여유를 다시 찾고 다시 재미있게 코드를 만들 수 있었으면 좋겠다.