서버사이드 렌더링
0. 폴더구조
/components
- about.jsx
/views
- about.hbs
index.js
package.json
1. 서버
1) index.js
const fs = require('fs')const express = require('express')const app = express()const errorHandler = require('errorhandler')const http = require('http')const https = require('https')const httpPort = 3000const httpsPort = 443const React = require('react')require('babel-register')({ presets: [ 'react' ]})const ReactDOMServer = require('react-dom/server')const About = React.createFactory(require('./components/about.jsx'))app.set('view engine', 'hbs')app.get('/', (request, response, next) => { response.send('Hello!')})app.get('/about', (request, response, next) => { const aboutHTMl = ReactDOMServer.renderToString(About()) response.render('about', {about: aboutHTMl})})// app.get('/about', (request, response, next) => {// response.send(`<div>// <a href="http://Node.University" target="_blank">Node.University</a>// is home to top-notch Node education which brings joy to JavaScript engineers.// </div>`)//})app.all('*', (request, response, next) => { response.status(404).send('Not found... did you mean to go to /about instead?')})app.use((error, request, response, next) => { console.error(request.url, error) response.send('Wonderful, something went wrong...')})app.use(errorHandler)http.createServer(app) .listen(httpPort, ()=>{ console.log(`HTTP server is listening on ${httpPort}`) })try { const options = { key: fs.readFileSync('./server.key'), cert: fs.readFileSync('./server.crt') }} catch (e) { console.warn('Cannot start HTTPS. \nCreate server.key and server.crt for HTTPS.')}if (typeof options != 'undefined') https.createServer(app, options) .listen(httpsPort, ()=>{ console.log(`HTTPS server is listening on ${httpsPort}`) })
- app.set() : 노드를 설정한다. 첫 번째 인자는 문자열, 두 번째 인자는 설정 값이다
- require('babel-register').... : JSX파일을 require로 불러와서 바로 변환하여 사용할 수 있게한다.
2) errorHandler
- 오류처리에 관련된 사항을 정리한다.
- npm i errorHandler
2. 템플릿
1)about.hbs
<!DOCTYPE html> <head> <meta charset="utf-8" /> <title>React + Express = ?뮋</title> <meta name="author" content="Azat" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> </head> <div id="content">{{{about}}}</div>
- {{{}}} : 중괄호 세 개를 사용해서 index.js에서 about 변수로 전달된 HTML 을 이스케이프 처리하지 않고 출력한다.
- handlerbars 설치 : npm i hbs --save
3. 컴포넌트
const React = require('react')module.exports = function About() { return <div> <a href="http://Node.University" target="_blank">Node.University</a> is home to top-notch Node education which brings joy to JavaScript engineers. </div>}
4. 실행
- node index.js 또는 node .
'Front-End > ReactJs' 카테고리의 다른 글
| [ReactJs] react-router 사용하기 (0) | 2018.08.16 |
|---|---|
| [ReactJs] react router 처음부터 만들기 (0) | 2018.08.16 |
| [ReactJs] node.js를 이용한 react 컴포넌트 렌더링 (0) | 2018.08.12 |
| [ReactJs] 리엑트 폼 요소 정의 (0) | 2018.08.07 |
| [ReactJs] 리액트 폼 이벤트 설정 (0) | 2018.08.05 |
리딩리드