공간 (Space)

작년말 부터 챗지피티(chat gpt)가 엄청난 인기를 끌고 있다. 해외 물품 판매를 위한 쇼피파이 웹사이트를 제작하면서 Chat GPT에 위력을 체감 하였다. 마이크로소프트의 빙이 채팅 기능을 출시한다 하여 빠르게 웨이팅 리스트에 이름을 올렸다. 그리고 어제 아침 아래의 이메일을 받았다. (이렇게 빨리 받을 수 있을거라 생각하지 못했다.) (코드 생성은 플러터와 스벨트를 실험해봤다.) 이제 CHAT GPT와 Bing Chat을 비교해보자! 1. 실시간 기능 - Chat gpt 가장 단순한 질문인 한국의 대통령이 누구냐는 것을 물어보았지만, Chat GPT의 정보는 2021년에 머물러 있다. 재미있게 즐겨보는 유튜버에 대해 물어보았다. - 빙챗 똑같이 한국대통령이 누구냐고 물어보았다. 아래 나오듯이 먼저..

기존에 만들었던 프로그램에서는 +page.svelte파일에서 onMount시 서버에서 필요한 데이터를 가져오도록 만들었다. 하지만 sveltekit에 보면 +papge.js나 +page.server.js를 사용하는 예를 볼 수 있다. 간단하게 위의 코드를 설명하자면 /** @type {import('./$types').PageLoad} */ 부분은 JSDoc이다. 공식문서를 보면 javaDoc과 비슷하다고 하는데 자바는 안해봐서 모르겠지만 JSDoc의 @type 통해서 타입 체킹을 할 수 있다고 한다. (스벨트킷은 자동으로 $types.d.ts를 생성하며 거기서 load되는 파라매터의 타입을 만들고 그 타입을 import하는 것) 타입체킹을 하고 싶지 않으면 저 라인을 무시하면 된다. 자세한 내용은 여기..

HTML 스타일을 할 때 tailwindcss를 사용하면 직접 css를 작성하는 것 보다 쉽고 자유롭게 스타일을 할 수 있다. https://tailwindcss.com/ 그리고 이미 테일윈드를 통해 스타일이 만들어져 있는 daisyUi를 사용하게 된다면 예전에 부트스트랩을 사용하 듯. 쉽게 디자인을 만들어 낼 수 있다. https://daisyui.com/ 1. tailwindcss 설치 이 글에서는 스벨트킷에 적용하는 방법을 설명 하려고 한다. 스벨트킷을 스켈레톤으로 설치하고 실행하게 되면 아래의 화면을 볼 수 있을 것이다. 스벨트킷에 tailwindcss를 설치하는 방법은 사실 아래의 주소에 아주 잘 나와있다. https://tailwindcss.com/docs/guides/sveltekit 홈페이..

웹으로 회사전산 시스템을 만들때 필연적으로 문서를 프린팅을 해야하는 기능이 필요하다. 스벨트킷에서 프린팅 기능을 만들때 필요한 CSS태그를 알아보자 내가 원했던 방법은 특정 요소만 프린팅을 하고 싶었다. div가 두개가 있는데 하나는 인풋용 하나는 출력용 프리뷰인 셈이다. 또한 출력할 화면에는 내가 원하지 않는 Navigation bar가 들어있었다. 인터넷을 찾아보니 아래와 같은 방법이 있었다. function printDiv(divName) { var printContents = document.getElementById(divName).innerHTML; var originalContents = document.body.innerHTML; document.body.innerHTML = printCo..

스벨트를 사용하면 쉽게 웹사이트를 만들수 있다. 호스팅은 하는법은 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 element in src/app.html target: '#svelte', ..

스벨트로 슬라이더 컴포넌트를 만들어보면 재미있을 것 같았다. 직접 만들면 디자인이 좋지 않을 것 같아서 자바스크립트로 만들어진 슬라이더를 인터넷에서 찾아 스벨트 컴포넌트로 바꾸어 보았다. www.w3schools.com/howto/howto_js_slideshow.asp html Original 1 / 3 Caption Text 2 / 3 Caption Two 3 / 3 Caption Three ❮ ❯ Svelte {#each slideData as slide} {slide.id+1} / {slides.length} {slide.caption} {/each} plusSlides(-1)}>❮ plusSlides(+1)}>❯ {#each slideData as slide} currentSlide(slide)..

전문적인 개발자가 아닌 사람의 개인적인 생각이다. 자바스크립트가 한창 보급될 때 JQuery가 자바스크립트를 직접 입력하는 것 보다 쉽기 때문에 많이 사용되었다. 그러다 리액트가 유행하였고 기존 웹개발에 익숙한 개발자들은 좀 더 쉽게 쓸수 있는 vuejs를 선택 하였다. 간단하게 사용할 수 있었던게 점점 커지면서 점점 복잡해지게 되는 것 같다. vuejs도 방법들이 나누어지면서 복잡해졌다. Svelte는 정말 여러가지의 장점들을 잘 종합해서 나온 웹컴파일러라고 생각된다. 컴파일러라고 불리는 이유는 뷰나 리액트가 가상돔에서 랜더링 하는 것과 다르게 Svelte는 자바스크립트로 컴파일한다. 그래서 프로그램의 크기와 속도가 체감 가능하게 빠르다. 일단. Svelte공식 다큐먼트를 보면 느끼겠지만 쉽다. 군더더..