diff --git a/keyword/chapter08/keyword.md b/keyword/chapter08/keyword.md new file mode 100644 index 0000000..44de467 --- /dev/null +++ b/keyword/chapter08/keyword.md @@ -0,0 +1,54 @@ +- useMutation ๐Ÿ  + + ๋น„๋™๊ธฐ์ ์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ƒ์„ฑ, ์—…๋ฐ์ดํŠธ, ์‚ญ์ œํ•˜๊ณ  ๊ฒฐ๊ณผ๋ฅผ ๊ด€๋ฆฌํ•œ๋‹ค + + ์ฃผ๋กœ ์„œ๋ฒ„์— ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด๋‚ด๋Š” ์ž‘์—…(API POST, PUT, DELETE ์š”์ฒญ ๋“ฑ)์— ์‚ฌ์šฉ + + ์„ฑ๊ณต/์‹คํŒจ ํ›„์˜ ์ž‘์—… ํ๋ฆ„์„ ์ œ์–ดํ•  ์ˆ˜ ์žˆ๋Š” ๋‹ค์–‘ํ•œ ์˜ต์…˜์„ ์ œ๊ณต + + - ์˜ต์…˜ + - onMutate + + ์ž‘์—… ์‹คํ–‰ ์ง์ „์— ํ˜ธ์ถœ๋œ๋‹ค + + ๋‚™๊ด€์  ์—…๋ฐ์ดํŠธ๋ฅผ ๊ตฌํ˜„ํ•˜๊ฑฐ๋‚˜ ๊ธฐ์กด ๋ฐ์ดํ„ฐ๋ฅผ ์บ์‹œ์— ์ €์žฅํ•  ๋•Œ ์‚ฌ์šฉ + + ๋ฐ˜ํ™˜๊ฐ’์€ onError, onSettled์—์„œ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋‹ค + + - onSuccess + + ์ž‘์—… ์„ฑ๊ณต ํ›„ ํ˜ธ์ถœ + + ์บ์‹œ ์—…๋ฐ์ดํŠธ, ์„ฑ๊ณต ์•Œ๋žŒ์— ์‚ฌ์šฉ + + - onError + + ์ž‘์—… ์‹คํŒจ ์‹œ ํ˜ธ์ถœ + + ์˜ค๋ฅ˜ ๋ฉ”์„ธ์ง€, ์ด์ „ ์ƒํƒœ ๋ณต์›์— ์‚ฌ์šฉ + + - onSettled + + ์ž‘์—…์˜ ์„ฑ๊ณต ์‹คํŒจ ์—ฌ๋ถ€์— ์ƒ๊ด€์—†์ด ํ˜ธ์ถœ + + ์ƒํƒœ ์ •๋ฆฌ, UI ์—…๋ฐ์ดํŠธ์— ์‚ฌ์šฉ + + - invalidateQueries + + ํŠน์ • ์ฟผ๋ฆฌ๋ฅผ ๋‹ค์‹œ ๊ฐ€์ ธ์˜ค๊ฒŒ ๊ฐ•์ œ ์‹คํ–‰ํ•˜๋Š” ํ•จ์ˆ˜ + + onSuccess, onSettled์—์„œ ๋ฐ์ดํ„ฐ๊ฐ€ ๋ณ€๊ฒฝ๋œ ํ›„ ์บ์‹œ์— ์ €์žฅ๋œ ๋ฐ์ดํ„ฐ๋ฅผ ์ƒˆ๋กœ๊ณ ์นจํ•  ๋•Œ ์ฃผ๋กœ ์‚ฌ์šฉ + +- ๋‚™๊ด€์  ์—…๋ฐ์ดํŠธ (Optimistic Update) ๐Ÿ  + + ์„œ๋ฒ„ ์ž‘์—…์ด ์„ฑ๊ณตํ•  ๊ฒƒ์ด๋ผ ๊ฐ€์ •ํ•˜๊ณ  ์ž‘์—… ๊ฒฐ๊ณผ๋ฅผ ์ฆ‰์‹œ UI์— ๋ฐ˜์˜ํ•˜๋Š” ๊ฒƒ + + ๋„คํŠธ์›Œํฌ ์ง€์—ฐ ์‹œ๊ฐ„์„ ์ˆจ๊ธธ ์ˆ˜ ์žˆ์ง€๋งŒ ์„œ๋ฒ„ ์ž‘์—… ์‹คํŒจ ์‹œ UI๋ฅผ ์›๋ž˜ ์ƒํƒœ๋กœ ๋ณต๊ตฌํ•ด์•ผ ํ•œ๋‹ค + + - ๋‚™๊ด€์  ์—…๋ฐ์ดํŠธ๋ฅผ `useMutation`์„ ํ™œ์šฉํ•˜์—ฌ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•? + + `onMutate` : ์ƒˆ ๋ฐ์ดํ„ฐ๋ฅผ UI์— ๋ฏธ๋ฆฌ ๋ฐ˜์˜ํ•œ๋‹ค + + `onError` : ์„œ๋ฒ„ ์ž‘์—…์ด ์‹คํŒจํ–ˆ์„ ๋•Œ UI๋ฅผ ์›๋ž˜ ์ƒํƒœ๋กœ ๋ณต์›ํ•œ๋‹ค + + `onSuccess` : ์„œ๋ฒ„ ์‘๋‹ต ๋ฐ์ดํ„ฐ์™€ ์ผ์น˜ ์—ฌ๋ถ€๋ฅผ ํ™•์ธํ•˜๊ณ  ์กฐ์ • \ No newline at end of file diff --git a/keyword/chapter09/keyword.md b/keyword/chapter09/keyword.md new file mode 100644 index 0000000..5d869e3 --- /dev/null +++ b/keyword/chapter09/keyword.md @@ -0,0 +1,242 @@ +- State + + ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ๋™์ ์ธ ๋ฐ์ดํ„ฐ๋ฅผ ๊ด€๋ฆฌํ•˜๋Š” ๋ฐฉ๋ฒ• + + ex) ๋ฒ„ํŠผ ํด๋ฆญ ์‹œ ์นด์šดํŠธ ๊ฐ’ ์ฆ๊ฐ€ + + - State๋ฅผ ์ •์˜ํ•  ๋•Œ ์ค‘์š”ํ•œ ์ ์€ ๋ฌด์—‡์ด๊ณ , ๊ทธ ์ด์œ ๋Š” ๋ฌด์—‡์ธ๊ฐ€์š”? + + ๋ถˆ๋ณ€์„ฑ ์œ ์ง€ + + ์ƒํƒœ๋ฅผ ์ง์ ‘ ์ˆ˜์ •ํ•˜์ง€ ์•Š๊ณ  ๋ณต์‚ฌ๋ณธ์„ ๋งŒ๋“  ๋’ค ๋ณต์‚ฌ๋ณธ์„ ์ˆ˜์ •ํ•˜์—ฌ ์ƒˆ๋กœ์šด ์ƒํƒœ๋กœ ์„ค์ •ํ•œ๋‹ค + + โ†’ ๋‹ค์‹œ ๋ Œ๋”๋งํ•˜์ง€ ์•Š์•„ react์˜ ์ถ”์ ์„ ํ”ผํ•  ์ˆ˜ ์žˆ๋‹ค + + ์ปดํฌ๋„ŒํŠธ ๊ฐ„ ๋ฐ์ดํ„ฐ ํ๋ฆ„ + + ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ์—์„œ ์ž์‹ ์ปดํฌ๋„ŒํŠธ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•œ๋‹ค + + - React Component ์ƒ๋ช…์ฃผ๊ธฐ์— ๋Œ€ํ•ด ์„ค๋ช…ํ•ด์ฃผ์„ธ์š”. + + Mounting + + ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ฒ˜์Œ ํ™”๋ฉด์— ๋‚˜ํƒ€๋‚  ๋•Œ ์‹คํ–‰ + + `constructor`, `getDerivedStateFromProps`, `render`, `componentDidMount` ๋“ฑ + + Updating + + ์ปดํฌ๋„ŒํŠธ์˜ ์ƒํƒœ๋‚˜ props๊ฐ€ ๋ณ€๊ฒฝ๋  ๋•Œ ์‹คํ–‰ + + `getDerivedStateFromProps`, `shouldComponentUpdate`, `render`, `getSnapshotBeforeUpdate`, `componentDidUpdate` ๋“ฑ + + Unmounting + + ์ปดํฌ๋„ŒํŠธ๊ฐ€ DOM์—์„œ ์ œ๊ฑฐ๋  ๋•Œ ์‹คํ–‰ + + `componentWillUnmount` + +- Hooks + - Hooks๊ฐ€ ๊ฐœ๋ฐœ๋œ ์ด์œ ๋Š” ๋ฌด์—‡์ธ๊ฐ€์š”? + + ํด๋ž˜์Šคํ˜• ์ปดํฌ๋„ŒํŠธ์˜ ๋ณต์žกํ•œ ๋กœ์ง์„ ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ์—์„œ๋„ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ + + - useState์— ๋Œ€ํ•œ ๊ฐ„๋‹จํ•œ ์„ค๋ช…๊ณผ ์‚ฌ์šฉ๋ฒ•์„ ์„ค๋ช…ํ•ด ์ฃผ์„ธ์š”. + + useState + + ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ์—์„œ ์ƒํƒœ๋ฅผ ์„ ์–ธํ•˜๊ณ  ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” Hook + + ```cpp + const [state, setState] = useState(initialState); + ``` + + - SideEffect์˜ ์‚ฌ์ „์  ์˜๋ฏธ์™€, React์—์„œ ์‚ฌ์šฉ๋˜๋Š” ์˜๋ฏธ์™€ ํ•จ๊ป˜ React์—์„œ๋Š” ์™œ ํ•ด๋‹น ์˜๋ฏธ๋ฅผ ๊ฐ–๋Š”์ง€, ๊ทธ ์ด์œ ๋ฅผ ํ•จ๊ป˜ ์„ค๋ช…ํ•ด ์ฃผ์„ธ์š”. + + SideEffect + + ์–ด๋–ค ๋™์ž‘์ด ์™ธ๋ถ€ ์ƒํƒœ๋‚˜ ์‹œ์Šคํ…œ์˜ ์ƒํƒœ์— ์˜ํ–ฅ์„ ๋ฏธ์น˜๋Š” ํ˜„์ƒ + ์ปดํฌ๋„ŒํŠธ ๋ Œ๋”๋ง ์™ธ๋ถ€์—์„œ ์ผ์–ด๋‚˜๋Š” ๋™์ž‘๋“ค + + ex) API ํ˜ธ์ถœ, ํƒ€์ด๋จธ ์„ค์ •, ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ ๋“ฑ๋ก ๋“ฑ + + React์—์„œ ๋ Œ๋”๋ง๊ณผ ๊ด€๋ จ๋œ ์ž‘์—…๋งŒ ๊ด€๋ฆฌํ•˜๊ณ , ๊ทธ ์™ธ์˜ ์ž‘์—…์€ side effect๋กœ ๋ถ„๋ฆฌํ•˜์—ฌ ๊ด€๋ฆฌํ•˜์—ฌ ๋ Œ๋”๋ง ์„ฑ๋Šฅ ์ตœ์ ํ™” + + - useEffect์— ๋Œ€ํ•œ ๊ฐ„๋‹จํ•œ ์„ค๋ช…๊ณผ ์‚ฌ์šฉ๋ฒ•, ๊ทธ๋ฆฌ๊ณ  useEffect ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋˜๋Š” ์‹œ์ ์„ ์„ค๋ช…ํ•ด ์ฃผ์„ธ์š”. + + useEffect + + side effect๋ฅผ ์ฒ˜๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ๋˜๋Š” Hook + + ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ Œ๋”๋ง๋œ ํ›„์— ์‹ค๋œ๋‹ค + + ```cpp + useEffect(() => { + // side effect + }, [dependencies]); // ๋ณ€์ˆ˜๊ฐ€ ๋ณ€๊ฒฝ๋  ๋•Œ ์‹คํ–‰๋จ + ``` + + - effect ํ•จ์ˆ˜๊ฐ€ mount, unmount๊ฐ€ ๊ฐ๊ฐ ํ•œ ๋ฒˆ๋งŒ ์‹คํ–‰๋˜๊ฒŒ ํ•˜๋ ค๋ฉด ์–ด๋–ป๊ฒŒ ํ•ด์•ผ ํ•˜๋‚˜์š”? + + ๋นˆ ๋ฐฐ์—ด์„ ์ „๋‹ฌํ•œ๋‹ค + + ```cpp + useEffect(() => { + // ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋งˆ์šดํŠธ๋  ๋•Œ ํ•œ ๋ฒˆ ์‹คํ–‰ + return () => { + // ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์–ธ๋งˆ์šดํŠธ๋  ๋•Œ ์‹คํ–‰ + }; + }, []); // ๋นˆ ๋ฐฐ์—ด + ``` + + - Hooks์˜ ๊ทœ์น™๋“ค์— ๋Œ€ํ•ด ์„ค๋ช…ํ•ด ์ฃผ์„ธ์š”. + + ์ตœ์ƒ์œ„์—์„œ๋งŒ ํ˜ธ์ถœ + + ์กฐ๊ฑด๋ฌธ์ด๋‚˜ ๋ฐ˜๋ณต๋ฌธ ๋‚ด์—์„œ ํ˜ธ์ถœํ•˜์ง€ ์•Š๋Š”๋‹ค + + โ†’ React๊ฐ€ ์ƒํƒœ ๊ด€๋ฆฌ ๋ฐ ๋ Œ๋”๋ง์„ ์˜ˆ์ธก ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•œ๋‹ค + + ์ปดํฌ๋„ŒํŠธ ๋‚ด์—์„œ๋งŒ ํ˜ธ์ถœ + + Hooks๋Š” ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ๋‚˜ ์ปค์Šคํ…€ Hook ๋‚ด์—์„œ๋งŒ ํ˜ธ์ถœ + + ์ผ๊ด€๋˜๊ฒŒ ํ˜ธ์ถœ + + ๋ Œ๋”๋ง ์‹œ๋งˆ๋‹ค ๋™์ผํ•œ ์ˆœ์„œ๋กœ ํ˜ธ์ถœ + +- Props-Drilling + + ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ์—์„œ ์ž์‹ ์ปดํฌ๋„ŒํŠธ๋กœ, ๊ทธ ์ž์‹์—์„œ ๋˜ ๋‹ค๋ฅธ ์ž์‹์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•˜๋Š” ๋ฐฉ์‹ + + - ๋ฌธ์ œ์  + + ๋ฐ์ดํ„ฐ ์ „๋‹ฌ์ด ๊นŠ์–ด์งˆ์ˆ˜๋ก ์ฝ”๋“œ๊ฐ€ ๋ณต์žกํ•ด์งˆ ์ˆ˜ ์žˆ๋‹ค + + - ํ•ด๊ฒฐ ๋ฐฉ๋ฒ• + + Context API๋‚˜ ์ƒํƒœ ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ(Redux, Zustand ๋“ฑ)๋ฅผ ์‚ฌ์šฉ + + โ†’ ๋ฐ์ดํ„ฐ๋ฅผ ์ „์—ญ์ ์œผ๋กœ ๊ด€๋ฆฌ, ํ•„์š”ํ•œ ์ปดํฌ๋„ŒํŠธ์—๋งŒ ์ „๋‹ฌ + +- Context-Api + + ์ปดํฌ๋„ŒํŠธ ํŠธ๋ฆฌ์—์„œ ์ง์ ‘์ ์œผ๋กœ props๋ฅผ ์ „๋‹ฌํ•˜์ง€ ์•Š๊ณ , ์ „์—ญ์ ์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ๊ณต์œ ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค€๋‹ค + +- Redux + - ์ƒํƒœ๊ด€๋ฆฌ๋Š” ์™œ ํ•„์š”ํ•œ๊ฐ€์š”? + + ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์—ฌ๋Ÿฌ ์ปดํฌ๋„ŒํŠธ์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ์ผ๊ด€๋˜๊ฒŒ ๊ด€๋ฆฌํ•˜๊ณ , ๋ณ€๊ฒฝ ์‚ฌํ•ญ์„ ์ถ”์ ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ฃผ๊ธฐ ๋•Œ๋ฌธ + + - ์ƒํƒœ ๊ด€๋ฆฌ ํˆด์€ ์–ด๋–ค ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•ด ์ฃผ๋‚˜์š”? + + ๋ณต์žกํ•œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ์ƒํƒœ ๋ณ€๊ฒฝ์„ ์˜ˆ์ธก ๊ฐ€๋Šฅํ•˜๊ณ  ๊ด€๋ฆฌํ•˜๊ธฐ ์‰ฝ๊ฒŒ ๋งŒ๋“ค์–ด ์ค€๋‹ค + + โ†’ ์ƒํƒœ๊ฐ€ ํ•œ ๊ณณ์—์„œ ๊ด€๋ฆฌ + + โ†’ ๋””๋ฒ„๊น…์ด๋‚˜ ํ™•์žฅ์„ฑ์— ์œ ๋ฆฌ + + - Redux์˜ ๊ธฐ๋ณธ ๊ฐœ๋… ์„ธ ๊ฐ€์ง€์— ๋Œ€ํ•ด ์„ค๋ช…ํ•ด ์ฃผ์„ธ์š”. + + Store + + ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์ƒํƒœ๋ฅผ ๋ณด๊ด€ํ•˜๋Š” ๊ฐ์ฒด + + Action + + ์ƒํƒœ๋ฅผ ๋ณ€๊ฒฝํ•˜๊ธฐ ์œ„ํ•œ ์ด๋ฒคํŠธ + + `{ type, payload }` ๊ตฌ์กฐ + + Reducer + + Action์„ ๋ฐ›์•„ ์ƒˆ๋กœ์šด ์ƒํƒœ๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ํ•จ์ˆ˜ + + ์ƒํƒœ๋ฅผ ์–ด๋–ป๊ฒŒ ๋ณ€ํ˜•ํ• ์ง€ ์ •์˜ + + - Store, Action, Reducer์˜ ์˜๋ฏธ์™€ ํŠน์ง•์— ๋Œ€ํ•ด ์„ค๋ช…ํ•ด ์ฃผ์„ธ์š”. + + Store + + ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๋ชจ๋“  ์ƒํƒœ๋ฅผ ์ค‘์•™์—์„œ ๊ด€๋ฆฌ + + Action + + type: ์ƒํƒœ๋ฅผ ์–ด๋–ป๊ฒŒ ๋ณ€๊ฒฝํ• ์ง€ ์„ค๋ช… + + payload: ์ถ”๊ฐ€ ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ด์„ ์ˆ˜ ์žˆ๋‹ค + + Reducer + + Action์„ ๊ธฐ๋ฐ˜์œผ๋กœ ์ด์ „ ์ƒํƒœ๋ฅผ ๋ฐ›์•„ ์ƒˆ๋กœ์šด ์ƒํƒœ๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ํ•จ์ˆ˜ + + ํ•ญ์ƒ ๋ถˆ๋ณ€์„ฑ์„ ์œ ์ง€ํ•ด์•ผ ํ•œ๋‹ค + + - Redux์˜ ์žฅ์ ์„ ์„ค๋ช…ํ•ด ์ฃผ์„ธ์š”. + + ์˜ˆ์ธก ๊ฐ€๋Šฅํ•œ ์ƒํƒœ ๊ด€๋ฆฌ + + ๋ชจ๋“  ์ƒํƒœ ๋ณ€๊ฒฝ์€ Action์„ ํ†ตํ•ด ๋ฐœ์ƒ + + โ†’ ์ƒํƒœ ๋ณ€ํ™” ์ถ”์ , ๋””๋ฒ„๊น… ๊ฐ€๋Šฅ + + ์ค‘์•™ ์ง‘์ค‘์‹ ์ƒํƒœ ๊ด€๋ฆฌ + + ๋ชจ๋“  ์ƒํƒœ๊ฐ€ ํ•˜๋‚˜์˜ Store์— ๋ชจ์—ฌ ์žˆ์Œ + + โ†’ ์ƒํƒœ๋ฅผ ์‰ฝ๊ฒŒ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋‹ค + +- Redux Toolkit + + + + [Getting Started | Redux Toolkit](https://redux-toolkit.js.org/introduction/getting-started) + + - redux-toolkit๊ณผ redux์˜ ์ฐจ์ด + + redux-toolkit + + redux์˜ ๊ณต์‹ ๋„๊ตฌ ๋ชจ์Œ + + ์„ค์ •์„ ๊ฐ„์†Œํ™”ํ•˜๊ณ  ์ฝ”๋“œ ์–‘์„ ์ค„์—ฌ์ค€๋‹ค + + redux + + ์ƒํƒœ ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ + + ๋ณต์žกํ•œ ์„ค์ •์ด ํ•„์š”ํ•˜๊ณ  ์ฝ”๋“œ ์–‘์ด ๋‹ค + + - redux-toolkit ์‚ฌ์šฉ๋ฒ• (์ž์„ธํ•˜๊ฒŒ) + - Provider + + Redux Store๋ฅผ React ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ์ œ๊ณตํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ + + - configureStore + + Store๋ฅผ ์ƒ์„ฑํ•˜๋Š” ํ•จ์ˆ˜ + + ๋ฏธ๋“ค์›จ์–ด ์„ค์ • ๋“ฑ์„ ์ž๋™์œผ๋กœ ์ฒ˜๋ฆฌ + + - createSlice + + ์ƒํƒœ ๊ด€๋ฆฌ + + Action๊ณผ Reducer๋ฅผ ์‰ฝ๊ฒŒ ์ •์˜ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” ํ•จ์ˆ˜ + + - useSelector + + Store์—์„œ ์ƒํƒœ๋ฅผ ์ฝ์–ด์˜ค๋Š” Hoook + + - useDispatch + + Action์„ dispatchํ•˜๋Š” Hook + + - ๊ธฐํƒ€ ์‚ฌ์šฉ ๋ฐฉ๋ฒ•์„ ์ƒ์„ธํ•˜๊ฒŒ ์ •๋ฆฌํ•ด ๋ณด์„ธ์š” +- Zustand + + redux๋ณด๋‹ค ๊ฐ„๋‹จํ•˜๊ณ  ์œ ์—ฐํ•œ ์ƒํƒœ ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ + + ๊ฐ„๋‹จํ•œ API๋กœ ์ƒํƒœ๋ฅผ ์ƒ์„ฑํ•˜๊ณ , ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, React์˜ ๋ฆฌ๋ Œ๋”๋ง ์„ฑ๋Šฅ์„ ์ตœ์ ํ™”ํ•  ์ˆ˜ ์žˆ๋‹ค \ No newline at end of file diff --git a/rnk00/keyword/README.md b/rnk00/keyword/README.md new file mode 100644 index 0000000..9408f25 --- /dev/null +++ b/rnk00/keyword/README.md @@ -0,0 +1,8 @@ +## โญ๏ธํ‚ค์›Œ๋“œ ์ œ์ถœ ๋ฐฉ๋ฒ•โญ๏ธ + +> keyword ๋””๋ ‰ํ† ๋ฆฌ ์•ˆ์— chapter00 ํ˜•์‹์œผ๋กœ ๋””๋ ‰ํ† ๋ฆฌ ์ƒ์„ฑ + +1. ๋กœ์ปฌ์—์„œ chapter?? ๋””๋ ‰ํ† ๋ฆฌ ์•ˆ์— ๋ฏธ์…˜ ์ธ์ฆ ํŒŒ์ผ ์ž‘์„ฑ +2. forkํ•œ ๋ณธ์ธ ๋ ˆํฌ์— ์ปค๋ฐ‹ ํ›„ push +3. pull request ์ƒ์„ฑ ํ›„ ์ด์Šˆ ๋ฐ ๋ฆฌ๋ทฐ์–ด ์—ฐ๊ฒฐ +4. ํŒŒํŠธ์žฅ์ด ์Šน์ธํ•˜๋ฉด(๋ฉ”์ผ์ด ์˜ฌ๊ฑฐ์—์š”) ์ง์ ‘ merge diff --git a/rnk00/keyword/chapter00/keyword.md b/rnk00/keyword/chapter00/keyword.md new file mode 100644 index 0000000..ad5651e --- /dev/null +++ b/rnk00/keyword/chapter00/keyword.md @@ -0,0 +1,376 @@ +- HTML์ด๋ž€? + + ### HTML + + HTML ์ด๋ž€ ๋ฌด์—‡์ธ๊ฐ€? + + **`Hyper Text Markup Language`** + + ์›น์‚ฌ์ดํŠธ ํ‘œ์‹œ๋ฅผ ์œ„ํ•ด ๊ฐœ๋ฐœ๋œ ๋งˆํฌ์—… ์–ธ์–ด + + ์ฆ‰, ๋ฌธ์„œ์˜ ๋‚ด์šฉ์„ ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ตฌ์„ฑํ•ฉ๋‹ˆ๋‹ค + + **`Hyper Text`**์˜ ์˜๋ฏธ๋Š” ํ•˜์ดํผ๋งํฌ๋ฅผ ํ†ตํ•ด ํ•œ๋ฌธ์„œ์—์„œ ๋‹ค๋ฅธ ๋ฌธ์„œ๋กœ ์ฆ‰์‹œ ์ ‘๊ทผํ•˜๊ฒŒ ํ•ด์ค€๋‹ค๋Š” ์˜๋ฏธ์ด๋‹ค. ์ฆ‰ **` ํƒœ๊ทธ์˜ ์—ญํ• `**๊ณผ ๋น„์Šทํ•˜๋‹ค๊ณ  ๋ณด๋ฉด ๋œ๋‹ค. + + ```html + + + + + + + + + + + Document + + + +
123
+ + + ``` + +- ์‹œ๋งจํ‹ฑ ํƒœ๊ทธ๋ž€? + - div ํƒœ๊ทธ๋กœ๋งŒ ํŽ˜์ด์ง€๋ฅผ ๊ตฌ์กฐํ™” ํ•˜๋Š” ๊ฒƒ์ด ์ข‹์€๊ฐ€? ๐Ÿ  + + ์•„๋‹ˆ๋‹ค. ๋ช…ํ™•ํ•œ ๊ตฌ๋ถ„์„ ์œ„ํ•ด header, nav, article, section, footer ๋“ฑ์„ ๊ฐ™์ด ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค + + - divํƒœ๊ทธ๋ฅผ ๋‚จ์šฉํ•˜์ง€ ์•Š๊ธฐ ์œ„ํ•ด ์ž์ฃผ ์‚ฌ์šฉํ•˜๋Š” ํƒœ๊ทธ. + + `header`, `nav`, `article`, `section`, `aside`, `footer` ์™€ ๊ฐ™์€ ํƒœ๊ทธ๋“ค์„ ์ฃผ๋กœ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. + + - ๋ฉ€ํ‹ฐ๋ฏธ๋””์–ด ์š”์†Œ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ํƒœ๊ทธ + + + + - IE์—์„œ ์‚ฌ์šฉ๋˜๋˜ ๋ถˆํ•„์š”ํ•œ ํƒœ๊ทธ ์ œ๊ฑฐ + + `acronym`, `applet`, `dir`, `isindex`โ€ฆ ๋“ฑ + + - ๊ธฐํƒ€ ํƒœ๊ทธ ์ถ”๊ฐ€ ์ •๋ฆฌํ•ด๋ณด๊ธฐ ๐Ÿ  + - html + + HTML๋ฌธ์„œ์˜ ๋ฃจํŠธ + + ๋ชจ๋“  ํƒœ๊ทธ๋ฅผ ๊ฐ์‹ผ๋‹ค + + - head + + ๋ฉ”ํƒ€ ๋ฐ์ดํ„ฐ, style, script ๋“ฑ์„ ํฌํ•จํ•œ๋‹ค + + - body + + ์ฝ˜ํ…์ธ ๊ฐ€ ๋“ค์–ด๊ฐ€๋Š” ์˜์—ญ์„ ๊ฐ์‹ผ๋‹ค + + - title + + ์ œ๋ชฉ์„ ๋„ฃ๋Š” ํƒœ๊ทธ + + - meta + + charset, viewport, description, og, keyword ๋“ฑ HTML ๋ฌธ์„œ์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ๋‹ด๋Š”๋‹ค + + - a + + ๋งํฌ + + - script + + ์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ์„ ๋งŒ๋“ค์–ด ๋งํฌํ•  ๋•Œ ์‚ฌ์šฉ + + - link + + ์™ธ๋ถ€ ์†Œ์Šค๋Ÿด ์—ฐ๊ฒฐํ•  ๋•Œ ์‚ฌ์šฉ + + - img + + ์ด๋ฏธ์ง€ + + - span + + ์ธ๋ผ์ธ ์š”์†Œ๋ฅผ ๋ฌถ๋Š” ํƒœ๊ทธ + + - p + + ๋ฌธ๋‹จ์„ ๊ตฌ๋ถ„ + + - li + + ๋ฆฌ์ŠคํŠธ + + - ul, ol + + ul์€ ์ˆœ์„œ๊ฐ€ ์—†๊ณ  ol์€ ์ˆœ์„œ๊ฐ€ ์žˆ๋‹ค + + - style + + css + + - br + + ์ค„๋ฐ”๊ฟˆ + + - h1~h6 + + ์ œ๋ชฉ + + - input + + ์‚ฌ์šฉ์ž์˜ ์ž…๋ ฅ์„ ๋ฐ›์„ ์ˆ˜ ์žˆ๋‹ค + + - form + + input์„ ๋‹ด๋Š”๋‹ค + + - nav + + ๋„ค๋น„๊ฒŒ์ด์…˜ ๋งํฌ + + ์ฃผ๋กœ ์‚ฌ์ดํŠธ ๋ฉ”๋‰ด๋ฅผ ๋‹ด๋Š”๋‹ค + + - footer + + ์‚ฌ์ดํŠธ ์ •๋ณด, ์ฃผ์†Œ , ์ด๋ฉ”์ผ, ์—ฐ๋ฝ์ฒ˜ ๋“ฑ์ด ๋“ค์–ด๊ฐ„๋‹ค + + - header + + ์‚ฌ์ดํŠธ ๋กœ๊ณ , ๋ฉ”๋‰ด, ๋ฐฐ๋„ˆ + + - button + + ๋ฒ„ํŠผ + + - strong + + ๊ตต์€ ๊ธ€์”จ + + - i + + ์ดํ…”๋ฆญ์ฒด + +- HTML ๊ตฌ์„ฑ ์š”์†Œ + + ### HTML ๊ตฌ์„ฑ ์š”์†Œ + + HTML ๋ฌธ์„œ๋Š” HTML ์š”์†Œ(elements) ๋“ค๋กœ ๊ตฌ์„ฑ๋จ + + 1. **`HTML ์š”์†Œ๋Š” ํƒœ๊ทธ ํ•œ ์Œ`**์œผ๋กœ ์ด๋ฃจ์–ด ์ง + + ```tsx + // p => paragraph (๋‹จ๋ฝ, ์ ˆ) ์‹œ์ž‘/์ข…๋ฃŒ ํƒœ๊ทธ๋กœ ์ด๋ฃจ์–ด์ง +

์•ผํ˜ธ์•ผํ˜ธ์•ผํ˜ธ์•ผํ˜ธ์•ผํ˜ธ์•ผํ˜ธ!!

+ ``` + + 1. **`์†์„ฑ`**๋„ ๋“ค์–ด์žˆ์„ ์ˆ˜ ์žˆ์Œ. (์‹œ์ž‘ํƒœ๊ทธ ์•ˆ์— ๋ช…์‹œ) + + ```tsx + <ํƒœ๊ทธ ์†์„ฑ1='๊ฐ’ 1'>์ปจํ…์ธ  ๋ณด์ด๋Š” ์š”์†Œ + ``` + + 1. **`ํƒœ๊ทธ ์•ˆ์— ํƒœ๊ทธ`** ์ค‘์ฒฉ ์š”์†Œ๋„ ์‚ฌ์šฉ ๊ฐ€๋Šฅ + + ```tsx +

Hello World!

+ ``` + + 1. **`์ปจํ…์ธ ๊ฐ€ ์—†๋Š” ํƒœ๊ทธ`**๋„ ์‚ฌ์šฉ ๊ฐ€๋Šฅ + + ```tsx + profile + // ์ปจํ…์ธ ๊ฐ€ ์—†๋Š” ํƒœ๊ทธ๋„ ์žˆ์Œ. + ``` + +- head ํƒœ๊ทธ + + # + + ``๋Š”, ํŽ˜์ด์ง€๋ฅผ ์—ด ๋–„ ๋ธŒ๋ผ์šฐ์ €์— ํ‘œ์‹œ๋˜๋Š” `` ์š”์†Œ์™€ ๋‹ค๋ฅด๊ฒŒ, ``์˜ ๋‚ด์šฉ์€ ํŽ˜์ด์ง€์— ํ‘œ์‹œ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋Œ€์‹ ์— ``์˜ ๋‚ด์šฉ์ด ํ•˜๋Š” ์ผ์€, ํŽ˜์ด์ง€์— ๋Œ€ํ•œ metadata๋ฅผ ํฌํ•จํ•˜๋Š” ๊ฒƒ ์ž…๋‹ˆ๋‹ค. + + ![แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2024-07-15 แ„‹แ…ฉแ„’แ…ฎ 2.27.45.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/f06cfc61-ceaa-4a7c-8750-90e1ddf15de5/70003598-c4a5-49e5-b100-aed87b971081/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2024-07-15_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_2.27.45.png) + + ### ์—์„œ ์ฃผ๋กœ ์‚ฌ์šฉํ•˜๋Š” ํƒœ๊ทธ๋“ค์˜ ๊ฐ„๋‹จ ์„ค๋ช… + + 1. ์ด ํŒŒ์ผ์˜ ๋ฌธ์„œ๋Š” HTML์ด๋‹ค. + + ```html + + ``` + + 1. html ํƒœ๊ทธ ์ž‘์„ฑ ์–ธ์–ด ์ •์˜ + + ```html + + // ๋ฌธ์„œ์—์„œ ์ฃผ๋กœ ์‚ฌ์šฉํ•˜๋Š” ์–ธ์–ด + ``` + + [List of ISO 639 language codes](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) + + 1. head ํƒœ๊ทธ + + ```html + // ๋ฌธ์„œ์˜ ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ + UI์ƒ์œผ๋กœ ๋ณด์—ฌ์ง€์ง€ ์•Š๋Š” ์ •๋ณด๋“ค. + // SEO (ํƒ€์ดํ‹€, ์„ค๋ช…, ์ €์ž), CSS ์Šคํƒ€์ผ, JS ๋งํฌ + // meta ํƒœ๊ทธ๋ฅผ ํ†ตํ•ด ๋‹ค์–‘ํ•œ ์†์„ฑ์„ ์ง€์ • ๊ฐ€๋Šฅ. + + + + + + + + + Document + + ``` + + ### + + `` ํƒœ๊ทธ ๋‚ด๋ถ€์— ์ด์ œ ํ™”๋ฉด์—์„œ ๋ณด์—ฌ์งˆ ๋‚ด์šฉ๋“ค์„ ์ž‘์„ฑํ•ด์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค. (์ž์„ธํ•œ ์„ค๋ช…์€ ์•„๋ž˜ ํ† ๊ธ€์—) + + ```html + + ๋ฌธ์„œ์˜ UI ๊ตฌ์„ฑ ์š”์†Œ๋“ค. + + + ``` + +- body ํƒœ๊ทธ (Semantic Tag ํ™œ์šฉ) + + ### + + **`body ํƒœ๊ทธ`**์—๋Š” ์›น์‚ฌ์ดํŠธ์˜ ๋‚ด์šฉ์ด ๋“ค์–ด๊ฐ€์žˆ๋‹ค. (์ฆ‰, ์‚ฌ์šฉ์ž๋“ค์ด ํ™”๋ฉด์œผ๋กœ ๋ณผ ์ˆ˜ ์žˆ๋Š” ๋‚ด์šฉ ) + + ์šฐ๋ฆฌ๊ฐ€, **`์›น ์‚ฌ์ดํŠธ`**, **`์›น ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜`**์„ ๋งŒ๋“ค๊ณ ์ž ํ•  ๋•Œ, ํ•ด๋‹น ์„œ๋น„์Šค๊ฐ€ ์–ด๋– ํ•œ ๋ชฉ์ (ex. ์˜์ƒ ์„œ๋น„์Šค๋ฅผ ์ œ๊ณตํ•˜๋Š” ์œ ํŠœ๋ธŒ, ์‚ฌ์šฉ์ž๋“ค์˜ ๊ฒŒ์‹œ๊ธ€, ๊ด‘๊ณ  ๊ฒŒ์‹œ๊ธ€์„ ๊ด€๋ฆฌํ•˜๋Š” ํŽ˜์ด์Šค๋ถ, ์ธ์Šคํƒ€๊ทธ๋žจ etc)์„ ๊ฐ–๊ณ  ์žˆ๋Š”์ง€์— ๋”ฐ๋ผ, ์–ด๋–ป๊ฒŒ ์›น ์‚ฌ์ดํŠธ๋ฅผ ๊ตฌ์กฐํ™”ํ•˜์—ฌ ๋‚˜ํƒ€๋‚ผ ๊ฒƒ์ธ์ง€ ๋‹ฌ๋ผ์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. + + ์›น ์‚ฌ์ดํŠธ๋Š”, ์‚ฌ์šฉ์ž์˜ ์„ค๊ณ„ ๋ชฉ์ ์— ๋”ฐ๋ผ, ๋งค์šฐ ๋‹ฌ๋ผ์งˆ ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ, ์ •ํ•ด์ง„ ๊ณจ๊ฒฉ์„ ํ™œ์šฉํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹Œ, ๋‚ด๊ฐ€ ์–ด๋– ํ•œ ๋ถ€๋ถ„์„ ์‚ฌ์šฉ์ž์—๊ฒŒ ์–ดํ•„ํ•  ๊ฒƒ์ธ์ง€์— ๋”ฐ๋ผ, ๊ตฌ์กฐ๊ฐ€ ๋‹ฌ๋ผ์ง์œผ๋กœ, ์‚ฌ**`์šฉ์ž์—๊ฒŒ ์˜๋ฏธ์žˆ๋Š” ๋ถ€๋ถ„์„ ์‹œ๊ฐ์ ์œผ๋กœ ๋‚˜ํƒ€๋‚ด๋Š” ๊ฒƒ์ด ๋งค์šฐ ์ค‘์š”`**ํ•ฉ๋‹ˆ๋‹ค. + + **`Ambiguous Sections` ์ฒ˜๋Ÿผ div ํƒœ๊ทธ๋งŒ ๋‚จ๋ฐœํ•˜๋Š” ๊ฒƒ ๋ณด๋‹ค ์›น ๋ธŒ๋ผ์šฐ์ €๊ฐ€ HTML์„ ํ•ด์„ํ•˜๊ธฐ ์‰ฝ๊ณ , ์›น ์ ‘๊ทผ์„ฑ์„ ๊ณ ๋ คํ•œ `Clear Sections` ์ฒ˜๋Ÿผ, ์‹œ๋ฉ˜ํ‹ฑ ํƒœ๊ทธ๋ฅผ ์ž˜ ํ™œ์šฉํ•˜์—ฌ, `์‹œ๋ฉ˜ํ‹ฑ ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•  ๋–„์˜ ์žฅ์ `์„ ์ถฉ๋ถ„ํžˆ ํ™œ์šฉํ•˜๋Š” ๊ฒƒ์„ ์ถ”์ฒœํ•ฉ๋‹ˆ๋‹ค.** + + ![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/f06cfc61-ceaa-4a7c-8750-90e1ddf15de5/73f82818-771e-415d-aeae-e7d21ae3cac7/Untitled.png) + + - **`Sementic Tag`**๋ฅผ ์ž˜ ํ™œ์šฉํ•˜์˜€์„ ๋•Œ ์žฅ์ ์€? ๐Ÿ  + + ํŽ˜์ด์ง€์˜ ๋‚ด์šฉ์„ ๋” ์‰ฝ๊ฒŒ ๊ตฌ๋ถ„์ง€์–ด ํŒŒ์•…ํ•  ์ˆ˜ ์žˆ๋‹ค + + +- ํƒœ๊ทธ ์ •๋ฆฌ + - `element` vs `container` + + ### element level + + element level์˜ ํƒœ๊ทธ๋“ค์€ ์•„๋ž˜์™€ ๊ฐ™๋‹ค. + + ```tsx +

+

+ . + . +

+ +
+
+

: UI๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ๊ฒƒ +

+        
+        
    +
+ +
    + +