react | SDT 攻城獅區

Steven 網頁工程師心得分享

Hsu Steven — Wed, 16 Dec 2020 10:09:28 +0000

網頁工程師
網頁可以區分為前端及後端還有資料庫各個工程師
(其學習不是要把所有語言指令背下來，是好比今天有個功能需要完成，你”大概”知道在google搜尋什麼相關指令或是方法，解決問題就好)

前端有兩種
1. 單純的網頁設計師，大約就是使用illustrator 跟 photoshop 設計網頁樣式
2. 需要會程式邏輯的網頁設計工程師，類似當一般使用者按下按鈕促發一些功能或設計一些資料樣式的處理，跟後端溝通，需要會的語言->新手建議 HTML5, CSS3, jquery, js , 中高水準學習為Angular, React, Vue

後端語言為以下多種類型
1. C# 微軟派系，為C#工程師，程式部署在iis上面，通常運行Microsoft SQL Server
2. php 開源派系，為php工程師，程式部署在apache or tomcat上面，通常運行在Linux環境上面，中大型企業使用Redhat , 小型公司運行在Ubuntu
3. java Oracle 派系為java工程師，程式部署在tomcat or jBoss上面，通常運行在Linux環境上面，中大型企業使用Redhat , 小型公司運行在Ubuntu
4. Node.js 開源派系，為node.js工程師，程式部署在pm2上面，通常運行在Linux環境上面，通常運行在Linux環境上面，屬Ubuntu市佔率為多數。
5. python 開源派系為python工程師，程式部署在系統啟動時的指令上面，通常運行在Linux環境上面，通常運行在Linux環境上面。
6. Ruby on Rails 沒玩過，不清楚了 >.<

資料庫工程師
1. noSQL => MongoDB, RedisDB (新型大數據以轉型使用MongoDB)
2. SQL => SQL Server, MySQL, MariaDB, DB2 (SQL為目前市場大多數應用派系)

以上內容參考參考，很多keyword，可以先嘗試了解前端工程師, 後端工程師, 資料庫工程師，這三種類型，選擇想前往的道路，

以下個人經驗
前端 => 看得到畫面，可以第一接觸到使用者的體驗，成就感較高，也會被外面長官器重
後端 => 第一次處理的邏輯，會不熟悉，沒感覺自己在做什麼，目標空洞，但有一兩次經驗後，後面得心印手，大概就只有這樣的把戲了！
資料庫端 => 除非進到 FB, google, yahoo, 等非常前面科技的龍頭水準，才會有SQL優化條件，不然普遍把SQL 摸熟，不外乎CRUD的指令 CREATE, SELECT, UPDATE, DELETE, 比對條件 WHERE，然後就是養老了！！

以上是目前本人所看到產業大方向的情況，小弟一些愚昧的見解，沒有要跟任何派系的高手爭論。

The post Steven 網頁工程師心得分享 first appeared on SDT 攻城獅區.

React webpack v3 升級 v4 錯誤訊息

Hsu Steven — Sun, 26 Jan 2020 16:20:51 +0000

今天嘗試將就專案的webpack從v3升到v4，結果webpack-dev-middleware，一開啟一直跳出此錯誤訊息：

You are currently using minified code outside of NODE_ENV === ‘production’. This means that you are running a slower development build of Redux. You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify or DefinePlugin for webpack (http://stackoverflow.com/questions/30030031) to ensure you have the correct code for your production build.

找了很多文章，都是說在webpack.config.js加上此句，

new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify('development')
            }
        })

或是將react-router從v3升級v4，但我原本就使用4.0.0了，但還是嘗試升級看看，

反而我從4.0.0升到4.0.5又出現其他錯誤訊息，只好將回4.0.0版本，

不管怎麼在設定檔案上做NODE_ENV的參數，都會報錯，

後來看到此command設定：

"dev": "webpack --mode development",

    "build": "webpack --mode production"

好像可以解決我的問題，但我又發現我是使用webpack-dev-middleware，

並沒有地方可以設定command，幸好在原本的webpack.config.js可以加上此參數

mode:”development”

module.exports = {
    mode:"development",
    //入口文件
    entry:{
        'webpack-hot-middleware/client',
        path.resolve(__dirname, 'react')
    },
...
...

設定完後，重新啟動start:dev，就沒有在跑出此錯誤訊息了！

mode此參數為v4所新增的。

Reference

https://blog.csdn.net/jiang7701037/article/details/80682662

The post React webpack v3 升級 v4 錯誤訊息 first appeared on SDT 攻城獅區.

Gatsby (React) 移除meta顯示名稱及版本

Hsu Steven — Sun, 26 Jan 2020 02:02:37 +0000

今天早上看到之前所做的縮網址工具，用偵測工具發現顯示版本，

網站在head裡顯示一些開發工具的框架及版本其實都是有安全問題的疑慮，

Gatsby build出來的default文件在head可以找到以下的詞，

這樣一來有心人士就可以得知此版，依照此版漏洞做攻擊，

幸好到官網查詢一下，不難解決。

# 安裝gatsby套件
$ npm i -S gatsby-plugin-remove-generator

找gatsby-config.js 做plugin設定

// default
module.exports = {
  ...
  plugins: [
    'gatsby-plugin-remove-generator',
  ]
};


// options
module.exports = {
  ...
  plugins: [
    {
      resolve: 'gatsby-plugin-remove-generator',
      options: {
        // Only remove the Gatsby version number instead of the whole node
        removeVersionOnly: true,
        // Customise the generator string altogether.
        // Note: This has the highest precedence of the available options.
        content: 'Custom string'
      },
  ]
};

也可以使用option方式，自定義content，混淆有心人士。

Reference

https://www.gatsbyjs.org/packages/gatsby-plugin-remove-generator/

The post Gatsby (React) 移除meta顯示名稱及版本 first appeared on SDT 攻城獅區.

React v15 升級 v16 遇到 Uncaught TypeError

Hsu Steven — Sat, 25 Jan 2020 09:35:20 +0000

React v15 升到v16，本作者遇到的問題有二

react v16 版本中，已經把PropTypes给移出React，需改為以下方式，

// v15版本
import React, { Component, PropTypes } from 'react';

// v16版本
import PropTypes from 'prop-types';

另一問題為Uncaught TypeError: Cannot read property ‘func’ of undefined，

作者發生此問題是因為react-router，

可以嘗試將react-router升到 3.2.0版本，

請勿一次就升到最高react router v5版本，

會因相關性抱錯更多，除非舊專案所用到的react套件均已更新，

否則不建議將每個node_module均升級到最高。

Reference

http://react-china.org/t/react-16/15384

http://react.html.cn/docs/typechecking-with-proptypes.html

The post React v15 升級 v16 遇到 Uncaught TypeError first appeared on SDT 攻城獅區.

Gatsbyjs 新增內容於 head

Hsu Steven — Fri, 27 Dec 2019 06:14:36 +0000

用gatsbyjs可以快速製作出react static網頁，

但是要將google adsense 加入時發現，default設定沒有放head的方式，

所以官方也提供類似的方法。

# 進入專案資料夾下，執行複製指令
$ cp .cache/default-html.js src/html.js

$ nano /src/html.js

# 內容如下
import React from "react"
import PropTypes from "prop-types"

export default function HTML(props) {
  return (
    
      
        
        
        
        {props.headComponents}
      
      
        {props.preBodyComponents}
        
        {props.postBodyComponents}
      
    
  )
}

HTML.propTypes = {
  htmlAttributes: PropTypes.object,
  headComponents: PropTypes.array,
  bodyAttributes: PropTypes.object,
  preBodyComponents: PropTypes.array,
  body: PropTypes.string,
  postBodyComponents: PropTypes.array,
}

將想放入的GA, Google Adsense都可以放入Head裡面，

下次build product就可以看見Head有自定義的內容。

Reference

https://www.gatsbyjs.org/docs/custom-html/

The post Gatsbyjs 新增內容於 head first appeared on SDT 攻城獅區.