μλ°μ€ν¬λ¦½νΈ μ΄λ²€νΈ 루ν μ리
μλ°μ€ν¬λ¦½νΈμ μ΄λ²€νΈ 루ν μ리λ₯Ό μμλ΄ λλ€.
μλ°μ€ν¬λ¦½νΈμ μ΄λ²€νΈ 루ν μ리λ₯Ό μμλ΄ λλ€.
react-query λ₯Ό μ΄μ©νμ¬ μμ°μ€λ½κ² UI μ λ°μ΄νΈλ₯Ό ν΄λ³΄μ
νλ‘μ νΈλ₯Ό μμ±ν λλ§λ€ λ§€λ² μ€μ ν΄μ£Όμ΄μΌ νλ Prettier νμΌμ μμ Package λ‘ λ°°ν¬ν΄μ, κ°λ° μμ°μ±μ κ°μ ν΄λ³΄λ € νλ€.
2023.12. λ°±λ‘κ·Έ μ 리
Supabase νλ‘μ νΈμμ RLS Auth μ κ°λ μ μμλ³΄κ³ Next.js μ μ μ©ν΄λ³΄κΈ°
λμ€μ μ΅μν΄μ§λ©΄ μ¨λ¨Ήμ μ§μλ€ - 보.λ.보 (λ³΄κ³ λ 보기)
CSS-in-CSS μ CSS-in-JS λ₯Ό λΉκ΅ν΄λ³΄μ
React Native μ Expo λ₯Ό νμ©ν νλ‘μ νΈλ₯Ό κ°λ°νλ©°, λ§μ£Όν μ΄μλ₯Ό μ 리ν©λλ€.
κ°λ° κ³Όμ μμ Task κ΄λ¦¬ μ νλ λ°©λ²μ μ 리
μ»΄ν¬λνΈ λΆλ¦¬ μ°μ΅ 2ν, ν΅μΌμ±μ΄ κΉ¨μ§ νΌ UI μ λμνκΈ°
React hook form μ μ¬μ©νλ©° λ§μ£Όνλ μ»΄ν¬λνΈ λ λλ§ λ¬Έμ λ₯Ό ν΄κ²°ν΄λ³΄μ.
λ¨κ³Όμ λΉκ΅λ κΈλ¬Ό, μ²μΈμ²μ΄μΌ
μ°λ¦¬λ νμ βμ νβμ νλ€.
μΈμ , μΏ ν€, λ‘컬 μ€ν 리μ§μ λν κ°λ μ μ 리νκ³ , λ‘κ·ΈμΈ κ³Όμ μ ꡬνν΄λ³΄μ.
ν΄λ¦° μ½λλ₯Ό μμ±νκ³ μΆμ΄ λ΄€λ ν μ€ μΈλ―Έλ μμ λ©λͺ¨
νΌκ³΅μ»΄μ΄μ 보며 κΈ°μ΅ν΄μΌ ν λ΄μ©μ λ©λͺ¨νλ€.
νλμ© κ°λ¨νκ² μΆκ°ν΄κ°λ μλ°μ€ν¬λ¦½νΈ κΈ°λ³Έ μ§μ λͺ¨μ
μ§λ μΉ λΈλΌμ°μ λ λλ§, React λ λλ§ νΈμ μ΄μ΄, μ΄λ²μ Next.js μ λ λλ§μ κ΄ν΄ λ€λ€λ³΄λ € νλ€.
CORS κ°λ¨ν μ 리
λ€μ μ 리νλ νλ‘μΈμ€μ μ€λ λ
μ§λ μΉ λΈλΌμ°μ λ λλ§ νΈμ μ΄μ΄, μ΄λ²μ React μ λ λλ§μ κ΄ν΄ λ€λ€λ³΄λ € νλ€.
μ§κΈκΉμ§ Next.js μ React λ₯Ό μ¬μ©ν΄μμ§λ§, μμ§λ λ λλ§ κ³Όμ μ λν΄ μ€λͺ ν΄λ΄λΌ νλ©΄ μ λλ‘ λ§νμ§ λͺ»νλ€..!
μ, νμ΄ λ§μλ‘ λμκ°μ λ€μ μ μ μνλ‘ μμνλ€.
JS λ³μ μ’ λ₯μ λν 볡기λ₯Ό ν΄λ³΄λ € νλ€.
βλ©ν° λ ν¬βμ βλͺ¨λ Έ λ ν¬β μ λνμ¬
react-query λ‘ SSR μ§μνλ λ°©λ²μ μμ보μ.
μ΄μ ν¬μ€ν μμ λ€λ£¬ λͺ¨λ Έλ ν¬μ κ°λ μ μ°©μνμ¬, supabase νμ μ μλμΌλ‘ μ λλ μ΄νΈνκ³ μ΄λ₯Ό νμ ν¨ν€μ§λ‘ μ μν΄λ³΄μ
react-query μμ λ°μ΄ν° ν¨μΉ μνλ₯Ό νμΈνλ status κ°μ μμ보μ.
react-query μ 무ν μ€ν¬λ‘€ μ§μμ μν΄ λ§λ useInfiniteQuery λ₯Ό μμ보μ
νμ΄ν¬ κ΄λ ¨ κ°λ¨ν μ§μμ μ 리ν΄λ³΄κ³ , μΉ κ°λ μ±μ λμΌ μ μλ λ°©λ²μ λν΄ μκ°νλ€.
μ΅κ·Ό μ¬μ΄λ νλ‘μ νΈλ₯Ό μ§ννλ©΄μ Supabaseλ₯Ό νμ©νκ² λμκ³ , λ§€λ² νμ μ μ μν΄μΌ νλ λΆνΈν¨μ΄ μμ΄μ μ΄λ₯Ό ν΄κ²°ν΄λ³΄λ € νλ€.
μ λλ©μ΄μ μ μμ½κ² ꡬννλ λ°©λ²μ 무μμΌκΉ?
Next.js Hydration μ΄λ 무μμ΄κ³ , μ€λ₯λ μ΄λ»κ² ν΄κ²°νλ©΄ λ κΉ?
κΈ°λ³Έμ μ΄λ©΄μλ μμ£Ό μ¬μ©λλ, μ νμΌλ‘ λ§ν¬ μ¬λ λ°©λ²μ λν΄ μμλ³΄λ € νλ€.
λλ μ΄λλ‘ κ°μΌν κΉ
Next.js 13 μ λ°μ΄νΈ μ¬νμ νμΈν΄λ³΄μ.
Reactμ createPortal λ‘ Modal μ ꡬνν΄λ³΄μ.
React μμ λͺ¨λκ° μ½λ 곡μ μ μ¬μ¬μ©μ μν΄ μμ£Ό μ¬μ©λλ import / export ES6 ꡬ문μ λν΄ μμλ³΄κ³ μ νλ€.
λλ© νμ΄μ§ lighthouse μ μ κ°μ μ μ§ννλ©° λ°°μ΄ μ λ€μ μ 리ν΄λ³΄λ € νλ€.
on-demand ISR λ‘ νμ μμ°μ±μ κ°μ ν΄λ³΄μ.
νλ‘ νΈμμ api λ₯Ό λ°λ³΅μ μΌλ‘ νΈμΆνμ¬ response λ₯Ό νμΈνλ λ°©λ²μ 무μμΌκΉ?
μ½λ 리뷰λ₯Ό μ νλ €λ©΄ μ΄λ»κ² ν΄μΌ ν κΉ?
μ»΄ν¬λνΈ λΆλ¦¬ μ°μ΅ 1ν, νλμ μ»΄ν¬λνΈμ μ¬λ¬ UI λ₯Ό 보μ¬μ£Όμ΄μΌ νλ κ²½μ° λμνκΈ°
λͺ¨λμ μν¬νΈν΄μ€λ μκ°μ΄ λ무 λλ € μ΄κΈ° λ‘λ©μ΄ μ€λ 걸리λ λ¬Έμ κ° μλ μν©μ΄ λ°μνμλ€.