1. νλ‘μ νΈ μκ° λ° κΈ°ν μλ
π© νλ‘μ νΈ μκ°
"μμ΄κ° μλΌλ λͺ¨λ μκ°, μλΌλλΌλ μμ΄λ€μκ² κΏκ³Ό ν¬λ§μ 곡κ°μ μ μ¬ν©λλ€."
μλΌλλΌλ μλΌ ν νμ΄μ§λ₯Ό ν΄λ‘ νμ¬ κΈ°μ‘΄ λ°λ»νκ³ ν¨μ
λλΈν μΈν
리μ΄λ₯Ό μ 곡νλ νμ΄μ§μμ μμ΄λ€μ μν 곡κ°μΌλ‘ μλ‘κ² κΈ°ννμμ΅λλ€.
π©βπ» νλ‘μ νΈ λ©€λ²
- Notion
- Git & Github
- Trello
- Slack
2. ꡬνμ¬ν
(체ν¬ν λΆλΆμ λ΄λΉνμμ΅λλ€-!)
β
Nav, Footer
λ©μΈ νμ΄μ§
리μ€νΈ νμ΄μ§
β
μμΈ νμ΄μ§
μ₯λ°κ΅¬λ νμ΄μ§
λ‘κ·ΈμΈ, νμκ°μ
λͺ¨λ¬
μΆνμ νμ΄μ§ μκ° μμ λ§ν¬λ₯Ό 첨λΆνκ² μ΅λλ€.
3. μν μ
- λͺ¨λ¬μ°½κ³Ό μ¬λΌμ΄λλ₯Ό μ€μ€λ‘ ꡬννλ€. μ²μμλ λ§μ°νμ§λ§, ꡬκΈλ§κ³Ό μ 보 곡μ λ₯Ό ν΅ν΄ λ§μΉ¨λ΄ ꡬνν΄λλ€.
- props, state κ°λ
μ μ΅νλ€. μ΄λ°μλ λ΄κ° μκ³ μλ κ±΄μ§ μ‘°μ°¨ μ 맀λͺ¨νΈνλ€. μκΈ΄ μκ² λλ°, μ€λͺ
νλ €λ©΄ λ μλ‘μ λ€. νμ§λ§, μ΄λ²μ μ»΄ν¬λνΈννλ©° κ°λ
λ€μ μ νν μ΅ν λ€λ₯Έ λΆλ€κ» μ€λͺ
λ κ°λ₯ν΄μ‘λ€.
- 리μ‘νΈμ€λ¬μ΄ μ½λμ λμ± μ΅μν΄μ‘λ€.
- μλ¬μ κ°μ¬νλ€. λͺ¨λ₯΄λ μνμμ λλ κ²λ³΄λ¨, μ°¨λΌλ¦¬ μλ¬κ° λ μ μ§κ³ λμ΄κ° μ μλ κ²μ κ°μ¬ν¨μ λκΌλ€. λͺ¨λ μλ¬μλ μ΄μ κ° μμ΄ λ€νμ΄λ€.
- μμ¬μν΅μ΄ νμνλ€κ³ λλ λλ μ£Όμ νμ§ μκ³ μ΄μΌκΈ° λλλ €κ³ νλ€. λ§μ νμ§ μμΌλ©΄ μλλ°©μ΄ μ΄λ€ μκ°μ κ°μ§κ³ μλμ§ μ μ μλ€.
4. μμ¬μ΄ μ
-
1μ£Όμ°¨ 곡λ λͺ©νλ₯Ό μ‘κ³ κ°μ§ λͺ»νλ€. μκ°μ΄ νλ₯΄λ©΄μλ λ΄κ° μ§κΈ μ΄ μλλ‘ λμκ°λ κ² λ§λκ±΄μ§ μλ¬Έμ΄ λ€μλ€. μλ¬Έμ΄ λ€μμΌλ©΄μλ μ΄ μκ°λ€μ 곡μ νμ§ λͺ»νκ³ , μ΄λ° μ λ° κ³ λ―Όν μκ°μ μΌλ¨μ λμκ°μ(μ½λλ₯Ό μΉμ..)λ λ§μμ΄μλ€. λ€μ νμ λλ κ°μμ μμ
μλμ νμ΄μ§ μ§νλ₯ μ %λ‘ μμΉννμ¬ κ³΅μ νλ€λ©΄ λ μ’μ κ² κ°λ€.
-
λλ΅μ μΈ λ§μ§λ
Έμ μ κ·Έλ¦¬μ§ λͺ»ν κ². κΈ°ν λ¨κ³ λλΆν° κ°μκ° μ§νν μ μλ μ μ κ·Έλ €μΌ νλλ°, κ·Έλ¬μ§ λͺ»ν μ μ΄λ€. νλ‘μ νΈ κΈ°κ°μ κ³ λ €νλ€λ©΄, μ€μ½νλ₯Ό μ‘°κΈ μ’κ² μ‘μ νμκ° μμλ€. μ¬μ€ μ΄λ»κ² 보면, μ΄κ²μ λΉμ°νλ€. λ³ΈμΈμ μ€λ ₯μ μ ννκ² λͺ¨λ₯΄κ³ , λ νλ°±κ°μ ν΅μ μ΄ μΌλ§νΌ κ±Έλ¦΄μ§ μ ν μμν μ μμκΈ° λλ¬Έμ΄λ€. μ΄ λΆλΆμ λͺ
μ¬νκ³ λ€μ νμ λ λ°μν΄μΌκ² λ€.
5. λ°°μ΄ μ βοΈ
κ°λ° >
- Pages, Componentsμ μ°¨μ΄μ μ μκ³ μ΄λμ μ΄λ€ μ»΄ν¬λνΈλ₯Ό λ§λ€μ΄μΌ νλμ§ μλ€.
- event handlerλ₯Ό μ μν΄μ νΉμ μ΄λ²€νΈμ λΆμ¬ν μ μλ€.
- μμμ»΄ν¬λνΈμμ λΆλͺ¨μ»΄ν¬λνΈμ μ΄λ»κ² λ°μ΄ν°λ₯Ό λκ²¨μΌ νλμ§ μκ³ μλ€.
- map λ©μλλ₯Ό μ¬μ©, jsx 리ν΄νμ¬ λͺ©λ‘μ ꡬνν μ μλ€.
- fetchλ₯Ό μ¬μ©νμ¬ λ°±μ€λ apiλ₯Ό νΈμΆνκ³ , μλ΅λ°μ λ°μ΄ν°λ₯Ό νμ©νμ¬ νλ©΄μ κ·Έλ €μ€ μ μλ€.
- λ‘κ·ΈμΈ μ¬μ©μμ tokenμ μ localStorageμ μ μ₯ νλμ§ μ€λͺ
ν μ μλ€.
- children κ°λ
μ μ΄μ©νμ¬ μ»΄ν¬λνΈλ₯Ό μ¬μ¬μ© ν μ μλ€.
- pathλ‘ λμ λΌμ°ν
μ ꡬνν μ μλ€.
- scssλ₯Ό μ μ¬μ©νλμ§ μ΄ν΄νκ³ μλ€.
- nesting κΈ°λ₯μ νμ©νμ¬ μ€ν°μΌλ§μ ꡬμ±ν μ μλ€.
- scss μ variable / extend / mixin / & λ± μ¬λ¬κΈ°λ₯μ μμ μμ¬λ‘ μ¬μ©ν μ μλ€.
- μ¬μ©μκ° λμ± νΈνκ² μ΄μ©ν μ μλλ‘ μΉμ ν UIμ λν΄ κ³ λ―Όνλ€.
νμ
, μν΅ >
- μλλ λ§μΆ°κ°λ κ²μ΄κ³ , λΆμ‘±ν κ²μ μλ‘ μ±μκ°λ κ²μ΄λ€.
- νΌμκ° μλλΌ νμ΄μ΄μ κ°λ₯νλ κ²°κ³Όλ¬Όμ΄λ€. νμλ€κ³Ό ν¨κ»λΌλ©΄ λΆκ°λ₯μ΄λ μλ€.
- νλ‘ νΈ κ°μ μν΅ λΏλ§ μλλΌ νλ°±κ°μ μν΅ λν 맀μ°λ§€μ° μ€μνλ€.
- 무μμ΄λ μ΄μΌκΈ°λ₯Ό ν΄μΌ μλ€. μλλ°©μ΄ μμμ€ κ²μ΄λΌλ μκ°μ κΈλ¬Ό! μμ§νκ² μ΄μΌκΈ°νλ©΄μ μ견μ μ‘°μ¨ν΄λκ°λ κ²μ΄ μ€μνλ€.
6. λλμ