Private
ํ๋ก ํธ์๋ ๋ฉด์ (HTTP ํต์ )
1. HTTP ํต์ ์ ๋ํด์ ์ค๋ช ํด์ฃผ์ธ์.HTTP๋ HyperText transfer protocol๋ก ์น์์ ์ ๋ณด๋ฅผ ์ฃผ๊ณ ๋ฐ์ ์ ์๋ ํ๋กํ ์ฝ์ ๋๋ค. ๊ทธ๋์ ํด๋ผ์ด์ธํธ์ ์๋ฒ๊ฐ์ ํต์ ์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค. ํด๋ผ์ด์ธํธ๊ฐ ์๋ฒ๋ก ์นํ์ด์ง๋ ๋ฐ์ดํฐ๋ฅผ ์์ฒญํ๋ฉด ์๋ฒ๋ ํด๋ผ์ด์ธํธ์๊ฒ ์์ฒญ๋ฐ์ ์นํ์ด์ง๋ ๋ฐ์ดํฐ๋ฅผ ์ ์กํ๊ฒ ๋ฉ๋๋ค.2. HTTP์ stateless์ ๋ํด์ ์ค๋ช ํด์ฃผ์ธ์.HTTP ํต์ ์ stateless์ ํน์ง์ ๊ฐ์ง๊ณ ์์ต๋๋ค. stateless๋ ์ด์ ์์ฒญ์ ๊ฒฐ๊ณผ, ์ฆ ์ํ๋ฅผ ์ ์ฅํ๊ณ ์์ง ์์์ ์๋ฏธํฉ๋๋ค. ๋ฐ๋ผ์ ๋ชจ๋ ์์ฒญ์ ๋ ๋ฆฝ์ ์ธ ํน์ง์ ๊ฐ์ง๊ณ ์์ต๋๋ค.3. HTTP ํ๋กํ ์ฝ์ request์ response ๊ตฌ์กฐ์ ๋ํด ์ค๋ช ํด๋ณด์ธ์.HTTP request๋ฅผ ๋ณด๋ผ๋๋ ๊ตฌ์กฐ์ ๋ง๊ฒ ๋ณด๋ด์ผ ํ๋..
์จ๋ผ์ธ ๋๊ทธ๋ฆฌ ์กธ์ ์ ์ํ ํ๋ก์ ํธ ํ๊ณ (24.08-24.11)
๋งค๋ 10์์ ํ๋๋ ๋์์ธํ๋ถ์ ํฐ ํ์ฌ์ธ ๋๊ทธ๋ฆฌ ํ์ฌ๊ฐ ์งํํ๋ค. ์ฝ๋ ํ์๋ค์ 1๋ ๋์์ ๋ ธ๋ ฅ์ด ๋ด๊ธด ์ํ๋ค์ ์ ์ํ๊ณ ๋ง์ ๊ด๊ณ์๋ค์ด ์ฐธ์ฌํ๋ ํฐ ํ์ฌ์ด๋ค. ์ฝ๋ ํ์์ด ์๋๊ธฐ ๋๋ฌธ์ ๋๋ก์ ๋ง๋๋ ์ด์ ๋ ๋ชจ๋ฅด๊ฒ ์ง๋ง, ์ฐ๋ฆฌํ๊ต๋ ์ข ์ด๋๋ก์ ํตํด ์ ์ํ ์ดํ์๋ ์ํ ๊ฐ์์ด ๊ฐ๋ฅํ๋ค. ํ์ง๋ง ์ด๋ฌํ ์๋ ๋ก๊ทธ ๋ฐฉ์์ ๋๋ก์ ๊ฐ์ง๊ณ ์๋ ์ฌ๋์๊ฒ๋ง ์ํ์ด ๋ ธ์ถ๋๋ค๋ ์ ์์ ๋ถํธํจ์ด ์๋ค. ๋ฐ๋ผ์ ๋์์ธํ๋ถ์ธก์ ์ข ์ด๋๋ก์ ์์ ๊ณ ์จ๋ผ์ธ ์กธ์ ์ ์ํ๋ฅผ ๊ธฐํํ๊ฒ ๋์๋ค. ํ๋์์ ์ด์์ง์ผ๋ก ํ๋ํ๋ ๋๋ ์ธ์ฃผ ์์ฒญ์ผ๋ก ๋ค์ด์จ ์จ๋ผ์ธ ์กธ์ ์ ์ํ๋ฅผ 1์ธ ๊ฐ๋ฐ์๋ก ๋งก๊ฒ ๋์๋ค. ๊ฐ๋ฐํ์ ๊พธ๋ ค ํ์ ํ ์๋ ์์์ง๋ง, ์กธ์ ์ดํ ์๊ฒฉ์ผ๋ก ์ํตํด์ผํ๊ธฐ ๋๋ฌธ์ ์ํต๋ฆฌ์์ค๊ฐ ๊ฐ๋ฐ๋ณด๋ค ๋ง์ด ๋ค ๊ฒ ๊ฐ์๊ณ , 0to1 ์๋น์ค ๊ฐ..
ํ๋ก ํธ์๋ ๋ฉด์ (props, state)
1. ๋ฆฌ์กํธ์ props์ state์ ๋ํด ์ค๋ช ํด์ฃผ์ธ์.props๋ ๋ถ๋ชจ์ปดํฌ๋ํธ์์ ์์ ์ปดํฌ๋ํธ๋ก ์ ๋ฌํ๋ ๋ฐ์ดํฐ๋ก ์ ๋ฌ๋ ๋ฐ์ดํฐ๋ ์์์ปดํฌ๋ํธ์์ ์์ ์ด ๋ถ๊ฐ๋ฅํฉ๋๋ค. ์ด๋ฅผ ํตํด ์ปดํฌ๋ํธ ๊ฐ์ ๋ฐ์ดํฐ ํ๋ฆ์ ์์ธก์ด ๊ฐ๋ฅํ๊ณ ๋ฐ์ดํฐ๋ฅผ ๋ฐ๊ฟ ์ ์๊ธฐ๋๋ฌธ์ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฌ์ฉํ ์ ์์ต๋๋ค. state๋ ์ปดํฌ๋ํธ ๋ด์์ ๊ด๋ฆฌ๋๋ ๋ฐ์ดํฐ๋ก setState๋ก ๊ฐ์ ๋ณ๊ฒฝํ ์ ์์ผ๋ฉฐ ๊ฐ์ด ๋ฐ๋๋๋ง๋ค ๋ฆฌ๋๋๋ง์ด ์ด๋ฃจ์ด ์ง๋๋ค. ๋ฐ๋ผ์ state๊ฐ ๋ณ๊ฒฝ๋๋ฉด ๋ฆฌ๋๋๋ง์ ํตํด UI๊ฐ ์ ๋ฐ์ดํธ ๋ฉ๋๋ค.
ํ๋ก ํธ์๋ ๋ฉด์ (์ด๋ฒคํธ ๋ฃจํ)
1. ์ด๋ฒคํธ๋ฃจํ์ ๋ํด ์ค๋ช ํด์ฃผ์ธ์.์ด๋ฒคํธ ๋ฃจํ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ด ๋น๋๊ธฐ ์์ ์ ์ฒ๋ฆฌํ๋ ๋ฐฉ์์ ๋๋ค. ์๋ฐ์คํฌ๋ฆฝํธ๋ ์ฑ๊ธ์ค๋ ๋ ๊ธฐ๋ฐ์ผ๋ก ๋์ํ๊ธฐ ๋๋ฌธ์ ๋ชจ๋ ์์ ๋ค์ ํ๋์ฉ ์ฒ๋ฆฌ๋๊ณ , ์ฝ์คํ์ ์์ ์ด ์์ด๊ฒ ๋ฉ๋๋ค. API๋ฅผ ํตํด ๋ฐ์ดํฐ๋ฅผ ๋ฐ๊ฑฐ๋ ์ค๋๊ฑธ๋ฆฌ๋ ์์ ๋ฑ์ ์ฒ๋ฆฌ๋ฅผ ์ํด ๋น๋๊ธฐ ์ฒ๋ฆฌ๊ฐ ํ์์ ์ผ๋ฌ ์ด๋ฃจ์ด์ ธ์ผ ํ๋๋ฐ์, ์ด๋ Web API๋ฅผ ํตํด ๋น๋๊ธฐ ์์ ์ด ์ด๋ฃจ์ด์ง ์ ์์ต๋๋ค. ์ฝ์คํ์ ๋น๋๊ธฐ ์์ ์ด ์คํ๋๋ฉด ๋น๋๊ธฐํจ์๋ Web API๋ฅผ ํธ์ถํ๊ณ Web API๋ Task queue๋ผ๊ณ ๋ ํ๋ Callback Queue์ ์ฝ๋ฐฑ ํจ์๋ฅผ ๋ฃ์ต๋๋ค. ์ด๋ฒคํธ ๋ฃจํ๋ ์ฝ์คํ๊ณผ ์ฝ๋ฐฑํ๋ฅผ ๊ณ์ ํ์ธํ์ฌ ์ฝ์คํ์ ์๋ ์์ ์ ์ฐ์ ์ ์ผ๋ก ์ฒ๋ฆฌํ๊ณ ์ฝ์คํ์ด ๋น๋ฉด ์ฝ๋ฐฑํ์ ์๋ ์์ ์ ์ฝ์คํ์ ๋ฃ์ด ์ฒ๋ฆฌํ๋ ๋ฐฉ..
ํ๋ก ํธ์๋ ๋ฉด์ (์ด๋ฏธ์ง ์ต์ ํ)
1. ์ด๋ฏธ์ง ์ต์ ํ ๊ฒฝํ์ด ์๋๋ฐ ์ด๋ค ๋ฐฉ์์ผ๋ก ์งํ๋์๋์ง ์ค๋ช ํด์ฃผ์ธ์.์จ๋ผ์ธ ์กธ์ ์ ์ ์ฌ์ดํธ๋ฅผ ์ด์ํ๋ฉฐ ์ด๋ฏธ์ง ์ต์ ํ๋ฅผ ์งํํ์ต๋๋ค. 20MB์ด์์ ์ฉ๋์ด ํฐ ์ด๋ฏธ์ง๋ฅผ ์ฃผ๋ก ์ฌ์ฉํ๊ณ ์๋ ์กธ์ ์ํ ์ฌ์ดํธ์ ํน์ฑ์ ๊ณ ๋ คํ์ฌ ์ฌ์ฉ์๊ฐ ๊ธด ๋ก๋ฉ์์ด ๋น ๋ฅด๊ฒ ์ํ์ ๊ฐ์ํ ์ ์๋๋ก ์ด๋ฏธ์ง ์ต์ ํ๋ฅผ ์งํํ์ต๋๋ค. ๋จผ์ ํ์ผ ํฌ๋งท์ ๋ณ๊ฒฝํ๋ ์์ ์ ์งํํ์ต๋๋ค. webp ํฌ๋งท์ ์ฌ์ฉํ์ฌ ์ฉ๋์ ๊ฐ์ ํ๋๋ฐ์, webp ํฌ๋งท์ ๊ตฌ๊ธ์์ ๋ฐํํ ํฌ๋งท์ผ๋ก ์์ถ ํจ๊ณผ๊ฐ ์ข์ ๋ง์ ์ฉ๋์ ์ค์ผ ์ ์๊ธฐ ๋๋ฌธ์ png ํฌ๋งท์์ webp๋ก ๋ณ๊ฒฝํ๊ฒ ๋์์ต๋๋ค. ๊ทธ ๊ฒฐ๊ณผ png ํฌ๋งท์ผ๋๋ณด๋ค 31%์ ์ฉ๋ ๊ฐ์ ์ด ์์์ต๋๋ค. ๋๋ฒ์งธ๋ก ์ด๋ฏธ์ง ์ฌ์ด์ฆ๊ฐ ์ค์ ์น์ฌ์ดํธ์์ ์ฌ์ฉํ๋ ๊ฒ๋ณด๋ค 1.5๋ฐฐ์ ๋ ํฐ ์ฌ์ด์ฆ๋ก ์ฌ์ฉ๋๊ณ ์์ด์ ์น..
ํ๋ก ํธ์๋ ๋ฉด์ (์คํ์ปจํ ์คํธ, ์ค์ฝํ ์ฒด์ธ)
1. ์คํ์ปจํ ์คํธ์ ๋ํด ์ค๋ช ํด์ฃผ์ธ์.์คํ์ปจํ ์คํธ๋ ์๋ฐ์คํฌ๋ฆฝํธ์์ ์ฝ๋๊ฐ ์คํ๋๋ ํ๊ฒฝ์ ์๋ฏธํฉ๋๋ค. ํจ์์ ๊ฐ์ด ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ด ์ฝ๋๋ฅผ ์คํํ ๋, ๊ทธ ์ฝ๋๊ฐ ์คํ๋ ๋์ ํ๊ฒฝ์ ์ ์ํ๊ณ ๊ด๋ฆฌํ๊ธฐ ์ํด ์คํ์ปจํ ์คํธ๊ฐ ์กด์ฌํฉ๋๋ค.์คํ์ปจํ ์คํธ๋ ์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ์ฒ์ ์คํ๋ ๋ ์ ์ญ์ผ๋ก ๋จผ์ ์์ฑ๋๊ณ , ํจ์๊ฐ ํธ์ถ๋ ๋ ์ญ์ ์์ฑ๋ฉ๋๋ค. ์ด๋ฌํ ์คํ ์ปจํ ์คํธ๋ ์์ฑ๋ ๋ ์ฝ์คํ์ ์์ด๊ฒ๋๋ฉฐ ํจ์๊ฐ ์ข ๋ฃ๋๊ฑฐ๋ ํ๋ก๊ทธ๋จ์ด ์ข ๋ฃ๋ ๋ ์ฌ๋ผ์ง๊ฒ ๋ฉ๋๋ค.2. ์คํ์ปจํ ์คํธ๋ ์ด๋ค ๊ตฌ์ฑ ์์๋ก ์ด๋ฃจ์ด์ ธ ์๋์?์คํ์ปจํ ์คํธ๋ ๋ณ์ ๊ฐ์ฒด์ ์ค์ฝํ์ฒด์ธ, this ๋ก ๊ตฌ์ฑ๋์ด ์์ต๋๋ค.๋จผ์ ๋ณ์ ๊ฐ์ฒด๋ ์คํ ์ปจํ ์คํธ ๋ด์์ ์ฌ์ฉ๋๋ ๋ณ์์ ํจ์์ ์ ์ธ์ ์ ์ฅํ๋ ๊ณต๊ฐ์ ๋๋ค.์ค์ฝํ ์ฒด์ธ์ ํ์ฌ ์คํ ์ค์ธ ์ปจํ ์คํธ์ ์ธ๋ถ ๋ ์..
ํ๋ก ํธ์๋ ๋ฉด์ (reflow, repaint)
1. reflow์ repaint์ ์ฐจ์ด์ ์ ๋ํด ์ค๋ช ํด์ฃผ์ธ์.reflow์ repaint๋ ๋ชจ๋ ๋ ๋๋ง๊ณผ ๊ด๋ จ์ด ์์ต๋๋ค. ํ๋ฉด์ด ๋ฆฌ๋๋๋ง ๋์ ๋, ๊ฐ ์ํฉ์ ๋ฐ๋ผ reflow์ repaint๊ฐ ์ผ์ด๋๊ฒ ๋ฉ๋๋ค. reflow๋ ๋ธ๋ผ์ฐ์ ๊ฐ ํ์ด์ง์ ๋ ์ด์์์ ๋ค์ ๊ณ์ฐํ๋ ๊ณผ์ ์ ์๋ฏธํ๊ณ repaint๋ ๊ณ์ฐ ๊ฒฐ๊ณผ๋ฅผ ๋ฐํ์ผ๋ก ํ๋ฉด์ ๋ค์ ๊ทธ๋ฆฌ๋ ๊ณผ์ ์ ๋๋ค. reflow๋ DOM์ ๊ตฌ์กฐ๊ฐ ๋ณ๊ฒฝ๋๊ฑฐ๋ ์์์ ํฌ๊ธฐ๋ ์์น๊ฐ ๋ณ๊ฒฝ๋ ๋ ์ผ์ด๋ฉ๋๋ค. repaint๋ ๋ ์ด์์์ ๊ทธ๋๋ก์ด๊ณ ์์์ด๋ ๋ฐฐ๊ฒฝ ๋ฑ์ ์คํ์ผ๋ง ๋ณ๊ฒฝ๋์์ ๋ ์ผ์ด๋ฉ๋๋ค. ๋ ์ด์์์ ๋ค์ ๊ณ์ฐํ๋ reflow๊ฐ ์ผ์ด๋๋ฉด repaint๊ฐ ํ์ฐ์ ์ผ๋ก ์ผ์ด๋๊ธฐ๋ ํ๊ณ , reflow๋ ๋น์ฉ์ด ๋ ๋ค๊ธฐ ๋๋ฌธ์ ๋ ์ด์์ ๊ณ์ฐ์ด ๋ค์ ์ผ์ด๋์ง ์๋๋ก ๊ด๋ฆฌ..
ํ๋ก ํธ์๋ ๋ฉด์ (ํด๋ก์ , ํด๋ก์ ์ ๋จ์ )
1. ํด๋ก์ ์ ๋ํด ์ค๋ช ํด์ฃผ์ธ์.ํด๋ก์ ๋ ์ ์ธ๋์๋ ๊ทธ๋์ ๋ ์์ปฌ ์ค์ฝํ๋ฅผ ๊ธฐ์ตํ๋ ํจ์์ ๋๋ค. ์๋ฐ์คํฌ๋ฆฝํธ์์ ๋ชจ๋ ํจ์๋ค์ Environment๋ผ๋ ํ๋กํผํฐ๋ฅผ ๊ฐ์ง๋๋ฐ ์ฌ๊ธฐ์ ์ธ๋ถ ํจ์์ ๋ณ์์ ์ฐธ์กฐ๊ฐ์ด ์ ์ฅ๋์ด ์ธ๋ถ ํจ์์ ๋ณ์์ ์ ๊ทผ์ด ๊ฐ๋ฅํฉ๋๋ค.https://enjoydev.life/blog/javascript/6-closure JavaScript์ ํด๋ก์ (Closure)๋? (feat. React์ useState)JavaScript์ ํด๋ก์ ์ ์๋ฆฌ๋ฅผ ์ฝ๊ฒ ๋ฐฐ์๋ณด๊ณ ์ด๋ค ์ํฉ์ ์ฌ์ฉ๋๋์ง ์์๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค.enjoydev.life2. ํด๋ก์ ์ ๋จ์ ๊ณผ ํด๊ฒฐ๋ฐฉ๋ฒ์ ๋ํด ์ค๋ช ํด์ฃผ์ธ์.ํด๋ก์ ๋ ์ธ๋ถํ๊ฒฝ์ ๋ณ์๋ฅผ ๊ณ์ ๊ธฐ์ตํ๊ณ ์๊ธฐ ๋๋ฌธ์ ๊ฐ๋น์ง์ปฌ๋ํฐ์ ๋์์ด ๋์ง ์์ ๋ฉ๋ชจ๋ฆฌ ๋์๊ฐ ์ผ์ด๋ ์ ์..
ํ๋ก ํธ์๋ ๋ฉด์ (Sync, Async, ์๋ฐ์คํฌ๋ฆฝํธ์ ๋์ ์๋ฆฌ, Call Stack, TaskQueue, Event Loop)
1. Sync, Async์ ์ฐจ์ด์ (๋๊ธฐ, ๋น๋๊ธฐ์ ์ฐจ์ด์ )์ ๋ํด์ ์ค๋ช ํด์ฃผ์ธ์.Sync๋ ์์ ์์ฒญ์ด ์ด๋ค์ง๊ณ , ์์ฒญ ์๋ต์ ๊ธฐ๋ค๋ฆฌ๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค. Async๋ ํน์ ํ ์์ฒญ์ ์๋ต์ ๊ธฐ๋ค๋ฆฌ์ง ์๊ณ ๋ค์ ์์ ์ ์ํํ๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค. ์๋ฐ์คํฌ๋ฆฝํธ๋ ๊ธฐ๋ณธ์ ์ผ๋ก ์ฑ๊ธ์ค๋ ๋์ด๊ธฐ ๋๋ฌธ์ ์์ฒญ๋ ์์ ์ ํ๋์ฉ ์ํํ์ง๋ง setTimeout์ด๋ fetch๊ณผ ๊ฐ์ Web API๋ฅผ ์ฌ์ฉํ์ฌ ๋น๋๊ธฐ๋ก ์ฒ๋ฆฌํ ์ ์๊ฒ ๋ฉ๋๋ค. 2. ์๋ฐ์คํฌ๋ฆฝํธ์ ๋์ ์๋ฆฌ์ ๋ํด ์ค๋ช ํด์ฃผ์ธ์.์๋ฐ์คํฌ๋ฆฝํธ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์์ง ์์์ ๋์ํ๋๋ฐ์, ๋ํ์ ์ผ๋ก ๊ตฌ๊ธ์ V8์์ง์ด ์์ต๋๋ค. ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ ๋ฉ๋ชจ๋ฆฌํ๊ณผ ์ฝ์คํ์ผ๋ก ๊ตฌ์ฑ๋์ด ์์ต๋๋ค. ๋ฉ๋ชจ๋ฆฌ ํ์ ๋ณ์, ํจ์ ๋ฑ ๋ฉ๋ชจ๋ฆฌ ํ ๋น์ด ์ด๋ฃจ์ด์ง๋ ๊ณต๊ฐ์ ๋๋ค. ์ฝ์คํ์๋ ์๋ฐ์คํฌ๋ฆฝ..