μ΄ μ±μ κ°λ¨ν λ΄μ©μ μλν°λ‘ μμ±νκ³ , μ μ₯, μμ , μμ ν μ μλ λ ΈνΈ κΈ°λ₯μ μ 곡ν©λλ€. μ¬μ©μλ€μ νμν λλ§λ€ μμ½κ² λ©λͺ¨λ₯Ό μμ±νκ³ κ΄λ¦¬ν μ μμΌλ©°, μ§κ΄μ μΈ μΈν°νμ΄μ€λ‘ ν¨μ¨μ μΈ λ ΈνΈ μ λ¦¬κ° κ°λ₯ν©λλ€.
μ΄ νλ‘μ νΈλ ReactJS, TypeScript, Redux-Toolkit, react-quill, Styled Components, κ·Έλ¦¬κ³ LocalStorageλ₯Ό μ¬μ©νμ¬ κ΅¬νλ κ°λ¨ν λ
ΈνΈ μ ν리μΌμ΄μ
μ
λλ€.
μ¬μ©μλ react-quill μλν°λ₯Ό ν΅ν΄ λ€μν μμ μ΅μ μ νμ©ν΄ λ ΈνΈλ₯Ό μμ±ν μ μμ΅λλ€. ν μ€νΈμ ν¬κΈ°μ κ΅΅κΈ°λ₯Ό μ‘°μ ν μ μμΌλ©°, λͺ©λ‘ μμ±, μ½λ λΈλ‘ μ½μ , μ΄λ―Έμ§ μΆκ° λ± λ€μν νμμ μ½ν μΈ μμ±μ΄ κ°λ₯ν©λλ€. μ΄λ μ¬μ©μμ κΈμ°κΈ° νΈμμ±μ λμ΄κΈ° μν μ£Όμ κΈ°λ₯μ λλ€.
μμ±λ λ ΈνΈλ μ΅μ μμ μΌ κΈ°μ€μΌλ‘ μλ μ λ ¬λλ©°, λ ΈνΈ λͺ©λ‘μμ μ΅κ·Όμ μμ λ λ ΈνΈκ° μλ¨μ νμλ©λλ€. λ ΈνΈλ LocalStorageμ μ μ₯λμ΄ μ¬μ©μκ° λΈλΌμ°μ λ₯Ό μλ‘κ³ μΉ¨νκ±°λ μ±μ μ’ λ£νλλΌλ λ°μ΄ν°κ° μ μ§λ©λλ€. μ΄λ₯Ό ν΅ν΄ μ€νλΌμΈ μνμμλ λ ΈνΈλ₯Ό μ μ₯νκ³ μ μ§ν μ μμ΅λλ€.
Styled Componentsλ₯Ό νμ©νμ¬ λΌμ΄νΈ λͺ¨λμ λ€ν¬ λͺ¨λλ₯Ό μ§μνλ©°, μ¬μ©μ μ νΈμ λ°λΌ ν λ§λ₯Ό μ νν μ μμ΅λλ€. ν λ§ λ³κ²½ μ¬νμ LocalStorageμ μ μ₯λμ΄ μ¬μ©μκ° μ±μ λ€μ μ΄μμ λλ μ μ§λ©λλ€. μ± λ΄μμλ λ€ν¬ λͺ¨λμ λΌμ΄νΈ λͺ¨λ λ³νμ΄ κ°λ₯νλ©°, μΉ λ²μ κ³Ό λμΌν λ°μ΄ν°λ₯Ό μ μ§ν©λλ€.
μ΄ μ±μ PWAλ‘ κ΅¬νλμ΄, PCλ μ€λ§νΈν°μμ μ± ννλ‘ μ€μΉνμ¬ μ¬μ©ν μ μμ΅λλ€. PWAλ₯Ό ν΅ν΄ μ€νλΌμΈμμλ μμ±λ λ ΈνΈλ₯Ό μ‘°ννκ±°λ νΈμ§ν μ μμΌλ©°, μΈν°λ· μ°κ²°μ΄ μμ΄λ ν λ² μ€μΉν μ±μ κ³μ μ¬μ©ν μ μμ΅λλ€.
Styled Componentsλ‘ UIλ₯Ό μ€κ³νμ¬ λ°μν λμμΈμ μ μ©νμ΅λλ€. λ€μν νλ©΄ ν¬κΈ°μμλ μΌκ΄λ μ¬μ©μ κ²½νμ μ 곡νλ©°, λͺ¨λ°μΌκ³Ό λ°μ€ν¬ν± νκ²½ λͺ¨λ μμ μ΅μ μ μ¬μ©μ±μ 보μ₯ν©λλ€.