๋ฆฌ๋์ค
-
โ ์ฐ์ํ ํ ํฌ๋ฌ๋ 3๊ธฐ: React & TypeScript 5ํ์ฐจ์ฐ์ํ ํ ํฌ๋ฌ๋ 3๊ธฐ 2020. 9. 19. 19:03
โ 9์15์ผ (ํ) ์ฐ์ํ ํ ํฌ๋ฌ๋ 3๊ธฐ 5ํ์ฐจ ๊ฐ์ ์ ๋ฆฌ ๐ 5ํ์ฐจ ๊ฐ์ ๋ชฉํ javascript๋ก ๋ง๋ Redux ๋ฆฌ๋ทฐ Redux์ ๋น๋๊ธฐ Redux ๋ฏธ๋ค์จ์ด ์์๋ณด๊ธฐ ๐ป Redux ๋ฆฌ๋ทฐ 2ํ์ฐจ๋ ๋ง๋ ๋ฆฌ๋์ค๋ฅผ ์ฌ์ฉํ์ฌ store์ reducer ์์ฑ ํด์ค๋ค. ์์ธํ ๋ด์ฉ์ ์ ๋งํฌ ์ฐธ์กฐ ๐ index.js import { createStore } from "./redux"; function reducer(state = { counter: 0 }, action) { switch (action.type) { case "inc": return { ...state, counter: state.counter + 1 }; default: return { ...state }; } } const store = ..
-
[React]๋ฆฌ์กํธ์์ react-draft-wysiwyg , DraftJS ์ฌ์ฉํ์ฌ ์๋ํฐ(Editor) ์ ์ฉ ํ Redux๋ก ์ํ๊ด๋ฆฌํ๊ธฐReact 2020. 8. 31. 23:32
โ ๊ฐ์ ๋ธ๋ก๊ทธ ๊ธ์ฐ๊ธฐ๋ ๊ธฐํ ๊ฒ์๊ธ์ ์ธ ๋ textarea๋ก ์์ฑ์ ํ๋ฉด ๋ง์ด ๋ฐ๋ฐํ๊ณ , ๊ธฐ๋ฅ์ ์ผ๋ก ๋ง์ ๊ตฌํ์ ํ๊ธฐ ํ๋ญ๋๋ค. ๊ทธ๋ ๊ธฐ ๋๋ฌธ์ ๊ธ์ฐ๊ธฐ๊ฐ ํ์ํ๊ณ ๊ฒ์๊ธ์ ๋ง๋ค ๋ ์คํ์์ค ์๋ํฐ๋ค์ ์ฌ์ฉํ์ฌ ์ข ๋ ๋ง์ ๊ธฐ๋ฅ์ ๊ฒ์๊ธ์ ์์ฑํ ์๊ฐ ์์ต๋๋ค. ๋ง์ ์คํ์์ค ์๋ํฐ๋ค ์ค์ react-draft-wysiwyg(๋ฆฌ์กํธ๋๋ํํธ์์ง์ ) ์๋ํฐ๋ฅผ ์ฌ์ฉํด๋ดค์ต๋๋ค. ๋ค๋ฅธ ์คํ์์ค ๊ธฐ๋ฐ ๋ฆฌ์กํธ ์๋ํฐ์ ์ข ๋ฅ๋ฅผ ์ฌ์ฉํด๋ณด๊ณ ์ถ์ผ๋ฉด ์ฐธ๊ณ ์ฌ์ฉํ๋ฉด์ react-draft-wysiwyg์ ์ฅ์ ์ ๊ธฐ๋ณธ์ ์ธ ์ฌ์ฉ์ ์ฝ๊ณ , ์ ๋ช ํ ํ์ด์ค๋ถ์์ ๊ด๋ฆฌํ๋ ์๋ํฐ์ธ draft.js๋ฅผ ์ฌ์ฉํ๊ธฐ ์ฝ๊ฒ ๋ฆฌ์กํธ๋ก ๊ตฌ์ฑํ ๊ฒ์ ๋๋ค. ํ์ง๋ง, ๊ธฐ๋ฅ์ ์ผ๋ก ๋ํ ์ผ์ด ๋ถ์กฑํ๋ค๋ ์ ์ด ์๋ค๊ณ ๋๊ผ์ต๋๋ค. ์๋ฅผ ๋ค์ด, ํ๊ธ์ ์ ๋ ฅํ ๋ ๋ฐ..