[ReactJs] 서버사이드 렌더링

Front-End/ReactJs 2018. 8. 12. 21:13

서버사이드 렌더링

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 = 3000 const httpsPort = 443 const 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

리딩리드

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31