쪼렙 as! 풀스택

React, Next, Express, mobX, axios, scss 환경 꾸미기. 본문

개발 일지/Web & Server

React, Next, Express, mobX, axios, scss 환경 꾸미기.

코코앱 2018. 6. 11. 19:11

1. mkdir <폴더>, cd <폴더>


2. yarn init -y


3. yarn add next react react-dom mobx@4.3.1 mobx-react axios express @zeit/next-sass node-sass

(참고로 mobx5 는 es6기반으로, 익스플로러에서 아예 안돌아간다;;;)



4. yarn add --dev babel-plugin-transform-class-properties babel-plugin-transform-decorators-legacy


5. package.json 변경.

- "main": "index.js", 제거.

- scripts 추가.

"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "NODE_ENV=production node server.js"
},



6. root 에 .babelrc 추가.

{
"presets": [
"next/babel"
],
"plugins": [
"transform-decorators-legacy",
"transform-class-properties"
]
}


7. root에 tsconfig.json 추가.

{
"compilerOptions": {
"experimentalDecorators": true,
"allowJs": true
}
}



8. root 에 server.js 추가.

const express = require('express')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

// const mobxReact = require('mobx-react')
// mobxReact.useStaticRendering(true)


app.prepare()
.then(() => {
const server = express()
//public 폴더에 대한 static 파일들 사용하기.
server.use(express.static('public'))

server.get('/p/:id', (req, res) => {
const actualPage = '/post'
const queryParams = { id: req.params.id }
app.render(req, res, actualPage, queryParams)
})

server.get('*', (req, res) => {
return handle(req, res)
})

server.listen(3000, (err) => {
if (err) throw err
console.log('> Ready on http://localhost:3000')
})
})
.catch((ex) => {
console.error(ex.stack)
process.exit(1)
})




9. 전체 페이지에 통용될 DocumentLayout 만들기.

import { Fragment } from 'react'
import Head from 'next/head'

const DocumentLayout = (props) => (
<Fragment>
<Head>
<title>{props.title}</title>
<meta property="og:title" content={props.title} />
<meta property="og:image" content={props.ogImage} />
</Head>
{props.children}

</Fragment>
)

export default DocumentLayout



10. pages 폴더 만들고. index.js 만들기.

import DocumentLayout from '../components/DocumentLayout'
import {Component} from 'react'

class Index extends Component {


render() {

return (
<DocumentLayout title="인덱스" ogImage="https://test.com/test.png">
<div>
Hello
</div>
</DocumentLayout>
)
}
}

export default Index




12. 루트에 next.config.js 추가.

const withSass = require('@zeit/next-sass')
module.exports = withSass()




13. /pages/_document.js 추가.

/*
In production the stylesheet is compiled to .next/static/style.css.
The file will be served from /_next/static/style.css
You could include it into the page using either next/head or a custom _document.js.
*/

import Document, { Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
render () {
return (
<html lang="ko">
<Head>

<meta charSet="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="author" content="나." />

{/* dev 환경에서는, 파일을 찾을 수 없지만, 프로덕션 빌드하면 생긴다. */}
<link rel='stylesheet' href='/_next/static/style.css' />

</Head>
<body>
<Main />
<NextScript />
</body>
</html>
)
}
}




14. 

저작자표시 비영리 변경금지

'개발 일지 > Web & Server' 카테고리의 다른 글

Javascript - File 로부터 blobURL 가져오기  (0) 2018.06.29
18.06.12 Javascript - Promise 객체 다루기.  (0) 2018.06.12
18.06.11. React - Next.JS 로 SSR 환경 꾸미기.  (0) 2018.06.11
React - 16.3 이상에서 DOM 레퍼런스 가져오기. 18.06.08  (0) 2018.06.08
REACT - create-react-app 에서 mobX 사용하기. 18.06.07  (0) 2018.06.07
'개발 일지/Web & Server' Related Articles more
Comments