달망이 삽질인생

스터디/SvelteKit9

Sveltekit에서 tailwindcss와 SVG를 사용할때, 마우스 오버로 색상 쉽게! 바꾸기 sveltekit의 경우 svg 처리가 좀 ....깔끔하게 처리가 안된다 생각했는데이번에 그나마 편한 방법을 찾게되어 글을 쓴다 기존에 하던 작업은 조금 번거로웠고이번에 들.... 번거로운 방법을 소개할까한다. static-adapter로 구동되는 경우는 https://github.com/poppa/sveltekit-svg이 패키지를 사용하면 되고, ssr를 사용하는 adapter의 경우는..... 제가 설명드리는 방법이 그나마 편했습니다. svg 예제 이미지 svg 예제 코드 내부 티스토리에서 svg파일을 첨부하면 이미지로 변경되서, 파일 제공이 안되니.. 텍스트를 복사해다가 써보세요 사전 지식SVG의 진한 벡터 선들은 로 되어 있습니다.그래서 그 선들을 tail..

[Sveltekit] 환경변수 설정 - 필수! 과정 개발 시스템 마다 다른 환경변수 세팅! 이번 게시글에서는 Sveltekit을 위한 환경변수 세팅을 해보겠습니다. 환경변수가 뭐냐면, 환경에 따른 변수 입니다. (?) 로컬환경에서 테스트 할때와 개발서버에서 테스트 할때, 스테이지 서버에서 테스트 할때, 운영서버에서 실행할때 모두 api주소나 db주소가 다를 수 있습니다. 매번 값을 변경하고 서버에 올리는 일을 하긴 너무나 힘들고 번거롭고 실수하기 마련입니다. 환경에 맞춰서 변수를 바꿔주는 변수를 환경변수라고 합니다. node.js에서 하는 방법 nodejs같은 환경에서는 .env 파일을 가지고 변수를 컨트롤합니다. nodejs는 dotenv 라는 패키지를 사용합니다. https://github.com/motdotla/dotenv GitHub - motdo..

[Sveltekit] Google Adsense (광고) 붙이기 tips. 귀찮..... Tip. 1 구글 광고는 Localhost에서 나오지 않는다. 등록된 URL만 나옴. 괜히 localhost에서 나오게 할려고 하지말고, 개발용 url을 만드는게 속편함. Tip. 2 localhost에서 통계 잡히기 싫을땐 localhost에서 env와 if문을 이용해야함. 그게 아니면 프로퍼티로 data-adtest="on" 추가하면 됨.

[Sveltekit] Google Analytics, GTAG 'ERR_BLOCKED_BY_CLIENT' Error 스벨킷에서 구글 관련 기능을 사용하면서 크롬 개발자 콘솔에서 'ERR_BLOCKED_BY_CLIENT' 이런 에러를 보신적이 있다면..... 당황하지마시고 Adblock을 해지하세요..;; 당황하셨다고요? 저두요.....

[Sveltekit] VSCode에서 디버깅하기 (Debugging) sveltekit은 hot-reload가 되기 때문에 개발하면서 화면을 바로바로 확인할 수 있어서 정말 개발하기 편합니다. 그래도 ui로 디버깅을 하거나, console.log 명령어로 매번 프린트 디버깅을 하기엔 시간소모와 공수가 많이 듭니다. 거기다가 api의 응답 데이터를 보거나, byte코딩을 할때면 더이상 기존 방법으로 하긴 매우 버겁죠. 서버사이드(server-side) 코드를 더욱이 디버깅하기 힘들죠. 그런 불편한 디버깅을 local 코딩처럼 디버깅 해주는 방법이 있습니다. 1. node-loader 설치 ESM 로더를 개발모드에서 활성화 합니다. $ yarn add @vavite/node-loader --dev 2. 개발 모드에서만 노드로더 활성화 vite.config.js 로 이동해서 아..

[Sveltekit] alias설정으로 경로 줄여서 모듈 import 편하게 하기. (ex $app, $lib) sveltekit에서 모듈을 추가할때면 import를 사용합니다. 복잡한 app 경로는 "$app" 과 같은 이름으로 이용합니다. 이외에도 "/src/lib" 경로를 "$lib"으로 사용하기도 합니다. 기본적으로 모듈은 상대경로를 사용하고, 마지막에 모듈명을 써줍니다. "/MyModule.js" 폴더 경로가 복잡하면 이런 경우도 생기게 되죠 "/src/components/module/MyModule.js" 그리고 지금 쓰고 싶은 코드 경로가 복잡하면 이련경우도 생기게 됩니다. "../../../../MyModule.js" "../../../MyModule.js" "../../MyModule.js" 그리고 같은 코드를 다른곳에 쓰고 싶어서 import부분을 복붙하다보면 상대경로가 달라져서 오류가 나곤합니다..

[SvelteKit] Url의 Params 가져오기 (get query) 오늘은 현재 경로 URL에서 Parameter를 가져오는 방법에 대해 알아보겠습니다. 예시 주소> https://dalgonakit.tistory.com/manage/newpost/?type=post&returnURL=manage 위 URL를 치고 들어갔을때, type값과 returnURL값이 필요할 수 있습니다. ? 물음표 뒤에 있는 문장들을 query string, url parameters라고 합니다. key=value 형태로 되어 있으며, &로 key를 분리해놓습니다. 같은 키가 여러개면, 덮어써지지 않고 value가 배열 형태로 세팅되는게 일반적입니다. Sveltekit 코드 import { page } from '$app/stores' +page.svelte 먼저 $app/stores 로부터 ..

SvelteKit App.svelte vs App.html 이 질문에 오신분들은 svelte의 입문자를 벗어나기위해서 노력하는 사람으로 선택되셨습니다! (?) 온라인 문서들을 보다보면 간혹 나오는 App.svelte 파일이 있습니다. 이 파일은.. Svelte의 root 파일 입니다. 뭔소리냐고요? Svelte와 SvelteKit은 같지만 엄연히 다른 구성을 가지고 있습니다. Svelte는 javascript 프레임워크, SvelteKit은 Svelte를 포함한 웹 서버 프레임워크라고 보시면 됩니다. 최근에 나온게 SvelteKit 입니다. 이제는 SvelteKit이기 때문에 Svelte에서 사용되던 App.svelte파일을 쓰지 않고 app.html 을 사용합니다. 추가로. sveltekit을 사용하면 app.svelte를 사용하지 않기도 하고, main.js..

SvelteKit 시작. 잡소리 웹개발, 윈도우 개발만 하다가, 모바일 개발만 하다가, 코인 개발만하다가, IoT개발만 하다가, 서버 개발하다가 지금은 웹/앱 개발을 해보려 합니다. 앱에 대한 수요가 아직도 많고, 고사양 프로세싱을 할땐 어쩔 수 없이 앱 개발을 해야하지만, 최근엔 브라우저의 많은 sdk지원이나 서버의 자원을 이용해서 연산해주는 프로세스가 발달하다보니 앱이 거의 필요없고, 웹으로 된 앱이 많이 쓰이는 추세입니다. 한국은 이상하게 대형 개발사들이 spring으로 자리잡으면서 왠만한 백엔드 개발자들이 spring을 많이 하려는 추세이며 밀고나가려고 합니다. "spring이 편하다, 대형 서비스에서 대응하기 좋다"라는 말들이 많지만 내가 java를 썩 달갑게 반기지 않기 때문에 spring은 역시 하지 않으려 합니다...

이전 1 다음

티스토리툴바