Skip to content

ebook 오탈자 #227

Closed
Closed
@euntaek

Description

@euntaek

구글북스에서 구매 후 보고 있습니다.

20.3.5 정적 파일 제공하기

index.server.js의 createPage함수

  1. manifest[...]부분 manifest.files[...]로 해야 정상 작동합니다.

  2. 하이픈이 아니라 물결표로 되어있습니다.
    manifest['runtime~main.js'] -> manifest['runtime-main.js']

import React from 'react';
import ReactDOMServer from 'react-dom/server';
import express from 'express';
import { StaticRouter } from 'react-router-dom';
import App from './App';
import path from 'path';
import fs from 'fs';

const manifest = JSON.parse(
  fs.readFileSync(path.resolve('./build/asset-manifest.json'), 'utf8')
);

const chunks = Object.keys(manifest.files)
  .filter(key => /chunk\.js$/.exec(key))
// -------------------------------↓↓------------------------------- 
  .map(key => `<script src="https://github.com/$%7Bmanifest[key]%7D"></script>`)
//-----------------------------------------------------------------
  .join('');

function createPage(root) {
  return `<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="shortcut icon" href="https://github.com/favicon.ico"/>
    <meta name="theme-color" content="#000000" />
    <title>React App</title>
// ---------------- ↓↓ ---------------------------------------------- 
    <link href="https://github.com/$%7Bmanifest['main.css']}" rel="stylesheet" />
//--------------------------------------------------------------------
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root">
      ${root}
    </div>
// ------------------↓↓-----------↓ --------------------------------
    <script src="https://github.com/$%7Bmanifest['runtime-main.js']}"></script>
//--------------------------------------------------------------------
    ${chunks}
// ----------------- ↓↓ ---------------------------------------------- 
    <script src="https://github.com/$%7Bmanifest['main.js']}"></script>
//--------------------------------------------------------------------
  </body>
  </html>
  `;
}

const app = express();

const serverRender = (req, res, next) => {
  const context = {};
  const jsx = (
    <StaticRouter location={req.url} context={context}>
      <App />
    </StaticRouter>
  );
  const root = ReactDOMServer.renderToString(jsx);
  res.send(createPage(root));
};

const serve = express.static(path.resolve('./build'), {
  index: false,
});

app.use(serve);
app.use(serverRender);

app.listen(5000, () => {
  console.log('Running on http://localhost:5000');
});

제가 초보라서 잘못하거나 실수한 것 일 수도 있으니 확인 한번 부탁드리겠습니다!!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions