웹알못, 파이썬으로 홈페이지/웹 개발하기 004_Svelte 설치하고 실행하기

 1. svelte

1.1 프로그램 특징

- 프레임워크 FastAPI로 만든 백엔드 서버에 데이터를 요청하고 응답을 받아서 처리하는 프로그램 개발을 위해서는 프론트앤드 프레임워크 필요

- 2016년 출시되었고, 꾸준이 인기 상승 중

- 장점, 작성해야할 코드가 적다. 실제 Dom을 반영한다.(지금은 이 말이 무슨 뜻인지 모른다.) 순수 JSP만으로 그 기능을 이해하기 쉽게 구현했음

1.2 Node.js 설치

 - node 가 설치되었는지 확인한다. -> 나는 없다. 

 - svelte 사용하려면 필요하다. 설치하러가자  

   Node.js — Run JavaScript Everywhere (nodejs.org)

<생략>

 - 설치 후 확인하여 아래와 같이 확인이 된다. (cmd 창은 종료하고 다시 켜야 한다.)

 1.3 svelte 설치하기

 - svelte는 Node.js의 npm(노드패키지 매니저)을 통해 명령하여 설치한다. (파이썬의 pip 과 같은 역할을 한다고 한다.)

 - cmd 창을 열고, vprojects의 가상환경으로 진입하여 다음과 같은 명령어를 입력한다.

   npm create vite@latest frontend -- --template svelte

 - 웹자체가 계속 개발 되다보니, 책이랑 좀 다를데가 있는데, 뿌리는 같으니, 대충 다음과 같이 설치 되었다는 내용을 확인할 수 있다. 

 - 뭔가 새로운 버전이 나왔으므로 업데이트를 하라는 내용인거 같다. 지금은 모르니까 넘간다. 핵심은 여기 

 - frontedn 로 이동하여 svelte 애플리케이션을 설치한다.

 - 오타가 나면 당혹스럽다. 책이랑 조금씩 달라도 그냥 간다. 일단.

2. VSCode 설치

2.1 VSCoce 설치

 - svelte 코드를 작성하는 도구이다. 

 - Visual Studio Code - Code Editing. Redefined

 

 - 오픈폴더 경로를 선택한다. -> 신뢰 어쩌구 나오면 신뢰한다고 하면 되는 것 같다. 

2.2. 확장프로그램 설치

 - svelte (이제부터는 스벨트로 부르겠다)를 위한 vscode확장 에디터가 있다고 해서 설치해야한다.

 - Svelte for VS Code - Visual Studio Marketplace

 

 - install 누르면, VSCODE 프로그램창과 연결된다. install을 한다. 

 - 설치 되었다.

2.3 JSP 타입 체크 설정 끄기 

 - 스벨트는 JSP 타입체크가 디폴트이나 파이썬은 사용하지 않으므로 설정을 끈다.(역시 무슨 뜻인지 모르지만 따란다.)
 - 비코열고 수정한다. 경로는 아래와 같다.  

2.4 스벨트 서버 실행하기 

 - 이제 진짜 스벨트를 실행해보자 (설치한게 너무 많다, 알고보니 아나콘다도 설치되어있음)

 - 비코의 터미널 창에 npm run dev를 입력한다. (커서 위치 오류가 일어난 듯하다.)

   아래와 같이 뜬다. 

 - 터미널에 출력된 로컬주소 : http://localhost:5173/ (개별 PC마다 다를 수 있다.) 을 브라우저창에 입력하면 다음과 같이 나옵니다. 

드디어! 설치 셋팅이 끝났습니다. 

사실, 제가 1년여 전에, 점프투장고 버전으로 게시판까지 뽑은적이있어요.

한 번하고 잊어버렸는데,

약 2틀 동안 하는 동안 아주 조오오오금 도움이 되었던거 같습니다.

진짜 목표는 웹제작을 실제 홈페이지로 만들고,

기존의 홈에 있던 데이터도 가지고와야 합니다.

관리자분에 의하면 DB 설계가 중요하다고 하는데 

그것까지는 아직 모르겠어서 일단 만들고 수정은 다음에