์์ผ๋ก ๊ทธ๋ฅ ๊ฐ๋ฒผ์ด ๋งํฌ๋ก ๊ฐ๋ณ๊ฒ ํ๋ฃจ ์์๋ ์ผ์ ์ด์ผ๊ธฐํ๋ฏ์ด ๊ธ์ ์ ์ด๋ณด๋ ค๊ณ ํ๋ค. โ์ฃผ์ ๋ฅผ ์ ํด์ ๊ทธ ์ฃผ์ ์ ๋ํด์ ๊ณต๋ถํ๊ณ ์ ๋ฆฌํด์ ๊ธ์ ์ด๋คโ๊ณ ์๊ฐํ์๋๋ฐ, ๊ทธ๋ฌ๋ค๋ณด๋ ๋ญ๊ฐ ๋นก์ธ๊ฒ ๊ณต๋ถํ์ง ์์ผ๋ฉด ๊ธ์ ๋ชป ์ฌ๋ฆฌ๊ฒ ๋์๋ค. ๊ทธ๋ฐ๋ฐ ํ๋์ ๋์ ํ ์ ๋ฌด ์ด์ธ์ ์๊ฐ์ ๊น๊ฒ ๊ณต๋ถํ ๋งํ ์๊ฐ์ด ๋์ง ์์๋ค. ์์ธ์ด๋ผ๊ณ ์น๋ฉด ๊ฐ๋ฐ ๊ณต๋ถ์ ๋งค์งํ๊ธฐ์๋ ํ์์์ ์๊ตฌ๋๋ ์ญํ ์ด ๋๋ฌด ๋ค์ํ๊ธฐ ๋๋ฌธ์ธ๋ฐ, ๋จ๋ค์ ์ด๋ป๊ฒ ์ฌ๋ ์ถ๊ณ ๊ทธ๋ ๋ค. ๊ทธ๋์ ์ด์ ๋ถํฐ๋ ๊ทธ๋ฅ ์ผ๊ธฐ์ฒ๋ผ ๊ธ์ ๋์ถฉ ๊ฐ๋ณ๊ฒ ์จ์ ์ข ์ข ๋จ๊ฒจ๋ณด๋ ค๊ณ ํ๋ค. ์งง์ ๊ฐ๋ฐ ์ด์ผ๊ธฐ๊ฐ ๋๋ถ๋ถ์ ์ฐจ์งํ ๊ฒ์ด๊ณ , ๊ฐ๋์ ์ฌ์ ์ธ ์์ญ์ ๊ฐ๋ฒผ์ด ๊ฐ์์ ์ ๊ธฐ๋ ํ ๊ฒ ๊ฐ๋ค.
์ ์ด๋ line-height๋ ์๋๋ค. ์ต๊ทผ ํ์ฌ ๋ด์ ๋์์ธ ์์คํ
์ ๋ง๋๋ ์ผ์ ๋ฆฌ๋ฉํ๊ณ ์๋ค. ๊ฐ์ฌํ๊ฒ๋ ์ข์ ๊ธฐํ๋ฅผ ์ป๊ฒ ๋์๊ณ , ์ข์ ๊ฒฐ๊ณผ๋ฅผ ๋ด๊ณ ์ถ์ด์ ๋
ธ๋ ฅ์ ๊ธฐ์ธ์ด๊ณ ์๋ค. ํ์ฌ ํ์ฌ์ ๋ฆฌ์์ค๊ฐ ๋ถ์กฑํ์ฌ ๋์์ธ ์์คํ
์ ๋์์ด๋ ์์ด ๊ฐ๋ฐ์๊ฐ ํผ์ ์ ํ๊ณ ์๋ ์กฐ๊ธ ๊ธฐ๋ฌํ ์ํฉ์ด๊ธด ํ์ง๋ง, ๊ฐ์ฅ ์ต๊ทผ์ ๋์์ธ ๋ ์๋น์ค๋ฅผ ๋ณด๋ฉฐ ์ต๋ํ ์ ์ฌํ๊ฒ ๊ฐ๊ณ ์๋ค. ์ด๋ ์ ๋ ๋ฌํํ๊ฒ ๋ฃฐ์ ์ ํด๋์ ํ์๋ ๊ฐ๋
์ ์ธ ๊ฒ๋ค์ ๋ฌธ์๋ก ์ ๋ฆฌํ๊ณ , ์ ๋ฆฌ๋ ๋ด์ฉ์ ํ ๋๋ก ๋์์ธ ์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋ง๋๋ ์์
๋ ์์ํ๋ค.
ํ๋ก์ ํธ๋ฅผ ๋ฆฌ๋ฉํ๋ค๋ ๊ฒ์ ๋ฌด์์ผ๊น? ํ๋ก์ ํธ๋ฅผ ํผ์์ ๋ฆฌ๋ฉํ ๊ฒฝํ์ด ์์ด์ ์กฐ๊ธ ๋ง๋งํ๋ค. ๊ฒ๋ค๊ฐ ๋ฆฌ์์ค ์ด์๋ก ํ์ด ๊พธ๋ ค์ง์ง ์๊ณ ๋ ํผ์ ์์ํ๊ธฐ ๋๋ฌธ์ ๋๋์ฑ ๋ง๋งํ๊ฒ ๋๊ปด์ก๋ค. ๋๋ ์ฌ๊ธฐ์ ์์ฌ์ด ์ ํ์ ํ๊ฒ ๋๋๋ฐ, ๊ทธ๊ฒ์ ํ์ฅ๋ ๋ฐ ๋ค๋ฅธ ๋๋ฃ์๊ฒ ์กฐ์ธ์ ๊ตฌํ๊ธฐ ์ ์ ์ผ๋จ ์์์ ํ๋ค๋ ๊ฒ์ด์๋ค. ๋ก๋๋งต ์ ๋๋ฅผ ๋ง๋ค์ด๋๋ฉด ์ด๋ป๊ฒ ๋๋ ์ ๋์ ์ด์ผ๊ธฐ๋ง ๋ฃ๊ณ ๊ทธ๋ฅ ์ผ๋จ ์์ํ๋ค. ๊ฐ๋์ ๊ทธ๊ฒ ์ข๊ฒ ์์ฉํ๋ ๊ฒฝ์ฐ๋ ์์ง๋ง ๊ทธ๋ ์ง ์์ ๊ฒฝ์ฐ๋ ์๋ค. ์ด๋ฒ์๋ ํ์์๋ค. ์ค์ปท ์ด์ฌํ ํค๋ณด๋๋ฅผ ๋๋ค๊ธฐ๋ค ๋ณด๋ ๋ ํผ์ ๋์์ธ ์์คํ ๊ณผ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋ค ๋ง๋๋ ์ฌ๋์ฒ๋ผ ์ผํ๊ณ ์์๋๋ฐ, ๊ทธ๋๋ง ํ ๋ฆฌ๋๋์ด 1 on 1 ์๊ฐ์ ๊ทธ ๋ถ๋ถ์ ์ผ๊นจ์์ฃผ์ ์ ๋ค์ด๋ฐ๋ ํ์๋ฅผ ๋ฉ์ถ ์ ์์๋ค.
ํ๋ก์ ํธ๋ฅผ ๋ฆฌ๋ฉํ๋ค๋ ๊ฒ์ ํ์ ๊น์์ฃผ๋ ํ์์ ๊ฐ๊น์ด ๊ฒ ๊ฐ๋ค. ๋์์ธ ์์คํ ์ ๋ ํผ์ ๋ง๋๋ ๊ฒ๊ณผ, ๋์์ธ ์์คํ ์ ๋ฆฌ๋ฉํ๋ ๊ฒ์ ๋ถ๋ช ํ ์ฐจ์ด๊ฐ ์์๋ค. ๋ก๋๋งต์ด๋์๊ณ ๋ด๊ฐ ๋ง๋ ๊ฒ์ ์ฌ์ค ํผ์ ์์ ์ ํ๊ธฐ ์ํด ํ์คํฌ๋ฅผ ์ธ๋ถํํด๋ ์นด๋์ ๋ถ๊ณผํ๋ค. ์ฌ์ค ๋ด๊ฐ ํด์ผ ํ ๊ฒ์ ๋ค๋ฅธ ์ฌ๋๋ค์ด ์์ ์ ์ฐธ์ฌํ์ ๋ ๋ฐ๋ผ๊ฐ ์ ์๋ ๊ฐ์ด๋๋ฅผ ๋ง๋ค๊ณ ๊ท์น์ ๋ง๋ค์ด๋๋ ๊ฒ์ด์๋ค. ์ฐ๊ณ ๋๋ ๋ณ ๊ฑด ์๋ ๊ฒ ๊ฐ์๋ฐ ์ฒ์ ๊นจ๋ฌ์์ ๋น์์๋ ์กฐ๊ธ ์ถฉ๊ฒฉ์ด์๋ค. ์์ผ๋ก๋ ์์ ์์ ๋ค์ ๋ฆฌ๋ฉํ๋ ๊ธฐํ๋ฅผ ๋ง์ด ๊ฐ์ ธ์ ์กฐ๊ธ ๋ ๋ฅ์ํ ์ฌ๋์ด ๋๊ณ ์ถ๋ค.
ํ์ฌ ๋ง๋ค๊ณ ์๋ ์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ bun์ ์ฌ์ฉํ๋ ค๊ณ ํ๋ค. ์๋๊ฐ ๋น ๋ฅด๊ณ , build์ test๊น์ง ๋ชจ๋ bun์ผ๋ก ์ฒ๋ฆฌํ ์ ์๋ค๊ณ ํด์ ๋์ ์ ๊ฒฐ์ ํ๋ค. ๋ฌผ๋ก ์๋ก์ด ํ๋ก์ ํธ๋ฅผ ๋ง๋๋ ๊น์ ์๋ก์ด ๊ธฐ์ ์ ์จ๋ณด๊ณ ์ถ์ ๋ง์๋ ๊ฝค๋ ํฐ ์์ฉ์ ํ๋ค. ๊ทธ๋ฌ๋ bun์ ํซ ๋ชจ๋๊ฐ React๋ฅผ ๊ฐ๋ฐํ ๋ ํํ ์ฌ์ฉ๋๋ hot reloader ๊ฐ์ ๋๋์ด ์๋์๊ธฐ ๋๋ฌธ์ ํธ์ํ ๊ฐ๋ฐ ํ๊ฒฝ์ ๊ตฌ์ฑํ๊ธฐ ์ํด vite๋ฅผ ๊ฒฐ๊ตญ ์ถ๊ฐ๋ก ๋ฃ์ด์ผ ํ๊ณ , vite๋ฅผ ์ธํ ํ๋ ๊น์ ์์ฐ์ค๋ฝ๊ฒ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ชจ๋๋ก ๋น๋ํ๋ ๊ฒ๋ vite๋ก ์ฒ๋ฆฌํด๋ฒ๋ ธ๋ค. ์ด๊ฒ ๊น์ง๋ ๊ทธ๋ฅ ๊ฐ์ํ๊ณ ๊ฐ๋ ค๊ณ ํ๋๋ฐ ์คํ ๋ฆฌ๋ถ์ ์ค์นํ ๋๋ ์ถฉ๋์ด ์๊ฒผ๋ค. ๋ฌผ๋ก ์์ธ์ ํ๊ณ ๋๋ฒ๊น ์ ํด์ ์ด๋ป๊ฒ๋ ์ฌ๋ ค์ ์ธ ์๋ ์์๊ฒ ์ง๋ง ๊ทธ๋ ๊ฒ๊น์ง ์๊ฐ์ ํฌ์ํ ์ผ์ด ์๋๋ผ๊ณ ์๊ฐํด์ ๋ค์ node + npm ์กฐํฉ์ผ๋ก ๊ฐ์ํ๋ค. ์์ฆ์ ์๊ฒ ๋ญ๊ฐ๋ฅผ ๋ง๋ค ์ผ์ด ์์ผ๋ฉดyarn ๋ณด๋ค๋ npm์ ์ฃผ๋ก ์ฌ์ฉํ๋ค. ์ด์ ๋ํด์๋ ๋์ค์ ๋ ์ด์ผ๊ธฐํ๋ฉด ์ข๊ฒ ๋ค.