작년말 부터 챗지피티(chat gpt)가 엄청난 인기를 끌고 있다. 해외 물품 판매를 위한 쇼피파이 웹사이트를 제작하면서 Chat GPT에 위력을 체감 하였다.

마이크로소프트의 빙이 채팅 기능을 출시한다 하여 빠르게 웨이팅 리스트에 이름을 올렸다.

그리고  어제 아침 아래의 이메일을 받았다.

(이렇게 빨리 받을 수 있을거라 생각하지 못했다.)

(코드 생성은 플러터와 스벨트를 실험해봤다.)

이제 CHAT GPT와 Bing Chat을 비교해보자!

1. 실시간 기능

- Chat gpt

가장 단순한 질문인 한국의 대통령이 누구냐는 것을 물어보았지만, Chat GPT의 정보는 2021년에 머물러 있다.

재미있게 즐겨보는 유튜버에 대해 물어보았다. 

- 빙챗

똑같이 한국대통령이 누구냐고 물어보았다. 아래 나오듯이 먼저 검색을 한뒤에 답변을 만들어준다.

이번에는 슈카월드에 대해서 물어봤다. 확실히 최신정보를 바탕으로 정보를 준다.

2. 광고 카피와 뉴스기사 만들기

- Chat GPT

20대 여성을 타깃으로한 핸드폰 보호케이스에 대한 광고 카피 3개를 만들어 달라고 하였다. 그리고 튼튼함, 독성이 없는 물질, 귀여운고양이 3마리 디자인을 특징으로 한다는 추가 정보를 주었다.

답변이 의도와 다르게 타깃 그룹을 카피 문구에 넣어서 카피 문구에 빼달라고 요청했다. 아래 처럼 영어 카피가 만들어 졌다. 아래의 답변을 바탕으로 쉽게 해외마케팅에 사용할 수 있다.

이번에는 뉴스기사를 만들어 달라고 해봤다.

-빙챗

과연 빙챗도 잘 할 수 있을까? 

아래 답변을 보니 꽤 괜찮다.

그럼 위를 바탕으로 신문기사를 만들어 달라고 해볼 것이다

놀라운건 온라인에서 찾은 팁을 통해서 생성을 했다는 것이다.

나름 괜찮게 적은거 같다. 심지어 영업담당자와 대표의 이름과 하는 말까지 지어내 준다.

3. 코딩

그럼 코딩도 할 수 있을까?

-Chat GPT

먼저 Chat GPT에 차례다.

아래 처럼 길게 길게 적어준다. 이 외에도 더 쭉쭉 길게 만들어주는데 생략한다.

-빙챗

다음은 빙 챗의 차례이다. 기대가 된다.

여기까지 이해했냐고 물어본다. ㄷㄷ

그래서 이해했다고 대답하였다.

또 빙 챗이 물어본다. 그리고 아래에 할 수 있는 답변들이 적혀 있다.

No, Please continue를 선택해본다.

마치 선생님이 가르쳐 주듯이  나누어서 코드를 설명해준다.

 이런식으로 계속해서 설명을 해준다. 이 정도로 자세하게 적어줄지는 몰랏다.  잘 되는지는 실행해보지 않았다.

챗 GPT도 엄청나지만 빙챗도 엄청난거 같다.

플러터로 간단한 코드를 만들어 달라고 했을땐 Chat GPT와 같이 예전 코드를 사용했으며, 실행을 하려면 수정이 필요했다.  

결론

GPT 만큼 빙챗도 좋다. 빙챗도 어떻게 묻느냐에 따라 다른 답변을 줌으로 Chat GPT처럼 잘 물어보고 요청하는게 중요한 것 같다.  UI는 개인적으로 chat gpt가 더 깔끔해서 마음에 든다.

앞으로 구글 bard가 나오게 되면 이 둘을 뛰어넘을 수 있을지 궁금하다. 

기존에 만들었던 프로그램에서는 +page.svelte파일에서 onMount시 서버에서 필요한 데이터를 가져오도록 만들었다.

하지만 sveltekit에 보면 +papge.js나 +page.server.js를 사용하는 예를 볼 수 있다. 

간단하게 위의 코드를 설명하자면 /** @type {import('./$types').PageLoad} */ 부분은 JSDoc이다. 공식문서를 보면 javaDoc과 비슷하다고 하는데 자바는 안해봐서 모르겠지만 JSDoc의 @type 통해서 타입 체킹을 할 수 있다고 한다.

(스벨트킷은 자동으로  $types.d.ts를 생성하며 거기서 load되는 파라매터의 타입을 만들고 그 타입을 import하는 것) 

타입체킹을 하고 싶지 않으면 저 라인을 무시하면 된다. 자세한 내용은 여기 보시면 된다. (https://kit.svelte.dev/docs/types#app)

어째튼 용도는 폴더의 이름으로 url이 리퀘스트 되면  +page.js이 먼저 실행되어 화면에 들어가는 데이터를 +page.svelte파일에 전달해주고 그걸 가지고 랜더링을 한다.

아래는 +page.svelte에서 onMount시 화면에 필요한 데이터를 받아오는 코드이다.

<script>
import {onMount} from 'svelte'

let datas=[];
onMount(async()=>{
  let res = await fetch('https://api.fake-rest.refine.dev/posts')
  datas = await res.json()
  console.log(datas)
})

</script>
{#each datas as data}
  <div>{data.title}</div>
{/each}

페이지 소스를 봤을때 div안이 비어 있다.

다음은 +page.js와 +page.svelte를 나누어서 +page.js에서 데이터를 요청하여 +page.svelte에 전달 하는 경우이다.

+page.js

  export async function load() {
    let res = await fetch('https://api.fake-rest.refine.dev/posts')
    let posts = await res.json()
    return {
      posts
    };
  }

+page.svelte

<script>
  import { error } from '@sveltejs/kit';
  export let data;
</script>
  {#each data.posts as post}
    <div>{post.title}</div>
  {/each}

위에 보듯이 전달은 data 변수를 통해 전달된다.  전의 예제와 다르게 리퀘스트 된 데이터가 페이지 소스에 랜더링 되어 추가된 것을 볼 수있다.

이를 통해 서버사이드랜더링을 할 수 있다! 또한 +page.server.js를 사용하면 서버로서 코드가 실행되며 필요에 따라 클라이언트에 넣지 못하는 민감한 정보를 넣을 수도 있다. 

HTML 스타일을 할 때 tailwindcss를 사용하면 직접 css를 작성하는 것 보다 쉽고 자유롭게 스타일을 할 수 있다. 

https://tailwindcss.com/

그리고 이미 테일윈드를 통해 스타일이 만들어져 있는 daisyUi를 사용하게 된다면 예전에 부트스트랩을 사용하 듯. 쉽게 디자인을 만들어 낼 수 있다.

https://daisyui.com/

1. tailwindcss 설치

이 글에서는 스벨트킷에 적용하는 방법을 설명 하려고 한다.

스벨트킷을 스켈레톤으로 설치하고 실행하게 되면 아래의 화면을 볼 수 있을 것이다. 

스벨트킷에 tailwindcss를 설치하는 방법은 사실 아래의 주소에 아주 잘 나와있다.

https://tailwindcss.com/docs/guides/sveltekit

홈페이지를 따라 해보자

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init tailwind.config.cjs -p
mv postcss.config.js postcss.config.cjs

npx tailwindcss init tailwind.config.cjs -p를 cmd에 입력을 하니 

tailwind.config.cjs파일과 postcss.config.js파일이생겼다

윈도우에 설치하는 것이기 때문에 

cmd에 mv postcss.config.js postcss.config.cjs 대신 move postcss.config.js postcss.config.cjs 를 치니 

postcss.config.js에서 postcss.config.cjs파일로 바뀌었다. (만일 실수로 postcss.config.js가 남아있게 되면 에러가 발생함)

tailwind.config.cjs에 아래와 같이 입력함

module.exports = {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {}
  },
  plugins: []
};

./src/app.css 를 만든 뒤 아래를 입력함

@tailwind base;
@tailwind components;
@tailwind utilities;

./src/routes/__layout.svelte 를 만든뒤

<script>
  import "../app.css";
</script>

<slot />

이제 실행해보면 모든 기본 스타일이 없어지게 된다. 

이제 아래 처럼 테일윈드의 클래스를 입력해보자. 스타일이 적용이 되는 것을 볼 수 있다.

이렇게 tailwind를 설치를 완료했으면 다음으로 daiyUI를 설치해보자.

https://daisyui.com/docs/install/

공식문서를 그냥 따라하면 된다.

npm i daisyui

tailwind.config.js에 아래와 같이 추가함

module.exports = {
  //...
  plugins: [require("daisyui")],
}

이렇게 daisyUI를 설치하게 되었다. 

index.svelte에 daiyUI의 예제를 입력해 보앗다.

<div class="alert alert-info shadow-lg">
  <div>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current flex-shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
    <span>New software update available.</span>
  </div>
</div>

결과:

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

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

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

또한 출력할 화면에는 내가 원하지 않는 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;
      }
   
     
  }

스벨트를 사용하면 쉽게 웹사이트를 만들수 있다.

호스팅은 하는법은

1. netlify.toml 파일을 만든뒤 다음을 입력

[build]
  command = "npm run build"
  publish = "build/"
  functions = "functions/"

2. 패키지 설치

npm i -D @sveltejs/adapter-netlify@next

3. svelte.config.js 파일 수정

/** @type {import('@sveltejs/kit').Config} */
import adapter from '@sveltejs/adapter-netlify'
const config = {
	kit: {
		// hydrate the <div id="svelte"> element in src/app.html
		target: '#svelte',
    adapter: adapter()
	}
};

export default config;

4. 깃을 사용해서 깃허브에 올림

1) git init

2) git add --all

3) git commit m"메시지"

4) git remote add origin https://github.com/계정명/프로젝트명 

5) git push origin master 

다른 방법

5. 넷틀리파이 홈페이지에서 깃프로젝트와 연결 (간단함)

dev.to/danawoodman/deploying-a-sveltekit-app-to-netlify-5dc3

추가 - 7월 13일 2021

다시 해보니 안된다. 

넷틀리파이에서 node버전을 수정해야했다. 아래 처럼 Enviroment variables에 NODE_VERSION을 16으로 추가해준다.

그뒤

문제에 따라서 로컬에서 빌드를 먼저 한뒤 생성된 파일들을 깃에 올린뒤 넷틀리파이에서 끌어와 호스팅 해야 할 수도 있다.

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

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

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}
}

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

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

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

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

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

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

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

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

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

visionmedia.github.io/page.js/

물론.

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

간단한 라우팅 예)

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/

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

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>