남산 아래 개발자들

플랫폼 사업팀에서 할 새로운 사업에 Vue.js 를 사용해서 만들어 보기로 했습니다. 그래서 알아본 상용 또는 무료 라이브러리들입니다 먼저 공식 홈페이지  https://vuejs.org/ 에서는 간단한 템플릿과 예제들을 볼 수 있구요, https://github.com/vuejs/awesome-vue 이곳은 vue 에서 필요한 기능들을 다운받을 수 있는 웬만한 모든 링크가 모여있는 곳입니다. 1. Vuetifyjs https://vuetifyjs.com/ko/ ionic 을 생각나게 하는 라이브러리, 웬만한 UI 컴포넌트는 다 있습니다 2. Vue Material https://vuematerial.io/ angular 버전에서도 굉장히 잘 만들어져 있던 material UI 라이브러리가 vue 에도 있네요 한 가지 걱정되는 건, 예쁘지만 무거울 수도 있다는 점..? 퍼포먼스 때문에 angular 프로젝트에서는 제대로 사용을 못해봤습니다 vue 는 다른지 좀 더 테스트 해봐야겠네요~ 3. Keen UI https://josephuspaye.github.io/Keen-UI/#/ui-alert 앞서 소개한 라이브러리들 보다는 크지 않은 규모의, 작고 심플한 컴포넌트들이 많이 있습니다. 부분적으로 필요할 때 쓰면 좋을 것 같네요! 2018년도 꼭 알아야 할 vue 라이브러리들 https://blog.bitsrc.io/11-vue-js-component-libraries-you-should-know-in-2018-3d35ad0ae37f + 하나 이상의 라이브러리를 쓰는 것은 추천하지 않습니다. 무거워지기 때문에 그밖에 wrapbootstrap 에서 보았던 CMS 용 UI 라이브러리 중 하나인 GENESISUI 의 vue.js 버전 모음도 있네요. 그래프 등이 많아서 하나 사두면 CMS 만드는 시간을 절약할 수 있을 듯 합니다. https://genesisui.com/admin-templa

HTML 으로 코딩된 테이블, 그림, 글자 등 다양한 요소가 섞여 있는 문서를 PDF 또는 A4용지로 출력했을 때 각 요소가 중간에 끊어지지 않고 보기좋게 출력할 수 있는 방법이 있는지 알아보았습니다. 방법은 생각보다 간단한데요, CSS의 @media print 속성을 이용하면 가능했습니다. @media print 는 인쇄할 때만 적용되는 것으로 다양한 기능이 있지만 바쁜 분들을 위해 핵심 CSS만 보면, 이 두 개만 알아도 충분한 것 같습니다. @media print {       .page-divide {               page-break-after: always;        } } .page-divide 라는 클래스를 준 요소 뒤에는 언제나 페이지를 분할하도록 하는 CSS 입니다. table, figure, .sector {         page-break-inside: avoid; } table, figure 또는 sector 라고 클래스를 지정해 준 요소는 페이지 때문에 끊기지 않도록 처리해주는 구문입니다. 이렇게 지정한 요소가 만약 A4 용지 단위로 프린트물이 나올 때 중간에 걸리게 되면 통째로 그 다음 장으로 넘어가게 처리해줍니다. 간단 예제 소스보기 <style> @media print {      .page-divide {             page-break-after: always;      }      .no-print-page {             display: none; //작업의 편리함을 위해 넣은 페이지 구분선. 프린트 시에는 보이지 않음       } } h1, h2, h3, h4, h5 {       page-break-after: avoid; } table, figure, .sector {        page-break-inside: avoid; } .table {        width: 100%;