๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๐Ÿ’๊ณต๋ถ€/ํ”„๋ฆฌ์˜จ๋ณด๋”ฉ์ฝ”์Šค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.