질문목록 호출 및 내용 표시

main.py에 CORS보안 적용할 페이지 명시해 두었으니 API를 통해 FONT에서 질문목록을 확인가능하다.

 

[frontend]

• App.svelte에 아래와 같이 입력
• question_list 초기값을 빈 리스트로 꼭 만들어 줘야 함: fetch함수는 비동기 방식으로 실행되기 때문에 초기값이 없으면 에러가 남
• 함수로 만들어 함수를 실행하는 방식으로 구성

<script>
	let question_list = []; // api호출시 return타입으로 초기값 설정
    //함수만들기
    function get_question_list() {
    	fetch("http://127.0.0.1:8000/api/question/list").then((response) => {
        	response.json().then((json) => {
            	question_list = json; // question_list에 데이터 저장
            })
        })
    }
    get_question_list(); // 함수 실행
</script>

<ul>
	{#each question_list as question, index}
    <li>{index}, {question.id}, {question.subject}</li>
    {/each}
</ul>

front 화면

 

 

[svelte 필수문법]

• for문

{#each list as item, index} // index는 0부터 시작
    <p>순서: {index} </p>
    <p>{item}</p>
{/each}

• if문

{#if 조건문1}
    <p>조건문1에 해당하면 실행</p>
{:else if 조건문2}
    <p>조건문2에 해당하면 실행</p>
{:else}
    <p>조건문1, 2 모두 해당하지 않으면 실행</p>
{/if}

• 객체표시

// 객체에서 나오는 값은 {}
{객체}

// 객체의 속성은 .으로 출력
{객체.속성}