본문 바로가기

svelte4

[Superforms] events Superform의 이벤트 흐름도 superform에는 폼 제출 이후에 실행가능한 이벤트가 다섯가지 존재합니다.(onChange 이벤트는 폼 제출 이전에 실행할 수 있기에 flowchart에 존재하지 않습니다.) 각 이벤트별 사용법const { form, enhance } = superForm(data.form, { onSubmit: ({ action, formData, formElement, controller, submitter, cancel }) => void onResult: ({ result, formEl, cancel }) => void onUpdate: ({ form, cancel }) => void onUpdated: ({ form }) => void onError: (({ res.. 2024. 12. 12.
svelte5 $effect 함수의 에러 Last ten effects were: ... 혹시 svelte5를 사용하며 이러한 에러를 마주친 적이 있으신가요?해당 에러는 $effect() 함수에서 발생하는 에러입니다. $effect() 함수가 무엇인지부터 말씀드리자면기존 svelte의 반응성 함수인 룬($:)과 동일한 효과를 지니는, 조금 더 업그레이드 된 버전이라 생각하시면 돼요.상태 변경(예: 외부 라이브러리에 렌더링 또는 외부 라이브러리와 상호 작용)에 따른 응답으로 코드를 실행한답니다. 다만 과도한 사용은 코드를 따라가기 어렵게 만들 수 있으므로 적당히 사용하라는 경고가 존재합니다.출처 : https://svelte.dev/docs/svelte/$effect $effect • Docs • SvelteEffects are what make your application do things.. 2024. 12. 1.
[ Superform | Zod ] 스키마 분할 -> superRefine 처리 -> superValidate 요청 안녕하세요 예옹이입니다~이번 웹프로젝트에서 제가 맡은 메뉴는 한번에 54개의 컬럼을 작업해주어야했습니다.컬럼 값이 너무 많아 애초에 서버에서 schema를 나눠서 클라이언트로 줄까 생각했지만,한번에 기본값으로 길게 주되 받고나서 그 값을 나누는 작업을 서버에서 진행해보고 싶었습니다! const schema = z.object({ id: z.string().optional(), accidentMgmtNo: z.string().min(1, { message: '사고관리번호를 입력해주세요.' }), companyBusinessRegistrationNo: z.string({ required_error: '사업자등록번호를 입력해주세요.' }), companyId: z.string({ required_err.. 2024. 11. 21.
[Svelte] 스토어 구독 Svelte에서는 ‘구독’을 이용해 상태관리를 합니다.다른 프레임워크처럼 상태 관리 라이브러리가 따로 있는게 아니라 Svelte 내부(svelte/store)에 포함되어 있습니다.컴포넌트의 값이 변경될때마다 이를 구독하는 컴포넌트에게 변경된 값을 전달해주는게 목적이고, 스토어를 구독하는 방법은 다음처럼 두가지입니다.    1. subscribe() 함수를 이용   2. $ 기호 사용 subscribe()함수를 이용한 구독 ExampleStore1 스토어의 데이터: {value1}스토어를 구독하는 컴포넌트에서 subscribe()함수를 사용해 구독을 합니다.그러면 부모 컴포넌트에서 변화가 일어날때마다 위의 자식 컴포넌트는 자동으로 상태 변화를 감지할 수 있게 됩니다.다만 구독취소는 지원하지 않아 자식.. 2024. 8. 31.

티스토리툴바