인프런 커뮤니티 질문&답변

답변 고맙습니다.

제가 말씀드리려고 했던 부분은 답변에 포함되어 있는

그러면 컴파일 과정을 통해 svelte-spa-router 모듈이 내부에서 Movie.svelte 컴포넌트를 처리하고,
params라는 Props에 현재 라우터의 파라미터 정보를 전달합니다.

여기서 src/routes/index.js의 '/movie/:id'로 명시한 내용 중 :(콜론)으로 시작하는 부분(id)을 정규식으로 확인하고 params.id로 해당 주소를 할당하는 과정이 포함되어 있기 때문에 Movie.svelte 컴포넌트 안에서 export let params = {} 코드를 통해 id 값을 사용할 수 있게 됩니다.

이 부분이 강의에 포함이 되면 더 좋을 것 같아서 입니다.

좋은 강의 고맙습니다.

heepaanee 님 안녕하세요~😃
강의에서 제 설명이 부족하고 아쉬워서 죄송합니다.😭

heepaanee 님께서 svelte-spa-router의 해당 설명 링크를 남겨주신 것을 보고 사용법은 이해하신 거로 생각되는데요,
혹시 params라는 데이터가 내부적으로 어떻게 정의되는지 원리가 필요하신가 궁금합니다.
혹은 heepaanee 님께서 내용은 이미 다 이해를 하셨고, 강의에서 부족한 부분(설명)을 지적해 주신 건가도 생각이 듭니다.

만약 동작 원리가 필요하시다면 간단히 정리해 보겠습니다.
혹시 후자라면, 부족한 강의 부분을 보완할 답변이 될 수 있지 않을까 조심스럽게 예상해 봅니다.

일단 프로젝트에서는 src/routes/index.js의 '/movie/:id'라는 속성(주소)에 Movie.svelte 컴포넌트를 할당했습니다.
https://github.com/HeropCode/Svelte-Movie-app/blob/6fc8aeecf04f2d675155ea2e34faf6ad38bdb245/src/routes/index.js#L8

그러면 컴파일 과정을 통해 svelte-spa-router 모듈이 내부에서 Movie.svelte 컴포넌트를 처리하고,
params라는 Props에 현재 라우터의 파라미터 정보를 전달합니다.
여기서 src/routes/index.js의 '/movie/:id'로 명시한 내용 중 :(콜론)으로 시작하는 부분(id)을 정규식으로 확인하고 params.id로 해당 주소를 할당하는 과정이 포함되어 있기 때문에 Movie.svelte 컴포넌트 안에서 export let params = {} 코드를 통해 id 값을 사용할 수 있게 됩니다.
https://github.com/HeropCode/Svelte-Movie-app/blob/6fc8aeecf04f2d675155ea2e34faf6ad38bdb245/src/routes/Movie.svelte#L7

만약 라우터 옵션을 '/movie/:heropy'로 명시했다면 params.heropy로 해당 주소를 할당하게 됩니다.

위 내용으로 답변이 이뤄질지 모르겠네요.
혹시 아쉬운 부분이 있다면 가감 없이 의견 주시면 다시 확인해 보겠습니다!

좋은 말씀 감사드리고,
즐거운 하루 보내세요~👍