์ค๋ ฅ์๋ FE ๊ฐ๋ฐ์๋ก ์ฑ์ฅํ๊ธฐ ์ํ
์ค์ ! ์น ํ๋ก ํธ์๋ ์ฑ๋ฅ ์ต์ ํ.
์ง๋ ํํธ์ ๋ฌ๋ฆฐ
์์ํ ์๊ฐํ์ ํ์ธํ์ธ์!
๊ฐ์ ํ์ด์ง์์ ๋ ๋ง์ ์๊ฐํ์ ๋ณผ ์ ์์ด์. (ํด๋ฆญ)
์ด ๊ฐ์๋?
์ธํ๋ฐ ๋ฒ ์คํธ!
์ค์ ์น ์ฑ๋ฅ ์ต์ ํ ์๋ฆฌ์ฆ ๐ฒ
Part.1์ง๋ ๊ฐ์
- ๋ธ๋ก๊ทธ ์ฌ์ดํธ ์ต์ ํ
- ์ฌ๋ฆผํฝ ํต๊ณ ์ฌ์ดํธ ์ต์ ํ
Part.2ํ์ฌ ๊ฐ์
- ์ผ๋ฐ ํํ์ด์ง ์ต์ ํ
- ์ด๋ฏธ์ง ๊ฐค๋ฌ๋ฆฌ ์ต์ ํ
๋ค์ํ ์์ ๋ฅผ ํตํด, ์น ์๋น์ค์ ๋ถ์๊ณผ ์ต์ ํ ๊ธฐ๋ฒ์ ๋ฐฐ์ธ ์ ์๋ ๊ฐ์์
๋๋ค.
ํํ๊ฒ ์ด๋ก ๋ง ์๋ ค์ฃผ๋ ๋ฌด์ฑ
์ํ ์ผ๋ฐ์ ์ธ ์ต์ ํ ๊ฐ์์ ๋ค๋ฅธ,
์ค์ ์์ ๋ฅผ ํตํด ์ง์ ๋ถ์๊ณผ ์ต์ ํ๋ฅผ ๋ฐฐ์ธ ์ ์๋
๊ตญ๋ด ์ต์ด ์ฑ๋ฅ ์ต์ ํ ์๊ธฐ์ค ๊ฐ์์
๋๋ค!
์์ 10% ํ๋ก ํธ์๋
๊ฐ๋ฐ์๋ฅผ ํฅํด.
ํ๋ก ํธ์๋๋ผ๋ ๋ถ์ผ๊ฐ ๋์จ ์ง ๊ฝค ์ง๋ฌ์ง๋ง,
์น ์ฑ๋ฅ ์ต์ ํ์ ๋ํด์ ์ ์๊ณ ์๋ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ ๋ณ๋ก ์์ต๋๋ค.
์ด๋ฐ ํ์ค ์์์,
์น ์ฑ๋ฅ ์ต์ ํ ๊ธฐ๋ฒ์ ์ตํ ๊ณ ๊ธ ํ๋ก ํธ์๋ ์ธ์ฌ๊ฐ ๋ ์ง,
๋จ์ ํผ๋ธ๋ฆฌ์ฑ๋ง ํ๋ ๊ทธ์ ๊ทธ๋ฐ ์ง์์ด ๋ ์ง๋ ์ฌ๋ฌ๋ถ์ ์ ํ์
๋๋ค.
๊ฐ์๋ฅผ ๋ฏธ๋ฆฌ
ํ์ธํด๋ณด์ธ์.
ํ์ต ๋ด์ฉ
- Performance ํจ๋์ ์ด์ฉํ ๋ถ์
- Lighthouse ํจ๋์ ์ด์ฉํ ๋ถ์
- Network ํจ๋์ ์ด์ฉํ ๋ถ์
- Coverage ํจ๋์ ์ด์ฉํ ๋ถ์
- React Developer Tools ํ์ฉ๋ฒ
- Redux DevTools ํ์ฉ๋ฒ
- ์ด๋ฏธ์ง ์ง์ฐ(Lazy) ๋ก๋ฉ
- ์ด๋ฏธ์ง ์ฌ์ด์ฆ ์ต์ ํ
- ๋์์ ์ฌ์ด์ฆ ์ต์ ํ
- ํฐํธ ์ต์ ํ
- ์บ์ ์ต์ ํ
- ๋ถํ์ํ CSS ์ ๊ฑฐ ๋ฐฉ๋ฒ
- Layout Shift ํผํ๋ ๋ฒ
- UseSelector ๋ ๋๋ง ๋ฌธ์ ํด๊ฒฐ
- Redux Reselect๋ฅผ ํตํ ๋ ๋๋ง ์ต์ ํ
- Memoization์ ์ด์ฉํ ์ต์ ํ
- ๋ณ๋ชฉ ํจ์ ๋ก์ง ๊ฐ์
์์
๋ฏธ๋ฆฌ๋ณด๊ธฐ
ํ์ต ๋์์ ํ์ธํด์ฃผ์ธ์!
- ๋ณธ ๊ฐ์๋ ํ๋ก ํธ์๋ ์น ๊ฐ๋ฐ ๊ฒฝํ์ด ์๋ ๋ถ๋ค๊ป ์ ํฉํ ๊ฐ์์
๋๋ค. ํนํ, React(๋ฆฌ์กํธ) ์ฌ์ฉ ๊ฒฝํ์ด ์๋ค๋ฉด ๋ณด๋ค ์์ํ๊ฒ ํ์ตํ ์ ์์ต๋๋ค.
์ด ๊ฐ์๋ฅผ ๋ง๋
์ง์๊ณต์ ์๋ฅผ ์๊ฐํฉ๋๋ค.
์ ๋๊ท

- (ํ) ํด์น๋ฉ์ค ํ๋ก ํธ์๋ ๊ฐ๋ฐ์
- (์ ) ๋ผ์ธ ํ์ด๋ธ์
ํ๋ฐํธ์๋ ๊ฐ๋ฐ์
- ์ผ์ฑ SSAFY, ํ๋ก๊ทธ๋๋จธ์ค ๋ฑ ํ๋ฐํธ์๋ ๊ฐ๋ฐ ๊ฐ์
- ์น ์ฑ๋ฅ ์ต์ ํ ํ๋ก์ ํธ ๋ฐ ๊ฐ์ ์ ์
- ๋ง์ดํฌ๋ก์ํํธ์จ์ด 393ํธ(JS ์ฃผ์ ), 392ํธ(๋ธ๋ก์ฒด์ธ ์ฃผ์ ) ๊ธฐ๊ณ
์ฑ๋ฅ ์ต์ ํ๋ผ๋ ๊ฑธ โ์ด๋ป๊ฒ' ๋ฐฐ์ฐ๋ ๊ฒ ์ข์๊ฐ์ ๋ํ ์๋ก ์ ์ธ ๊ณ ๋ฏผ์ ํ๋ค๊ฐ ์ด ๊ฐ์๋ฅผ ๋ง๋ค๊ฒ ๋์์ต๋๋ค. ์ด์ ์ ์ฌ๋ฌ ์น ์๋น์ค์ ์ฑ๋ฅ์ ๋ถ์ํ๊ณ , ์ต์ ํํด๋ณธ ๊ฒฝํ์ ๋์ด์ผ๋ณด๋, ์ด๋ก ๋ถํฐ ๋ง์ด ์๋ ค๋๋ฆฌ๊ธฐ๋ณด๋ค ์์ ์๋น์ค๋ฅผ ์ง์ ๋ถ์ํ๊ณ ์ค์ตํด๋ณธ๋ค๋ฉด ์น ์ฑ๋ฅ ์ต์ ํ์ ๋ํด ํ์คํ๊ฒ ํ์ตํ ์ ์๊ฒ ๋ค๋ ์๊ฐ์ด ๋ค์์ด์.
์ฌ์ค ์ฑ๋ฅ ์ต์ ํ๋ผ๋ ๊ฒ์ ์ํฉ์ ๋ฐ๋ผ ๋ฌ๋ผ์ง ์ ์๊ณ , ๋ฐฉ๋ฒ๋ ๋ค์ํ์ง๋ง, ๊ทธ ์ค ํต์ฌ์ ์ธ ๊ฒ๋ค์ ๋ชจ์ ๋จ๊ณ , ๋จ์ํ ์ต์ ํ ๊ธฐ๋ฒ๋ง์ด ์๋ ๋ธ๋ผ์ฐ์ ์ ๋์ ์๋ฆฌ์ ์ฑ๋ฅ์ ๋ถ์ ๋ฐฉ๋ฒ ๋ฑ ์น ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ๋ผ๊ฐ ๋๊ณ ์ด์ด ๋๋ ๊ฒ๋ค๋ ์๋ ค์ฃผ๋ ์ด์ฌํ ํ์ตํด์ฃผ์ธ์. ์ง๋ฌธ์ ์ธ์ ๋ ํ์์
๋๋ค.
์์ ์ง๋ฌธ Q&A.
Q. ๊ฐ์ ๋์ด๋๋ ์ด๋ ์ ๋์ธ๊ฐ์?
๊ธฐ๋ณธ์ ์ผ๋ก ์น์ ๋ํ ์ง์์ด ํ์ํฉ๋๋ค. ํ์ง๋ง, ์ฑ๋ฅ ์ต์ ํ์ ๋ถ๋ถ์์๋ ๊ธฐ์ด๋ถํฐ ์์ธํ ์ค๋ช
์ ํ๊ธฐ ๋๋ฌธ์ ์ฑ๋ฅ ์ต์ ํ๋ฅผ ์ฒ์ ์ ํ์๋ ๋ถ์ด๋ผ๋ ์ดํดํ์ค ์ ์์ต๋๋ค.
Q. ์ด ๊ฐ์์์๋ ์ด๋ค ํ๋ก๊ทธ๋จ(๋๋ ํด)์ ์ฌ์ฉํ๋์?
ํฌ๋กฌ์ ๊ฐ๋ฐ์ ๋๊ตฌ(devtools)๋ฅผ ์ฃผ๋ก ์ฌ์ฉํฉ๋๋ค. ๊ทธ ์ธ์ ํ์์ ๋ฐ๋ผ ์ถ๊ฐ์ ์ธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ๋๋ฐ, ์ฌ์ฉ๋ฒ์ด๋ ๊ฐ๋จํ ์ค๋ช
์ ๊ฐ์ด ํ๊ธฐ ๋๋ฌธ์ ํ์ตํ๋๋ฐ ์ด๋ ค์์ ์์ ๊ฒ๋๋ค.
Q. ์ด ๊ฐ์๋ง์ ํน๋ณํ ์ฅ์ ์ด ์์๊น์?
์น ์ฑ๋ฅ ์ต์ ํ๋ฅผ ํ์ตํ๋ค๋ ๊ฒ์ ์ด๋ ต์ต๋๋ค. ์๋ํ๋ฉด ๋ง๋
ํ ์๋ฃ๋ ์๊ณ ๋๋ถ๋ถ ๋จํธ์ ์ธ ์ด๋ก ๋ค์ด๊ธฐ ๋๋ฌธ์ด์ฃ . ํ์ง๋ง, ์ด ๊ฐ์์์๋ ๊ทธ๋ฐ ๋จํธ์ ์ธ ์ต์ ํ ๊ธฐ๋ฒ๋ค์ ๋ชจ์์ ์ง์ ํ์ตํ๊ณ ํ๋ จํ ์ ์๋ ์ฌ๋ฌ ์น ์๋น์ค๋ค์ ์ค๋นํด๋์ต๋๋ค. ๊ทธ๋ ๊ธฐ ๋๋ฌธ์, ์ด๋ป๊ฒ ์๋น์ค๋ฅผ ๋ถ์ํ๊ณ , ๋ฌด์์ ๊ทผ๊ฑฐ๋ก, ์ด๋ค ์ต์ ํ ๊ธฐ๋ฒ์ ์ ์ฉํด์ผ ํ๋์ง๋ฅผ ๋ฑ๋ฑ์ด ๋ฐฐ์ธ ์ ์์ต๋๋ค.