React + TypeScript + Vite

로컬 HTTPS 개발

로컬 브라우저 개발 서버는 mkcert로 발급한 인증서를 사용해 HTTPS로 실행할 수 있습니다. Vite의 server.https 설정을 사용합니다.

macOS에서 최초 설정:

brew install mkcert
mkcert -install
pnpm cert:dev
pnpm dev:https

mkcert -install은 로컬 인증기관을 시스템 신뢰 저장소에 등록하는 최초 설정입니다. 이미 설치·신뢰된 환경에서는 pnpm cert:dev부터 실행하면 됩니다. 다른 OS의 설치 방법은 mkcert 공식 문서를 참고하세요.

접속 주소는 https://localhost:5174입니다. localhost, 127.0.0.1, ::1용 인증서를 .cert/에 저장하며 인증서와 개인키는 Git에서 제외합니다. 인증서 갱신 시에는 pnpm cert:dev 실행 후 개발 서버를 재시작하세요.

이 명령은 브라우저 개발용입니다. pnpm dev와 Capacitor live reload는 기존 HTTP 방식을 사용합니다. 로컬 HTTPS 설정으로 원격 AR 서버의 인증서 신뢰 오류가 해결되지는 않습니다. VITE_AR_SERVER_URL에는 유효한 인증서가 적용된 HTTPS 서버 주소가 필요합니다.

AR 서버가 자체 서명 인증서를 사용하는 개발 환경에서는 서버 담당자 또는 사용자가 확인한 공개 인증서를 .cert/ar-server.pem에 저장하고 .env.https.local에 지정할 수 있습니다.

AR_SERVER_CERT_FILE=.cert/ar-server.pem

이 설정은 pnpm dev:https의 AR 프록시에만 적용합니다. 인증서 체인·호스트 이름 검증을 유지하며, 서버 인증서의 SHA-256 지문이 지정한 인증서와 같아야 연결됩니다. 서버 인증서가 교체되면 새 인증서를 확인한 후 파일을 갱신하고 개발 서버를 재시작하세요. 시스템 신뢰 저장소나 일반 HTTP 개발, preview, 네이티브 앱의 인증서 설정에는 적용하지 않습니다.

네이티브 AR 서버 인증서

자체 서명된 AR 서버 인증서를 네이티브 앱에서 사용하려면 담당자가 확인한 공개 인증서를 .cert/ar-server.pem에 저장하고 .env.local에 다음 값을 설정합니다.

AR_SERVER_CERT_FILE=.cert/ar-server.pem

VITE_AR_SERVER_URL은 기존 환경 설정의 HTTPS 서버 주소를 사용합니다. 이 설정 후 pnpm build와 pnpm sync:android 또는 pnpm sync:ios를 실행하고 네이티브 앱을 다시 빌드합니다. 인증서는 개발용 프록시와 달리 앱의 CapacitorHttp.request에도 적용됩니다. 서버의 origin과 공개 인증서를 빌드 설정에 고정하며, 다른 서버는 기존 HTTP 처리와 시스템 인증서 검증을 사용합니다. 인증서의 호스트 이름·유효기간을 검증하고, 승인된 인증서와 다른 인증서를 거부하며 리다이렉트를 따르지 않습니다. 개인키는 앱에 포함하지 않습니다. 인증서가 교체되면 승인된 공개 인증서로 갱신하고 앱을 다시 빌드해야 합니다. 공인 인증서를 사용하는 서버는 이 옵션을 생략해 기본 검증을 사용할 수 있습니다.

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Oxc
• @vitejs/plugin-react-swc uses SWC

React Compiler

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default defineConfig([
  globalIgnores(["dist"]),
  {
    files: ["**/*.{ts,tsx}"],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ["./tsconfig.node.json", "./tsconfig.app.json"],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
]);

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from "eslint-plugin-react-x";
import reactDom from "eslint-plugin-react-dom";

export default defineConfig([
  globalIgnores(["dist"]),
  {
    files: ["**/*.{ts,tsx}"],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs["recommended-typescript"],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ["./tsconfig.node.json", "./tsconfig.app.json"],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
]);