[모각소] 2022-07-19 (화) - 종료 후

오늘 한 일

• Typescript 공부
• Svelte로 계산기 제작

---

Svelte 프로젝트 세팅하는 법

cd [프로젝트 생성할 폴더의 상위 폴더]
npm create svelete [생성할 프로젝트 이름]
// 선택 화면 나올 때
Skeleton Project
Yes, using TypeScript syntax
No
Yes
No
cd [프로젝트 폴더]
npm install

// 프로젝트 실행할 때
npm run dev -- --open // Chrome에서 https://localhost:3000 으로 열림

Svelte 프로젝트 Firebase로 배포하는 법

• Firebase 설치

npm i -g firebase-tools
firbase login

이후 프로젝트 개발할 때마다 빌드 후 배포(npm run build -> firebase deploy --only)
package.json 파일에서 명령어 미리 정의 후 사용 가능

• Firebase로 배포

cd [프로젝트 폴더]
firebase init hosting //public으로 할 거냐 물을 떄 build로 설정 (public은 실제 프로덕트)
firebase deploy --only hosting
// package.json에 미리 명령어를 정의해두어서 추후에 npm run deploy로 배포 가능

• firebase.json 편집 rewrites를 따로 작성해주어야 firebase hosting 서버에 404 에러가 나지 않는다.
  

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Svelte 프로젝트로 계산기 제작

https://sample-svelte-a6ad5.web.app/calculator