Gatsby: ๊ฐœ์ธ ๋น„ ๋นŒ๋“œ์—์„œ ์ž‘๋™ํ•˜์ง€ ์•Š๋Š” ํƒ์ƒ‰

์— ๋งŒ๋“  2018๋…„ 12์›” 12์ผ  ยท  2์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: gatsbyjs/gatsby

๊ธฐ์ˆ 

ํ•ญ์ƒ ๊ฒฝ๋กœ ๋งค๊ฐœ ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฐฉ๋ฌธํ•˜๋Š”์ง€ ํ™•์ธํ•˜๋ ค๋Š” /trial ํŽ˜์ด์ง€๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‚ด ์ƒ์„ฑ์ž์—์„œ this.props.location.search ๋ฅผ ํ™•์ธํ•˜๊ณ  ๊ฑฐ์ง“ (๋น„์–ด ์žˆ์Œ)์ด๋ฉด /trial/?product=foobar ๋กœ ์ด๋™ํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

๋‚ด ์ฝ”๋“œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

import React from 'react'
import { navigate } from 'gatsby'

class Foobar extends React.Component {
  constructor(props) {
    super(props)
    this.redirectIfNecessary()
  }

  redirectIfNecessary() {
    // Make prospect the default product
    const { location } = this.props
    const { search } = location
    if (!search) {
      navigate('/trial/?product=foobar', {
        state: {
          product: 'foobar',
        },
      })
    }
  }

  render() {
    return <div>Hello, world</div>
  }
}

๊ธฐ๋Œ€ vs ํ˜„์‹ค

์ด๊ฒƒ์€ ๊ฐœ๋ฐœ ์‹œ๊ฐ„ ๋™์•ˆ ์ž˜ ์ž‘๋™ํ•˜์ง€๋งŒ gatsby build ์‹คํ–‰ํ•˜๋ฉด

error Building static HTML for pages failed

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND

  186 | 
  187 | var navigate = function navigate(to, options) {
> 188 |   window.___navigate(withPrefix(to), options);
      | ^
  189 | };
  190 | 
  191 | exports.navigate = navigate;


  WebpackError: ReferenceError: window is not defined

ํ™˜๊ฒฝ

gatsby info --clipboard

  System:
    OS: macOS 10.14.1
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 11.3.0 - /usr/local/bin/node
    Yarn: 1.12.3 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 70.0.3538.110
    Firefox: 63.0.3
    Safari: 12.0.1
  npmPackages:
    gatsby: ^2.0.64 => 2.0.64 
    gatsby-image: ^2.0.20 => 2.0.22 
    gatsby-plugin-manifest: ^2.0.10 => 2.0.11 
    gatsby-plugin-offline: ^2.0.19 => 2.0.19 
    gatsby-plugin-react-helmet: ^3.0.4 => 3.0.4 
    gatsby-plugin-react-svg: ^2.0.0 => 2.0.0 
    gatsby-plugin-sass: ^2.0.7 => 2.0.7 
    gatsby-plugin-sharp: ^2.0.15 => 2.0.15 
    gatsby-source-filesystem: ^2.0.11 => 2.0.11 
    gatsby-transformer-sharp: ^2.1.8 => 2.1.9 
  npmGlobalPackages:
    gatsby-cli: 2.4.6
question or discussion

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

์•ˆ๋…•ํ•˜์„ธ์š” @kevinmichaelchen

window ์€ (๋Š”) ๋นŒ๋“œ ์‹œ๊ฐ„์ด ์•„๋‹Œ ๋ธŒ๋ผ์šฐ์ €์—์„œ๋งŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— Webpack์€์ด๋ฅผ ๋นŒ๋“œํ•˜์ง€ ๋ชปํ–ˆ์Šต๋‹ˆ๋‹ค.

๋Œ€์‹  redirectIfNecessary ํ˜ธ์ถœ์„ constructor ์—์„œ componentDidMount ๋กœ ์ด๋™ํ•˜์—ฌ์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒํ•˜๋ฉด ๋นŒ๋“œ ์‹œ๊ฐ„์ด ์•„๋‹Œ ํด๋ผ์ด์–ธํŠธ ์ธก์—์„œ๋งŒ ์‹คํ–‰๋ฉ๋‹ˆ๋‹ค.

๋„๋‹ฌ ๋ผ์šฐํ„ฐ ์˜

์ด ๋ฌธ์ œ๋Š” Gatsby์—๋งŒ ๊ตญํ•œ๋œ ๊ฒƒ์ด ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์— ์ง€๊ธˆ์€์ด ๋ฌธ์ œ๋ฅผ ๋‹ซ๊ฒ ์Šต๋‹ˆ๋‹ค. ๋‹ค๋ฅธ ๋ฌธ์ œ๊ฐ€ ์žˆ์œผ๋ฉด ์–ธ์ œ๋“ ์ง€ ๋‹ค์‹œ ์—ด์–ด๋ณด์„ธ์š”.

๋ชจ๋“  2 ๋Œ“๊ธ€

์•ˆ๋…•ํ•˜์„ธ์š” @kevinmichaelchen

window ์€ (๋Š”) ๋นŒ๋“œ ์‹œ๊ฐ„์ด ์•„๋‹Œ ๋ธŒ๋ผ์šฐ์ €์—์„œ๋งŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— Webpack์€์ด๋ฅผ ๋นŒ๋“œํ•˜์ง€ ๋ชปํ–ˆ์Šต๋‹ˆ๋‹ค.

๋Œ€์‹  redirectIfNecessary ํ˜ธ์ถœ์„ constructor ์—์„œ componentDidMount ๋กœ ์ด๋™ํ•˜์—ฌ์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒํ•˜๋ฉด ๋นŒ๋“œ ์‹œ๊ฐ„์ด ์•„๋‹Œ ํด๋ผ์ด์–ธํŠธ ์ธก์—์„œ๋งŒ ์‹คํ–‰๋ฉ๋‹ˆ๋‹ค.

๋„๋‹ฌ ๋ผ์šฐํ„ฐ ์˜

์ด ๋ฌธ์ œ๋Š” Gatsby์—๋งŒ ๊ตญํ•œ๋œ ๊ฒƒ์ด ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์— ์ง€๊ธˆ์€์ด ๋ฌธ์ œ๋ฅผ ๋‹ซ๊ฒ ์Šต๋‹ˆ๋‹ค. ๋‹ค๋ฅธ ๋ฌธ์ œ๊ฐ€ ์žˆ์œผ๋ฉด ์–ธ์ œ๋“ ์ง€ ๋‹ค์‹œ ์—ด์–ด๋ณด์„ธ์š”.

์‚ฌ์šฉ์ž ๋ธŒ๋ผ์šฐ์ € ๋ชจ๋‚˜๋“œ ์ €์žฅ์†Œ๋Š” ์ด์— ๋Œ€ํ•œ ๋น ๋ฅธ ์ˆ˜์ •์ž…๋‹ˆ๋‹ค!

https://www.npmjs.com/package/browser-monads

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰

๊ด€๋ จ ๋ฌธ์ œ

benstr picture benstr  ยท  3์ฝ”๋ฉ˜ํŠธ

signalwerk picture signalwerk  ยท  3์ฝ”๋ฉ˜ํŠธ

totsteps picture totsteps  ยท  3์ฝ”๋ฉ˜ํŠธ

brandonmp picture brandonmp  ยท  3์ฝ”๋ฉ˜ํŠธ

kalinchernev picture kalinchernev  ยท  3์ฝ”๋ฉ˜ํŠธ