์ ์ฒด ๊ธ84 ํจ์ํ์ ์ ํจ์์งํฅํ์ด ์๋ ํจ์ํ ํ๋ก๊ทธ๋๋ฐ์ด๋ผ๊ณ ํ ๊น? ํจ์ํ ํ๋ก๊ทธ๋๋ฐ, ์ 'ํจ์์งํฅํ'์ด ์๋๊น?๊ฐ์ฒด์งํฅ ํ๋ก๊ทธ๋๋ฐ์ '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. [์ฑ ] ์์ฑ๋ ์น์ฌ์ดํธ๋ก ๋ฐฐ์ฐ๋ ์๋ฐ์คํฌ๋ฆฝํธ ํ๋น๋ฏธ๋์ด ํ๋์ ์ํด์ ์ฑ ์ ์ ๊ณต๋ฐ์ ์์ฑ๋ ์ํ์ ๋๋ค.์ฑ ์ถ์ฒ ๋์์์น ํ๋ก ํธ ๊ฐ๋ฐ์ ๊ด์ฌ์๋ ์ฌ๋HTML, CSS๋ฅผ ํ๋ฒ์ด๋ผ๋ ๋ค๋ค๋ณธ ์ฌ๋Javascript ์ด๋ณด์์ฌ์ค ๋๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๋ฆฌ์กํธ๋ฅผ ํ๋ฉด์ ๋ณ๋ ฌ์ ์ผ๋ก ํฐ๋ํ๋ ์ฌ๋์ธ์ง๋ผ, ์์ ๋ฐ๋๋ผJS ๊ตฌํ์ ์ฝํ๋ค๊ณ ์๊ฐํ๋ค.๊ทธ๋์ ์ด๋ฒ '์์ฑ๋ ์น์ฌ์ดํธ๋ก ๋ฐฐ์ฐ๋ ์๋ฐ์คํฌ๋ฆฝํธ' ์ฑ ์ ๋ณด๋ฉด์ ๋ด๊ฐ ๋์น๊ณ ์๋ ๋ถ๋ถ๋ค์ ๋ํด์ ๋ค์๊ธ ์๊ธฐ์ํฌ ์ ์์๋ค. ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์๊ตฌ๋ ์ฌํญ์ ๋ค ๊ตฌํํ ์ ์๋ ์ฌ๋์ด๋ผ๋ฉด ์ด ์ฑ ์ ์คํตํด๋ ๋ ๊ฒ ๊ฐ์ง๋ง, ๊ทธ๋ ์ง ์์ ์ฌ๋๋ค์๊ฒ ๋ชจ๋ ์ถ์ฒํ๋ค. ๋๋์ ์์ฆ ์ด๋ก ์ฑ ๋ค์ ๋ณด๊ฒ ๋๋ฉด ๊ธ ์์ฃผ์ ์ฑ ๋ค์ด ๋ง์๋ฐ, ์๋ ์ปดํจํฐ ์ง์์ ์ ๋ฌํด์ผํ ๊ฒ๋ ๋ง๊ณ ๊น์ด๋ ์์ด์ผํ๊ธฐ ๋๋ฌธ์ ๊ทธ๋ด ์ ๋ฐ์ ์๋ค๋.. 2024. 4. 24. 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. ์ด์ 1 2 3 4 ยทยทยท 14 ๋ค์ ๋ฐ์ํ