2024.04.17(수) 슈퍼코딩 신입연수원 3주차 Day 3 후기 - vite

• Svelte
  • html, css, javaScript 코드와 유사한 프레임워크
  • 가장DOM 존재 X
  • 개인이 만든 프레임워크여서 개발 환경 미흡
• Npm
  • 모듈 방식으로 개발 가능
  • 인터넷 상에 있는 모듈을 설치하지 않고 사용 가능
  • 로딩하는데 시간이 걸림 → 배포 전 하나의 파일로 합치는 방법 "번들러(bundle)"
  • 대표적인 번들러 : webpack → 설정이 어려움
• Esbuild
  • 수정할 때마다 번들러로 빌드하는 과정의 번거움 때문에 탄생한 도구
  • 빌드 속도를 100배로 빠르게 만든 도구
  • go 언어로 만듦
• vite
  • 혁신적인 번들러
  • Evan You가 만듦
• React
  • 현재 트랜드
  • jsx라는 별도의 문법 존재
  • 많은 JS 라이브러리와 호환됨
  • facebook이 개발 및 유지보수
• 실습
  • 깃허브(firebase branch) : https://github.com/kung036/carrot-market-clone
  • node 설치
    • 사이트 : https://nodejs.org/en
    • vscode의 터미널에서 node --version 입력
  • vite 프로젝트 생성
    • npm init vite@latest
    • 프로젝트 이름
    • Svelte
    • JavaScript
  • 생성된 파일 & 폴더
    • package.json : 프로젝트 설정 파일
    • public : 이미지 폴더
    • svelte.config.js : svelte 설정 파일
    • vite.config.js : vite 설정 파일
    • scr : 개발 폴더
  • vite 설치
    • npm install 
  • vite 실행 명령어
    • npm run dev
    • 파일 수정 시 자동으로 변경사항 반영
  • 확장자 설치 : Svelte for VS Code
  • .scelte 파일 구조
    • javaScript, html, css 순으로 개발
    • script 태그 : javascript
    • main 태그 : html
    • style 태그 : css
  • 라우터 설치
    • npm i svelte-spa-router
  • 다른 경로 이동 시 "/#" 넣기