웹알못, 파이썬으로 홈페이지/웹 개발하기 006_스벨트 svelte 웹페이지 만들기

 스벨트 웹 페이지 만들기

1. 페이지 출력 

 - 비코에서 app.svelte 파일을 열고 기본으로 작성된 내용을 모두 지우고 다음과 같이 작성한다. 

  <h1> Let’s be persistent and succeed </h1>

▼

 - 브라우저에 http://localhost:5173 입력하면 내가 출력한 문장이 나온다. 

 - 문자정렬이 중앙(app.css 파일에 작성된 기본 스타일) 이고, 여기서  app.css 스타일을 사용하지 않으므로 전체 다 삭제하기로 한다. 

▼

 2. FastAPI 서버와 통신하기

 - app.svelte 파일 내용을 수정한다. 

<script>

  let message;

  fetch("http://127.0.0.1:8000/hello").then((Response) => {

    Response.json().then((json) => {

      message = json.message;

    });

  });

</script>

<h1>{message}</h1>

 - <sccript> 블록에 let을 통해 message 변수를 생성하고, FastAPI의 hello API를 호출하여 돌려받은 값을 생성한 message 변수값에 담는다.  → message 값을 <h1> 으로 출력한다.  

- 그리고 브라우저에 가면, 두둥! 찾을 수 없다고 나온다. 

 - 이유는, message 변수에 값이 할당되지 않았기 때문이다. 왜 때문이냐면 hello API를 호출하지 못하기 때문이라고 한다. → 브라우저의 개발자 도구의 콘솔 값을 확인한다.

 - 대충, CORS 정책에 의해 요청이 거부되었다고 한다. 프론트엔드에서 FastAPI 백엔드 서버로 호출이 불가능하다고 한다. → 이 오류는 FastAPI 에 CORS 예외 URL을 등록하여 해결한다. 

- 파이참에서 main.py 파일을 책을 보고 아래와 같이 수정하였으나, 책의 예상대로라면, 바로 출력되어야 하는데, 뭐 때문인지 출력이 안되었는데, PC를 재부팅했더니 된다. (어이없음)

NEXT, 이전까지 맛보기, 이제는 진짜 기초