FRONTEND
70
React :: C#μ Region κ°μ κ±Έ.. React μμ μΈ μλ μμκΉ?
2024.05.07
c# κ°λ°μ ν΄λ³Έ μ¬λλ€μ λ°©λν΄μ§λ μ½λλ₯Ό κΉλνκ² μ 리ν΄μ 보기 μν΄ Region μ΄λΌλ κΈ°λ₯μ μ΄λ€.리μ‘νΈμμλ μ½λκ° κΈΈμ΄μ§λ λ¬Έλ¨λ³ μ κΈ° λ§κ³ λ΄κ° μ§μ ν Region λ§νΌλ§ μ κ³ ν΄κ³ λ₯Ό νκ³ μΆμλ°..React μμλ μ΄λ€ μμΌλ‘ μ§νν΄μΌ ν κΉ? κ°λ° νκ²½(intelliJ, vsCode) μ λ°λ₯Έ μ¬μ© λ°©λ²μ λν΄ μμ보λλ‘ νκ² λ€. μ°μ ..#region μ΄λ?λ΄κ° μ½λλ₯Ό μ κ³ ν΄κ³ μΆμ λΆλΆμ μμμ μ§μ ν΄μ£Όλ κ²!#region μ μ¬μ©νκ² λλ©΄ #endregion μΌλ‘ μ§μλ¬Έμ μ’
λ£ ν΄μΌνλ©°, visual studio μμ #regionμμ λ°λ‘ λ€μμΌλ‘ λμ€λ #endregionκΉμ§μ μ½λλ₯Ό νλ, μΆμνλ©° μμ
μ μ§νν μ μκ² ν΄μ€λ€. 1. intelliJμμ μ¬μ©νλ λ°©λ² //re..
React :: React 19 Beta ν΄μ
1
2024.04.30
React 19 Beta – ReactThe library for web and native user interfacesreact.dev μΌλΆ ν΄μ λ°μ· React 19μ μλ‘μ΄ κΈ°λ₯Action리μ‘νΈ μ±μ μΌλ°μ μΈ μ¬μ© μ¬λ‘λ λ°μ΄ν° λ³νλ₯Ό μνν λ€μ μλ΅μΌλ‘ μνλ₯Ό μ
λ°μ΄νΈνλ κ²μ
λλ€. μλ₯Ό λ€μ΄, μ¬μ©μκ° μ΄λ¦μ λ³κ²½νκΈ° μν΄ μμμ μ μΆνλ©΄ API μμ²μ ν λ€μ μλ΅μ μ²λ¦¬ν©λλ€. κ³Όκ±°μλ 보λ₯ μν, μ€λ₯, λκ΄μ μ
λ°μ΄νΈ λ° μμ°¨μ μμ²μ μλμΌλ‘ μ²λ¦¬ν΄μΌ νμ΅λλ€. μλ₯Ό λ€μ΄ usestateμμ 보λ₯ λ° μ€λ₯ μνλ₯Ό μ²λ¦¬ν μ μμ΅λλ€.// Before Actionsfunction UpdateName({}) { const [name, setName] = useState(""); con..
μ΄λ° μ¬λ―Έλ νλ‘μ νΈλ₯Ό ν΄λ³΄κ³ μΆλ€!
2024.03.27
https://techblog.woowahan.com/16158/
μ©μ΄ :: μΈλ°μ΄λ(inbound)μ μμλ°μ΄λ(outbound)
2024.01.26
μΈλ°μ΄λμ μμλ°μ΄λλ νΈλν½μ΄ λ€νΈμν¬ κ°μ μ΄λνλ λ°©ν₯μ μλ―Έ. μΈλ°μ΄λ - λ€νΈμν¬μ λ€μ΄μ€λ μ 보 - λ©μΈμ§κ° ν΄λΌμ΄μΈνΈμμ μλ²λ‘ ν₯νλ κ² - ex. 첨λΆνμΌμ μλ²μ μ μ₯ν λ (upload) μμλ°μ΄λ - λ€νΈμν¬μμ λκ°λ μ 보 - ν΄λΌμ΄μΈνΈμ μμ²μ μ²λ¦¬νκ³ λ©μΈμ§κ° μλ²μμ ν΄λΌμ΄μΈνΈλ‘ λ€μ ν₯νλ κ² - ex. 첨λΆνμΌμ λ€μ΄λ‘λ ν λ
JS :: λλ°μ΄μ€(Debounce)μ μ€λ‘νλ§(Throttling)
2024.01.15
μλ₯Ό λ€μ΄λ³΄μ. μ΄λ€ κ°μ μ
λ ₯ν λ ν΄λΉ λ¨μ΄κ° ν¬ν¨λ λ¨μ΄λ₯Ό μ 곡νλ κΈ°λ₯μ ꡬννλ μν©. = κ²μμμ§ κ²μμ΄ μΆμ² κ²°κ³Ό κ°μ κΈ°λ₯. μ΄λ΄ λ κΈμκ° λ³ν λλ§λ€, μ΄λ€ function μ΄λ APIλ₯Ό νΈμΆνμ¬μΌ νλλ°.. λ무 μ¦μ ν¨μ νΈμΆμ΄ μΌμ΄λλ€. λ¬Όλ‘ νλ‘ νΈμλμ λ°±μλμμ μ±λ₯ μ΅μ νκ° λμ΄ μμΌλ©΄ λ¬Έμ κ° λ μΌμ΄λ μλ μμΌλ.. κ·Έλλ λ§μΌμ λ¬Έμ λ₯Ό μ κ±°ν΄μ£Όλ κ²μ΄ μ€μν κ²μ΄λ€. μ΄λ λ³΄ν΅ λλ°μ΄μ€ Debounce μ μ°λ‘νλ§ Throttling μ κ°λ
μ μ μ©νκ² λλλ° μ΄ λκ°μ§μ 곡ν΅μ κ³Ό μ°¨μ΄μ μ λν΄ μ μ΄λ³΄κ³ μ νλ€. 곡ν΅μ λλ°μ΄μ€μ μ°λ‘νλ§μ 곡ν΅μ μ.. 1. ν¨μκ° λ무 λ§μ΄ νΈμΆλμ§ μλλ‘ μ μ΄νλ ν
ν¬λμ μ’
λ₯μ΄λ©°, 2. μ±λ₯ μ΅μ νμ 리μμ€ κ΄λ¦¬μ λ§μ΄ μ¬μ©λλ κ°..
Performance :: switchμ else if λΉκ΅
1
2023.12.28
κ°λ°νλ€λ³΄λ©΄ λΆκΈ° μ²λ¦¬λ₯Ό νλκ² νμμ μ΄μ΄μ§λ€. μ΄λ switchλ₯Ό μ¬μ©νλ κ² λμμ§ else if μ μ¬μ©μ΄ λμμ§ κ³ λ―Όμ΄ λ λκ° μλ€. λ³΄ν΅ μ½λ μ 리λ switchκ° ν λμ 보기 μ¬μ΄ νΈμ΄κ³ , κ°μΈμ μΌλ‘ μ¬μ©νκΈ°μλ if~else λ¬Έμ΄ μ²λ¦¬νκΈ°κ° μ¬μ΄ κ² κ°λ€. κ·Έλλ μ½λ κ°μμ± λ° κ°λ°μ νΈμμ±μ κ³ λ €νμ§ μμ μλ μμ§λ§... μ μΌ μ€μν 건 νλ‘κ·Έλ¨ μ±λ₯μ΄λΌ... λ κ°μ§μ λ‘μ§μ μΈ μ°¨μ΄λ₯Ό μ 리ν΄λ³΄κ³ μ νλ€. switchλ¬Έ λ³μλ₯Ό 미리 μ
λ ₯ λ°μ λκ³ , 미리 μ ν΄λμ κ°λ€κ³Ό μΌμΉ μ¬λΆλ₯Ό νλ¨νμ¬ control flowλ₯Ό μ²λ¦¬ if~elseλ¬Έ booleanμΌλ‘ κ²°κ³Ό κ°μ΄ λμ€λ 쑰건문μ κ²°κ³Όμ λ°λΌ true, false λκ°μ§ control flowλ₯Ό κ°μ§λ€. κ·Έλ¬λ―λ‘ . . . if~e..
Javascript :: μ«μμ μ²λ¨μλ‘ μ½€λ§(,) μ°κΈ°
2023.12.04
리μ‘νΈμμ number ννμ μ«μλ₯Ό νκ³ λ¨μ ννλ‘ λνλ΄κ³ μΆμλ€. ex) 1000 μΌ κ²½μ° 1,000 λ‘ λνλ΄κ³ 555666777 μΌ κ²½μ° 555,666,777 λνλ. case λ₯Ό λκ°μ§λ‘ ꡬλ³νμ¬ κ°λ°ν΄λ³΄μλ€. input κ°μ΄ "1000" μΌμλ μκ³ 1000 μΌμλ μμΌλ.. CASE1. μ«μ νμ
μ λ°μ΄ν°λ₯Ό κ°κ³΅νλ κ²½μ° Number.prototype.format = function () { if (this == 0) return 0; var reg = /(^[+-]?\d+)(\d{3})/; var n = this + ""; while (reg.test(n)) n = n.replace(reg, "$1" + "," + "$2"); return n; }; // test var num = 12..
React :: νκ²½μ λ°λ₯Έ .env(νκ²½ λ³μ) μ
ν
νκΈ°
2023.11.20
React νλ‘μ νΈλ₯Ό κ°λ°νλ€λ³΄λ©΄, λ°°ν¬ νκ²½?μ λ°λΌ λ€λ₯΄κ² νκ²½ λ³μλ₯Ό μ
ν
ν΄μΌνλ caseκ° λ°μνλ€. μλ₯Ό λ€λ©΄, λ³΄ν΅ API μ£Όμλ₯Ό νκ²½ λ³μλ‘ λ§μ΄ μ
ν
ν΄λκ³ λ νλλ°.. μ΄μ API μ£Όμμ κ°λ° API μ£Όμλ₯Ό λ°°ν¬ νκ²½μ λ°λΌ λ€λ₯΄κ² μ
ν
ν΄λκ³ μΆμ caseκ° λ± μ΄μ ν΄λΉνλ€. React :: νκ²½λ³μ(.env) μ
ν
νκΈ° ν ν°μ΄λ API ν€ κ°μ κ²μ νλμ½λ©μΌλ‘ μ§μ΄ λ£μΌλ©΄ λ°°ν¬ μ κ°λ°μ λꡬμ λͺ¨λ λλ¬λκΈ° λλ¬Έμ μ΅λν μ¨κ²¨μ μ½λ©μ μ§νν΄μΌ νλ€. μ΄λ μ¬μ©ν μ μλ λ°©λ² μ€ νλκ° "νκ²½λ³μ" μ΄λ€. bornatnoon.tistory.com μ°μ κΈ°μ΄ μ
ν
λ°©λ²μ 첨λΆν΄λ³Έλ€. (.env νμΌμ νλλ§ μ°λ μΌμ΄μ€) μΌμ΄μ€μ λ°λ₯Έ .env μ€μ λ°©λ² β» μ°Έκ³ . 리μ‘νΈ νλ‘μ νΈ μ..
React :: νκ²½λ³μ(.env) μ
ν
νκΈ°
2
2023.11.20
ν ν°μ΄λ API ν€ κ°μ κ²μ νλμ½λ©μΌλ‘ μ§μ΄ λ£μΌλ©΄ λ°°ν¬ μ κ°λ°μ λꡬμ λͺ¨λ λλ¬λκΈ° λλ¬Έμ μ΅λν μ¨κ²¨μ μ½λ©μ μ§νν΄μΌ νλ€. μ΄λ μ¬μ©ν μ μλ λ°©λ² μ€ νλκ° "νκ²½λ³μ" μ΄λ€. κ·ΈλΌμλ.. CRA 곡μ λ¬Έμμμλ λ€μκ³Ό κ°μ μ£Όμ μ¬νμ μ λ¬νλ€. WARNING : Do not store any secrets (such as private API keys) in your React App λΉκ³΅κ° API ν€ κ°μ κ°μ μ μ₯νλ κ²μ μ§μνλ μ΄μ λ νκ²½ λ³μκ° 'λΉλ'μ λ΄μ₯λμ΄ λꡬλ μ§ μ΄λ₯Ό νμΈν μ μκΈ° λλ¬Έ. 1. .env νμΌ μμ± μ΅μλ¨ λ£¨νΈμ .env νμΌμ μμ±ν΄μ£Όλλ‘ νμ. .env νμΌμ κΌ νλ‘μ νΈ νμΌ μ΅μλ¨μ μμ΄μΌ ν¨. 2. .gitignore μ€μ .env .e..
React :: λμ λΌμ°ν
(feat. DB λ°μ΄ν° μ¬μ©)
2023.11.07
μμ© νλ‘κ·Έλ¨μμ νλ "λ©λ΄κ΄λ¦¬"μ κ°λ
μ μΉμλ λμ
νλ κ²μ΄ λͺ©μ μ΄μμ. μ¬μ©μ(κ΄λ¦¬μ)λ νλ‘κ·Έλ¨ λ΄μμ λ©λ΄μ κ΄λ ¨λ λ°μ΄ν°λ₯Ό DBμ insert ν μ μκ³ , μ΄λ κ² λ§λ€μ΄μ§ Data λ‘ λΌμ°ν
μλ μ μ©λκ³ , λ©λ΄λ°μλ μ μ©λλ.. κ·Έλ° ννκ° μ΅μ’
μ΄μμ. React μλͺ
μ£ΌκΈ° νΉμ± μ μ΄λ ΅λ€λ λ΅λ³μ λ°κΈ°λ§ νλ μ°°λ.. μ μλλ©΄ μ΄ λΌμ°ν
μμ€ν
μ μ 리νκ±°λ μ½κ² λ§λ€μ΄λ³΄μλ λ§μμΌλ‘ μμνκ² λμλ€. 첫 μμ΄λμ΄ λ react-router-dom v5 λ¬Έλ²μΌλ‘ ꡬνν μλμ λͺ¨μ΅ 2023.11.03 - [FRONTEND/React] - React :: (Next.js μ¬μ© μμ΄) ν΄λΉ ν΄λμ νμΌμ λμ λΌμ°ν
. μ무λλ κ°μ₯ μ΅μ λ²μ μ μ¨μΌνλ€λ μκ°λ μμκ³ , μΈμ£Όμ
체μμ λ§λ€μ΄μ€ ..
React :: (Next.js μ¬μ© μμ΄) ν΄λΉ ν΄λμ νμΌμ λμ λΌμ°ν
.
2023.11.03
λ§€λ² μμ±λλ νμΌμ App.jsμ μμμ
μΌλ‘ λΌμ°ν
νκΈ°μλ μ¬μ΄ μΌμ΄ μλλ€. κ·Έλμ.. νμ΄μ§λ‘ λΌμ°ν
λμ΄μΌνλ νμΌμ μμμ ./pages λΌλ ν΄λμ λͺ°μ λ£κ³ ν΄λΉ ν΄λμ μλ νμΌμ μ λΆ νκ² λ€λ λ¬Έλ²μ μμ±ν΄λ³΄μλ€. μλ§ λμ λΌμ°ν
μ κ²μνλ©΄ κ°μ ν
νλ¦Ώμ props λ§ λ°λλ (μν μμΈ μ΄λ―Έμ§ ..) ννκ° λ€μ λμ μνλ μ 보λ₯Ό μ»κΈ° νλ€κ²μ΄λ€. Next.js λ₯Ό μ¬μ©νμ¬ κ°λ°νκ² λλ©΄ μ°λ¦¬κ° ꡬννκ³ μ νλ κΈ°λ₯μ λ μμ½κ² ꡬνν μ μμΌλ μμ React (React-create-APP) κΈ°λ°μΌλ‘ App.js λ₯Ό λμ μΌλ‘ λΌμ°ν
νλ €λ©΄ μλμ κ°μ λ¬Έλ² μ‘°μμ΄ νμνλ€. Code. 23.11 κΈ°μ€μΌλ‘ μμ μ½λλ₯Ό νμ¬ νλ‘μ νΈμ μ΄μνλ €κ³ νλ©΄ μλ¬ λ©μΈμ§κ° λ°μν κ²μ΄λ€. E..
React :: 리μ‘νΈ μλ² μ»΄ν¬λνΈ. React Server Component.
2
2023.11.01
μ°Έκ³ κΈ μλ¬Έ Making Sense of React Server Components This year, the React team unveiled something they've been quietly researching for years: an official way to run React components exclusively on the server. This is a significant paradigm shift, and it's caused a whole lot of confusion in the React communit www.joshwcomeau.com (μ΄λ² κΈμ κ²½μ° ν΄λΉ κΈμ λ§λΆν μ€λͺ
μ΄ λΆμ‘±νλ€κ³ λκ»΄μ§λ κ²λ€μ λ€μ μμΉνμ¬ μμ±νμ¬.. μ°Έκ³ κΈμ΄λΌκ³ νκΈ°μλ λ¨Έμ±νλ€.)..