[2024-09-27 09:51:53.718] error: [Data transfer] Error in websocket upgrade request
[2024-09-27 09:51:53.718] error: Transfer Upgrade header expected 'websocket', found 'undefined'. Please ensure that your server or proxy is not modifying the Upgrade header.
Error: Transfer Upgrade header expected 'websocket', found 'undefined'. Please ensure that your server or proxy is not modifying the Upgrade header.

error ini ditemukan di strapi version v4.15.0 pakai node v18.20.4. jadi casenya itu ketika strapi production mau pull data dari staging atau sebaliknya, menggunakan perintah ini

$ strapi transfer --to https://strapi.example.com/admin --to-token <token>

ketika dijalankan muncul error berikut

? The transfer will delete existing data from the remote Strapi! Are you sure you want to proceed? Yes
[2024-09-27 17:20:21.618] error: [FATAL] Failed to initialize the connection: Unexpected server response 200
Transfer process failed.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

setelah dicek ternyata di lognya strapi remote terdapat error

[2024-09-27 09:51:53.718] error: [Data transfer] Error in websocket upgrade request
[2024-09-27 09:51:53.718] error: Transfer Upgrade header expected 'websocket', found 'undefined'. Please ensure that your server or proxy is not modifying the Upgrade header.
Error: Transfer Upgrade header expected 'websocket', found 'undefined'. Please ensure that your server or proxy is not modifying the Upgrade header.

bagaiman cara fixnya distrapi sendiri karena transfer data ini menggunakkan websocket, maka di nginxnya perlu diupdate.

buka file berikut /etc/nginx/sites-available/yourdomain

dan tambahkan konfigurasi berikut

server {
    listen 80;
    server_name <yourdomain>;
    location / {
        proxy_pass http://localhost:1337;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_set_header Host $host;
        include proxy_params;
    }
}

dan coba lakukan transfer lagi

reference:

• https://docs.strapi.io/dev-docs/data-management/transfer

su -c "dnf install qemu"

cek installasi

ls /usr/bin/qemu-*

Run ISO​

buat terlebih dahulu file .img, untuk data installasi dengan perintah

qemu-img create -f qcow2 <nama-img>.img 10G
# contoh:

qemu-img create -f qcow2 testing-image.img 10G

untuk storage os sesuikan dengan kebutuhan standarnya img sebagai berikut windows: 40G primeos: 20G remixos: 20G archcraft: 10G

kemudian jalankan iso deng perintah berikut

# prime os
qemu-system-x86_64 \
  -m 2048 \
  -smp 2 \
  -cpu host \
  -cdrom ./PrimeOS-2.1.3-64-bit-20220719-BETA.iso \
  -hda primeos.img \
  -boot d \
  -net nic \
  -net user \
  -enable-kvm

# windows
  qemu-system-x86_64 \
  -m 4096 \
  -smp 2 \
  -cpu host \
  -drive file=windows.img,format=qcow2 \
  -cdrom ./windows-10.iso \
  -boot d \
  -net nic \
  -net user \
  -enable-kvm \
  -vga qxl

  
#  archraft
qemu-system-x86_64 \
  -m 4096 \
  -smp 2 \
  -cpu host \
  -drive file=arcraft.img,format=qcow2 \
  -cdrom archcraft.iso \
  -boot d \
  -net nic \
  -net user \
  -enable-kvm \
  -vga qxl


#  remix os
  qemu-system-x86_64 \
  -m 2048 \
  -smp 2 \
  -cpu host,+vmx \
  -drive file=remix.img,format=qcow2 \
  -cdrom ./remix.iso \
  -boot d \
  -net nic \
  -net user \
  -enable-kvm \
  -vga qxl

untuk meneambahkan size img bisa menggunakkan command berikut

qemu-img resize remixos.img +20G

atau

qemu-img resize remixos.img 40G

cek ukuran yang sudah diresize

qemu-img info remixos.img

Package ini memudahkan developer untuk membuat tooltip, Dengan beberapa fitur seperti position dan variant. Floating UI

Hal ini terjadi karena perbedaan task yang dijalankan oleh next build dengan next lint. next lint ini menjalankan linter saja sedangkan next build akan menjalankan 2 perintah yaitu tsc dan lint, ini membuat perbedaan error. biasanya error tersebut berasal dari tsc yang sedang menjalankan type checking

untuk mengatasi tesebut, bisa menambahkan perintah ini

tsc --noemit && next lint

Reference:

• https://stackoverflow.com/questions/55002137/typescript-noemit-use-case
• https://github.com/vercel/next.js/discussions/31439

install fzf​

untuk install fzf jalankan perintah berikut:

sudo dnf -y install fzf

Cheatsheet​

mencari file dan open file

nvim $(fzf)

copy file

cp $(fzf) ~/path-target

Refenrece:

• https://www.redhat.com/sysadmin/fzf-linux-fuzzy-finder
• https://www.freecodecamp.org/news/fzf-a-command-line-fuzzy-finder-missing-demo-a7de312403ff/

E5108: Error executing lua .../.local/share/nvim/lazy/plenary.nvim/lua/plenary/job.lua:107: rg: Executable not found
stack traceback:
    .../.local/share/nvim/lazy/plenary.nvim/lua/plenary/job.lua:107: in function 'new'
    ...share/nvim/lazy/nvim-spectre/lua/spectre/search/base.lua:122: in function 'search'
    ....local/share/nvim/lazy/nvim-spectre/lua/spectre/init.lua:610: in function 'search'
    ....local/share/nvim/lazy/nvim-spectre/lua/spectre/init.lua:329: in function 'on_search_change'
    [string ":lua"]:1: in main chunk
stack traceback:
    [C]: in function 'error'
    .../.local/share/nvim/lazy/plenary.nvim/lua/plenary/job.lua:107: in function 'new'
    ...share/nvim/lazy/nvim-spectre/lua/spectre/search/base.lua:122: in function 'search'
    ....local/share/nvim/lazy/nvim-spectre/lua/spectre/init.lua:610: in function 'search'
    ....local/share/nvim/lazy/nvim-spectre/lua/spectre/init.lua:329: in function 'on_search_change'
    [string ":lua"]:1: in main chunk

Error ini membuat lazyvim tidak bisa mencari kata pada beberapa file dengan baik. Untuk mengatasi tersebut bisa menginsntall rigrep terlebih dahulu

untuk tutorialnya bisa langsung ke githubnya

Rigrep Github

Setelah itu coba refresh lazyvimnya

Reference:

• https://github.com/nvim-pack/nvim-spectre/issues/212

Untuk mengatasi ini bisa menggunakan cara seperti ini

Resolve conflict di local​

pertama update dulu branch asal dengan perintah

git switch main
git pull origin main

kemudian pindah ke branch yang ada konfliknya dan lakukan merge dengan branch asal

git switch feature/conflict-branch
git merge main

ketika posisi disini, merge mengalami konflik dan saat kondisi seperti ini lakukan installasi dependency lagi. Biarkan yarn/npm melakukan resolve sendirinya

yarn install

atau

npm install

nanti outpunya akan seperti ini

$ yarn install

yarn install v1.0.1
info Merge conflict detected in yarn.lock and successfully merged.
[1/4] Resolving packages...

jika sudah selesai. lakukan stage file yang konflik

git add ./path/nama-file.js

atau bisa juga

git  merge --continue

kemudian push commit ke origin. dan coba check lagi apakah conflik sudah tersolve

jadi ketika menjalankan image nextjs sertakan option --env-file untuk memberikan env pada image tersebut, hal ini digunakan untuk menghindari project mengalami error ketika ingin mengakses env tersebut

git worktree <path for save worktree> <name branch>

example

git worktree .worktree/feature-jira345 feature-jira345

for switch worktree

cd .worktree/feature-jira345

and you can run terminal in directory

Remove worktreee​

if worktree not use, you can delete worktree use command

git worktree remove .worktree/feature-jira345

Show list worktree​

for show list worktree

git worktree list

Additional​

sometime project not running normally, please check your .env. because .env file is ignore by git

Reference:​

https://dev-notes.eu/2022/06/Branch-Management-With-Git-Worktree/ https://geekmonkey.org/rethink-your-git-workflow-with-git-worktree/ https://dev.to/yankee/practical-guide-to-git-worktree-58o0 https://www.gitkraken.com/learn/git/git-worktree

Melakukan resolve pada branch feature​

Cara pertama ini bisa dibilang cara yang aman untuk mengatasi masalah konflik kode. Dikarenakan kode feature akan diupdate dengan kode branch asal dan dilakukan resolve pada kode tersebut. sehingga apabila ada error, branch asal masih aman. Untuk caranya sebagai berikut

Ada dua branch : develop(branch asal) dan feature branch

saat branch feature ini dibuat pull request, ternyata di pull request terjadi konflik. maka perlu balik ke git lokal

Pertama, update branch asal terlebih dahulu

git switch develop && git pull

setelah diupdate, maka branch feature juga diupdate juga

git switch feature

dan lakukan merge branch develop ke branch feature

git merge develop

maka akan muncul file file yang terjadi conflict. pilih baris mana saja yang dibutuhkan. kemudian lakukan stage dan commit. Apabila sudah selesai lakukan push merge tadi ke remote

git push origin feature

Dengan demikian konflik di pull request sudah solve

Solve konflik dibranch asal​

Cara kedua ini lebih singkan dibandingkan dengan cara pertama, karena konflik akan dimerge dan diresolve dalam branch asalnya

Pertama update branch asal terlebih dahulu

git switch develop && git pull

setelah itu lakukan merge branch feature ke branch asal

git merge feature

lakukan solve konfliknya dan kemudian push ke remote dengan perintah

git push origin develop

maka pull request feature akan solved dan digabungkan langsung

Error ini disebabkan karena Next.js akan berjalan pada runtime dan buildtime. padahal env hanya berjalan ketika proses runtime saja. alhasil env tidak terdefinisi. untuk mengatasi problem ini bisa menambahkan env pada Dockerfile atau docker compose dan cara lain yaitu dengan publicRuntimeConfig

Cara menambakannya seperti ini.

Buka file nex.config.ja dan tambahkan kode berikut

module.export = {
  // other code
  publicRuntimeConfig: {
    NEXT_PUBLIC_EXAMPLE_ENV: NEXT_PUBLIC_EXAMPLE_ENV,
    NEXT_PUBLIC_OTHER_ENV: NEXT_PUBLIC_OTHER_ENV,
  },
  // other code
};

kemudian coba build ulang image tadi dengan

docker build <name-image> .

Dan jalankan image kemudian akses kembali app yang sudah dibuild tadi

CI dan CD merupakan 2 tahapan yang dimana CI untuk melakukan integrasi/sync kode dengan repository ataupun melakukan pengujian kode, apakah kode tersebut layak untuk dilakukan deployment ke production

sedangkan CD merupakan tahapan kelanjutan dari proses CI, yaitu proses deployment ke production. Dalam tahapan ini kode yang sudah dilakukan build/compile akan dilakukan proses menjalankan project, sehingga project dapat diakses oleh pengguna

Tool untuk C/CD ini diantara lain: azure, jenskins, gitlab CI/CD.

Untuk tutorial ini, akan menggunakan gitlab CI/CD sebagai toolnya

Siapakan project yang ingin dilakukan deployment, jika belum punya bisa buat terlebih dahulu dengan perintah

npx create-next-app cicd-next

setelah itu masuk ke directory foldernya

cd cicd-next

dan buat file gitlab-ci.yml, atau bisa menggunakan perintah

touch gitlab-ci.yml

kemudian pastekan kode berikut

stages:
  - build
  - deploy
before_script:
  - npm install
  - npm install pm2 -g
build:
  stage: build
  image: node:16
  script:
    - echo "Start build"
    - npm run build
  cache:
    paths:
      - node_modules
  artifacts:
    paths:
      - .next
      - build
    expire_in: 1 day
  only:
    - main
deploy:
  stage: deploy
  image: node:16
  script:
    - echo "Start deploy"
    - pm2 start npm -- start
  only:
    - main

Untuk lakukan commit dan push ke remote

git add . && git commit -m "ci/cd: create gitlab-ci.yml" && git push

Konfigurasi Gitlab Runner di VPS​

Agar konfigurasi gitlab-ci.yml yang ada direpo dapat dijalankan dan dimonitoring oleh gitlab, maka perlu install gitlab runner terlebih dahulu.

install gitlaba runner dengan command berikut

sudo apt-get install gitlab-runner

atau

sudo dnf install gitlab-runner

atau jika ingin install secara manual, bisa ikut instruksi di link berikut Gitlab Runner

Untuk check apakah gitlab runner sudah sukses terinstall, jalankan perintah

gitlab-runner -v

Register Gitlab Runner pada VPS​

Langkah selanjutanya setelah install gitlab runner yaitu melakukan register gitlab runner. Fungsi register ini yaitu untuk melakukan sync/koneksi antara gitlab runner dan host gitlab

npm install eslint -D

setelah selesai jalankan perintah

eslint --init

kemudian akan muncul prompt untuk konfigurasi lainya seperti ini. sesuaikan dengan kebutuhan atau ikutin sesuai dengan langkah dibawah

You can also run this command directly using 'npm init @eslint/config'.
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · JSON
The config that you've selected requires the following dependencies:

eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · npm
Successfully created .eslintrc.json file in ..../path/project

setelah prompt terisi maka dalam folder root terdapat satu file .eslintrc.json yang berisi config dari eslint

instal juga plugin untuk eslint dan prettier

npm install eslint-config-prettier eslint-plugin-prettier prettier

fungsi plugin ini agar eslint dan prettier tidak mengalami konflik, karena eslint dan prettier ketika diinstall disatu project yang sama, maka kedua ini seperti irisan

hasil akhir file .eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "overrides": [],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint"],
  "rules": {}
}

langkah terakhir, buat file prettierrc.json. Masukan kode berikut

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": false,
  "tabWidth": 2
}

buat satu file lagi, beri nama .prettierignore. file ini berfungsi untuk mengabaikan file file yang tidak akan diformat oleh prettier

Beberapa plugin untuk typescript

npm install eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest

Error saat ingin push update local ke remote​

hint: Updates were rejected because the remote contains work that you do
hint: not have locally. This is usually caused by another repository pushing
hint: to the same ref. You may want to first integrate the remote changes
hint: (e.g., 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.

dari error tersbut, disuruh untuk melakukan git pull terlebih dahulu. tapi ketika dilakukan git pull terdapat warning juga seperti ini.

Error saat pull update remote ke local​

hint: You have divergent branches and need to specify how to reconcile them.
hint: You can do so by running one of the following commands sometime before
hint: your next pull:
hint:
hint:   git config pull.rebase false  # merge
hint:   git config pull.rebase true   # rebase
hint:   git config pull.ff only       # fast-forward only
hint:
hint: You can replace "git config" with "git config --global" to set a default
hint: preference for all repositories. You can also pass --rebase, --no-rebase,
hint: or --ff-only on the command line to override the configured default per
hint: invocation.

warning tersebut biasanya muncul ketika config.pullnya belum disetting terlebih dahulu. bisa jadi saat baru pindah komputer baru ataupun yang lain.

solusinya yaitu perlu malakukan set config gitnya sebelum memilih perlu diketahui dari masing masing value config tersebut

jika memilih

git config pull.rebase false

maka setiap perubahan diremote akan dilakukan merge ke local, dengan ini makan akan ada satu commitan baru diatas commit updatean dibranch remote

sedangkan jika memilih

git config pull.rebase true

maka setiap perubahan/commit di remote akan dilakukan rebase pada local, dan tidak akan ada commitan di branch local

Dari kedua hal tersebut manakah yang paling aman, semuanya aman asalkan sudah tahu perbedaannya. kalau misalnya disuruh memilih pilih yang

git config pull.rebase false

agar nantinya disaat ingin melakukan push ke remote tidak mengalami error lagi. hal ini terjadi karena fitur rebase akan merubah kode yang berbeda dengan yang ada diremote. Dan mau tidak mau harus melakukan git push --force, dan ini lumayan beresiko untuk dilakukan

Keterangan tambahan:​

ketika melakukan git push --force semua kode yang ada diremote akan ditimpa dengan kode yang ada dilocal. sehingga semua perubahan yang ada diremote mungkin saja akan hilang.

kemudina install dependency menggunakan perintah

npm install typescript @types/react @types/node

maka didalam file tsconfig.json akan dibuatkan config untuk typescriptnya.

setelah semua terinstall ubah, file yang formatnya *.js ke *.ts atau *.jsx ke *.tsx

kemudian jalankan server next.js dengan perintah

npm run dev

Additional​

jika saat mengembangkan projek sudah biasa menggunakan typescript. Pada tsconfig.json ubah menjadi

{
  "compilerOptions": {
    "strict": true
  }
}

namun jika ingin menggunakannya dengan javascript juga, ubah menjadi seperti ini

{
  "compilerOptions": {
    "strict": false
  }
}

/[abc]/
/[a-zA-Z]/

kemudian untuk menggunakan regexp dapat digunakan dengan function seperti ini

const r = /[aeiou]/gi.test("hello");
console.log(r);
//output
true;

atau bisa menggunakan function pada object string

const s = "hello";
const r = s.match(/[aeiou]/gi);

console.log(r)[
  // output
  ("e", "o")
];

untuk membuat regexp yang perlu diketahui terlebih dahulu yaitu bagaimana pola yang ingin dicari.

sebagai contoh ada sebuah string

Hai, Apa Kabar? Bagaimana Kesehatan Kamu

Pada string diatas kita akan mencari:

• Satu suku kata
• Berawalan huruf kapital
• Ambil semua kata yang masuk pada 2 kondisi diatas

Kemudian kita pecah kedalam beberapa regexp

• \w+ = Satu suku kata
• [A-Z] =Berawalan huruf kapital
• g = Semua yang masuk pada kondisi diatas

maka kita susun sebagai berikut

/[A-Z]\w+/g

dengan begini akan mencari kata kata pada sebuah string yang memiliki kondisi cari semua kata kata yang berawalan huruf kapital

penggunaan simbol slash(/)​

apabila dalam sebuah text terdapat / seperti pada url http://localhost, maka sebelum slash tersebut perlu ditambahkan backslash untuk mencegah penutupan regexp

misal sebagai contoh regexp seperti ini

/http://localhost/g

jika regexp seperti ini digunakan maka regexp akan memunculkan error invalid regular expresion. maka perlu dirubah seperti dibawah ini

/http:\/\/localhost/g

dengan ini regexp akan berjalan sebagai mana mestinya

Regular expresion options​

/: Tanda garis miring mula dan akhir yang digunakan untuk menandai awal dan akhir dari ekspresi regular.

[^aeiou]: Tanda ^ di dalam tanda kurung siku menunjukkan penggunaan "negasi" atau "not". Jadi,

[aeiou] berarti mencocokkan satu huruf vokal, sedangkan [^aeiou] berarti mencocokkan satu huruf yang bukan vokal atau huruf konsonan.

\s: Escaped character \s digunakan untuk mencocokkan karakter whitespace (spasi, tab, line break).

\W: Escaped character \W digunakan untuk mencocokkan karakter non-alphanumeric (karakter selain huruf, angka, dan underscore).

\d: Escaped character \d digunakan untuk mencocokkan satu digit angka.

/g: Flag g (global) menunjukkan bahwa pencarian harus dilakukan secara global untuk menemukan semua kemunculan yang cocok dalam teks.

/i: Flag i (case-insensitive) menunjukkan bahwa pencarian harus dilakukan tanpa memperhatikan perbedaan antara huruf besar dan kecil.

Regexp example​

Vowel​

/[aeiou]/gi

Konsonan​

/[^aeiou]/gi

Konsonan dengan whitespace​

/[^aeiou\s\W\d]/gi

Text didalam bracket curly​

/\{(.*?)\}/g

Text didalam bracket square​

/\[(.*?)\]/g

Ambil text sesuai yang diinginkan​

/hello|kamu|dimana/gi

Referensi:​

QuickRef

React context devtool https://chrome.google.com/webstore/detail/react-context-devtool/oddhnidmicpefilikhgeagedibnefkcf

cypress recorder https://chrome.google.com/webstore/detail/cypress-recorder/glcapdcacdfkokcmicllhcjigeodacab

Graphql inspector https://chrome.google.com/webstore/detail/graphql-network-inspector/ndlbedplllcgconngcnfmkadhokfaaln

Redux devtool https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd

Smart page rule https://chrome.google.com/webstore/detail/smart-page-ruler/nmibbjghlmdiafjolcphdggihcbcedmg

Quickref.me​

It is a resource for provide cheatsheet about bash, regexp, github, etc https://quickref.me/

Readme.so​

Readme.md generator for your repository. when if you create a repository you need the readme file to explain about you repository.

https://readme.so/

Rest API Generator​

https://retool.com/api-generator

caranya sebagai berikut

Array.from({length: 3}, (v, i)=> i)

// output: [0, 1, 2]

fungsi from ini sama halnya seperti fungsi map array

name(1, 2, 3);

// value 1,2,3 ini adalah argument

misal mau mengirimkan angka 3 saja, maka kodenya seperti dibawah

name(...Array(2), 3);

Cara lain ada nggak? ada caranya seperti ini

name(...[, ,], 3);

atau bisa juga pakai value undefined

name(undefined, undefined, 3);

fucntion name(...args){
    console.log(args[1])
}

kode diatas hanya akan mengambil data pada parameter kedua. kalau dibedah functionnya seperti ini

function name(_, b) {
  console.log(b);
}

name(1, 3);

//  output: 3

atau bisa pakai cara lain seperti ini

function test(...[, , c]) {
  console.log(c);
}

test(1, 2, 3);

import {memo} from "react";

const ChildComponent = memo(()=>{
  return(<p>Child Component</p>)
})


const ParentComponent = ()=>{
  const [count, setCount] = useState(0)
  return(
    <p>Example memo</p>
    <p>{count}</p>
    <button onClick={()=> setCount(prev => prev + 1)}>increase</p>
    <ChildComponent/>
  )
}

kira kira misal diclick button increase, ChildComponent bakalan dirender nggak? yups betul, jawabannya nggak dirender. kenapa bisa begitu, karena si memo ini sendiri akan melakukan perbandingan pada props diChildComponent sedangkan pada component child tidak ada props aman? oke lanjut ya.

import {memo} from "react";

const ChildComponent = memo((props)=>{
  return(<p>Child Component {props.label}</p>)
})


const ParentComponent = ()=>{
  const [count, setCount] = useState(0)
  return(
    <p>Example memo</p>
    <p>{count}</p>
    <button onClick={()=> setCount(prev => prev + 1)}>increase</p>
    <ChildComponent label="name"/>
  )
}

Komponen kedua ini juga masih sama ya. ChildComponent masih tidak dirender. dikarenakan si memo masih bisa melakukan perbandingan jika value pada prosps memiliki tipe data primitif (string/number), sedangkan untuk tipe data non-primitif si memo masih akan merender ChildComponent meskipun value pada object/array itu sama.

contohnya seperti ini.

import {memo} from "react";

const ChildComponent = memo((props)=>{
  return(<p>Child Component {props.label.name}</p>)
})


const ParentComponent = ()=>{
  const [count, setCount] = useState(0)
  return(
    <p>Example memo</p>
    <p>{count}</p>
    <button onClick={()=> setCount(prev => prev + 1)}>increase</p>
    <ChildComponent label={{id: 4, name: "hello"}}/>
  )
}

Child Component akan dirender jika state pada ChildComponent berubah​

untuk yang ini casenya seperti ini, misal child component memiliki state dan action untuk merubah state. sedangkan ChildComponent ini tidak dipassing data dati si ParentComponent. maka jika state didalam ChildComponent berubah makan ChildComponent akan dirender lagi.

import {memo} from "react";

const ChildComponent = memo((props)=>{
  const [count, setCount] = useState(0)

  return(
    <p>{count}</p>
    <button onClick={()=> setCount(prev => prev + 1)}>increase child</p>
    <p>Child Component {props.label.name}</p>)
})


const ParentComponent = ()=>{
  const [count, setCount] = useState(0)
  return(
    <p>Example memo</p>
    <p>{count}</p>
    <button onClick={()=> setCount(prev => prev + 1)}>increase</p>
    <ChildComponent label={{id: 4, name: "hello"}}/>
  )
}

jika user melakukan click pada button increase child makan ChildComponent akan dirender

Cara handle memo ketika dipassing sebuah object​

Biasanya kalau ChildComponent dipassing sebuah data non-primitif maka akan dirender meskipun datanya sama. untuk mengatasi ini dapat menggunakkan comparing data. caranya sebagai berikut

import {memo} from "react";

const comparingMemo = (prevProps, currentProps)=>{
  return JSON.stringify(prevProps) === JSON.stringify(currentProps)
}

const ChildComponent = memo((props)=>{
  return(
    <p>Child Component {props.label.name}</p>)
}, comparingMemo)


const ParentComponent = ()=>{
  const [count, setCount] = useState(0)
  return(
    <p>Example memo</p>
    <p>{count}</p>
    <button onClick={()=> setCount(prev => prev + 1)}>increase</p>
    <ChildComponent label={{id: 4, name: "hello"}}/>
  )
}

dengan ini ChildComponent akan dirender jika props memiliki data non-primitif.

atau bisa juga menggunakan useMemo

import {memo, useMemo} from "react";


const ChildComponent = memo((props)=>{
  return(
    <p>Child Component {props.label.name}</p>)
})


const ParentComponent = ()=>{
  const [count, setCount] = useState(0)
  const dataObject = useMemo(()=> {id: 4, name: "hello"}, [])
  return(
    <p>Example memo</p>
    <p>{count}</p>
    <button onClick={()=> setCount(prev => prev + 1)}>increase</p>
    <ChildComponent label={dataObject}/>
  )
}

Handle props berupa function​

belum diupdate

sebelum masuk ke perbedaan, akan dibahas dulu dari masing masing parameter tersebut

URL Parameter​

URL parameter atau path parameter adalah sebuah value yang menjadi bagian dari url tersebut. URL Parameter ini dapat digunakan untuk mempasing data dari page tertentu ke page lain

Query parameter​

Sedangkan query parameter atau string parameter adalah sebuah parameter yang diletakan pada akhir url. Untuk menggunakan query parameter harus menggunakan simbol ? di akhir url, disertain dengan key: value. apabila ingin menambahkan query lagi, tinggal menambahkan & di belakang value

example

/path?id=323&name=hello

Perbedaan​

yarn upgrade <nama package>

Dan taraaa. dicheck tuh file yarn.locknya ternyata sudah berubah sedangkan di package.json tidak berubah. aneh kan. sempet kepikiran buat ubah langsung kode versinya dipackage.jsonnya. Eh, tapi kok kayak aneh gitu ya. misal kedepan nemuin problem sama lagi masa harus ubah manual. kalau satu baris aja nggak masalah, kalah banyak bisa bisa kriting jari jemari.

alhasil, coba surfing di internet. dan akhirnya nemuin solvenya yaitu dengan

yarn upgrade package@version

atau misal mau semua package

yarn upgrade --latest

sebagai info, kenapa file package.json tidak berubah, dikarenakan yarn menerapkan semantic versioning range(bisa coba ngulik disini)

dari situlah mengapa file package.json tidak berubah.

untuk problem si developernya, dikarenakan cuman ada perubahan sedikit maka hanya merubah kode terakhir di version package.json librarynya. Dan sebab inilah ketika diinstall direpo lain tidak mengalami perubahan

selengkapnya bisa dilihat di gambar bawah ini

Dari problem tersebut, munculah sebuah tool git client. Git client merupakan sebuah GUI atau CLI app untuk memudahkan developer untuk melakukan proses git tampa harus mengetikan perintahnya.

Dengan begitu developer dapat mempersingkat waktu untuk melakukan pekerjaan lain. Git client saat ini sudah banyak bermunculan diantara lain Git Kraken, Sourcetree, Fork dan Smartgit. Tool yang sudah disebuatkan tadi adalah tool dengan sistem tampilan yang sudah sering dipakai. Ada satu lagi tool yaitu Lazygit.

Lazygit merupakan git client juga, namun tampilannya berbentuk CLI. Kalau tampilannya CLI kenapa repot2 pakai Lazygit? eiits, Beda. Memang lazygit ini basisnya CLI tapi tampilannya layaknya GUI. Coba lihat tampilan Lazygit ini

keren bukan, (mirip kaya cracker). meskipun tampilnya diterminal, tool satu ini tidak kalah saing dengan git client yang berbayar.

Babel memiliki tiga plugin yang saling membutuhkan diantara lain babel/core, babel-loader, dan babel/preset-env. Ketiga ini saling membutuhkan satu sama lain. Dilain itu masih ada plugin lain yang bisa digunakan. Chekc di website berikut Babel Plugin list

Bagaimana cara kerja babel​

babel bekerja dengan menerjemahkan kode javascript versi ES6 keatas(EcmaScipt2015+) menjadi sintax lama yang sudah disupport oleh browser. Untuk versinya sendiri dari halaman babel tidak menjelaskan berapa versi outputnya.

Babel digunakan dimana?​

Untuk penggunaan babel sendiri bisa digunakan diproject apa saja yang menggunakan javascript. Tool yang digunakan untuk menjalankan plugin babel yaitu webpack.

Simply add Markdown files (or folders) to the blog directory.

Regular blog authors can be added to authors.yml.

The blog post date can be extracted from filenames, such as:

• 2019-05-30-welcome.md
• 2019-05-30-welcome/index.md

A blog post folder can be convenient to co-locate blog post images:

The blog supports tags as well!

And if you don't want a blog: just delete this directory, and use blog: false in your Docusaurus config.

Use a <!-- truncate --> comment to limit blog post size in the list view.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet