์ ์ฒด ๊ธ83 ํจ์ํ์ ์ ํจ์์งํฅํ์ด ์๋ ํจ์ํ ํ๋ก๊ทธ๋๋ฐ์ด๋ผ๊ณ ํ ๊น? ํจ์ํ ํ๋ก๊ทธ๋๋ฐ, ์ 'ํจ์์งํฅํ'์ด ์๋๊น?๊ฐ์ฒด์งํฅ ํ๋ก๊ทธ๋๋ฐ์ 'Object-Oriented Programming'์ ๋ฒ์ญ์ด๋ค. ์ฌ๊ธฐ์ 'Oriented'๊ฐ '์งํฅ'์ผ๋ก ๋ฒ์ญ๋์ด ์ฐ๋ฆฌ๋ '๊ฐ์ฒด์งํฅ'์ด๋ผ ๋ถ๋ฅธ๋ค. ๊ทธ๋ฐ๋ฐ 'Functional Programming'์ ์ 'ํจ์์งํฅํ'์ด ์๋ 'ํจ์ํ'์ผ๊น?๊ฐ์๊ธฐ ๋ ์๋ฌธ์ธ๋ฐ, ์ฒ์์๋ ๋จ์ํ ๋ฒ์ญ์ ์ฐจ์ด๋ผ๊ณ ์๊ฐํ๋ค. ํ์ง๋ง ์ด๋ฅผ ์ฐพ์๋ณด๋ฉด์ ํฅ๋ฏธ๋ก์ด ๋ด์ฉ๋ค์ ๋ฐ๊ฒฌํ ์ ์์๋ค.์ฐจ์ด์ '์งํฅ'์ ์๋ฏธ'์งํฅ(ๆๅ)'์ "์ด๋ค ๋ชฉํ๋ก ๋ป์ด๋ ๋ฐฉํฅ์ ํฅํจ"์ ์๋ฏธํ๋ค.๊ฐ์ฒด์งํฅ์ ํ๋ก๊ทธ๋๋ฐ์ ์ค์ฌ์ '๊ฐ์ฒด'์ ๋๊ณ , ์ด๋ฅผ ํฅํด ๋์๊ฐ๋ ๋ฐฉ๋ฒ๋ก ์ด๋ค.'ํ'์ ์๋ฏธ'ํ(ๅ)'์ "์๊น์๋ ๋ชจ์"์ ์๋ฏธํ๋ค.ํจ์ํ์ ์ํ์ ํจ์๋ฅผ ๋ฐํ์ผ๋ก ํ ํ๋ก๊ทธ๋๋ฐ์ ํ 'ํํ'๋ฅผ.. 2024. 7. 2. Ref๋ฅผ ์ข ๋ ์ ์จ๋ณผ๊น? (forwardRef์ useImperativeHandle) ๋ค์ด๊ฐ๋ฉฐ: React์ Ref ์ ๋ฌ ๋ฌธ์ React์ ์ปดํฌ๋ํธ์์ ref๋ฅผ ์ ๋ฌํ๋ ค๊ณ ํ๋ฉด ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋ค.// ๐จ ๋์ํ์ง ์๋ ์ฝ๋const Input = (props) => { return ;};// ๋ถ๋ชจ ์ปดํฌ๋ํธconst Parent = () => { const inputRef = useRef(null); return ; // ref๊ฐ ์ ๋ฌ๋์ง ์์};์ด๋ React๊ฐ ๊ธฐ๋ณธ์ ์ผ๋ก ref๋ฅผ ์ผ๋ฐ prop์ผ๋ก ์ ๋ฌํ์ง ์๊ธฐ ๋๋ฌธ์ ๋๋ค. ์ด๋ฐ ์ ํ์ด ์๋ ์ด์ ๋:1. ์บก์ํ ์ ์ง: ๋ด๋ถ ๊ตฌํ ์ธ๋ถ์ฌํญ์ ๋ณดํธ2. ์์ธก ๊ฐ๋ฅํ ๋ฐ์ดํฐ ํ๋ฆ ๋ณด์ฅ3. ๋ถํ์ํ ๋ ธ์ถ ๋ฐฉ์ง forwardRef: React์ ๊ณต์์ ์ธ ref ์ ๋ฌ ๋ฉ์ปค๋์ฆReact ๊ณต์ ๋ฌธ์์ ๋ฐ๋ฅด๋ฉด, `forwardRef`๋ ๋ค์๊ณผ ๊ฐ์ .. 2024. 6. 28. scale up๊ณผ scale out ๐TL; DR ์ค์ผ์ผ ์ ๊ณผ ์ค์ผ์ผ ์์์ ์ฐจ์ด ์ธ์ฆ์๋ฒ๋ฅผ ์ค์ผ์ผ ์์ํ๋ค๊ณ ํ๋ ์ด์ ๋ ๋ฌด์์ผ๊น ์ฌ๋ฌ ์ฌ์ฉ์๊ฐ ๋์ ๋ก๊ทธ์ธ์ ์๊ตฌํ ๋, ์ค์ผ์ผ ์์์ผ๋ก ์ฒ๋ฆฌํ๋ ๊ฒ ์ ํฉ ์ค๋ง์ผ๊ฒ์ดํธ ๋ฐ๋ธ์บ ํ๋ฅผ ํ๋ฉด์ ๋ง์ด ๋ฃ๊ณ , ํ๋ ์๊ธฐ ์ค์ ํ๋๊ฐ scale out ๊ณผ scale up์ด๋ค. ์ด์ ์๋ ๋ง์ด ๋ค์์ง๋ง, ์ฌ์ค ๊ทธ๋ฅ ๋๋ค ํ์ฅํ๋ค๋ ๋ง๋ก ๋ฐ์๋ค์ด๊ณ ๋ณ ์๊ฐ์ด ์์๋ ๊ฒ ๊ฐ๋ค. ํ์ง๋ง, ์ด๋ฒ์ ๋ฐํ ์ค๋น๋ฅผ ํ๋ฉด์ ์ธ์ฆ์ ๋ด๋นํ๋ ์๋ฒ ๊ฐ๋ฐ์๊ฐ '์ธ์ฆ ์๋ฒ์ ์ ์ ์๋ฒ๋ฅผ ๋ถ๋ฆฌํ ์ง'์ ๋ํ ๊ณ ๋ฏผ์ ๋ง์ด ํ๋ค. ์ด ๊ณ ๋ฏผ์ ๋ง์ด ๋ฃ๊ณ , ๊ฒฐ๋ก ์ ๋ด๋ฆฌ๊ธธ -> '์ธ์ฆ์๋ฒ์ ์ ์ ์๋ฒ๋ฅผ ๋ถ๋ฆฌํ๊ณ , ์ดํ์ ์ธ์ฆ ์๋ฒ๋ฅผ scale out ํ ์ ์๋๋ก ์ค๊ณํ๋ค' ์๋ค. ๋ณ ์๊ฐ ์๋ค๊ฐ ์ด๋ ์ scale up์ด ์๋๋ผ scal.. 2024. 1. 16. ๋ setTimeout, setInterval ๋ก ์๊ฐ ๋ณด์ฅํ๋ค๊ณ ํ ์ ์์ด? ์ด๋ป๊ฒ? ํ์ด๋จธ๋ฅผ ๊ตฌํํ๋ค๊ฐ ๋ฌธ๋ ๊ทธ๋ฐ ์๊ฐ์ด ๋ค์๋ค. ์๋ฌด ์๊ฐ ์์ด setTimeout ๊ณผ setInterval์ ์ฌ์ฉํ๋ฉด์ ์๋ค๋ ์ด๋ป๊ฒ ๋์๊ฐ๋๊ฑฐ์ง? ์๋ค๋ฅผ ๋ฏฟ๊ณ ์จ๋๋๋๊ฑด๊ฐ? ๊ณผ์ฐ setTimeout๊ณผ setInterval์ด ์๊ฐ์ ๋ณด์ฅํด์ฃผ๋ ๊ฒ ๋ง๋? ๊ทธ๋์ ๊ณต๋ถํ๊ฒ ๋๋ค. ๐TL; DR setTimeout, setInterval์ ์ฐจ์ด์ ์ง์ฐ ๊ฐ๊ฒฉ์ด ๋ณด์ฅ๋๋? ์๊ฐ์ ์ธก์ ํด์ผ๋๋ ํ์ด๋จธ๋ผ๋ฉด Date๊ฐ ํด๊ฒฐ์ฑ ์ด ๋ ์๋..? setTimeout ์ง์ ํด์ค ์๊ฐ์ด ์ง๋ ํ์ 1ํ ํน์ ์ฝ๋๋ฅผ ์คํํ๋ ๋ฐฉ๋ฒ ๋น๋๊ธฐ ํจ์ setTimeout์ด ๋น๋๊ธฐ์ฒ๋ฆฌ๊ฐ ๊ฐ๋ฅํ ์ด์ ๋ JS์์ง์ด ์๋๋ผ WebAPI์์ ์ฒ๋ฆฌ๋ฅผ ํ๋ค. ์ด๋ฅผ ํตํด์ ์ฑ๊ธ์ค๋ ๋์ธ JS์์ ๋น๋๊ธฐ์ ์ธ ์ฒ๋ฆฌ๊ฐ ๊ฐ๋ฅํ๊ฒ ๋๋ค. setInterval ์ง์ ํด.. 2024. 1. 16. styled-components๋ฌด์์ tailwind CSS ๋์ ๊ธฐ - 1 ๐TL; DR ์๋๋ styled-components๋ฅผ ์ฃผ๋ก ์ฌ์ฉํ๋ค. ๋์์ธ์์คํ ๊ตฌ์ถ์ ํ๋ฉฐ styled-components์ ํ๊ณ๋ฅผ ๋๊ผ๋ค. tailwind CSS๋ฅผ ๋์ ํ๋ค. ์์ง์ ํผ๋์ค๋ฝ๋ค.. tailwind CSS๋ฅผ '์ ์ฐ๋' ๋ฐฉ๋ฒ์ ๋ชจ์์ค์ด๋ค styled-components๋ฅผ ์ฌ์ฉํ๋ ์ด์ ์คํ์ผ๋ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ๋ ์ด์ ๋ '์ปดํฌ๋ํธํ'์ ์์๋ค. ์ปดํฌ๋ํธํํ๋ ๊ฑธ ์ข์ํ๊ธฐ๋ ํ๊ณ , ์ปดํฌ๋ํธ ์ด๋ฆ์ ๋ช ์ํ๋ฉด์ ๋ช ํํ ํด๋น ํ๊ทธ์ ์ญํ ์ด ๋๋ฌ๋๋ค๋ ์ ๋ ์ข์๋ค. ์ด ์ ์ ๋ฒ๊ทธ ํฝ์ฑ์๋ ๊ต์ฅํ ๊ฐํธํจ์ ๋๋ผ๊ฒ ํด์คฌ๋ค. (๋ฌธ์ ์ ์์ธ์ ์ฐพ๋ ๋ถ๋ถ์์ ๋ช ์์ฑ์ ์ฅ์ ) ๊ทธ๋ฆฌ๊ณ props๋ก ์กฐ๊ฑด๋ถ ์คํ์ผ๋ง์ ์ฅ์ ๋ ๋งค์ฐ ์ข์๋ค. ๋ฐ๋ณต๋๋ ์ปดํฌ๋ํธ์์ ์๊น๋ง ๋ฐ๋๋ ๊ฒฝ์ฐ๋ฅผ ๋ง์ด ๋ดค๊ณ , ๋ฐ๋ณต๋๋ ์ฝ๋.. 2024. 1. 8. ๊ณผ์ฐ ๋๊ตฌ๋ฅผ ์ํ ์น ์ ๊ทผ์ฑ์ธ๊ฐ 11์ 7์ผ์ ์น ์ ๊ทผ์ฑ์ ๋ํ ๊ฐ์ฐ์ ๋ฃ๊ณ ์๋ค. ์ง์ง ๋ง์ ๊ฑธ ์ป์๋ ๊ฐ์์๋ค. ์๋ํ๋ฉด ๋๋ ์ ์ด์ ์๋ชป ์๊ณ ์์๋ ๊ฐ๋ ์ด์๊ธฐ ๋๋ฌธ์ด๋ค. ์ฐฝํผํ์ง๋ง, ์ ๋ณด ์ ๊ทผ์ฑ์ด๋ผ๋ ๋ง์ ๋ณด์ ๊ด๋ จ ๋ฌธ์ ๋ฅผ ๋ค๋ฃฌ๋ค๊ณ ์๊ฐํ๋ ๋๋ ๋จธ๋ฆฌ๋ฅผ ๋~~ ๋ง์๋ค. ์ด๋ฒ ๊ธฐํ์ ์๋ชป๋ ์ง์์ ๋ฐ๋ก ์ก์ ์ ์์ด์ ๋๋ฌด ์ข์๋ค. ์๋ ๋ด์ฉ์ ๊ฐ์ฐ์ ๋ค์ผ๋ฉด์ ์ ๋ฆฌํ ๋ด์ฉ์ด๋ค. ๋์ฒ๋ผ '์น ์ ๊ทผ์ฑ'์ ๋ํด์ ์ ๋ชจ๋ฅธ๋ค๊ฑฐ๋, ๋ค์ด๋ง ๋ณธ ์ฌ๋์ด ์ฐธ๊ณ ํ๋ฉด ์ข์ ๊ฒ ๊ฐ๋ค. ๋ง์ฝ, ์ ๊ทผ์ฑ์ ๋ํด์ ์กฐ๊ธ ์๊ณ ์๋ค๋ฉด ์๋ ์ง๋ฌธ์ ํ ๋ฒ ๋ตํด๋ณด๋ ๊ฒ ์ข์ ๊ฒ ๊ฐ๋ค. ์๋น์ค๋ฅผ ๋ง๋ค๋ ์ ๊ทผ์ฑ์ ์ด๋์ ๋ ๊ฐ์น๋ฅผ ๋๋๊ฐ? ์ ๊ทผ์ฑ์ ์ค์์ฑ๊ณผ ํ์์ฑ์ ์๋์ง ์๋น์ค ๊ฐ๋ฐ ํ๋ก์ธ์ค์์ ๊ณ ๋ คํ๊ณ ์๋์ง ๋ด๊ฐ ๋ง๋ ์๋น์ค๋ฅผ ์ฅ์ ์ธ์ด ์ฌ์ฉํ๋ค๊ณ ๊ฐ์ ํ์๋, ์ด.. 2023. 11. 22. ์ด์ 1 2 3 4 ยทยทยท 14 ๋ค์ ๋ฐ์ํ