자바스크립트/Svelte8 [스벨트] 간단한 팝업창 스벨트의 #if를 사용하면 별도로 css에서 클래스로 display를 설정하고, 클래스 이름을 붙였다 떼었다 할 필요 없이 간편하게 작동하는 팝업창을 만들 수 있다. 팝업을 띄우려면 이 버튼을 클릭하세요 {#if zalert} 팝업창에 띄울 메시지 {zalert=false}>취소(팝업닫기) 로그인하러가기 {/if} .z_alert{ display: display; position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; z-index: 1000; background-color: rgba(0, 0, 0, 0.5); } .z_alert .z_box_1 { width:auto; min-width: 60%; max-width: 90%; position: a.. 2022. 12. 4. 스벨트에서 a href없이 링크 이동하기 분명 스벨트는 바뀐 부분만 로드해서 서버의 효율성을 도모한댔는데.. 왜 a href외의 모든 방법(eg. location.href=""등등..)을 사용하면 전체를 다 로드하는것 같지 싶어서 고민하다 결국 찾아낸 방법 goto("링크") {goto("링크")})>이것은 버튼이다 처럼 내부에 적어줘도 되고 안녕하기 이렇게 함수에 적어줘도 된다. 2022. 12. 4. [간단] 스벨트에서 localStrorage 안될 때 Svelte에서 localStrorage.getItem()등을 사용하려 하면 localStorage is not defined 라고 오류를 뱉을 때가 있습니다. 스벨트 파일이 javascript와 html로 컴파일 되기 전에는 localStroage가 존재할 수 없어 발생하는 문제이므로 onMount와 함께 사용해주면 됩니다. console.log(localStorage.getItem("user")); //에러 onMount(()=>{ localStorage.getItem("user"); //에러가 나지 않음 }) 2022. 12. 4. [번역] setContext and getContext 컨텍스트 API는 데이터와 함수를 소품으로 전달하거나 많은 이벤트를 전달하지 않고 구성 요소가 서로 '대화'할 수 있는 메커니즘을 제공합니다. 고급 기능이지만 유용한 기능입니다. Mapbox GL 맵을 사용하여 이 예제 앱을 사용하십시오. 구성 요소를 사용하여 마커를 표시하고 싶지만 기본 Mapbox 인스턴스에 대한 참조를 각 구성 요소의 소품으로 전달하고 싶지는 않습니다. 컨텍스트 API에는 setContext와 getContext라는 두 부분이 있습니다. 구성 요소가 setContext(key, context)를 호출하면 하위 구성 요소는 const context = getContext(key)로 컨텍스트를 검색할 수 있습니다. 먼저 컨텍스트를 설정해 보겠습니다. Map.svelte에서 svelte에.. 2022. 11. 23. [번역] svelteKit -fetch requests Making fetch requests 출처 : https://kit.svelte.dev/docs/load#making-fetch-requests 외부 API 또는 +server.js 핸들러에서 데이터를 가져오려면 제공되는 'fetch' 기능을 사용할 수 있습니다. 이 기능은 몇 가지 추가 기능이 있는 native fetch web API 와 동일하게 작동합니다. 페이지 요청에 대한 쿠키(cookie) 및 권한 부여(authorization) 헤더를 상속하므로 서버에서 자격 증명 요청을 만드는 데 사용할 수 있습니다. 서버에서 상호적인 요청을 할 수 있습니다(일반적으로 fetch는 서버 컨텍스트에서 사용될 때 출처가 있는 URL이 필요합니다) 내부 요청(예: +server.js 경로)은 HTTP 호출의 .. 2022. 11. 11. [svelteKit] 상위 레이아웃 무시하기 svelteKit에서는 폴더 내 +layout.svelte 파일을 통해 공통된 레이아웃을 적용하도록 해 줄 수 있는데, 가끔.. 이 레이아웃에서 벗어나 독자적인 형태를 띌 페이지를 제작할 필요가 있습니다. 그럴 땐 파일 명을 +page.svelte 가 아닌 +page@.svelte 라고 지정해주면 됩니다. 다만 이 방법은 routes 폴더 가장 바깥쪽, 즉 사이트 접속 시 가장 먼저 보여지는 페이지에서는 적용이 안 되는 것 같습니다. 메인 페이지만 풀 화면으로 보이게 하는 경우가 많은데, 별로군요 혹은 어떤 폴더(url) 내의 모든 페이지가 상위 레이아웃을 무시할 필요가 있습니다. 이땐 폴더 안의 +layout.svelte를 +layout@.svelte라고 명명해주면 됩니다 2022. 11. 11. 스벨트 공식 튜토리얼 Introduction a. Basics b. Adding data c. Dynamic attributes d. Styling e. Nested components f. HTML tags g. Making an app Reactivity a. Assignments b. Declarations c. Statements d. Updating arrays and objects Props a. Declaring props b. Default values c. Spread props Logic a. If blocks b. Else blocks c. Else-if blocks d. Each blocks e. Keyed each blocks f. Await blocks Events a. DOM events b. In.. 2022. 10. 27. [한글] SvelteKit - Project Structure SvelteKit 공식 사이트의 튜토리얼을 번역한 내용입니다 :) 원본은 아래 링크를 참고해주세요 https://kit.svelte.dev/docs/project-structure start npm create svelte@latest my-app cd my-app npm install npm run dev Project Structure (프로젝트 구조) my-project/ ├ src/ │ ├ lib/ │ │ ├ server/ │ │ │ └ [서버전용 lib 파일] │ │ └ [작성한 lib 파일] ex.image라는이름의 폴더 생성 후 이미지 요소를 저장할 수 있음 │ ├ params/ │ │ └ [작성한 파라미터 매칭] │ ├ routes/ │ │ └ [앱의 구현, url과 일치하는 폴더 생성] .. 2022. 10. 27. 이전 1 다음 728x90
