sveltekit에서 프린팅 하는 노하우 (scoped css)

Computer 관심/Svelte|2021. 10. 15. 20:41
반응형

웹으로 회사전산 시스템을 만들때 필연적으로 문서를 프린팅을 해야하는 기능이 필요하다.

스벨트킷에서 프린팅 기능을 만들때 필요한 CSS태그를 알아보자

 

내가 원했던 방법은 특정 요소만 프린팅을 하고 싶었다. 

div가 두개가 있는데 하나는 인풋용 하나는 출력용 프리뷰인 셈이다.

또한 출력할 화면에는 내가 원하지 않는 Navigation bar가 들어있었다.

 

 

인터넷을 찾아보니 아래와 같은 방법이 있었다.

function printDiv(divName) {
     var printContents = document.getElementById(divName).innerHTML;
     var originalContents = document.body.innerHTML;

     document.body.innerHTML = printContents;

     window.print();

     document.body.innerHTML = originalContents;
}

즉, 출력할 요소만 html로 만든뒤 출력 후 복사해낸 원래의 화면을 넣어주는 것이다. 프린팅은 되지만 원래 화면을 넣어줬을때 더 이상 스벨트킷이 아니게 된다. 

 

그래서 다른 방법을 적용하기로 하였고 이것은 CSS를 사용하는 방법이다.

프린팅 시 CSS에서 원하는 요소만 visible을 해주고 원하지 않는 요소는 display none을 해주는 방법이다. 여기에도 작은 문제가 있었다. layout에 추가한 navigation 까지 출력이 되는 것이였다. 어떻게 해결해야할지 몰라서 아는 방법으로 임시방편으로 링크를 통해 문서를 출력하는 페이지로 가게 만들고 그 스벨트 폴더에 __layout.reset.svelte를 추가해서 그페이지만 레이아웃 자체를 초기화 시켜버렸다.

  @media print { 
  
      @page {
          size: a4;
      }     
      #main_page{
        display: none;
      }
      #print-area {
        margin: auto;
        width: 220mm;
        min-height: 300mm;
        visibility: visible;
      }
   
     
  }

 

그렇게 쓰고 있다가 문제는 결국 CSS가 적용되는 scope의 문제 였다는게 떠올랐다. (문제가 뭔지 모르면 뭘 구글링 해야할지도 모른다.) 문제를 정확하게 알게 되니 답은 이미 나와있었다.

 

navigation 요소에 id를 만들고 css에 :global(#nav){} 를 추가한다. 여기서 :global()을 사용시 모든 컴포넌트의 # . 요소명이 있으면 CSS에 적용이 된다.

이 방법을 통해 컴포넌트파일 이외의 영역의 스타일을 변경하였다.

이래저래 검색하다가 찾게된 :not(요소명){} 저 요소명 빼고 다 스타일 적용도 유용하게 쓰일거 같다.

 

주의할것은 부모요소를 display: none해버리면 정작 출력하려는 자식요소도 안보여지게 되므로 프린트 하지 않을 형제요소와 다른 특정요소를 display: none하는 방법을 사용한다.  

 

  @media print { 
  
      @page {
          size: a4;
      }
      /* 추가 */
      :global(#nav){
        display: none;
      }
      #main_page{
        display: none;
      }
      #print-area {
        margin: auto;
        width: 220mm;
        min-height: 300mm;
        visibility: visible;
      }
   
     
  }

 

댓글()

자바스크립트 슬라이더 스벨트로 바꾸기(Javascript to Svelte slider)

Computer 관심/Svelte|2020. 12. 14. 23:31
반응형

스벨트로 슬라이더 컴포넌트를 만들어보면 재미있을 것 같았다. 직접 만들면 디자인이 좋지 않을 것 같아서

자바스크립트로 만들어진 슬라이더를 인터넷에서 찾아 스벨트 컴포넌트로 바꾸어 보았다.

 

www.w3schools.com/howto/howto_js_slideshow.asp

 

html

Original 

<!-- Slideshow container -->
<div class="slideshow-container">

  <!-- Full-width images with number and caption text -->
  <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img src="img1.jpg" style="width:100%">
    <div class="text">Caption Text</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">2 / 3</div>
    <img src="img2.jpg" style="width:100%">
    <div class="text">Caption Two</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">3 / 3</div>
    <img src="img3.jpg" style="width:100%">
    <div class="text">Caption Three</div>
  </div>

  <!-- Next and previous buttons -->
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
<br>

<!-- The dots/circles -->
<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
</div>

 

Svelte 

<!-- Slideshow container -->
<div class="slideshow-container">
  {#each slideData as slide}
  <!-- Full-width images with number and caption text -->
  <div class="fade {slide.show ? '':'mySlides'}">
    <div class="numbertext">{slide.id+1} / {slides.length}</div>
    <img src={slide.src} style="width:100%" alt="img_nature_wide">
    <div class="text">{slide.caption}</div>
  </div>
  {/each}

  <!-- Next and previous buttons -->
  <span class="prev" on:click={() => plusSlides(-1)}>&#10094;</span>
  <span class="next" on:click={() => plusSlides(+1)}>&#10095;</span>
</div>
<br>

<!-- The dots/circles -->
<div style="text-align:center">
  {#each slideData as slide}
  <span class="dot {slide.show==true?'active':''}" on:click={()=>currentSlide(slide)}></span>
  {/each}
</div>

 


Javascript

original

var slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
}

 

svelte

var slideIndex = 0;

let slideData =[{
  id:0,
  caption:'안녕하세요.',
  src:'https://www.w3schools.com/howto/img_nature_wide.jpg',
  show:false
  },{
  id:1,
  caption:'방갑습니다.',
  src:'https://www.w3schools.com/howto/img_snow_wide.jpg',
  show:false
  },{
  id:2,
  caption:'여기에요.',
  src:'https://www.w3schools.com/howto/img_lights_wide.jpg',
  show:false
  }
]

slideData[slideIndex].show = true

// Next/previous controls
function plusSlides(value) {
  let num = slideIndex + value
  slideData[slideIndex].show = false
  if (num == slides.length){
  slideIndex = 0
  } else if(num < 0){
  slideIndex = slides.length+value
  } else {
  slideIndex = num
  }
  slideData[slideIndex].show = true
}

// Thumbnail image controls
function currentSlide(obj) {
  slideData[slideIndex].show = false
  slideIndex =obj.id
  slideData[slideIndex].show = true
}

 


Style

style은 바뀐게 없음

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

 

댓글()

Svelte 가 좋은 이유.

Computer 관심/Svelte|2020. 12. 8. 01:39
반응형

전문적인 개발자가 아닌 사람의 개인적인 생각이다.

 

 

자바스크립트가 한창 보급될 때 JQuery가 자바스크립트를 직접 입력하는 것 보다 쉽기 때문에 많이 사용되었다. 그러다 리액트가 유행하였고 기존 웹개발에 익숙한 개발자들은 좀 더 쉽게 쓸수 있는 vuejs를 선택 하였다.

 

간단하게 사용할 수 있었던게 점점 커지면서 점점 복잡해지게 되는 것 같다. vuejs도 방법들이 나누어지면서 복잡해졌다. 

 

 

Svelte는 정말 여러가지의 장점들을 잘 종합해서 나온 웹컴파일러라고 생각된다. 

컴파일러라고 불리는 이유는 뷰나 리액트가 가상돔에서 랜더링 하는 것과 다르게 Svelte는 자바스크립트로 컴파일한다.

그래서 프로그램의 크기와 속도가 체감 가능하게 빠르다. 

 

 

일단. Svelte공식 다큐먼트를 보면 느끼겠지만 쉽다. 군더더기가 없이 깔끔하다. 

굳이 영상을 보며 배울 필요 없이 홈페이지에 들어가서 30분 정도 예제를 읽어보고 따라 해보면 어렵지 않게 익힐 수 있다.

 

 

Svelte가 자체 라우터를 제공하지 않는데 여러가지 사용해본 결과 가볍게 개발할때는 page.js가 사용하기 쉽고 좋았다.

visionmedia.github.io/page.js/

 

Page.js by visionmedia

Page.js Micro client-side router inspired by the Express router (~1200 bytes) View the Project on GitHub visionmedia/page.js Tiny ~1200 byte Express-inspired client-side router. page('/', index) page('/user/:user', show) page('/user/:user/edit', edit) page

visionmedia.github.io

 

물론.

여러가지 모듈들은 아직 리액트와 뷰에 비해 부족한것 같지만 그런걸 상쇄할 정도의 가치는 있다고 생각된다.

 

 

 

 

 

간단한 라우팅 예)

 

 

App.svelte

<script>
  import router from "page"
  import Navbar from "./components/Navbar.svelte"
  import Pages from "./Pages.svelte"
</script>

<Navbar/>
<Pages/>

 

Pages.svelte

<script>
  import router from "page"
  import Home from "./pages/Home.svelte"
  import About from "./pages/About.svelte"

  let page
  router('/', () => page = Home)
  router('/about', () => page = About)
  router.start()
</script>

<svelte:component this={page} />

 

Navbar.svelte

<div>
  <a href="/">home</a>
  <a href="/about">about</a>
</div>

 

About.svelte

<main>
	<h1>About</h1>
	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>

 

home.svelte

<main>
	<h1>Home</h1>
	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>

<style>
	main {
		text-align: center;
		padding: 1em;
		max-width: 240px;
		margin: 0 auto;
	}

	h1 {
		color: #ff3e00;
		text-transform: uppercase;
		font-size: 4em;
		font-weight: 100;
	}

	@media (min-width: 640px) {
		main {
			max-width: none;
		}
	}
</style>

 

스벨트 공식홈페이지.

svelte.dev/

 

Svelte • Cybernetically enhanced web apps

Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app. Instead of using tec

svelte.dev

 

-----버튼 컴포넌트 만들기 예) ------

 

app.svelte

<script>
	import Button from './Button.svelte';
</script>

<Button btnName="button1" click={function (){alert('button1 clicked')}}/>
<Button btnName="button2" click={function (){alert('button2 clicked')}}/>

 

button.svelte

<script>
	export let click, btnName; 
</script>

<button on:click={click}>
	{btnName}
</button>

댓글()