인프런 커뮤니티 질문&답변
작성한 질문수
5 라이프사이클 모듈화 - 질문
작성
·
139
0
크게 3가지 정도 동작이 이상해서 문의 드립니다.
1) 강의 따라 입력하고 실행하다 보면 내가 입력한 코드가 자동으로 없어 지네요. 에러 나서 살펴보면 그래요
주로 import 로 시작하는 문장이구요 다른것두 있는지는 ...
2) 저장 세이브 하면 코드 뒤에 자동으로 세미콜론이 붙네요.
삭제해도 또 붙구요, 안 붙는 방법이 없을까요
또한 import { aaa, bbb} 라면 지가 맘대로 { bbb, aaa } 순으로 순서가 바뀌구요
또한 세로로 정렬이 되네요.
3) App.svelte 파일에서
{#if done} 로 해야 동작하네요
강의내용대로 $done 하면 안되구요
Something.svelte 파일에서는 $ 붙여야 하구요
세팅이 깨졌나요, 아님 다른 이유가 있는지 모르겠네요.
또한 동작이 좀 틀립니다. Hello Lifecycle! 는 변하지 않고 계속 보이구요. 코드가 틀린지 몰라 몇번이나 봐도 그건 아닌거 같구요
4) 올리신 코드는 Trello 코드 같은데 별도로
각 강의마다 했던 짧은 코드지만 파일로 올려주셨으면 조겠네요.
강의 화면 찾아가면서 비교하기 너무 힘들고 시간이 많이 걸리네요.
답변 1
0
cdway
질문자
<script>
import { delayRender, lifecycle } from "./lifecycle.js";
import Something from "./Something.svelte";
let done = delayRender();
lifecycle();
</script>
{#if done}
<h1>Hello Lifecycle!</h1>
{/if}
<Something />import {
afterUpdate,
beforeUpdate,
onDestroy,
onMount
} from "svelte"
import {
writable
} from "svelte/store"
export function lifecycle() {
onMount(() => {
console.log("Mounted?")
})
onDestroy(() => {
console.log("Before destroy?")
})
beforeUpdate(() => {
console.log("Before update?")
})
afterUpdate(() => {
console.log("After update?")
})
}
export function delayRender(delay = 3000) {
let render = writable(false)
onMount(() => {
setTimeout(() => {
// $render = true
console.log(render) // set, update, subscribe
render.set(true)
}, delay)
})
return render
}<script>
import { delayRender } from "./lifecycle.js";
let done = delayRender(1000);
</script>
{#if $done}
<h1>something...</h1>
{/if}