μ΅κ·Ό νμ¬μ μΉ μ ν리μΌμ΄μ (Next.js) μ μ λ¦΄λ¦¬μ¦ λ°°ν¬λ₯Ό ν ν, μ λ μ μλμ κ°μ λ²κ·Έ μ΄μ λ°μμ μκ²λ ν κΈ΄κΈ λμμ μν΄ νΌμ λΆλ΄λΆλ΄ μ λ 8μλΆν° μλ²½ 3μκΉμ§ κ³ κ΅°λΆν¬νλ©° λ°°μ°κ³ κ²½ννλ λ΄μ©μ κΈ°λ‘νμλ€. π«
π 1. νΉμ νμ΄μ§μ λΌμ°ν μ, 무ν λ‘λ© νμ λ°μ
π 2. tsx νμΌμμ ant design λΌμ΄λΈλ¬λ¦¬μ νΉμ UIμ λν Type Error λ°μ
λ΄κ° μ§κΈ λ€λκ³ μλ νμ¬μμλ μνκΉκ²λ CI/CD μμ€ν
μ΄ μλ€. (μ¨νλ λ―Έμ€λ‘ μ΄μνλ μΉ μ¬μ΄νΈκ° λ§μμ κ·Έλ΄μ§λ..?)
κ·Έλ§μΈ μ¦μ¨, νλ‘ νΈμ λ°±μλ κ°λ°μλ€μ΄ κ°κ° μ§μ μλμΌλ‘ μλ²μ μ κ·Όνμ¬
git pull -> yarn build -> yarn start
κ³Όμ μ μ§νν΄μΌ νλ€λ κ²μ΄λ€.
κ·Έλμ μ΄μ§νκΈ° μ μ μ¬κΈ°μ CI/CD μμ€ν
μ μ΄λμ λ ꡬμΆνκ³ μΆμ΄μ 2λ¬ μ λΆν° μ§¬μ§¬μ΄ κ³΅λΆνλ©° μλ μ€μ΄μ§λ§, bitbucket λ²μ κ΄λ¦¬ μ루μ
μ λν CI/CD μ€λͺ
μ λ³΄κ° λ§μ΄ μμ΄μ μμ§λ κ³ κ΅°λΆν¬ μ€μ΄λ€.
κ·Έλλ§ bitbucketμ Pipelinesλ₯Ό μ΄μ©νμ¬ push λ°μ μ, μλμΌλ‘ λΉλ ν
μ€νΈ(CI)λ₯Ό νλλ°κΉμ§λ μ±κ³΅ν΄μ μ μ©νκ² μ¬μ©νκ³ μλ€.
(μ°λ¦¬ νμ¬λ Github, Gitlabμ΄ μλ Bitbucket μ μ₯μλ₯Ό μ¬μ©νκ³ μλ€.)
μ¬μ€ μ΄λ² λ°°ν¬ λ, μκΈ΄ λ²κ·Έ μ΄μλ€μ ν κ° λΉΌκ³ λ μ²μ λ§μ΄ν κ²μ΄λ€. κ·Έλμ μ΅κ·Όμ μλ‘μ΄ μμ λ λ΄μ©μ΄ 무μμ΄ μμλ λ΄€λλ μλμ κ°μλ€.
Next.js
νλ μμν¬ λ²μ μ
κ·Έλ μ΄λ (v10.0.7 -> v11.0.0)antd
UI λΌμ΄λΈλ¬λ¦¬ λ²μ μ
κ·Έλ μ΄λ (v4.17.0 -> v4.20.0)react-i18next
locale λΌμ΄λΈλ¬λ¦¬ λ²μ μ
κ·Έλ μ΄λ (v7.3.0 -> v12.0.0)μμ μ λ°μ΄νΈλ μ¬νμ κΈ°λ°μΌλ‘ νλνλμ© μμΈ λΆμμ νκΈ° μμνλ€.
1λ² μ΄μ λΆμ
1λ² μ΄μμ μμΈμ λ°λ‘ react-i18next
λΌμ΄λΈλ¬λ¦¬ λ²μ μ μ
κ·Έλ μ΄λ ν κ²μ΄λ€.
κΈ°μ‘΄κΉμ§λ react-i18next@v7.3.0
μ μ¬μ©νμλλ°, μ΄λ²μ μ΅μ λ²μ μΈ v12.0.0μΌλ‘ μ
κ·Έλ μ΄λ νλ©΄μ HOC λ°©μμΌλ‘ translation ν¨μλ₯Ό pageμ props λ‘ μ λ¬ν΄μ£Όλ translate()
λ©μλκ° λμ΄μ μ§μμ΄ λμ§ μκ³ , withTranslation()
μΌλ‘ λ체ν΄μΌ νλ€λ κ²μ΄λ€.
κ·Έλμ, t, tReady λ±μ props κ° undefined λ‘ page propsμ return λλ©΄μ μ΄ν λ λλ§ κ³Όμ λ€μ΄ μ§νλμ§ μκ³ κ³μ λ‘λ© μ΄μκ° λ°μνμλ€.
λ°λΌμ, λ¨μν translate() λ©μλλ§ withTranslation()
μΌλ‘ λ체νλ©΄ λλ μ€ μμμΌλ, μμνκ² μ€ν¨νλ€. κ·Έ μΈ μμ ν΄μΌν λΆλΆμ΄ λ μλ κ² κ°μλ° κΈ°μ‘΄μ ꡬμ±λμ΄ μλ νκ²½ νμΌ μ½λλ€μ΄ λ무 볡μ‘νκ² λμ΄ μμ΄μ μ΄κ±°λ μΆν λ€μ λ¦΄λ¦¬μ¦ λ²μ λ, 보μμ ν΄μΌν κ² κ°μλ€.
κ·Έλμ, μΌλ¨ λ‘컬 μ μ₯μμμ translate() λ©μλλ₯Ό μ 곡νλ κΈ°μ‘΄ λ²μ v7.3.0
μΌλ‘ λ€μ΄κ·Έλ μ΄λ νμ¬, μλ²μμ pullμ λ°μ λΉλλ₯Ό μ§ννμ¬ ν΄κ²°νμλ€.
2λ² μ΄μ λΆμ
2λ² μ΄μλ μ΄μ λΆν° λ°μν΄μ¨ μ΄ν΄κ° λμ§ μμλ μ΄μμλλ°, λλμ΄ μμΈμ λ°κ²¬νλ€. (μ무λλ κ²½νμ΄ μμ΄λ©΄μ μκΈ°λ κ°κ°μ 무μ λͺ»νλ보λ€)
λ°μν antd 'Table' UI Component μ property Type Error ꡬ문 μμ
TypeError: types of property 'labelWrap' are incompatible.
Type 'string' is not assignable to type...
μλ¬κ° λ°μν Form μ labelWrap property λΆλΆ
λΆλͺ
λ‘컬 μ μ₯μμ node_modules/antd/lib/form/Form.d.ts
μλ μλμ κ°μ΄ Form μ»΄ν¬λνΈμ props typeμ labelWrap
νμ
μ΄ λͺ
μλμ΄ μμλ€.
νμ§λ§, μλ² μ μ₯μμμ node_modules/antd/lib/form/Form.d.ts
νμΌμλ labelWrap
νμ
λͺ
μκ° λμ΄μμ§ μμλ κ²μ΄λ€. μ΄μ μλ λΉλ μ, typescript + antd λ₯Ό μ¬μ©ν μ€ν¬λ¦½νΈ νμΌμμ μ΄ μλ¬κ° μ’
μ’
λ°μνμλλ° κ·Έλλ§λ€ μμλ°©νΈμΌλ‘ μλ² μ μ₯μμ .ts
νμΌμ μλμΌλ‘ prop νμ
μ λͺ
μνμ¬ ν΄κ²°ν΄μμλ€.
μ΄ μ΄μμ μμΈμ λ°λ‘ λ‘컬 μ μ₯μμ μλ²μ package.json, yarn.lockμ λͺ
μλμ΄ μλ antd λΌμ΄λΈλ¬λ¦¬ ν¨ν€μ§ λ²μ μ λμΌνλ λ‘컬 μ μ₯μμμ μ¬μ©λλ μ€μ antd λΌμ΄λΈλ¬λ¦¬ λͺ¨λ λ²μ (node_modules/antd/package.json)μ v4.17.0
μ΄μμ§λ§ μλ²μμ μ¬μ©λλ λͺ¨λ λ²μ μ < v4.17.0
λ²μ μ΄μ λ κ²μ΄λ€.
μλ²μμ μ΅μ’
build μ, λ‘컬 μ μ₯μμμ bitbucket μ격 μ μ₯μμ push ν μ΅μ package.json
, yarn.lock
νμΌμ pull λ°μμ§λ§ μ΄λ₯Ό κΈ°λ°μΌλ‘ λ€μ $yarn install
μ ν΄μΌ node_modulesλ yarn.lock κΈ°μ€μΌλ‘ ν¨ν€μ§ λ²μ λκΈ°νκ° λ ν
λ°, μ΄κ±Έ μλ΅νκ³ λ°λ‘ $yarn build && yarn start
λ₯Ό ν΄λ²λ ΈμΌλ, λ‘컬 μμλ λ°μνμ§ μμλ type error κ° μλ²μμλ λ°μνλ μν©μ΄ μ ν μ΄μνμ§ μμ κ²μ΄λ€.
μ¦ μμ
νμλ©΄, λλ package.json
, yarn.lock
λ§ μ΅μ ν μμΌ°μ§ μ€μ λ‘ νλ‘μ νΈ μ½λμ μ¬μ©λλ ν¨ν€μ§ λͺ¨λλ€μ΄ λ€μ΄μλ node_modulesλ $yarn install
λ‘ λκΈ°νλ₯Ό μν€μ§ μμμ λ°μν λ¬Έμ μλ€.
λ°λΌμ, λλ μλ²μμ $yarn install && yarn build && pm2 restart {PROCESS_id} && pm2 logs {PROCESS_id}
λͺ
λ Ήμ΄λ₯Ό ν΅ν΄ node_modules λ₯Ό λ‘컬 μ μ₯μμ λκ°μ΄ λκΈ°ν μμΌ°λλ κΉλνκ² μ΄μκ° μ¬λΌμ‘λ€.
μμλ λλΌλκ±°μ§λ§ μ½λλ μ무 μλͺ»μ΄ μλ€.
ν€λ³΄λλ₯Ό λλλ¦° μΈκ°μ΄ μλͺ»μ΄μ§ π€ͺ