GraphQL은 페이스북이 2012년에 개발하여 2015년에 공개적으로 발표된 데이터 질의어이다. 그래프QL은 REST 및 부속 웹서비스 아키텍쳐를 대체할 수 있다. 클라이언트는 필요한 데이터의 구조를 지정할 수 있으며, 서버는 정확히 동일한 구조로 데이터를 반환한다.
쉽게 풀이하면 하나의 앤드포인트에서 내가 원하는 스키마(데이터 컬럼 양)로 데이터를 가져올 수 있다. Web API로 개발하면 클라이언트에서 사용하지 않는 데이터가 포함되어 내려갈 수 있지만, GraphQL에서는 필요한 데이터만 요청하고 사용하기 때문에 서버 리소스나, 네트워크 리소스를 절약할 수 있게 되고, 무엇보다 장점이 데이터의 종류에 맞게 대응되는 컨트롤러를 만들 필요 없이 하나의 주소에서 호출하여 사용할 수 있도록 할 수 있다.
vue로 구축 된 electron 애플리케이션을 만들기 위한 보일러 플레이트 저장소를 소개한다. Electron은 javascript로 크로스 플랫폼을 지원하는 데스크탑앱을 만들도록 지원하는 프레임워크이다. HTML과 javascript만 있으면 시작할 수 있으나 기초공사부터 다시 하면 너무나 많은 작업을 해줘야 한다. 이때 Electron-Vue의 보일러플레이트 사용하면 기초 작업 없이 바로 데스크탑앱을 개발 할 수 있다.
[그림1] Electron-Vue logo
Things you'll find in this boilerplate...
Basic project structure with asinglepackage.jsonsetup
# Install vue-cli and scaffold boilerplate
npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project
# Install dependencies and run your app
cd my-project
yarn # or npm install
yarn run dev # or npm run dev
# Ensure Vue CLI is installed and up to date
npm i -g vue-cli
# Initialize a BootstrapVue project in the directory 'my-project'
vue init bootstrap-vue/webpack-simple my-project
# Change into the directory
cd my-project
# Install dependencies
npm i
# Fire up the dev server with HMR
npm run dev
웹을 완성도 있게 개발하기 위해서 디자인과 UI/UX를 완숙하게 보여주는데 필요한 라이브러리(javascript 포함)를 공유하는 사이트다.
RWDB는?
모바일 퍼스트
2009년 이후 스마트폰과 태블릿이 확산되며 모바일 퍼스트가 웹사이트 제작이 핵심이 되었고, 새로운 기기의 해상도를 지원해야 하는 이슈가 발생하고 있습니다. 이러한 문제를 해결하기 위해 하나의 소스로 다양한 디바이스를 한번에 지원(One Source Multi Use )하는 반응형웹에 대한 관심이 증가하기 시작하였습니다.
반응형웹
반응형웹은 모바일부터 데스크탑까지 한 가지의 소스로 다양한 종류의 기기에 최적화된 화면을 보여 주는 웹 기술입니다. N-Screen 시대에 맞추어 화면이 자동으로 재배치되며, 모바일과 PC홈페이지를 하나로 운영할 수 있어 편리한 장점을 가지고 있습니다. 더불어, 하나의 URL을 갖고 있어 검색과 노출에 유리하다는 장점을 가지고 있습니다. 모바일, 타블렛PC, 데스크탑을 동시에 지원하는 반응형웹은 새로운 이슈에 가장 빠르고 정확하게 대응할 수 있는 주요 해결 방안이 되었습니다.
RWDB는 국내 환경의 개선과 우리의 동료들 모두에게 긍정적인 경험을 제공하기 를 좋아합니다.
이러한 반응형 웹 디자인은 다양한 디바이스를 지원하고자 하는 기업의 핵심 해결방안이 되었고 성공사례도 다수 확인되었지만 다수의 국내 기업은 여전히 반응형 웹을 적용하는데 어려움을 겪고 있는 것이 엄연한 현실입니다. 반응형웹을 이미 많이 사용하고 있는 외국을 비롯하여, 국내정서에 맞게 반응형웹을 제작한 회사들을 소개하여 점차 One Source Multi Use의 세상이 되길 바랍니다.
Preact provides the thinnest possible Virtual DOM abstraction on top of the DOM. The web is a stable platform, it's time we stopped reimplementing it in the name of safety.
Preact is also a first-class citizen of the web platform. It diffs Virtual DOM against the DOM itself, registers real event handlers, and plays nicely with other libraries.
Small Size
Most UI frameworks are large enough to be the majority of an app's JavaScript size. Preact is different: it's small enough thatyour codeis the largest part of your application.
That means less JavaScript to download, parse and execute - leaving more time for your code, so you can build an experience you define without fighting to keep a framework under control.
Big Performance
Preact is fast, and not just because of its size. It's one of the fastest Virtual DOM libraries out there, thanks to a simple and predictable diff implementation.
It even includes extra performance features like customizable update batching, optional async rendering, DOM recycling, and optimized event handling viaLinked State.
Portable & Embeddable
Preact's tiny footprint means you can take the powerful Virtual DOM Component paradigm to new places it couldn't otherwise go.
Use Preact to build parts of an app without complex integration. Embed Preact into a widget and apply the same tools and techniques that you would to build a full app.
Instantly Productive
Lightweight is a lot more fun when you don't have to sacrifice productivity to get there. Preact gets you productive right away. It even has a few bonus features:
props,stateandcontextare passed torender()
Use standard HTML attributes likeclassandfor
Works with React DevTools right out of the box
Ecosystem Compatible
Virtual DOM Components make it easy to share reusable things - everything from buttons to data providers. Preact's design means you can seamlessly use thousands of Components available in the React ecosystem.
Adding a simplepreact-compatalias to your bundler provides a compatibility layer that enables even the most complex React components to be used in your application.
[그림1] preactjs logo
preact의 목표
Preact는 몇 가지 주요 목표를 달성하는 것을 목표로합니다.
성능 : 빨리고 효율적으로 렌더링 크기 : 작은 크기, (3.5kb 약) 경량 효율성 : 효과적인 메모리 사용 (재활용, GC 쓰레기 방지) 이해 : 코드베이스를 이해하는 데 몇 시간 이상 걸리지 않아야합니다. 호환성 : Preact는 반작용 API와 대부분 호환되도록하는 것을 목표로하고있다. preact-compat은 가능한 한 React와 많은 호환성을 달성하려고 시도합니다.
