π 10μ μ€μ, ν νλ‘μ νΈ μ²«λ κΈ°λ‘ - μμ
μ€λμ μ€κΈ νλ‘μ νΈμ 첫λ μ΄λ€. λλμ΄ Part 3 νμλ€κ³Ό ν¨κ» νλ‘μ νΈλ₯Ό μμνκ² λμλλ°, μ°λ¦¬νμ 첫 νμλ₯Ό ν΅ν΄ νμ ν΄λ‘ μ¬μ©ν μ μλ μΌμ κ΄λ¦¬ μμ€ν “Taskify”λΌλ μ£Όμ λ₯Ό μ μ νκ² λμλ€.
π‘ μ£Όμ μ μ μ΄μ
Taskifyλ₯Ό μ£Όμ λ‘ κ³ λ₯Έ μ΄μ λ μμ£Ό κ°λ¨νλ€ γ γ ! μΌμ κ΄λ¦¬ μμ€ν μ μΌμμμ μμ£Ό μ¬μ©λλ μλΉμ€μΈ λ§νΌ, μ¬μ©μμ νΈμλ₯Ό κ³ λ €ν μ¬λ¬ κΈ°λ₯μ ꡬνν΄λ³Ό μ μμ κ² κ°μλ€. κ²λ€κ° νλ‘μ νΈμ κ·λͺ¨κ° 컀μ λ€μν μ»΄ν¬λνΈλ₯Ό λ§λ€μ΄λ³΄λ μ’μ κΈ°νλΌκ³ μκ°νλ€. νμλ€λ λͺ¨λ λμν΄μ£Όμ΄ κΈ°λΆ μ’κ² νλ‘μ νΈλ₯Ό μμν μ μμλ€. π
π οΈ νλ‘μ νΈ μΈν κ³Όμ
첫걸μμΌλ‘, κΉνλΈμ νλ‘μ νΈ λ ν¬μ§ν 리λ₯Ό λ§λ€κ³ νμλ€μ μ΄λνμ΅λλ€. νμ μ μννκ² νκΈ° μν΄ Next.jsμ Tailwind CSSλ₯Ό μ¬μ©νκΈ°λ‘ νλ€.
νλ‘μ νΈ μ΄κΈ° μΈν μ μ¬μ©ν μ£Όμ κΈ°μ μ€ν
- Next.js (Page Routing): νμ΄μ§ λΌμ°ν μ μν νλ μμν¬λ‘ μ±ν
- Tailwind CSS: λΉ λ₯΄κ³ κ°νΈν μ€νμΌλ§
- Axios: API μμ² μ²λ¦¬λ₯Ό μν HTTP ν΄λΌμ΄μΈνΈ
- κ³΅ν΅ μ»΄ν¬λνΈ λͺ¨λν: μ¬μ¬μ©μ±μ λμ΄κΈ° μν΄ κ³΅ν΅ μ»΄ν¬λνΈλ λͺ¨λλ‘ κ΄λ¦¬νκΈ°λ‘ νλ€.
νμ μ κΈ°λ³Έμ μΌκ΄μ±! κ·Έλμ μ½λ 컨벀μ λ ν¨κ» μ νκ³ νμ μ μν λΈλμΉ μ λ΅λ μ립νμ΅λλ€. λΈλμΉ μ λ΅μΌλ‘λ νμ μ λ리 μ¬μ©λλ GitFlowλ°©μμ μ±ννμ¬, κΈ°λ₯λ³λ‘ λΈλμΉλ₯Ό λλμ΄ μμ νκ³ ν©μΉλ κ³Όμ μμ μΆ©λμ μ΅μνν μ μλλ‘ νλ€.
π R&D λΆλ°°μ μν μ νκΈ°
μ΄κΈ° μ€μ μ΄ λλ ν, νΌκ·Έλ§μ λμμΈν΄λ λ€μν νμ΄μ§λ₯Ό 보λ μ λ§ λ§μλ€ π± κ·Έλμ κΈ°λ₯λ³λ‘ μμ μ λλκΈ°λ‘ νλ€.
- λλ© νμ΄μ§
- λ‘κ·ΈμΈ/νμκ°μ νμ΄μ§
- λμ보λ νμ΄μ§
- λͺ¨λ¬ μ°½ <- λ΄κ° 맑μ κ² π
π§π» λͺ¨λ¬ μμ κ³Ό 첫 ν μ€νΈ
μ¬μ€ μ²μμλ μ΄λμλΆν° μμ μ μμν΄μΌ ν μ§ μ’ λ§λ§νλ€. κ·Έλμ κ°μ₯ λ¨Όμ λͺ¨λ¬ κΈ°λ₯λΆν° ν μ€νΈν΄λ³΄κΈ°λ‘ νλ€. μ΄μ μλ z-indexλ₯Ό μ¬μ©ν΄μ λͺ¨λ¬μ νλ©΄ 맨 μμ λμ μλλ°, μ΄λ²μλ λ©ν λμ΄ μΆμ²ν΄μ£Όμ Portalμ νμ©ν΄λ³΄κΈ°λ‘ νλ€.
Portalμ λͺ¨λ¬μ νΉμ DOM λ Έλλ‘ λ³΄λ΄μ μ΄λμλ μ΅μλ¨μ μμΉμν¬ μ μλ κΈ°λ₯μ λλ€. Portalλ‘ λͺ¨λ¬μ ν μ€νΈν΄ 보λ, μκ°λ³΄λ€ κΉλνκ² μ μ©λμ΄ κΈ°λΆμ΄ μ’μλ€! π
π API ν΅μ κ³Ό λ‘κ·ΈμΈ κΈ°λ₯
μ΄μ λͺ¨λ¬ ν μ€νΈκ° λλ ν, λ€μν κΈ°λ₯μ λ ν μ€νΈνλ €λ©΄ API ν΅μ μ΄ νμνλ€.
νμ§λ§ λ§μ API μμ μ μμνλ €λ ν μΌμ΄ λ§μλ€. μΌλ¨ axiosInstanceλ§ λ§λ€μ΄ λμ μνμλλ°, νμν APIκ° λ§μμ 컀μ€ν Hookμ λ§λ€κΈ°κΉμ§λ μκ°μ΄ μ’ κ±Έλ¦΄ κ² κ°μλ€.
κ²λ€κ° μ΄λ² νλ‘μ νΈμμλ API νΈμΆ μ ν ν°μ΄ νμνλλ°, μ΄λ₯Ό ν΄κ²°νκΈ° μν΄ κ°λ¨ν λ‘κ·ΈμΈ νμ΄μ§λ₯Ό λ§λ€μ΄μ ν μ€νΈμ©μΌλ‘ ν ν°μ λ°κΈλ°μ μ§ννκΈ°λ‘ νλ€.
νμ§λ§ μ¬κΈ°μ λ»λ°μ λκ΄μ΄ κΈ°λ€λ¦¬κ³ μμμΌλ, λ°λ‘ CORS μλ¬π΅
π¨ CORS λ¬Έμ ν΄κ²°νκΈ°
CORS μλ¬μ μμΈμ μλ²μμ Access-Control-Allow-Originμ *λ‘ μ€μ ν λ°λ©΄, ν΄λΌμ΄μΈνΈμμ withCredentials: trueλ₯Ό μ¬μ©νλ € νκΈ° λλ¬Έμ΄μλ€.
CORS λ¬Έμ ν΄κ²° λ°©λ²
Access-Control-Allow-Origin: *μ withCredentials: trueλ ν¨κ» μ¬μ©ν μ μλ€λ μ¬μ€μ μκ² λμλ€. μ΄ μ€μ μ λͺ¨λ μΆμ²μμ μμ²μ νμ©νμ§λ§, μΈμ¦ μ 보λ₯Ό ν¬ν¨ν μμ²μ νμ©νμ§ μκΈ° λλ¬Έμ΄λ€. κ·Έλμ ν΄λΌμ΄μΈνΈμμ withCredentials: falseλ‘ μ€μ ν΄ λ¬Έμ λ₯Ό ν΄κ²°νλ€. μ΅κ·Όμλ JWTμ κ°μ ν ν° κΈ°λ° μΈμ¦ λ°©μμ΄ λ§μ΄ μ¬μ©λκΈ° λλ¬Έμ, μΈμ¦ μ 보λ₯Ό ν€λμ ν¬ν¨ν΄ μ²λ¦¬νλ λ°©μμ μ ννλ€.
π§ Next.js μ€μ μ΅μ ν
λ§μ§λ§μΌλ‘, κ°λ° κ³Όμ μμ νΈλ¦¬ν¨μ λνκΈ° μν΄ Next.js μ€μ μ λ€λ¬μλ€.
SVG μ»΄ν¬λνΈν : next.config.mjsμμ SVG νμΌμ μ»΄ν¬λνΈμ²λΌ μ¬μ©ν μ μλλ‘ μ€μ νλ€. λλΆμ SVG μμ΄μ½μ λ μ½κ² νμ©ν μ μμλ€.
- κ²½λ‘ Alias μ€μ : @/λ₯Ό μ¬μ©ν΄ λ£¨νΈ κ²½λ‘λ₯Ό κ°νΈνκ² μ°Έμ‘°ν μ μλλ‘ Node.jsμ path λͺ¨λμ νμ©ν΄ μ€μ νλ€. μ΄λ κ² μ€μ ν΄λλ μ½λλ₯Ό μμ±ν λ λΆνμν κ²½λ‘ μμ±μμ ν΄λ°©λ λλμ΄λκΉ? π
π λ§λ¬΄λ¦¬νλ©°
νλ‘μ νΈ μ²«λ , νμλ€κ³Ό ν¨κ» μ΄κΈ° μ€μ μ λ§μΉκ³ λλ μ ν μ μμκΉ, κ±±μ λκΈ°λ νμ§λ§ μ΄κΈ νλ‘μ νΈλ₯Ό μνν μ΄ν νμ μ λν μμ κ°μ΄ μ‘°κΈμ μκΈ΄ κ² κ°μμ μμΌλ‘ Taskify νλ‘μ νΈκ° μ΄λ»κ² μμ±λ μ§ κΈ°λκ° λλ€. μ΄μ¬ν λ°°μκ°λ©° μ±μ₯νλ μκ°μ΄ λκΈΈ λ°λΌλ©΄μ, μ€λμ μ¬κΈ°μ λ§λ¬΄λ¦¬ ! π