해시기반 라우팅, question

FrameWork/FastAPI

해시기반 라우팅, question_detail

mansoorrr 2024. 5. 28. 11:45

[해시기반 라우팅(hash based routing)]

일반적으로 a태그를 이용해 라우팅 경로로 이동
- <a href="/detail/2">detail2</a>: http://127.0.0.1:5173/detail/2 로 이동하게 됨
a링크에 use:link를 적용할 경우: #문자가 선행 되도록 경로가 만들어 짐
- <a use:link href="/detail/2">detail2</a>: http://127.0.0.1:5173/#/detail/2로 이동함
#가 붙은 경로는 모두 동일한 페이지로 인식
사용이유: 일반 방식의 주소를 사용하는 forntend 파일들을 서버에 적용하면 새로고침 했을때, 404에러가 나옴 -> front에서만 사용하는 경로이기 때문.
하지만 #가 붙어있으면 동일한 페이지로 인식하기 때문에 서버로 페이지 요청을 보내지 않음

[detail링크 만들기]

질문목록 하나씩 링크 달아주기
svelte-spa-router에 link 임포트
use:link를 통해 해시기반 라우팅 적용

// Home.svelte

import {link} from 'svelte-spa-router' // link불러오기

{#each question_list as question, index}
	<li>
    	// use-link적용
    	<a use:link href="/detail/{question.id}">{index}, {question.subject}</a>
    </li>
{/each}

[App.svelte수정]

question 별로 이동할 수 있는 detail라우팅을 해줬기 때문에 App에도 등록 해줘야 함
detail의 경우 question_id가 함께 따라다닌다
question_id는 가변적인 값으로 이렇게 가변적인 값을 컴포넌트에 전달하기 위해서는 :question_id와 같은 규칙을 적용한다.

// App.svelte
import Detail from "./routes/Detail.svelte"

const routes = {
	'/': Home,
    '/detail/:question-id': Detail,
}

[Detail.svelte생성]

App.svelte에서 routes에 detail을 선언할때 /detail/:question_id가 불리도록 했고 화면은 Detail.svelte가 불리도록 했다
:question_id가 Detail.svelte에서 사용되기 위해서는(전달받은 파라미터를 사용하기 위해서) params변수를 선언해야 함
params를 콘솔에 출력해 보면 명시한 파라미터 명은 key로, 파라미터의 값은 value로 들어가 있는것을 확인할 수 있다

// Detail.svelte
<script>
	export let params = {} // 파라미터 key(:question_id)와 value로 들어옴
    console.log(params) // 콘솔에 출력
    let question_id = params.question_id
    console.log('question_id' + question_id) // 콘솔에 출력    
</script>

<h1>제목</h1>
<div>내용</div>

[question_crud.py 작성]

데이터를 받아올 백엔드를 작성한다
question_id를 활용해 데이터를 받아온다

# ---------- question_crud.py
def get_question(db:Sesssion, question_id:int):
	question = db.query(Question).get(question_id)
    return question

[question_router.py작성]

question_crud/get_question.py를 활용해 데이터 전송

# ---------- question_router.question_detail
@router.get('/detail/{question_id}', response_model=question_schema.Question)
def question_detail(question_id: int, db: Session = Depends(get_db)):
	question = question_crud.get_question(db, question_id)
    return question

[frontend / routes / Detail.svelte 수정]

<script>
	import fastapi from "../lib/api"
    
	export let params={} // front에서 들어오는 라우팅 경로 데이터 받음
    let question_id = params.question_id //question_id추출
    let question = {} //먼저 선언
    
    // backend와 연동
    function get_question() {
        fastapi("get", "/api/question/detail/" + question_id, {}, (json) => {
            question=json
        })
    }
    
    get_question()
</script>

<h1>{question.subject}</h1>
<div>
	{question.content}
</div>