개발하는데 다 이유가 있겠지

Github Pages를 사용해 포트폴리오 작업한 것을 배포하는 과정에서 에러가 발생했다.

처음 뵙겠습니다...

블로그를 엄청 찾아본 것 같다...

발생 원인

---

🔥🔥 확장자 🔥🔥

확장자(.js, .jsx, .ts, .tsx 등)을 작성하지 않아서 발생했다.(import할 때 확인이 꼭.. 꼭.. 꼭.. 필요하다..)

확장자 없이 작성해도 로컬에서 실행할 때는 아무 이상이 없었다. 이유는 아래와 같다.

1. 로컬 개발 환경(Vite Dev Server)
- Vite의 개발 서버는 자동으로 파일 확장자를 해석
- import 시 확장자를 생략해도 .js, .jsx, .ts, .tsx 등을 순차적으로 찾아서 처리
- 개발 환경에서는 Vite가 모듈 번들링을 실시간으로 처리

2. 프로덕션 환경(GitHub Pages)
- 정적 호스팅 환경에서는 파일 확장자를 명시적으로 지정해야 함
- 웹 서버는 파일 확장자를 자동으로 추론하지 않음
- MIME 타입이 정확히 지정되어야 모듈로 인식

확장자 명시
→ 코드의 명확성 증가
→ 빌드 시스템의 의존성 감소
→ 브라우저 호환성 보장
→ 디버깅이 더 쉬워짐

그렇기 때문에 모든 import문에 확장자를 추가하고, Vite 설정(vite.config.js)에 확장자 해결 규칙을 추가해야 한다.

// 항상 확장자 포함
import Component from '/src/components/Component.tsx'
import utils from '/src/utils/helpers.ts'

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  base: '/portfolio/',
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
    extensions: ['.js', '.jsx', '.ts', '.tsx'] // 확장자 해결 규칙 추가
  },
});

// 상대 경로도 확장자 없으면 에러 발생
import Component from '../components/Component'  // ❌ 오류

// 상대 경로도 확장자 필수
import Component from '../components/Component.tsx'  // ✅ 정상 작동

 

브랜치로 빌드 및 배포

---

// package.json
{...},
"scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist",
    "lint": "eslint my-portfolio"
  },
  {...}

package.json에 build와 deploy를 작성해주고,

npm run build

npm run deploy

순서대로 빌드와 배포를 진행하면 끝.

편-안

이 에러 때문에 4시간을 날린게 속상하지만, 다음에는 실수하지 말아야겠다..🥶
덜 작성된 포트폴리오 쓰러가야한다..