react-router/examples/ssr-data-router at dev · remix-run/react-router (github.com)

시작하기 | Vite (vitejs-kr.github.io)

Vite.js는 개발 서버와 빌드 도구를 제공합니다. 개발 서버는 HMR(Hot Module Replacement)을 지원하여 빠른 개발 환경을 제공하며, 빌드 도구는 Rollup을 기반으로 하여 최적화된 번들링을 제공합니다.

Vite.js는 기존의 Webpack과 비교하여 더 빠른 빌드 시간과 개발 서버의 더 빠른 시작 속도를 제공합니다.

Vite.js는 개발 서버와 빌드 도구를 제공하는 프론트엔드 개발 도구입니다.

Express.js는 서버 사이드 웹 프레임워크입니다.

Express.js와 Vite.js를 사용하려면, Vite.js의 빌드 결과물을 Express.js 애플리케이션에서 정적 파일로 서비스하는 방식으로 사용할 수 있습니다. 이를 통해 Vite.js에서 빌드된 클라이언트 사이드 애플리케이션과 Express.js에서 작성된 서버 사이드 애플리케이션을 함께 사용할 수 있습니다.

Vite.js 빌드 후 정적 파일로 제공합니다.

vite 템플릿 으로 생성하기 : npm create vite@latest vite_react_ts1 -- --template react-ts

템플릿 유형확인 시작하기 | Vite (vitejs-kr.github.io)

npm run build

const express = require('express');
const path = require('path');


const app = express();
const port = process.env.PORT || 3000;

// 정적 파일 경로 설정
app.use(express.static(path.join(__dirname, 'dist')));


// 모든 요청에 대해 index.html을 반환하도록 설정
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});


app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});

- React 프로젝트에서 Webpack 빌드 도구를 대신하여 Vite.js를 사용할 수 있습니다. 

- React 프로젝트를 생성합니다.

 npx create-react-app my-app

 cd my-app

- Vite.js를 설치합니다.

 npm install vite --save-dev

- Vite.js 설정

 vite.config.js

 module.exports = {
  // 빌드 모드 설정
  mode: 'development',
  // 개발 서버 설정
  server: {
    port: 3000,
  },
};

- 빌드 및 실행

npm run build

npm run dev

동적 Import

const module = await import(`./dir/${file}.js`)

변수 file은 깊이가 1인 파일에 대해서만 나타낼 수 있습니다. 가령 file이 foo/bar인 경우에는 Import가 실패하게 됩니다

특정 고정 위치에서 서비스 하고 싶을때 기본 위치 설정

package.json에 특정 위치 설정

    "build": "vite  build --base /memorize/"

정적파일로 서비스 제공 express/server.js

  // 정적 파일을 제공할 경로를 설정
  app.use('/memorize', express.static(path.join(__dirname, 'memorize')));참고

package.json에 "type": "module"이 명시되어 있지 않으면 Vite는 Node.js 호환성을 위해 다른 파일 확장자를 생성합니다. 즉, .js는 .mjs가 되고, .cjs는 .js가 됩니다.

환경 변수

라이브러리 모드에서 모든 import.meta.env.*는 프로덕션용으로 빌드 시 정적으로 대체됩니다. 그러나 process.env.*는 그렇지 않기에 라이브러리를 사용하는 측에서 이를 동적으로 변경할 수 있습니다. 만약 이 역시 정적으로 대체되길 원한다면 define: { 'process.env.NODE_ENV': '"production"' } 와 같이 설정해주세요.