๐๊ณต๋ถ/ํ๋ฆฌ์จ๋ณด๋ฉ์ฝ์ค11 [ํ๋ฆฌ์จ๋ณด๋ฉ์ฝ์ค] 6์ฃผ์ฐจ - ๊ณผ์ 9 โ์๊ฒ๋ ๊ฒ๊ณผ ๋๋์ redux-saga....... ์ด๋ ต๋ค! json-server window hostsํ์ผ ์์ ๐ฅ๊ทธ๋์ ํด๋ณด๋ ์ ๋ฆฌ 1. redux-saga....... ์ด๋ ต๋ค! ํ์ง๋ง redux-saga๋ฅผ ํ๊ธฐ์ ์ ๋์ด์ผํ๋ ํฐ ์ฐ์ด ํ๋ ์๋๋ฐ..... #๊ฐ๋ณด์๊ณ โ Generator function weirdFunction() { return 1; // ๋ณดํต ํจ์๋ return์ ์ฌ๋ฌ ๋ฒ ํ ์ ์๋ค! return 2; // ์ด ํจ์๋ ํธ์ถํ ๋ ๋ง๋ค 1๋ง ๋ฐํํ ๊ฒ์ด๋ค. return 3; return 4; return 5; } ์์ ์์์ ๋ฌ๋ฆฌ, ์ ๋๋ ์ดํฐ ํจ์๋ฅผ ์ฌ์ฉํ๋ฉด ๊ฐ์ ์์ฐจ์ ์ผ๋ก ๋ฐํํ ์ ์๊ฒ ๋๋ค. ์ ๋๋ ์ดํฐ ํจ์๋ฅผ ๋ง๋ค ๋์๋ function* ์ด๋ผ๋ ํค์๋๋ฅผ ์ฌ์ฉํ๋ค. ์ ๋๋ .. 2021. 9. 12. [ํ๋ฆฌ์จ๋ณด๋ฉ์ฝ์ค] 3์ฃผ์ฐจ -๊ณผ์ 5 ๋๋์ด ์ฐ๋ ๊ณผ์ 5!! ์์ ๋ชจ์์ ๋๋๋ ๊ฒ์ ์๋์์ฑ ๋ฑ์ ๊ธฐ๋ฅ์ ๊ตฌํํ ๋์๋ ์ ์ฉํ ๊ฒ ๊ฐ์์ ํ๋ฉด์๋ ์ฌ๋ฐ์๋ค. โ์๊ฒ๋ ๊ฒ๊ณผ ๋๋์ ์ ๋์ฝ๋๋? js์์ ์ ๋์ฝ๋ ์จ๋ณด๊ธฐ ํ๊ธ ๋ถํดํ๊ธฐ ๐ฅ๊ทธ๋์ ํด๋ณด๋ ์ ๋ฆฌ 1. ์ ๋์ฝ๋๋? ์ ์ธ๊ณ์ ๋ชจ๋ ๋ฌธ์๋ฅผ ๋ค๋ฃจ๋๋ก ์ค๊ณ๋ ํ์ค ๋ฌธ์ ์ ์ฐ ์ฒ๋ฆฌ ๋ฐฉ์. ํด๋น ๊ธ์์ ์ฝ๋๋ฅผ ํ๊ธฐํ ๋ U+ (16์ง์ ์ซ์)๋ก ์์ฑํจ → ๊ฐ == U+AC00 (10์ง์ 44032) ํ๊ธ์ ํ์(88,884์) ๋ค์์ผ๋ก ๊ฐฏ์๊ฐ ๋ง๋ค (๊ฐ, ๊ฐ, ๊ฐ, ๊ฐ, ... ํ , ํก, ํข, ํฃ ์ด๋ ๊ฒ ๋ชจ๋ ์กฐํฉ์ด ๋ค ๋ค์ด๊ฐ์์) 2. js์์ ์ ๋์ฝ๋ ์จ๋ณด๊ธฐ // ๋ฌธ์์ด → ์ ๋์ฝ๋ str.charCodeAt(index) // ์ ๋์ฝ๋ → ๋ฌธ์์ด String.fromCharCode(num1.. 2021. 9. 6. [ํ๋ฆฌ์จ๋ณด๋ฉ์ฝ์ค] 5์ฃผ์ฐจ -๊ณผ์ 8 โ์๊ฒ๋ ๊ฒ๊ณผ ๋๋์ global style๋ก reset.css ์ฌ์ฉํ๊ธฐ StyeldComponent์ ๋ณ์ ์ฌ์ฉํ์ฌ ์ ๋๋ฉ์ด์ ์ฃผ๊ธฐ Drag and Drop ์ฌ์ฉํ๊ธฐ ContextAPI + ์ํ๊ด๋ฆฌ์ ์ด๋ ค์ TypeScript์ ์นํด์ง ์ ์์๊น? ๐ฅ๊ทธ๋์ ํด๋ณด๋ ์ ๋ฆฌ 1. global style๋ก reset.css ์ฌ์ฉํ๊ธฐ src/styles/GlobalStyle.ts ๋ฅผ ์์ฑํ์ฌ ์ต์๋จ์์ importํ๋ค. GlobalStyle์ ์์ฑํ ๋์๋ ์๋์๊ฐ์ด importํ์ฌ ์ ์ด์ผ ํ๋ค. import { createGlobalStyle } from 'styled-components'; const GlobalStyle = createGlobalStyle` * { box-sizing: border-box;.. 2021. 8. 30. [ํ๋ฆฌ์จ๋ณด๋ฉ์ฝ์ค] 4์ฃผ์ฐจ - ๊ณผ์ 7 ๐โ๏ธ์ ๊น๋ง์! ์ ๊ณผ์ 5 ๊ธ์ด ์๋๋ฉด.. ์์๋ฅผ ์ฐฉ๊ฐํด์ ์๋ชป ์ผ๊ธฐ ๋๋ฌธ์..!๐ญ๐ญ๐ญ๐ญ ์ผ๋จ ์ง๊ธ์ ๊ธฐ์ค์ผ๋ก (=์์ ๋ ์ดํ) 5๋ฒ์งธ ๊ณผ์ : ๊ฐ์ธ - ํ๊ธ ์์ ์นด์ดํธ 6๋ฒ์งธ ๊ณผ์ : ํํ - ์ ๋ ฌ๊ณผ์ 7๋ฒ์งธ ๊ณผ์ : ๊ฐ์ธ - ํฌ๋๋ฆฌ์คํธ ์ ๋๋น.. 5๋ฒ์งธ ๊ณผ์ ์๊ธฐ๋ ์ถํ ์ฌ๋ฆด ์์ ..! (5๋ฒ์งธ ๊ณผ์ ์ถ๊ฐํ๊ณ ๊ฐ๋๋ค๐ฅฐ ๋ฐ๋ก ๋ณด๊ธฐ) โ์๊ฒ๋ ๊ฒ๊ณผ ๋๋์ ์ปดํฌ๋ํธ ์ค๊ณ ํท๊ฐ๋ฆฌ์ง ๋ง์ ํธ๋ฆฌํ antd filter ๋ฉ์๋ typescript์ ์นํด์ง๊ณ ์ถ๋ค ๐ฅ๊ทธ๋์ ํด๋ณด๋ ์ ๋ฆฌ 1. ์ปดํฌ๋ํธ ์ค๊ณ ํท๊ฐ๋ฆฌ์ง ๋ง์ components ํด๋ ์์๋ ์ฌ์ฌ์ฉํ ์ปดํฌ๋ํธ๋ฅผ ์ฃผ๋ก ๋ชจ์์ผ ํ๋ค. (๋ ์ด์์ ๊ธฐ๋ฐx) routes.js์์ import ํ๋ ์ปดํฌ๋ํธ๋ ์ฌ๋งํ๋ฉด components ์์ ์์ผ๋ฉด ์๋จ ๋ฐ์ดํฐ๊ฐ.. 2021. 8. 23. [ํ๋ฆฌ์จ๋ณด๋ฉ์ฝ์ค] 4์ฃผ์ฐจ - ๊ณผ์ 6 โ์๊ฒ๋ ๊ฒ๊ณผ ๋๋์ toLocaleDateString js์ split, ๊ทธ๋ฆฌ๊ณ map ์ ๋ ฌ.. .prettierrc ๋นผ๋จน์ง๋ง์ ES7์ ๋ชฐ๋๋ ๊ณผ๊ฑฐ์ ๋์ผ ๐ฅ๊ทธ๋์ ํด๋ณด๋ ์ ๋ฆฌ 1. toLocaleDateString MDN ์ฐธ๊ณ ๊ณผ์ ์์ "ko-KR", "en-US" ํ์์ ๋ง๊ฒ ๋ ์ง๋ฅผ ์ถ๋ ฅํ๋ ๋ถ๋ถ์ด ์์๋๋ฐ, Locale ์ ๊ฑฐ๋ฅผ ๋ชฐ๋ผ์ ํ๋ํ๋ getFullYear....ํด์ ์ค์ ํ๊ณ ์์๋ค. ์์ผ์ ์ฌ์ง์ด ํ๊ธ๊ณผ ์์ด 2๊ฐ์ง๋ก ๋ํ๋ด์ผ ํ๋ ๋ฐฐ์ด๋ ๋๊ฐ! ์ฝ๋ ์๋ ๋๋ฐฐ! ์ ๋ฐ๊ฒ ์๋ค๊ณ ์๋ ค์ฃผ์ ๊ฐ์ง๊ตฌ ๋ถ๋ชจ์ปดํฌ๋ํธ์์ type๋ฅผ ๋๊ฒจ์ ์์์์ ํ์ธ ํ ์ ์ฉํด์คฌ๋ค. // ๋ถ๋ชจ ์ปดํฌ๋ํธ // ์ฝ๋ ์๋ต return ( // ์ฝ๋ ์๋ต // ์์ ์ปดํฌ๋ํธ function DateTime({ type .. 2021. 8. 18. ์ด์ 1 2 3 ๋ค์