[Canvas-불꽃놀이-01] 프로젝트 초기화

글자를 입력하면 불꽃놀이처럼 빵빵 터지는 효과를 만들어보고 싶어져서 시작하게 되었다.

빌드 도구로는 빠르고 비교적 설정하기가 간편한 Vite을 선택하였다. 

 

1. github repository 생성

https://github.com/jinsk9268/text-fireworks

GitHub - jinsk9268/text-fireworks

 

2. Vite 프로젝트 생성

난 자동화로 진행하였다. 터미널에서 아래와 같이 명령어를 입력하면

npm create vite@latest 프로젝트명

 

Vite 프로젝트가 생성이 되는데 바닐라 자바스크립트로 할거라 framwork는 Vanilla언어는 Javascript로 선택했다. 

사진과 같이 상황에 맞게 선택할 수 있다.

그런다음 로컬 서버를 실행시키고 싶을땐

npm run dev

 

3. 파일 및 폴더구조 정리

• 우선 필요없는 파일들을 삭제하고 src 폴더를 생성하여 javascript와 css 파일을 관리. 최종적인 폴더 구조이다.

📦text-fireworks
 ┣ 📂public
 ┣ 📂src
 ┃ ┣ 📂style
 ┃ ┃ ┗ 📜style.css
 ┃ ┗ 📜index.js
 ┣ 📜.gitignore
 ┣ 📜README.md
 ┣ 📜index.html
 ┣ 📜package-lock.json
 ┣ 📜package.json
 ┗ 📜vite.config.js

 

4. Vite 설정

• 나중에 빌드할때 몇몇 설정이 더 추가되겠지만 일단 절대경로를 사용할거라 이부분 먼저 설정했다.
• vite.config.js 파일을 만들어 아래와 같이 설정하면 import Button from '@/components/Button' 이런식으로 편하게 가져올 수 있다.

import { defineConfig } from "vite"; // 인텔리센스를 통해 자동 완성과 옵션 검증 지원
import path from "path"; // 절대 경로 설정을 위한 Node.js 내장 모듈

export default defineConfig({
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "src"), // src 폴더를 @로 매핑
        },
    },
});

 

+ 추가 (vscode를 사용하면 jsconfig.json 파일도 추가해 절대경로를 사용할 수 있게 해줘야 한다)

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/*": ["src/*"]
        }
    }
}

 

5. html, css 파일 초기화

• 일단 기존에 있던 css는 지워주고 html 파일도 기본 설정으로 바꿔주었다. 

6. Github에 푸쉬

• Github 링크 에 들어가면 전체코드 확인이 가능하다. (아직 업데이트 중)

GitHub - jinsk9268/text-fireworks

 

끝