๐ ์์๋๋ฉด ์ข์ โ์์ด ๊ฐ๋ฐ ์ฉ์ดโ 11๊ฐ
ํ๋ก๊ทธ๋๋ฐ์์ ํน์ ๋จ์ด๋ ์์ด์ ์ฌ์ ์ ์๋ฏธ์๋ ๋น์ทํ์ง๋ง ๋ค๋ฅธ ์๋ฏธ๋ก ์ฐ์ ๋๋ค. ํ๋ก๊ทธ๋๋ฐ์ ์์ํ์ ์ง ์ผ๋ง ์๋์๋ค๋ฉด ์ด๋ฐ ๋จ์ด๋ค์ ์ฒ์ ๋ดค์ ๋ ์ฌ์ ์ ์๋ฏธ ๊ทธ๋๋ก ํด์ํ์ฌ ํผ๋์ค๋ฌ์ฐ์ค ์ ์๋๋ฐ์. ์์๋๋ฉด ์ข์ ๊ฐ๋ฐ ์์ด ์ฉ์ด 11๊ฐ๋ฅผ ๊ฐ์ ธ์์ต๋๋ค :) --- "์์๋๋ฉด ์ข์ ์์ด ๊ฐ๋ฐ ์ฉ์ด" 1. Agnostic (์ฌ์ ์ ์๋ฏธ: ๋ถ๊ฐ์ง๋ก ์) โ๊ตฌ์ ๋ฐ์ง ์๋ ๊ฒโ์ด๋ผ๋ ๋ป์ ๊ฐ์ง๋๋ค. ๋์ฒด๋ก ์ด๋ค ๊ฒ์ ๊ตญํ๋์ง ์๋ ํ๋ก๊ทธ๋จ์ด๋ ๊ธฐ์ ์ ํํํ ๋ ์ฌ์ฉ๋ฉ๋๋ค. `Nestjs is platform-agnostic framework` ์ด๋ผ๊ณ ํ๋ฉด nestjs๋ express, fastify ๋ฑ ํน์ Nodejs ํ๋ซํผ์ ๊ตญํ๋์ง ์๊ณ ์ฌ์ฉํ ์ ์๋ ํ๋ ์์ํฌ์ ์๋ฏธํฉ๋๋ค. 2. Buffer (์ฌ์ ์ ์๋ฏธ: ์์ถฉ๊ธฐ) โ์์ ๋ฐ์ดํฐ ์ ์ฅ ๊ณต๊ฐโ์ ๋๋ค. ๋ฐ์ดํฐ๋ฅผ ์ ์กํ๋ ์๋๋ณด๋ค ์๋ฒ์ ์ฒ๋ฆฌ ์๋๊ฐ ๋๋ฆฌ๊ฑฐ๋, ์ปดํจํฐ์์ ์ฐ์ฐ์ ์ํํ ๋ ์ฒ๋ฆฌ๋๋ ์๋๋ณด๋ค ๋ ์ฆ๊ฒ ์คํ๋๋ ๊ฒฝ์ฐ ๋ถํ๊ฐ ์๊ธธ ์ ์์ต๋๋ค. ์ด๋ฐ ๋ฌธ์ ๋ฅผ ๋ฐฉ์งํ๊ธฐ ์ํด ํ๋ก๊ทธ๋๋ฐ์์๋ ๋ฒํผ๋ผ๋ ๊ณต๊ฐ์ ๋ฐ์ดํฐ๋ฅผ ์์๋ก ์ ์ฅํด๋๊ณ ์ ์กํ๊ฑฐ๋ ์ฒ๋ฆฌํฉ๋๋ค. 3. Throttle(์ฌ์ ์ ์๋ฏธ: ๋ชฉ์ ์กฐ๋ฅด๋ค) ๋ชฉ์ ์กธ๋ผ์ ๊ฐ์ ๋ก ์จ ์ฌ๋ ์์ ์กฐ์ ํ๋ฏ์ด โ์ด๋ฒคํธ์ ๋ํ ๋ฐ์์ ํ์๋ฅผ ์กฐ์ ํ๋ ํ์โ๋ฅผ ๋งํฉ๋๋ค. ์ผ์ ์๊ฐ ๋์ ๋ฐ์ํ ์ด๋ฒคํธ์ ๋ชจ๋ ๋ฐ์ํ์ง ์๊ณ ํ๋ฒ์ฉ๋ง ๋ฐ์ํฉ๋๋ค. ํ๋ก ํธ์๋์์๋ ์ฌ์ฉ์ ์ ๋ ฅ์ ๋ํด ๋งค๋ฒ ๋ฐ์ํ์ง ์๊ณ ๋ ๋ฐ์ํ๊ณ , ์๋ฒ์์๋ ๋จ๊ธฐ๊ฐ์ ๋ง์ ์์ฒญ์๋ ์ ํด๋์ ์ต์ ์ฃผ๊ธฐ์ ๋ง๊ฒ ๋ฐ์ํ๋๋ก ํฉ๋๋ค. ์๋ฅผ ๋ค์ด, 10์ด ๋์ ์ฌ๋ฌ ๋ฒ API ์์ฒญ์ ํ๊ฑฐ๋ ํ๋ฉด์์ ๋ฒํผ์ ์ฌ๋ฌ๋ฒ ๋๋ฌ๋ ํ๋ฒ๋ง ์คํํ์ฌ ๋ถํ๋ฅผ ๋ฐฉ์งํ๊ณ ๋์ ์ฑ๋ฅ์ ์ ์งํฉ๋๋ค. 4. Debounce(์ฌ์ ์ ์๋ฏธ: bounce์ ๋ฐ๋, ํ๊ธฐ์ง ์๋) โ๊ฐ์ฅ ๋ง์ง๋ง ์ ๋ ฅ๋ง์ ์ฒ๋ฆฌํ๋ ๊ฒโ์ ๋งํฉ๋๋ค. throttle๊ณผ ๋ญ๊ฐ ๋ค๋ฅผ๊น์? throttle์ ์ผ๋ฐ์ ์๋ฏธ์ธ โ๋ชฉ์ ์กฐ๋ฅด๋คโ๋ฅผ ๋ ์ฌ๋ฆฌ๋ฉด ๋๋๋ฐ, ์จ์ ๊ผญ ํ๋ฒ ์ฉ ๋ค์ด๋ง์ ์ผ ์ด๊ธฐ ๋๋ฌธ์ throttle์ ์ฃผ๊ธฐ์ ์ผ๋ก ํ๋ฒ ์ฉ ์คํ๋ฉ๋๋ค. ํํธ debounce๋ ์คํ๋ ์ดํ ํน์ ์๊ฐ ์์ ๋ค์ด์ค๋ ์์ฒญ์ ๋ชจ๋ ๋ฌด์ํ๊ณ , ๊ทธ ์๊ฐ์ด ์ง๋๋ ๋ค์ ์คํํ์ง ์์ต๋๋ค. ๊ทธ ์๊ฐ์ด ์ง๋ ํ์์ผ ๋ค์ด์ค๋ ์์ฒญ๋ง ๋ฑ ํ๋ฒ ์คํํฉ๋๋ค. 5. Orchestration(์ฌ์ ์ ์๋ฏธ: ์งํ, ์ฌ๋ฌ ์์์ ๋ํ ํต์ ๋ ๊ด๋ฆฌ) ๋ฐ๋ธ์ต์ค ์ฉ์ด๋ก, ์ปดํจํฐ ์์คํ ๋ฐ ์ํํธ์จ์ด๋ฅผ ์๋์ผ๋ก ๊ตฌ์ฑํ๊ฑฐ๋ ์กฐ์ ํ๋ ๊ด๋ฆฌ ๋ฐฉ๋ฒ์ ์๋ฏธํฉ๋๋ค. Orchestration์ ์ด์ฉํ๋ฉด ์ธํ๋ผ ๊ตฌ์กฐ๋ฅผ ์๋์ผ๋ก ์ต์ ํํ์ฌ ๊ด๋ฆฌํ ์ ์์ต๋๋ค. ์์ฒญ ํน์ CPU ๋ถํ๋์ด ์ฆ๊ฐํ ๋, ์๋ฒ ํน์ ์ธ์คํด์ค๋ ์ด๋ฏธ์ง๋ฅผ ์ฆ์ค(์ค์ผ์ผ ์์)ํ๋ ๋ฑ์ ์์ ์ ๊ธฐ๋ํ ์ ์์ต๋๋ค. 6. Idempotent (์ฌ์ ์ ์๋ฏธ: ๋ฉฑ๋ฑ์ฑ ๅช็ญๆง ) ๋ฉฑ๋ฑ์ฑ์ '์ฌ๋ฌ ๋ฒ ๊ฐ์ ์ฐ์ฐ์ ์ ์ฉํ์ฌ๋ ๊ฐ์ ๊ฒฐ๊ณผ๋ฅผ ๋ด๋ ์ฑ์ง'์ด๋ผ๋ ๋ป์ ๋๋ค. ํ๋ก๊ทธ๋๋ฐ์์ ๋ฉฑ๋ฑ์ฑ์ ๊ฐ์ง ํจ์๋ API๋ **๊ฐ์ ๋ฐ์ดํฐ๊ฐ ๋ค์ด์์ ๋ ์ฌ๋ฌ ๋ฒ ์คํํ์ฌ๋ ๊ฐ์ ๊ฒฐ๊ณผ**๊ฐ ๋์์ผ ํฉ๋๋ค. ํจ์๋ API๊ฐ ์๋ํ์ง ์์ ๊ฒฐ๊ณผ๋ฅผ ๋ด์ง ์๊ธฐ ์ํด์๋ ๋ฉฑ๋ฑ์ฑ์ ์งํค๋ ๊ฒ ์ค์ํฉ๋๋ค. 7. Lazy (์ฌ์ ์ ์๋ฏธ: ๊ฒ์ผ๋ฅธ, ํ๋งํ) 'ํ์ํ ์๊ฐ์ด ์ฌ ๋๊น์ง ์คํ์ ๋ฏธ๋ฃฌ๋ค'๋ ์๋ฏธ๋ฅผ ๊ฐ์ง๋๋ค. Lazyํ ํ๋ก๊ทธ๋๋ฐ์ ๊ผญ ํ์ํ ์๊ฐ์ ์คํํจ์ผ๋ก์จ ์ปดํจํฐ ์์์ ์ ์ฝํ๊ณ ํ๋ก๊ทธ๋จ์ ๋น ๋ฅด๊ฒ ์คํํ ์ ์๋๋ก ๋์์ค๋๋ค. 8. Dispatch (์ฌ์ ์ ์๋ฏธ: ๋ณด๋ด๋ค, ์ ์ํ ํด์น์ฐ๋ค) โ์ด๋๊ฐ์ ๋ฌด์์ ๋ณด๋ด๋ ํ์โ ๋๋ ํ๋ก๊ทธ๋จ์ด โ์ด๋ค ๋ฉ์๋๋ฅผ ํธ์ถํ ๊ฒ์ธ๊ฐ๋ฅผ ๊ฒฐ์ ํ์ฌ ๊ทธ๊ฒ์ ์คํํ๋ ๊ณผ์ โ์ ๋งํฉ๋๋ค. ๊ฐ์ฒด์งํฅ ํ๋ก๊ทธ๋๋ฐ์์์ ๋ฉ์์ง๋ ํ ๊ฐ์ฒด๊ฐ ๋ค๋ฅธ ๊ฐ์ฒด์๊ฒ ํน์ ๋ฐ์ดํฐ(์ธ์)์ ํจ๊ป ํน์ ํ์๋ฅผ ์ํํ ๊ฒ์ ์์ฒญํ๋ ๊ฒ์ ๋๋ค(๋ค๋ฅธ ๊ฐ์ฒด์ ๋ฉ์๋๋ฅผ ํธ์ถํ๋ค๊ณ ์๊ฐํ๋ฉด ์ฝ์ต๋๋ค). ๋ฉ์์ง๊ฐ ์์ ๋ ์ด๋ค ๋ฉ์๋๋ฅผ ์คํํ ์ง ๊ฒฐ์ ํ๊ฑฐ๋(method dispatch), redux์์๋ dispatch(action)์ ํตํด ํน์ reducer๋ฅผ ์คํํ๊ธฐ๋ ํฉ๋๋ค. 9. Hydrate (์ฌ์ ์ ์๋ฏธ: ์๋ถ์ ๋ณด์ถฉํ๋ค) ๊ฐ์ฒด๋ฅผ Hydrate ํ๋ค๋ ๊ฒ์ย ์์ง ํน์ ๋ฐ์ดํฐ๋ ๊ฐ๊ณ ์์ง ์์ ๊ฐ์ฒด๋ฅผ ๋ฉ๋ชจ๋ฆฌ์์ ๊ฐ์ ธ์จ ํ, ๊ทธ ๋ฐ์ดํฐ๋ฅผ ์ฑ์ฐ๋ ํ์(Populate)๋ฅผ ๋งํฉ๋๋ค. ์ด๋ ๊ฒ ํจ์ผ๋ก์จ ๋ฐ์ดํฐ๋ฅผ ๋ก๋ํ๊ฑฐ๋ ์ ์กํ ๋ ์ฑ๋ฅ์์ ์ด์ ์ ๊ฐ์ ธ์ฌ ์ ์์ต๋๋ค. ํน์ ๋ฐ์ดํฐ๋ฅผ โ์ฌ์ฉํ ์ค๋น๊ฐ ๋๋๋ก ๋ง๋๋ ๊ฒโ์ด๋ผ๊ณ ์๊ฐํ๋ฉด ์ดํดํ๊ธฐ ์ฌ์ธ ๊ฒ ๊ฐ์์. ํ๋ก ํธ์๋์์ ์๋ฒ์ฌ์ด๋๋ ๋๋ง ์, ์ด๋ฏธ ์๋ฒ๊ฐ HTML์ ๋ง๋ค์ด ์ ๊ณตํ๊ธฐ ๋๋ฌธ์ ๊ตณ์ด ๋ ๋๋ง์ ํ ํ์๊ฐ ์์ต๋๋ค. ํ์ง๋ง ์ ์ ์ธ ํ์ด์ง๋ก๋ง ๊ทธ์น๊ธฐ ๋๋ฌธ์ ์ด๋ฒคํธ์ ๋ฐ์ํ๋ ๋์ ์ธ ํ์ด์ง๋ก ๋ง๋ค์ด์ฃผ๊ธฐ ์ํด์ Store, State ๋ฑ์ ์ฑ์์ฃผ์ด์ผ(Populate) ํ๋๋ฐ ์ด๋ฐ ๊ณผ์ ์ Hydrate๋ผ๊ณ ํฉ๋๋ค. 10. Immutable (์ฌ์ ์ ์๋ฏธ: ๋ถ๋ณํ๋) ๊ฐ์ฒด์งํฅ ํ๋ก๊ทธ๋๋ฐ์์ ๋ถ๋ณ ๊ฐ์ฒด๋ โ์์ฑ ํ ๊ทธ ์ํ๋ฅผ ๋ฐ๊ฟ ์ ์๋ ๊ฐ์ฒดโ๋ฅผ ๋งํฉ๋๋ค. immutable์ ํจ์ํ ํ๋ก๊ทธ๋๋ฐ์์๋ ๊ฐ์กฐํ๋ ์์ฑ์ธ๋ฐ์. ๋ฉ๋ชจ๋ฆฌ์ ์๋ ํน์ ๊ฐ์ฒด์ ๋ฐ์ดํฐ๋ฅผ ๋ณ๊ฒฝํ๋ฉด ํด๋น ๊ฐ์ฒด๋ฅผ ์ฌ์ฉํ๋ ๋ค๋ฅธ ์ฝ๋์์ ์๋์น ์์ ๊ฒฐ๊ณผ๊ฐ ๋ฐ์ํ ์ ์์ต๋๋ค. ํจ์ํ ํ๋ก๊ทธ๋๋ฐ์์๋ ์ด๋ฐ ๋ฌธ์ ๋ฅผ ๋ฐฉ์งํ๊ธฐ ์ํด ๋ฐ์ดํฐ์ ๋ถ๋ณ์ฑ์ ๊ฐ์กฐํฉ๋๋ค. ์ด๋ฅผ ์งํค๋ ค๋ฉด ์์ํจ์(๊ฐ์ ์ ๋ ฅ์ด ๋ค์ด์ค๋ฉด ๊ฐ์ ์ถ๋ ฅ์ ๋ด๊ณ , ๋ถ๋ณ์ฑ์ ๊นจ๋ ๋ถ์ ํจ๊ณผ๊ฐ ์๋ ํจ์)๋ฅผ ์์ฑํด์ผ ํฉ๋๋ค. 11. Literal (์ฌ์ ์ ์๋ฏธ: ๋ง ๊ทธ๋๋ก์) โ๊ณ ์ ๋ ๊ฐโ์ ์๋ฏธํฉ๋๋ค. ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๋ integer, float, string, boolean๊ณผ ๊ฐ์ ์๋ฃํ์ ๊ฐ์ง๋๋ค. ์ด ์๋ฃํ์ ๊ณ ์ ๋ ๊ฐ์ ๋ฆฌํฐ๋ด์ด๋ผ๊ณ ํฉ๋๋ค. ์๋ฅผ ๋ค์ด โhjsongโ, โtossโ ๋ฑ์ ๋ฌธ์์ด ์๋ฃํ์ ๊ฐ์ด๋ฉฐ ์ด ๊ฐ ์์ฒด๋ ๋ฐ๋์ง ์๊ณ ๊ณ ์ ์ ์ ๋๋ค. ๋ณดํต `const a = 1` ๊ณผ ๊ฐ์ด ๋ณ์๋ ์์๋ฅผ ์ด๊ธฐํํ ๋ ์ฌ์ฉํฉ๋๋ค. --- "์ฐธ๊ณ ํ๋ฉด ์ข์ ์๋ฃ๋ค" 1. meotitda/Dictionary ๋ ํ์งํ ๋ฆฌ (https://github.com/meotitda/DICTIONARY) `moonsupport`๋ผ๋ ๋ถ์ด ๋ง๋ ๊ฐ๋ฐ ์ฉ์ด ์ฌ์ ๋ ํ์งํ ๋ฆฌ์ ๋๋ค. DICTIONARY๋ ์๋์ ํ๋ถํ ์ดํ๋ ฅ์ ๋ฐํ์ผ๋ก ์๋์ ๊ฐ์ ๋ชฉ์ ์ ์ด๋ฃจ๊ธฐ ์ํด ๋ง๋ค์ด์ก์ด์. 1. ๊ฐ๋ฐ ๋ฌธ์ ๋ฐ ์ฝ๋๋ฅผ ๋ ์ ์ดํดํ๊ฒ ๋๊ณ 2. ์ ์ ํ ํจ์๋ช ์ ์์ฑํ ์ ์๊ฒ ๋๋ฉฐ 3. ๊ฐ๋ฐ์๋ค์ ๋ํ๋ฅผ ๋ ์ ์ดํดํ๊ฒ ๋ฉ๋๋ค. ํฌ๋กฌ ํ์ฅํ๋ก๊ทธ๋จ์ด ์์ด์ ๋ชจ๋ฅด๋ ์ฉ์ด๊ฐ ๋ํ๋ฌ์ ๋ ๋์ ๋๋ฆฌ์ ์๋ ์ฉ์ด๋ฅผ ๋ฐ๋ก ๊ฒ์ํด๋ณผ ์๋ ์๊ณ , ์ง์ ๊ธฐ์ฌํ๊ณ ์ถ๋ค๋ฉด ์๋ํฐ๋ฅผ ํตํด ํฌ๋งท์ ๋ง๊ฒ ํธ๋ฆฌํ๊ฒ ์์ฑํ ์ ์์ด์! ๋ง์ฝ ๊ถ๊ธํ ์ฉ์ด๊ฐ ์๋ค๋ฉด ๊นํ์ ์ด์๋ก ๋จ๊ธธ ์๋ ์์ต๋๋ค ๐ 2. ktword (http://www.ktword.co.kr/) ํ๊ตญ ์ปดํจํฐ ์ฉ์ด ์ฌ์ดํธ์ ๋๋ค. 6์ฒ ๊ฐ์ ํด์ค๋ค์ด ์์ด์. dictionary์ฒ๋ผ ์์ ๋ ์น์ ํ ์ค๋ช ๊น์ง๋ ์๋์ง๋ง ์ฉ์ด ํด์ค ๋ฟ๋ง ์๋๋ผ ํด๋น ์ฉ์ด์ ๊ด๋ จ๋ ์ง์๊น์ง ์๋ ค์ค์ ์ข์ ๊ฒ ๊ฐ์์. 3. hackterms (https://www.hackterms.com/) ์์ด๋ก ๋ ์ฌ์ดํธ๋ก๋ hackterms ๋ ์์ต๋๋ค. --- "references" - https://evan-moon.github.io/2020/01/05/what-is-immutable/ - https://oop.jiny.dev/class/message - https://webclub.tistory.com/607 - https://velog.io/@keinn51/React-Dom์ด๋-hydrate๋ฅผ-์จ์ผ-ํ๋-์ด์ #3-hydrate-ํจ์๋