Uncategorized – Page 38 – 庭喵的出包星球

設計趨勢

反正就是變大…大多變大氣了，不像以前的設計會擠在中間，可能跟螢幕大小的演進也有關係，現在不用擔心是小螢幕，因為會做響應式支援。

這周在公司遇到Yves，他順便幫忙解惑了一下：
只要符合四大宣言，就是跑敏捷。
不過跑敏捷不等於跑scrum，跑scrum就要照它的flow走，沒有照著走的話，就是scrum, but…

敏捷不等於用新的技術，但敏捷代表持續學習（它的精神有）所以如果新的技術用了對軟體是有加分的話，就是可以導入的。（反應變化、符合市場需求）
refactor不等於rewrite，rewrite重寫程式之後，可能出現一堆舊的bug，以後又變成可能只有rewrite的人能維護，所以應該用完整自動化測試來包覆，再做refactor。（有了測試，保證改了不會出問題）

另外我還問了一個團隊有很多個專案，每個人負責不同專案的話怎麼跑敏捷？
他說可以用XP方式，分小組互相慢慢學習，讓不會做這個工作的人後來也會，不是說像我不會前端，學好了後端再去參與，而是直接去參與，一邊做一邊學。
時程壓太緊之類的是PO去負責協調的。

Jest 配置

在import css檔案的時候會有問題，這時候可以：
加一個styleMock.js檔案，把css都變成空物件

styleMock.js

module.exports = {};

加了之後在 jest.config.js 裡面對應這個檔案

module.exports = {
  setupFilesAfterEnv: ['<rootDir>/src/setUpTests.js'],
  moduleNameMapper: {
    '\\.(css)$': ['<rootDir>/src/mocks/styleMock.js'],
  },
};

C# List Class

C# | List Class – GeeksforGeeks
C# List Collection
List<T> Class

Product Market Fit

看書提到：要開發一個產品之前，要先確認它有沒有市場需求。

Array方法選用

const words = [{...}, {...},{...},{...},{...},{...}];

這時候想要取出其中一個物件，要用什麼方法呢？
如果使用filter，可能會變這樣
[{...}, {...}]
回傳的還是陣列，要取它裡面的值，需要這樣
words[0].value
no實在是敲級麻煩。非常的不直覺。那要用什麼勒？
這時候改用find，就直覺很多

const array1 = [{name: 'luna'}, {name: 'cura'}];
const found = array1.find(element => element.name === 'luna');

回傳結果：
> Object { name: "luna" }
這樣就會回傳物件了😭
所以如果只想要取一個物件的話，不要耍笨用filter，要用find

Async/Await

因為JavaScript是non-blocking，例如去買電影票排隊，排到跟剪票的人說：「欸，我沒帶票，我老婆要過來了，可以等我嗎？」剪票的人說：「不行，你後面還有一排人欸，你先站邊邊，等老婆來了再排啦。」這就是JavaScript的運作方式。

If something needs to wait, it will make you wait on the side.

Good code || Bad code

看了這篇，大致重點如下：

const fatLuna = { kg: 999, test: true };
const ano = { kg: 7, style: "flurry" };

要console.log的時候，
bad code：

console.log(fatLuna);
console.log(ano);

直接把變數印出來
Good code:

console.log(fatLuna, ano)

火鍋店

手把手的webpack + react教學

首先先開一個專案
npm init

開好專案之後，安裝webpack

npm install webpack webpack-cli --save-dev

npm install react react-dom

npm i @babel/core babel-loader @babel/preset-env --save-dev

安裝完之後，安裝react 和 react-dom，為了要用React
之後再安裝Babel，為了可以寫ES6+

安裝成devdependices是因為它只有開發的時候需要，因為build完就是編譯過後的。(同理，webpack也是）

還有webpack-dev-server

npm i webpack-dev-server -D

接下來，分資料夾dist和src
在src資料夾建個檔案 index.js

function component() {
  const element = document.createElement('div');
  element.innerHTML = 'Hi Luna';
  return element;
}

document.body.appendChild(component());

建好之後在根目錄再建一個資料夾dist，建一個index.html檔案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cuteLuna</title>
</head>
<body>
    <script src="main.js"></script>
</body>
</html>

注意這裡的main.js會自己生成
跑npx webpack就可以打包嘍！！

之後為了更客製化的設定，建一個webpack.config.js檔

const path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

再來打包，注意它的 mode: ‘production’ 其實是預設值，可是不打在設定檔的話，它會跳警告。
這裡的打包檔案說： main.js的大小是110bytes，比./src/index.js 166 bytes 還小

在package.json加這行，就不用一直打 npx webpack，可以改成打npm run build… (更長欸)
不過編輯器可以用按的啦

npm init
安裝webpack、webpack-cli
安裝react、reactDOM
安裝babel
建一個webpack.config.js檔來客製化設定webpack

生產需要用的套件，要用npm i，測試的套件( eslint, testing library… ) 安裝指令是npm i -D

By stating what dependencies a module needs, webpack can use this information to build a dependency graph.
webpack會依你import的套件，來生成一個dependency graph

平常要跑webpack，指令是npx webpack

接下來要做更進一步的設定

const HtmlWebPackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const path = require('path');
const webpack = require('webpack');

module.exports = {
  devtool: 'inline-source-map',
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.(scss|css)$/i,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
  ],
};

接下來參考這篇把dev-server架起來：
架webpack-dev-server在本機端跑跑

我的github參考：
https://github.com/catsheue/webpack

另外，為了不要手動改 index.html檔，需要這個套套：
HtmlWebpackPlugin

Category: Uncategorized