๋ถ๋ฅ ์ ์ฒด๋ณด๊ธฐ85 SLASH 22 - Effective Component ์ง์ ๊ฐ๋ฅํ ์ฑ์ฅ๊ณผ ์ปดํฌ๋ํธ ์์ฆ ๊ต์ก์ ์ข ๋ ์ง์คํ๋๋ผ ๊ฐ๋ฐ์ด๋ ๋ธ๋ก๊ทธ ์ ๋ฆฌ์ ๋ง์ด ์๊ฐ์ ๋ชป์ผ๋ค,, ๊ทธ๋์ ๋ญ๊ฐ ๋จธ๋ฆฌ ์๋ฐ์ ํ ๊ฒธ ํ ์ค ์ปจํผ๋ฐ์ค์์์ ๋ณด๋ฉด์ ์ ๋ฆฌํด๋ด์ผ๊ฒ ๋ค๊ณ ๋ง์์ ๋จน๊ณ ๊ทธ๋ฌ๊ณ ์๋ ์ค์ด๋ค.. ์ฌ์ค ํ๋ฒ ์ธ์ ๋ณด๊ณ ๋ค์ ๋ณด๋ฉด์ ์ ๋ฆฌํ๋ ค๊ณ ํ๋๋ฐ ์ด๋ฏธ ํ๋ฒ ๋ดค๋๋ฐ ๋์ด์ด์ด์ด๋ฌด ๋์์ด ๋๊ณ ๋ญ๊ฐ ์ฝ๊ฐ ์๋ก๋ฐ๋ ๋๋์ ๋ฐํ์ฌ์ ์ด๋ ๊ฒ ๊ธฐ๋กํด๋๊ฒ ๋์๋ค. https://www.youtube.com/watch?v=fR8tsJ2r7Eg ํ ์คใ ฃSLASH 22 - Effective Component ์ง์ ๊ฐ๋ฅํ ์ฑ์ฅ๊ณผ ์ปดํฌ๋ํธ๋ฅผ ๋ณด๊ณ ์์ฑํ ๊ธ์ ๋๋ค. ์ ๋ณด์ฑ ๊ธ์ด ์๋๋ผ ๋ด๊ฐ ๋ณด๋ ค๊ณ ์ ๋ฆฌํ๋ ๊ธ์ด๋ผ ๋์๊ฐ ์์ ๊ฒ์ด๋ค.. ์์์ ํ๋ฆ์ฃผ์..๐ซฅ ํ๋ก์ ํธ๋ฅผ ํ๋ค๋ณด๋ฉด ์คํ๋ฆฐํธ ์์ ์ฌํญ์ด ๊ณ์ ๋ฐ์ํ๋ ๊ฒ,,, ์์ฆ ๋๋ฌด๋๋ฌด๋๋ฌด ๋ง์ด.. 2022. 11. 1. ๋ฆฌ์กํธ์์ setState๋ฅผ ํตํด์ state๋ฅผ ๋ณ๊ฒฝํด์ฃผ๋ ์ด์ / setState์ ๋น๋๊ธฐ์ฑ ๋ฆฌ์กํธ๋ฅผ ์ฌ์ฉํ๋ฉด์ ์ฒ์์๋ ์๋ ์๋ฌธ์ด ๊ฐ์๊ธฐ ์๊ฒผ์๋ค. ์ ๋ฆฌ์กํธ๋ useState๋ผ๋ ํ ์ ์ฌ์ฉํด์ ์ํ๊ด๋ฆฌ๋ฅผ ํ๋๊ฒ์ธ๊ฐ ๋ฌผ๋ก ํ ์ ์ฌ์ฉํด์ ๋ผ์ดํ์ฌ์ดํด์ ์กฐ์ํ ์ ์๊ฒ ํ์ฌ ๋ถํ์ํ ๋ฆฌ๋ ๋๋ง์ ๋ง์์ฃผ๊ณ , ๋ด๊ฐ ์ํ๋ ์์ ์ ์ํ๋ ๋์์ ํ๋๋ก ๋ง๋ค์ด์ฃผ๋ ๊ฒ์ผ ๊ฑฐ๋ค. ํ์ง๋ง, ์!! ์๋ฐ์คํฌ๋ฆฝํธ์์ ๋ณ์ ์ฌ์ฉํ๋ฏ์ด ์ฌ์ฉํ๋ฉด ์๋๋๊ฒ์ด๋ ์ด๊ฒ ๋ฌธ๋ ๊ถ๊ธํด์ก๋ค ์ด์ state๋ immutable(๋ถ๋ณ์ฑ)์ ์ ์งํด์ผํ๊ธฐ ๋๋ฌธ์ด๋ค. ์ปดํฌ๋ํธ๋ ํ์ฌ์ this.state์ setState๋ฅผ ๋น๊ตํด์ ์ ๋ฐ์ดํธ๊ฐ ํ์ํ ๊ฒฝ์ฐ์๋ง render ํจ์๋ฅผ ํธ์ถํ๋๋ฐ, state๋ฅผ ์ง์ ์์ ํ๊ฒ ๋๋ฉด ๋ฆฌ์กํธ๊ฐ render ํจ์๋ฅผ ํธ์ถํ์ง ์์ ์ํ ๋ณ๊ฒฝ์ด ์ผ์ด๋๋ ๋ ๋๋ง์ด ์ผ์ด๋์ง ์์ ์ ์๋ค. ์ํ ๋ณ๊ฒฝ์ ์ถ์ ํ.. 2022. 10. 21. CSR vs SSR CSR ๊ณผ SSR ์ ์ฐจ์ด๋ฅผ ํ์ตํ ๋๋ ํ์์ ์ผ๋ก SPA์ MPA์ ๋ํ ์ด์ผ๊ธฐ๊ฐ ๋จผ์ ๋์์ผํ๋ค. ํด๋น ๋ถ๋ถ์ ๋ํ ๋ด์ฉ์ ์๋ ๋งํฌ๋ฅผ ์ฐธ๊ณ ํด๋ณด๋ฉด ์ข์๊ฒ๊ฐ๋ค. ์ด์ ๋ณธ๊ฒฉ์ ์ผ๋ก CSR๊ณผ SSR์ ๋ํ ์๊ธฐ๋ก ๋์ด๊ฐ๋ณด์. ์ฐพ์๋ณด๋ฉด CSR์ SPA์ ์ฐ๊ฒฐ์ง์ด์ ๋ง์ด ์ค๋ช ์ด ๋์ด์๊ณ , SSR์ MPA์ ์ฎ์ฌ์ ๋ง์ด ์ค๋ช ์ด ๋์ด์๋ค. ์์ ์๋ ์ด๊ฒ๋ง ๋ณด๊ณ ๊ทธ๋ผ ์๋ก์๋ก ๊ฐ์ ๊ฐ๋ ์ธ๊ฐ?๋ผ๋ ์๊ฐ์ ํ์๋๋ฐ ์๋๋ค. ๋ช ์ฌํ ๊ฒ์ CSR์ด ์ ๋ถ SPA๋ฐฉ์์ด ์๋๋ผ๋ ์ ! ๊ทธ๋ ๋ค๋ฉด csr, ssr์ด ๋ฌด์์ธ์ง ์์๋ณด๋๋ก ํ์! CSR(Client Side Rendering) ํด๋ผ์ด์ธํธ ์ฌ์ด๋ ๋ ๋๋ง. ๋ง ๊ทธ๋๋ก๋ค ํด๋ผ์ด์ธํธ ์ชฝ์์ ๋ ๋๋ง์ด ์ผ์ด๋๋ค๋ ์๊ธฐ๋ค. ์์ฒญ์ ๋ณด๋ด๊ณ -> ์๋ต์ ๋ฐ๊ณ -> ๊ทธ๋ฆฌ๊ณ ์ด ๊ณผ์ ๋ฐ๋ณต .. 2022. 1. 2. URI์ URL์ ์ฐจ์ด์ ํ๋ก ํธ ๊ฐ๋ฐ์ ๊ณต๋ถํ๋ ์ฌ๋์ผ๋ก์จ Restful API์ ๋ํด์ ๋๋ต์ ์ผ๋ก๋ ์์์ผํ๋ค๊ณ ์๊ฐ๋๋ค. restful api์ ๋ํด์ ๊ณต๋ถ๋ฅผ ํ๋ค๊ฐ URL, URI ์ฉ์ด๊ฐ ํผ์ฉ์ด ๋ง์ด ๋๋ ๊ฑธ ๋ณด๋ฉด์ ํผ๋์ค๋ฌ์ ๋ค. ๋๋์ฒด ๋์ด ๋ญ๊ฐ ๋ค๋ฅธ๊ฑฐ์ง...? ๋ญ๊ฐ ์ ๋งคํ๊ฒ ๋์ด๊ฐ๋๊ฒ ์ฐ์ฐํด์ ํ๋ฒ ์ฐพ์๋ดค๋ค URI (Uniform resource Identifier) ์ธํฐ๋ท ์์์ ํน์ ์์(ํ์ผ)์ ๋ํ๋ด๋ ์ ์ผํ ์ฃผ์ ์์์ id -> ์ ์ผํด์ผํจ URL (Uniform Resource Locator) ํตํฉ ์์ ์๋ณ์๋ก ์ธํฐ๋ท์ ์๋ ์์์ ๋ํ๋ด๋ ์ ์ผํ ์ฃผ์ URL์ ํน์ ์๋ฒ์ ํ ๋ฆฌ์์ค์ ๋ํด ๊ตฌ์ฒด์ ์ธ ์์น๋ฅผ ์์ ์ ๋ฆฌ๋ ๊ธ๋ค์ ๋ณด๊ณ ์ ๋ฆฌํ๋ฉด์ ๋ด๊ฐ ์ดํดํ ๊ฒ์ (ํ๋ฆด์๋ ์๋ค) ์ฐ๋ฆฌ๊ฐ ํํ ๋๋ฉ์ธ์ผ๋ก ์๊ฐํ.. 2021. 10. 11. [๋ผ์ด์ง์บ ํ] ์น๋ฆฌ๋ ํธ๋ ์๋ฃ ํ๊ธฐ ๐ค์์์ ํ๋ฆ๋๋ก ํ๋ฌ๊ฐ ์ฃผ์,, ๊ทธ๋ฅ ๋ค๋ค ์ ํ๋ฆ์ ํ์ ์ฝ์ด์ฃผ์ธ์...! ๋ผ์บ ์๋ฃํ๊ธฐ์ธ๋ฐ...์ด์ ํฌ๋จธ์นํ ์ปค๋ฅผ ๊ณ๋ค์ธ... ์๋ฃํ๊ณ ๊ทธ๋ ๋ ์ฌ๋ฆฌ๋ฉด์ ํ๊ธฐ์ฐ๋๊น ๋ญ๊ฐ ์๋ จํด์ง๋ค์....๐ฅบ ๋๋ ๋ฐ์ผํ๋ก... 6์ ์ฒซ ์ฃผ.. ๊ทธ ๋น์ ๋ช ์ผ์ ์คํํธ์ ์ธํด ๋ฉด์ ์ ์ข์ ๊ธฐํ์ ๋ณด๊ฒ ๋์๊ณ , ์๋ตํ์๋ฉด ๋ญ ๋จ์ด์ง๋ ๊ฑด ์ฌ์ค ์๊ด์ด ์์๋๋ฐ(ํ๊ต๋ฅผ ๋ค๋ ์ผํ๋ค๋ ํฉ๋ฆฌํ) ๋ฉด์ ์์ ๋ง๋ ์๋๋ ๋๋ต๋ค์ ํ๊ณ ์์ ๋ฉด์ ์ ๊ทธ๋ ๊ฒ ๋ณด๊ณ ์๋ค๋ ๊ฒ ๋๋ฌด ์ฐฝํผํ๊ณ ์๊ดด๊ฐ์ด ์์๋ค. ์ง์ง ๋จ์๊ณผ ํ๋ณต๋นผ๋ฉด ์์ฒด์๋ ์ฌ๋์ด์๋๋ฐ ๊ทธ๋ ์ถฉ๊ฒฉ์ด ์ด์ง๊ฐํ ์ปธ๋์ง ๋ฉํ์ด ์์ ํ ๋๊ฐ์ ์ดํ์ ์ด๋ถํฅํ๋ฉด์ ์ ๋ ์ ๋๋ก ๋ชป์๊ณ ์ ๋๋ก ๋จน์ง๋ ๋ชปํ๊ณ ๋ค์์ฃผ์๋ ๊ธฐ๋ง์ํ๊ณต๋ถ๋ ๋ชปํ๋ค. (ํฌ๋งจ์ ๋ชปํด ํ์ด์ฃผ์ธ์...) ์๋ฌผ๋ก , ์ดํ๋ค์ .. 2021. 9. 18. Redux ๋ฆฌ๋์ค๋ ์ด๋ ต๋ค... Redux? ์ปดํฌ๋ํธ๊ฐ ๋ง์์๋ก ๋ณต์กํด์ง๋ ์ํ๋ฅผ ํจ์จ์ ์ผ๋ก ๊ด๋ฆฌํ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ why? ๊ตฌ์กฐ๊ฐ ์ ์ ๋ณต์กํด์ง๋ฉด์ ๋ถ๋ชจ ์ปดํฌ๋ํธ๋ถํฐ ์ตํ์ ์ปดํฌ๋ํธ๊น์ง ๋ด๋ ค์ค๋ฉด์ ์ํ๋ฅผ ๊ด๋ฆฌํ๋ ๊ฒ์ ๋๋ฌด ๋นํจ์จ์ ! ๋ฆฌ๋์ค๋ก ๋ฐ๊นฅ์์ ์ํ๊ด๋ฆฌ๋ฅผ ํด์ฃผ๋ฉด์ ํจ์จ์ ์ผ๋ก ์ ๊ทผ! ์ดํด๊ฐ ๋์ง ์๋๋ค๋ฉด ์๋์ ๊ฐ์ ์ํฉ์ ๋ณด์! ๐ ์์ ์ปดํฌ๋ํธ ๊ตฌ์กฐ๊ฐ ์๋์ ์ปดํฌ๋ํธ๊ตฌ์กฐ์ ๊ฐ์ด ๋ณต์กํด์ก๋ค๊ณ ๊ฐ์ ํด๋ณด์. ์ด๋ด ๊ฒฝ์ฐ, ์ตํ์ ์์ ์ปดํฌ๋ํธ๊น์ง ์ํ๋ฅผ ์ ๋ฌํด์ฃผ๊ฑฐ๋ ์์ ์ปดํฌ๋ํธ์์ ๋ฐ์ํ ์ด๋ฒคํธ์ ์ํด์ ๋ค๋ฅธ ๋ฃจํธ์ ์๋ ์ปดํฌ๋ํธ์ ์ํ๋ณํ๋ฅผ ๋ถ๋ฌ์ผ์ผ์ผ์ผํ๋ ์ํ์ผ ๊ฒฝ์ฐ์ผ ๋ ๋นํจ์จ์ ์ผ๋ก ์๋ํ๋ ๊ฒ์ ๋ณผ ์ ์๋ค. How? ์์ ์ ๊ฐ ๋ฌธ์ ๋ก ์ ์ํ๋ ์ํฉ๋ค์ ๋ฆฌ๋์ค๋ ๋ฐ๊นฅ์์ ์ํ๊ด๋ฆฌ๋ฅผ ํ ์ ์๋๋ก ๋์์ค ๋ฆฌ.. 2021. 7. 13. ์ด์ 1 2 3 4 5 6 7 8 ยทยทยท 15 ๋ค์ ๋ฐ์ํ