Svelte 신입 트러블슈팅 면접

Svelte는 할당 연산자(=)를 통한 변경만 반응성으로 감지합니다. push(), pop(), splice() 같은 배열 메서드는 배열 내부를 변경하지만 재할당이 아니기 때문에 반응성이 트리거되지 않습니다. 해결 방법은 배열을 재할당하는 것으로, items = [...items, newItem] 또는 items.push(newItem); items = items 처럼 작성해야 합니다. 이렇게 하면 Svelte 컴파일러가 변경을 감지하고 DOM을 업데이트합니다. 실무에서는 이를 모르고 작성하면 데이터는 변경되었는데 화면만 안 바뀌는 문제가 자주 발생합니다.

onMount 생명주기 함수를 사용해야 합니다. onMount는 컴포넌트가 DOM에 처음 렌더링된 후에 실행되므로 API 호출이나 DOM 조작에 적합합니다. 디버깅 과정은 먼저 콘솔에서 에러 메시지를 확인하고, API 호출 코드가 어디에 위치했는지 점검합니다. 만약 스크립트 최상위 레벨에 작성되어 있다면 onMount 안으로 옮깁니다. 또한 async/await를 사용할 경우 try-catch로 에러 핸들링을 추가하여 네트워크 오류에도 대응할 수 있도록 합니다. 개발자 도구의 네트워크 탭에서 API 요청이 언제 발생하는지 확인하는 것도 유용합니다.

폼에서 엔터키를 누르면 기본적으로 submit 이벤트가 발생하는데, on:keydown으로도 제출 함수를 호출하면 중복 실행됩니다. 먼저 개발자 도구 콘솔에서 함수가 몇 번 호출되는지 로그를 찍어 확인합니다. 해결 방법은 on:submit|preventDefault를 사용하여 폼의 기본 동작을 막고 submit 이벤트만 사용하거나, keydown 이벤트에서 event.key를 체크하면서 preventDefault()를 명시적으로 호출하는 것입니다. Svelte의 이벤트 수식어인 |preventDefault를 활용하면 코드가 간결해집니다. 재발 방지를 위해서는 폼 제출 로직을 하나의 핸들러로 통일하는 것이 좋습니다.

Svelte는 기본적으로 단방향 데이터 흐름을 따르므로 자식 컴포넌트에서 props를 직접 수정하면 안 됩니다. props는 읽기 전용으로 취급해야 하며, 수정하려고 하면 경고가 발생합니다. 해결 방법은 자식에서 이벤트를 dispatch하여 부모에게 변경을 알리고, 부모가 데이터를 업데이트하도록 하는 것입니다. 또는 부모에서 bind:value 같은 양방향 바인딩을 명시적으로 사용할 수도 있습니다. 디버깅 시에는 콘솔 경고 메시지를 확인하고, 데이터가 어디서 변경되는지 추적합니다. 재발 방지를 위해 props는 읽기 전용, 내부 상태는 let으로 선언하는 규칙을 팀에서 공유합니다.

먼저 로딩 상태를 관리하는 변수(예: isLoading)가 API 호출 후 제대로 false로 변경되는지 콘솔 로그로 확인합니다. 만약 변수는 변경되는데 화면이 안 바뀐다면 Svelte 반응성 문제일 수 있으므로 재할당을 확인합니다. API 호출의 then 또는 finally 블록에서 isLoading = false가 누락되었는지 점검합니다. 또한 에러가 발생했을 때도 로딩 상태를 해제하도록 try-catch-finally 구조를 사용하는 것이 좋습니다. 조건문 {#if isLoading}의 문법이 올바른지도 확인합니다. 재발 방지를 위해 API 호출 패턴을 표준화하고 항상 finally에서 로딩 상태를 정리하도록 합니다.