2016 W3C Conference #5 : UNIVERSAL RENDERING (React.JS 중심)
•
0 likes•177 views
2016년 12월에 진행되었던 W3C HTML5 Conference 2016의 오후 트렉 (웹프레임워크)의 발표 자료입니다. Automattic의 개발자로 활동하고 계신 김태곤님께서 ‘Universal Rendering’을 주제로 발표를 진행하였습니다. 이번 세션에서는 유니버셜 렌더링의 정의, 장점과 단점, 그리고 구현 방법에 대한 개요까지 다뤘습니다.
Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (12)
Similar to 2016 W3C Conference #5 : UNIVERSAL RENDERING (React.JS 중심)
Similar to 2016 W3C Conference #5 : UNIVERSAL RENDERING (React.JS 중심) (20)
2016 W3C Conference #5 : UNIVERSAL RENDERING (React.JS 중심)
- 17. 장점과 단점 17 / 51
- 25. 장점 - 빠르다 페이지를 더 빠르게 읽어들일 수 있다. 사용자 경험이 향상될 수 있다. 별 차이 없다(goo.gl/Mpi5xI). 마지막 데이터를 그리는 시간 25 / 51
- 26. 장점 - 빠르다 페이지를 더 빠르게 읽어들일 수 있다. 사용자 경험이 향상될 수 있다. 별 차이 없다(goo.gl/Mpi5xI). 확실히 서버 렌더링이 빠름(goo.gl/GfXMuK).내가 해봐서 아는데 I'd argue that ... the server rendered app will stay significantly faster than the same app rendered only on the client. - Malte Ubl: Google AMP 프로젝트의 Tech lead 26 / 51
- 27. 장점 - 빠르다 페이지를 더 빠르게 읽어들일 수 있다. 사용자 경험이 향상될 수 있다. 별 차이 없다(goo.gl/Mpi5xI). 확실히 서버 렌더링이 빠름(goo.gl/GfXMuK). 페북/인스타그램도 안 쓰고, UX에는 딱히 도움되는지 못찾음(goo.gl/qvMoif). 내가 해봐서 아는데 I'd argue that ... the server rendered app will stay significantly faster than the same app rendered only on the client. - Malte Ubl: Google AMP 프로젝트의 Tech lead We haven't found sr useful for real users. - Crhistoph Pojer: 페이스북 엔지니어 27 / 51
- 28. 28 / 51
- 30. 장점 - 빠르다 - 옳다 - SEO 자바스크립트를 실행하지 않아도 콘텐츠를 읽을 수 있으므로 검색 엔진 최적화(SEO: Search Engine Optimization) 측면에서 유리하다(goo.gl/qvMoif). instagram.com uses server rendering for SEO. - Crhistoph Pojer: 페이스북 엔지니어 30 / 51
- 31. 장점 - 빠르다 - 옳다 - SEO 자바스크립트를 실행하지 않아도 콘텐츠를 읽을 수 있으므로 검색 엔진 최적화(SEO: Search Engine Optimization) 측면에서 유리하다(goo.gl/qvMoif). 페이스북, 트위터 등 다른 서비스와 연동에 유리하다. instagram.com uses server rendering for SEO. - Crhistoph Pojer: 페이스북 엔지니어 31 / 51
- 35. 구현 방법 35 / 51
- 36. 시간 표시 - HTML 출력 <!doctype html> <html> <head> <title>시간 표시</title> <script src="app.js"></script> </head> <body> <div id="root"> <p>Wed Dec 07 2016 15:00:17 GMT+0900 (KST)</p> </div> </body> </html> 36 / 51
- 37. 시간 표시 - React 앱 // app.js import React from 'react'; export default class App extends React.Element { componentDidMount() { this.timeoutId = setInterval( this.tick.bind(this), 1000 ); } componentWillUnmount() { clearTimeout(this.timeoutId); } tick() { const dateStr = new Date().toString(); this.setState({ date: dateStr }); } render() { return <p>{this.state.date}</p> } } 37 / 51
- 38. 시간 표시 - 클라이언트 // client.js import React from 'react'; import { render } from 'react-dom'; import App from './app'; render( <App />, document.getElementById('root') ); 38 / 51
- 40. Node.js 서버 // server.js import { renderToString } from 'react-dom/server'; import App from './app'; function handleRender(res, res) { const html = renderToString( <App /> ); res.send(`<!doctype html> <html> <head> <title>시간 표시</title> <script src="app.js"></script> </head> <body> <div id="root">${html}</div> </body> </html>`); } 40 / 51
- 43. 구성1: 다른 언어 웹서버 + Node 렌더링 최초 렌더링 이후부터는 API를 통해 서버에 데이터를 요청하고 이를 사용해 클라이언트에서 렌더링 클라이언트 렌더링 43 / 51
- 45. 구성2: Node 웹 서버 + 다른 언어 API 서버 Node 렌더링 서버대신 쉘 스크립트를 사용하는 경우도 있음 최초 접속시 Node 웹 서버가 렌더링 결과 반환 45 / 51
- 51. 감사합니다. 51 / 51