ν¬νΈν΄λ¦¬μ€λ μ§μμμ 첫μΈμμ κ²°μ ν©λλ€. νΉν κ°λ°μμκ² ν¬νΈν΄λ¦¬μ€λ μμ λ¬Όμ 곡μ νκ³ κΈ°μ μκ² μ΄ννκΈ° μν κ°μ₯ μ’μ μλ¨μ λλ€. λ°λλ‘ κΈ°μ μ μ§μμμ κΈ°μ μλμ νμ νκ³ μ±ν₯κ³Ό μ½λ μ€νμΌκΉμ§ νμΈν μ μκΈ°μ νμ μ μ 리ν μΈμ¬μΈμ§ μλμ§λ₯Ό μκ² λ©λλ€. κ·Έλ κΈ°μ μ§μμλ ν¬νΈν΄λ¦¬μ€ κ΄λ¦¬μ μ κ²½ μΈ μλ°μ μμ΅λλ€. μ΄λ² ν¬μ€νΈμμλ μ μ κ°λ°μ(νλ‘ νΈμλ and λ°±μλ)λ₯Ό μν ν¬νΈν΄λ¦¬μ€ μμ±λ²μ μκ°ν©λλ€.
1. ν νλ‘μ νΈμ κ°μΈ νλ‘μ νΈλ₯Ό μ μ νκ²
ν νλ‘μ νΈλ νμ λ₯λ ₯μ μΈ‘μ νκΈ° μν μ€μν ν¬νΈν΄λ¦¬μ€μ λλ€. νμ κ°μΈ νλ‘μ νΈλ§ ν΄μ¨ μ¬λ μ¦, λ νλ¬λ€μ μλμ μΌλ‘ κΉνλΈ λΈλμΉ μ λ΅μ΄λ μ€λ¬΄ νμ μ κ²½νν΄λ³΄μ§ λͺ»ν΄ μ μ¬ μ΄κΈ°λΆν° λ²λ² 거릴 μ μμ΅λλ€. κΈ°μ μ μ₯μμ μ΄λ° μ¬λμ μ’μνμ§λ μκ² μ£ . λ°λΌμ ν΄μ»€ν€, 곡λͺ¨μ , κ΅λΉμ§μ(ννλ‘μ νΈ) κ°μ κ³³μμ λ€λ₯Έ κ°λ°μλ€κ³Ό νμ ν νλ‘μ νΈλ₯Ό κΈ°μ νλκ² μ’μ΅λλ€.
λ§μ½ ν νλ‘μ νΈκ° μλ€λ©΄ ν΄μ»€ν€μ μ€λΉν΄λ³΄μλ κ²λ λμμ΄ λ©λλ€. κ΅³μ΄ ν΄μ»€ν€μ΄ μλλλΌλ κ°λ°μ νμ¬(컨νΌλ°μ€, μΈλ―Έλ)μ μ£ΌκΈ°μ μΌλ‘ μ°Έμν΄ λ³΄λ©° μ 보λ₯Ό μ»λ κ²λ λμμ΄ λ©λλ€. μμ νΉμ 컨νΌλ°μ€μμ κ°μ°μλ‘ μ°Έμν΄ λ°ννλ κ²½νλ μ’κ³ μ. μλ κΉνλΈ λ ν¬μ κ°λ°μ νμ¬ λ¦¬μ€νΈκ° μ μ 리λμ΄ μμΌλ μ°Έκ³ νμλ©΄ λ©λλ€.
https://github.com/brave-people/Dev-Event
κ·ΈλΌ ν νλ‘μ νΈλ§ μ μΌλ©΄ λλ건κ°? 그건 μλλλ€. ν νλ‘μ νΈλ§ κΈ°μ λμ΄ μμΌλ©΄ κ°μΈ μ±μ₯ μΈ‘λ©΄μμ μννλ€κ³ λκ»΄μ§κΈ° λλ¬Έμ κ°μΈ νλ‘μ νΈλ₯Ό ν λ κ° μ λ κΈ°μ ν΄ λλ κ²λ μ€μν©λλ€. νΉν νλ‘ νΈμλ κ°λ°μλΌλ©΄ νλ‘ νΈμλ μ€μ¬ νλ‘μ νΈ νλ, λ°±μλ μλ²λ₯Ό ꡬμΆν ν μ€ν νλ‘μ νΈ νλ μ΄λ κ² κ΅¬μ±νλ κ²λ μ’μ΅λλ€.
νμ¬μΌμ νλ€λ³΄λ©΄ κ·Έλμ μ°μ§ μμλ κΈ°μ μ λ€λ£¨κ² λλλ° μ΄λ κ°μΈ νλ‘μ νΈλ‘ νμ΅ κ²½νμ΄ μλ€λ©΄ μ§μμλ‘ νμ¬κΈ κΎΈμ€νκ² κ³΅λΆνλ μ¬λμ΄λΌλ μΈμμ μ€ μ μμ΅λλ€. λμμ ν νλ‘μ νΈ κΈ°μ¬μ μμ΄μλ 무μμΉμ°¨νμ§ μλλ€λ λ§μκ°μ§λ μ£Όκ² λ©λλ€.
2. μ΄μ, λ¬Έμ μν©, ν΄κ²° λ°©λ², λ°°μ΄μ
ν¬νΈν΄λ¦¬μ€ μμ±λ²μ λλ€. 맨 μ²μ μ΄λ€ μ΄μκ° μμλμ§, κ·Έκ² μ λ¬Έμ μΈμ§λ₯Ό ν λ¬Έμ₯μΌλ‘ μ μ΅λλ€. κ·Έλ¦¬κ³ μ΄λ€ κΈ°μ μ μ¨μ μ΄λ»κ² ν΄κ²°νλμ§, λ§μ§λ§μΌλ‘ 무μμ λ°°μ λμ§ κΉμ§ νλ©΄ μ§μμλ‘ νμ¬κΈ μ μ ν μν©μ μ μ ν κΈ°μ μ€νμ νμ©νλ€λ μ μ΄ λ³΄μ λλ€. μ¦, λ¬Έμ ν΄κ²°μ ν λ λ§λ¬΄κ°λ΄λ‘ μ²λ¦¬νλ κ² μλ, μ μ ν κ³Όμ μ κ±°μΉκ³ ν©λ¦¬μ μΈ λ°©λ²μΌλ‘ λ¬Έμ μ μμ ν΄κ²°μ ν μ μλ μΈμ¬λΌλ μ μ μ΄ννλ κ²μ΄μ£ .
μλ₯Ό λ€μ΄ νλ‘ νΈμλμμ d3.jsλ‘ κ·Έλνλ₯Ό 그리λλ°, Reactμ D3.jsλͺ¨λ DOMμ μ κ·Όν μ μλ€ λ³΄λ μ±λ₯ μ ν λ¬Έμ κ° μκΈ°λ μν©μ λ§μ£Όνλ€κ³ κ°μ ν΄ λ΄ μλ€. κ·Έλ¦¬κ³ μλ‘λ€λ₯Έ λ κΈ°μ μ Reactλ λ¨μ UIμ D3.jsλ 볡μ‘ν μ°μ°μΌλ‘ κΈ°λ₯μ λΆλ¦¬νμ¬ 1000κ°μ Data λ²μμμ νλ μμ¨μ 80%λμ΄μ¬λ Έλ€κ³ κ°μ ν΄λ΄ μλ€. μ΄ λ¬Έμ ν΄κ²° κ³Όμ μ λ€μκ³Ό κ°μ΄ κΈ°μ ν μ μμ΅λλ€.
Reactμ D3.jsλ₯Ό λμμ μ¬μ©νλ€ λ³΄λ νλ μ μ ν νμμ΄ μ겨 μ μ κ° λΆνΈν¨μ κ²ͺμμ. Reactλ UIννΈ, D3.jsλ κ·Έλν μ°μ° ννΈλ‘ DOM μ λ°μ΄νΈ λ²μ λΆλ¦¬ν΄μ ν΄κ²°ν¨. κΈ°μ‘΄λλΉ νλ μμ¨μ 80% κ°μ ν¨.
μ΄λ κ² λλ©΄ κΈ°μ λ©΄μ κ΄ μ μ₯μμ λ¬Έμ μ μμΈκ³Ό ν΄κ²°κ³Όμ μ μ½κ² ν΄μν μ μμ΅λλ€. λλΆλΆ μλμ΄λΆλ€μ΄κΈ° λλ¬Έμ μμΈνκ² λ¬μ¬νμ§ μμλ μΆ©λΆν μ΄ν΄νμλ κ΅³μ΄ κΈΈκ² μ μ§ λ§μκ³ μ΅λν μμΆν΄μ λκ΄μμΌλ‘ μμ±νμλ©΄ λ©λλ€.
3. ν κΈ μ μΈ, λ§ν¬λ μ΅λν μ κ², κ°λ μ± μ κ²½ μ¨μ
λ Έμ μΌλ‘ μ΄λ ₯μλ₯Ό μμ±νμ λ€λ©΄ ν κΈμ λν μΌν λΆλΆμ μ κ² λ©λλ€. κ·Έλ¬λ μ€μ κΈ°μ λ©΄μ κ΄ λΆλ€μ ν루μλ μμ 건 λ§κ²λ μλ°± 건κ°λμ μ΄λ ₯μλ₯Ό λ§μ£ΌνμκΈ° λλ¬Έμ ν κΈμ νλνλ μ΄μ΄λ³Ό μκ°μ΄ μμ΅λλ€. μ°λ¦¬ νμ¬μ κ°μ₯ μλ§μ μ§μμλ₯Ό λ½κΈ° μν΄μλ μ± μ½μ΄λ³΄λ κ² μ€μνλ° ν κΈμ μ¬λλΌ μκ°μ΄ λλΉλλ€λ©΄ μλΉν λΆνΈν΄μ§λλ€. μ΄ κ°μ μ λλ¬Έμ λ©΄μ κ΄ μ μ₯μμλ μλμ λν λ°°λ €λ₯Ό νμ§ μλλ€κ³ μ λͺ» λΉμΉ μ μμ΅λλ€. λΆνΈνκΈ°λ νκ³ μ.
μ΄λ ₯μλ κΉλνκ³ μν©νΈ μμ΄μΌ ν©λλ€. λ¨ λͺ μ₯μ κΈ°μ μ€ν, μ΄λ ₯, μ λ’°λ, νμ λ₯λ ₯, μ§λ¬΄ λ₯λ ₯λ±μ ν¨μΆν΄μ 보μ¬μ€μΌ νκΈ° λλ¬Έμ λ©΄μ κ΄ μ μ₯μμ κ±°μ¬λ¦¬λ μμκ° μμΌλ©΄ μ λ©λλ€.
λ§ν¬λ λ§μ°¬κ°μ§μ
λλ€. λ§ν¬λμΈ, κΉνλΈ μ£Όμμ ν¬νΈν΄λ¦¬μ€ μ μ μ£Όμλ§ λ§ν¬ν΄ λκ³ , μ νλΈ, μ€ν¬λ¦°μ·λ±μ 첨λΆνμ§ μλ κ² μ’μ΅λλ€. μ€νμμ€μ κ²½μ° κΉνλΈ λ ν¬λ₯Ό λ§ν¬ν΄ λμκ³ λ ν¬ λ΄μ 리λλ―Έλ₯Ό μ΅λν μ κ²½ μ¨μ μμ±νμλ νΈμ΄ μ’μ΅λλ€. μ΄ κ²½μ° μ§μμμ λ¬Έμν λ₯λ ₯μ μ§μ μ μΌλ‘ λ³Ό μ μκΈ° λλ¬Έμ νμ
μ°¨μμμ κΈμ μ μΈ μΈμμ μ€ μ μμ΅λλ€.
κ°λ μ±μ μ κ²½μ¨μ μμ±νλ©΄ “λ°°λ €νλ μ¬λ”μ΄λΌλ μΈμμ μ½κ² μ€ μ μμ΅λλ€. ν루μλ μ¬λ¬ μ΄λ ₯μλ₯Ό κ²ν νλ μ¬λ μ μ₯μμ κ°λ μ±μ΄ λ¨μ΄μ§λ μ΄λ ₯μλ₯Ό λ§μ΄ μ½κ² λλλ° κ·Έλ κ°λ μ±μ΄ μ’μ μ΄λ ₯μλ λ¨μ° λμ λ μλ°μ μμ΅λλ€. λ§μ κΈΈκ² νμ΄μ°μ§ λ§μκ³ λκ΄μμΌλ‘ μμ±νμ μΌ ν©λλ€. νμ μ΅λ 3~4μ€μ΄ μ λΉν©λλ€.
4. κΈ°μ μ λ§λ μ€ν μ€μ¬μΌλ‘ ꡬμ±
μκ°ν νλ‘μ νΈκ° λ§μ κ²½μ°(5~6κ°) μ§μν κΈ°μ μμ μꡬνλ μ€νμ κ°μ₯ λΆν©νλ νλ‘μ νΈλ₯Ό μ°μ μ μΌλ‘ μ λ³νμ μΌ ν©λλ€. μ무리 μ£Όλμ΄λΌλ νμ¬ μ μ₯μμλ λ°λ‘ ν¬μ ν΄μ μ±κ³Όλ₯Ό λ΄λ κ² μ€μνκ² μμ©νκΈ°μ κΈ°μ μ΄ νμ¬ μ¬μ© μ€μΈ μ€νμ μ€μ¬μΌλ‘ μ΄λ ₯μλ₯Ό μμ νλ 건 μ·¨μ λ±λ½μ μ€μν μμ©μ ν μλ°μ μμ΅λλ€. μΈμ λ νμ μμΌλ‘ κ΅½λ λ²μ΄λκΉμ. λΉμ° νμ¬μμ μ¬μ©νλ μ€νμ μ£Όλ‘ μ¬μ©νλ μ§μμλ₯Ό λ΄€μ λ κ°μ λ₯λ ₯μ΄λΌλ μ’κ² λ³΄μ΄λ 건 νμ¬ μ μ₯μμ λΉμ°ν μΌμ λλ€.
νμ¬κ° μ¬μ©νλ μ€νμ μ±μ©κ³΅κ³ λ₯Ό 보면 λμ μμ΅λλ€. νλ‘ νΈμλμ κ²½μ° λκ² React/TypeScript μ€νμ κΈ°μ‘°λ‘ NextJSλ λ€λ₯Έ μ€νμΌ/μνκ΄λ¦¬ λΌμ΄λΈλ¬λ¦¬λ€μ μ¬μ©νκ³ μμ΅λλ€. μ¬μ΄λ νλ‘μ νΈλ₯Ό ν΅ν΄ νλ λ μ΅νμλ€ λ³΄λ©΄ νμ¬μ μ€νκ³Ό μ¬μ΄λνλ‘μ νΈμ μ€νμ΄ λμΌν κ²½μ°κ° μλλ°, μ΄λ° νλ‘μ νΈλ₯Ό μ λ³ν΄μ μ§μν΄ λ³΄λ κ²λ λμμ΄ λ©λλ€.
μ°Έκ³ λ‘ μ μ΄λ―Έμ§μμ jQueryλ λ°°μ°μ§ μλ κ² μ’μ΅λλ€.
5. μ£Όλ³ μ¬λλ€ μ΄λ ₯μ κ²ν
λ©΄μ κ΄ μ μ₯μμ μκ°ν΄ λ³Ό μ μμ΄μΌ ν©λλ€. κ°μ₯ μ’μ λ°©λ²μ λλ₯Ό μ μΈν λ€λ₯Έ μ΄λ ₯μλ₯Ό κ²ν ν΄ λ³΄λ λ°©λ²μ λλ€. κ°λ° μ§κ΅° νΉμ±μ νλ«νΌμ ν¬νΈν΄λ¦¬μ€λ₯Ό 곡κ°νλ κ²½μ°κ° λ§μλ°, νλ«νΌμμ λ€λ₯Έ κ°λ°μλΆλ€ μ΄λ ₯μλ₯Ό μ΄λν΄ λ³Ό μ μμ΅λλ€. μ κ° μΆμ²νλ νλ«νΌμΌλ‘λ λ λ¦Ώ, μνμ΄ μμ΅λλ€. κ° νλ«νΌ λͺ¨λ λ€λ₯Έ κ°λ°μλΆλ€μ΄ μ¬λ €λμ μ΄λ ₯μλ₯Ό λ³Ό μ μλλ°, μ΄λ¬ν κ²½νμ΄ λ΄ μ€νμ κ°κ΄μ μΌλ‘ λ°λΌλ³΄λλ° λμμ΄ λ©λλ€. κ²λ€κ° μ΄λ ₯μλ₯Ό μ λ§λ€μ΄μ μ¬λ €λλ©΄ μ·¨μ μ΄μ§ μ μλ λ€μ΄μ€λ νΈμ΄λ ν΄λΉ νλ«νΌμ μ¬λ €λλ©΄ μΌμμ΄μ‘°κ² μ£ .
μ΄λ κ² μ μ κ°λ°μλ₯Ό μν ν¬νΈν΄λ¦¬μ€ μμ±λ²μ μμλ΄€μ΅λλ€. λμμ΄ λμ ¨λ€λ©΄ μ’κ² μ΅λλ€.
'π»κΈ°μ ' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
VR 컨ν μΈ κ°λ°μ΄ μ΄λ €μ΄ μ΄μ with Vision Pro (28) | 2024.03.09 |
---|---|
[ DBeaver ] λ§₯μμ MySQL μλ² μ μνκΈ° (31) | 2024.03.05 |
λ©ν νμ€νΈ 2, 3 μμ κ²½κ³ λκΈ° (1) | 2024.02.24 |
[ React ] CRAλ‘ λ‘컬μμ HTTPS μ μ©νκΈ° (0) | 2024.02.22 |
μ£Όλμ΄ κ°λ°μκ° TypeScriptλ₯Ό λ°λμ λ°°μμΌνλ μ΄μ (18) | 2024.02.21 |