제6장: JavaScript Fatigue와 메타프레임워크의 구원 (2014-2017)

npm install react react-dom npm install --save-dev webpack webpack-cli webpack-dev-server npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react npm install --save-dev eslint eslint-loader babel-eslint eslint-plugin-react npm install --save-dev style-loader css-loader file-loader npm install --save-dev html-webpack-plugin clean-webpack-plugin

const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: '[name].[hash].js' }, devtool: 'inline-source-map', devServer: { contentBase: './dist', hot: true, open: true }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: [ { loader: 'babel-loader' }, { loader: 'eslint-loader' } ] }, { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] } ] }, plugins: [ new CleanWebpackPlugin(['dist']), new HtmlWebpackPlugin({ inject: false, hash: true, template: './src/index.html', filename: 'index.html' }) ] };

{ "presets": [ ["@babel/env", { "useBuiltIns": "entry", "targets": { "browsers": "> 0.25%, not dead" } }], "@babel/preset-react" ], "plugins": [ "@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-object-rest-spread" ] }

{ "parser": "babel-eslint", "parserOptions": { "ecmaVersion": 2018, "sourceType": "module", "ecmaFeatures": { "jsx": true } }, "env": { "browser": true, "es6": true, "jest": true }, "extends": [ "eslint:recommended", "plugin:react/recommended", "airbnb" ], "plugins": [ "react" ], "rules": { "max-len": ["error", { "code": 100 }], "indent": ["error", 2], "quotes": ["error", "single"] } }

{ "scripts": { "start": "NODE_ENV=development webpack-dev-server --mode=development --hot", "build": "webpack --mode=production", "lint": "eslint src/**/*.js", "test": "jest" } }

npx create-react-app my-app cd my-app npm start

Zero Config File-system Based Routing Server Rendering by Default Automatic Code Splitting

npm install next react react-dom

export default function Home() { return <h1>Hello World</h1> }

npm run dev

React는 훌륭합니다. 하지만 SSR 설정이 너무 복잡해요. webpack 설정만 500줄이에요. 개발자들은 비즈니스 로직에 집중해야 하는데, 도구 설정에 시간을 낭비하고 있어요.

Next.js = React Nuxt.js = Vue

대부분의 웹사이트는 사실 정적입니다. 블로그? 정적이에요. 문서 사이트? 정적이죠. 마케팅 사이트? 대부분 정적입니다. 그런데 왜 매 요청마다 서버에서 렌더링하나요? 빌드할 때 한 번만 렌더링하면 되잖아요!

// pages/index.js import { graphql } from 'gatsby' export default function Home({ data }) { return ( <div> <h1>{data.site.siteMetadata.title}</h1> {data.allMarkdownRemark.edges.map(({ node }) => ( <article key={node.id}> <h2>{node.frontmatter.title}</h2> <p>{node.excerpt}</p> </article> ))} </div> ) } export const query = graphql` query { site { siteMetadata { title } } allMarkdownRemark { edges { node { id frontmatter { title } excerpt } } } } `

// 이건 여전히 안 됐어요 import db from 'database' export default function Page() { const data = db.query('SELECT * FROM posts') // ❌ 클라이언트에서 실행 불가 return <div>{data}</div> }

// Next.js 내부 const html = ReactDOMServer.renderToString(<App />)

// Next.js getServerSideProps export async function getServerSideProps() { const posts = await fetchPosts() // 1초 const user = await fetchUser() // 1초 return { props: { posts, user } } } // 총 2초 기다림