ํ๋ก ํธ์๋์ ๊ฝ์ด๋ผ๊ณ ๋ถ๋ฅด๋ ์์ง๋์ด๋ง ์์๋ค์ ๊ฒฝํํ๋ฉฐ ์ฑ์ฅํ Front-end Engineer๋ฅผ ์ฐพ๊ณ ์์ด์!
AB180์ ์ธ๊ณ ๊ฐ๊ตญ์์ ํ๋ฃจ 10์ต ๊ฑด์ ๋ฌํ๋ ๋ฐ์ดํฐ๋ฅผ ๋ฐ์ ์ค์๊ฐ์ผ๋ก ๋ถ์ํ๊ณ ์์ด์. Front-end ํ์ ๊ณ ๊ฐ๋ค์ด ๋ถ์๋ ๋ง์ผํ ์ฑ๊ณผ๋ฅผ ํ์ธํ๊ณ , ์ธก์ ๊ธฐ์ค ๋ฑ์ ๋ณ๊ฒฝํ๊ฑฐ๋, ์์ ๋ฐ์ดํฐ๋ฅผ ๋ค๋ฅธ ๊ณณ์ ์ ์กํ ์ ์๋๋ก ๋์์ฃผ๋ ๋์๋ณด๋๋ฅผ ๋ง๋ค์ด์.
์์ด๋น์ผํ๊ณต์ Front-end ํ์์,
์์ด๋ธ๋ฆฟ์ง ๋์๋ณด๋์ ๊ธฐ๋ฅ์ ๋ง๋ค์ด์.
๋์๋ณด๋๋ฅผ ํตํด ๊ณ ๊ฐ๋ค์ ๋ถ์๋ ๋ง์ผํ
์ฑ๊ณผ๋ฅผ ํ์ธํ๊ณ , ์ธก์ ๊ธฐ์ค ๋ฑ์ ๋ณ๊ฒฝํ๊ฑฐ๋, ์์ ๋ฐ์ดํฐ๋ฅผ ๋ค๋ฅธ ๊ณณ์ ์ ์กํ ์ ์์ด์. ๊ณ ๊ฐ์ ํธ์๋ฅผ ์ํ ๊ธฐ๋ฅ์ ์๋ก ๋ง๋ค๊ฑฐ๋ ๊ฐ์ ํ๋ ์ผ์ ํจ๊ป ํ๊ฒ ๋ ๊ฑฐ์์.
๊ธ๋ก๋ฒ, ์ค์๊ฐ, ๊ทธ๋ฆฌ๊ณ ๋ค๋์ ๋ฐ์ดํฐ๋ฅผ ๋ค๋ฃจ๊ธฐ์, ๋ณต์กํ state ๊ด๋ฆฌ์ ์๋ง์ ์ปดํฌ๋ํธ์ ์กฐ๋ฆฝ๊ณผ ํด์ฒด, ์ฐจํธ ๋ฑ์ ์๊ฐํ, ๋ค๊ตญ์ด ๋ฐ Timezone ๋์ ๋ฑ์ ๊ฒฝํํ๋ฉฐ ์์ถ๋ ์ฑ์ฅ์ ํ ์ ์์ด์.
๋ ๋์ ์ฌ์ฉ์ ๊ฒฝํ์ ๋ง๋ค๊ธฐ ์ํ ๊ธฐ์ ์ ๊ฐ์ ์ ํด์.
์ ์ ์๋, ๋ค๋ฃจ๋ ๋ฐ์ดํฐ์ ์, ๋ ๋๋ง ์๋๋ ์ฌ์ฉ์ ๊ฒฝํ๊ณผ ์ง๊ฒฐ๋์ด ์์ด์. ์ฌ์ฉ์ ๊ฒฝํ์ ๊ฐ์ ํ๋ฉด์, ๊ฐ๋ฐ์ ํธ์์ ํจ์จ์ฑ๋ ๋์ด๊ณ , ํ
์คํ
๋ฑ ์ ํ์ ์์ ์ฑ์ ๋ณด์ฅํ ๋งํ ๋ฐฉ๋ฒ์ ๊ฐ์ด ๊ณ ๋ฏผํ๊ฒ ๋ ๊ฑฐ์์.
๊ฐ์ด ์ผ ํ๋ ๋๋ฃ๋ค์ ์ ๋ฌด ํจ์จ์ ๋์ด๋ ๋ฐฉ๋ฒ์ ๊ณ ๋ฏผํด์.
Front-end ํ์ ์ ํ์ ๋ง๋๋ ๋ชจ๋ ํ๊ณผ ์ด์ผ๊ธฐ๋ฅผ ๋๋์ด์. ๋ฒ์ญ ๊ด๋ฆฌ/๋ฐฐํฌ ์๋ํ ๋๊ตฌ, ๋์์ธ ์์คํ
, API ์๋ต ์๋ ํธ๋์ปค ๋ฑ์, ํจ๊ป ์ผํ๋ฉฐ ์๋ก์ ๋ฅ๋ ฅ์ ๋์ด๋ผ ์ ์๋ ๋ฐฉ๋ฒ์ ๊ณ ๋ฏผํ ๊ฒฐ๊ณผ์์ ๋์์ด์.
์ ํ๊ณผ ํ์ ์ต์ ์ ์์ ๋ชจ๋๊ฐ ๋์ฑ ์ ์ผํ ์ ์๋๋ก ๊ฐ์ด ๊ณ ๋ฏผํด์!
์ค๋ ฅ์๋ ๊ฐ๋ฐ์๋ก ์ฑ์ฅํ ์ ์๋ ์ข์ ๊ฒฝํ๋ค์ ์์ ์ ์์ด์.
์ด์ ๊น์ง ์ ํด๋ณด์ง ๋ชปํ๋ ๋น์ฆ๋์ค ๋ก์ง๊ณผ ๋์ฉ๋ ํธ๋ํฝ์ ๊ฒฝํํ๊ณ ์ด๋ ค์ด ๊ธฐ์ ๊ณผ์ ๋ฅผ ๋ค๋ค๋ณด๋ฉฐ ๋์์์ด ๋์ ํด์. ๋น์ฐํ ๊ทธ๋งํผ ์ค๋ ฅ๋ ํจ๊ป ์ฑ์ฅํด์. ๋ถ์ผ๋ณ ๋ฐ์ดํฐ์ ํ๋ฆ์ ๋์ผ๋ก ์ง์ ๋ณด๋ฉฐ ๋ฐฐ๊ฒฝ ์ง์์ ์๊ณ ๋ค์ํ ๊ฒฝํ์ ํ ์ ์์ด์.
ํ์ด์ฝ ๋ฑ ์ปจํผ๋ฐ์ค์์ ์ฌ๋ฐ๊ฒ ํ์ฌ๋ฅผ ์๋ฆด ์ ์๋ ๋ฐฉ๋ฒ์ Front-end ํ ์ฃผ๋๋ก ๋ง๋ค์ด์. ์ด๋ฒ์๋ ์ด๋ค ์ด๋ฒคํธ๋ฅผ ์งํํ์๊น์?
๋์์ธํ๊ณผ ํจ๊ป ๋ชจ์ฌ ๋์๋ณด๋์ ๋ค์ด๊ฐ๋ ์ปดํผ๋ํธ๋ฅผ ์ด๋ป๊ฒ ๋ง๋ค์ง '์ปดํผ๋ํธ ํ์'๋ฅผ ์งํํ๊ณ ์์ด์.
Front-end ํ์ ๊ตฌ์ฑํ๋ ๊ธฐ์
โข
Netlify๋ก ์์
ํ ๋ด์ฉ์ ํ๋ก๋์
์ ๋ถ์์ ๋์ ๋ชจ์ต์ ๋ฏธ๋ฆฌ ํ์ธํ๊ณ QAํด์.
โข
LogRocket์ผ๋ก ์ฌ์ฉ์๋ค์ด ๊ธฐ๋ฅ์ ์ด๋ป๊ฒ ์ฐ๋์ง, ์ด๋ค ๋์์์ ์๋ฌ๊ฐ ๋ฐ์ํ๋์ง ๋ชจ๋ํฐ๋งํด์.
โข
TypeScript๋ก ๊ธฐ์กด JavaScript ์ฝ๋๋ฅผ ์ฎ๊ธฐ๊ณ ์์ด์. ์์ ์ฑ์๋ ๋์์ด ๋์ง๋ง, ๊ฐ์ด ์์
ํ๋ ํ์๋ค์ ์ปค๋ฎค๋์ผ์ด์
๋ฐ ๋ ๊ฑฐ์ ๊ด๋ฆฌ์ ๋์์ด ๋ ๊ฑฐ๋ผ๊ณ ๊ธฐ๋ํด์.
โข
Emotion์ผ๋ก ๊ธฐ์กด CSS, Sass ์ฝ๋๋ฅผ ์ฎ๊ธฐ๊ณ ์์ด์. ๋์์ธ ์์คํ
๊ณ ๋ํ์ ์ ๊ทน ํ์ฉํ๊ณ ์์ด์.
โข
์ด๋ฐ ๋ถ๋ค์ ์ํด์!
โข
3๋
์ด์ Web Front-end ๊ฐ๋ฐ์ ํด์ค์ ๋ถ
โข
React, Redux, Webpack, ESNext ๋ฑ ์ต์ ๊ธฐ์ ์ ๊ดํ ๊น์ ์ดํด์ ๋น ๋ฅธ ํ์ต ๋ฅ๋ ฅ์ ๊ฐ์ง๊ณ ๊ณ์ ๋ถ
โข
์น ํ์ค ๋ฐ ์น ์ ๊ทผ์ฑ์ ์ค์ํ๋ ๋งํฌ์
(Markup)๊ณผ ์คํ์ผ์ ๊ณ ๋ฏผํ๋ ๋ถ
โข
์ฃผ์ด์ง ์ํฉ์ ๊ณผํ์ง ์์ '์ ์ ํ ์์ง๋์ด๋ง'์ผ๋ก ํด๊ฒฐํ๋ ๋ถ
โข
๋ณธ์ธ์ GitHub ๊ณ์ ์ด ์์ด, ์์ฑํ์ ์ฝ๋ ํน์ ์คํ ์์ค ํ๋ ๋ฑ์ ํ์ธํ ์ ์๋ ๋ถ
โข
Typescript๋ฅผ ๋ฌด๋ฆฌ ์์ด ์ฌ์ฉํ ์ ์์ผ์ ๋ถ
์ฐ๋ ์ฌํญ
โข
D3 ๋ฑ์ ์ฌ์ฉํ ๋ฐ์ดํฐ ์๊ฐํ, ํ๋ก ํธ์๋ ํ
์คํ
๊ด๋ จ ๊ฒฝํ
โข
๋์์ธ๊ณผ ์ฌ์ฉ์ ๊ฒฝํ์ ๊ด์ฌ์ด ๋ง์ ๋ถ
๊ทผ๋ฌด ํ๊ฒฝ
โข
์์จ์ ์ธ ์
๋ฌดํ๊ฒฝ๊ณผ ํจ์จ์ ์ธ ์
๋ฌด์ ์ํด ์ง์์ ์๋ผ์ง ์์์!
โข
์ฝ์ด ์ํน ํ์ ๊ธฐ๋ฐ์ ์์ฐจ ์ถํด๊ทผ์ ๋ก ์ ๋์ ์ธ ์๊ฐ๋๋ก ์ผํ ์ ์์ด์.
โข
์ฌ๋น์ญ ๋๋ณด 30์ด ๊ฑฐ๋ฆฌ์ ์ดํน๊ธ ์ญ์ธ๊ถ์ ์ฌ๋ฌด์ค์ด ์์ด์.
โข
์
๋ฌด์ ๊ด๋ จํ ๋น์ฉ์ ์ผ์ฒด ์ง์ํด์.
โข
๋ถ๋์ดํ ์ผ๊ทผ ์, ์ ํ ์์ด ์ ๋
์๋๋ฅผ ์ง์ํด์. (+๊ตํต๋น๋ ๋ค)
โข
์ฌ๋ฌด์ค์ ํญ์ ํ์ฑํ ๊ฐ์๊ฑฐ๋ฆฌ๊ฐ ์ค๋น๋์ด ์๊ณ , ์ปคํผ์ ํ์ฐ์๋ฅผ ๋ฌดํ์ผ๋ก ์ ๊ณตํด์.
์์ ์ ์ฐจ๋ ์๋์ ๊ฐ์์
* ์ํฉ์ ๋ฐ๋ผ ์ถ๊ฐ ์ธํฐ๋ทฐ๋ฅผ ์งํํ๊ฑฐ๋, ์ฑ์ฉ ์ ์ฐจ์ ๋ณ๋์ด ์์ ์ ์์ต๋๋ค.
์๋ฅ ์ ํ
์
์ฌ์ง์์์ GitHub ๋งํฌ๋ฅผ ๋ด์์ ์ง์ํด์ฃผ์ธ์.
1์ฐจ ๋ฉด์
์ง๋ฌด ์ ํฉ ์ฌ๋ถ๋ฅผ ํ๋จํ๊ธฐ ์ํด, ๊ฒฝํ/๊ธฐ์ ๊ณผ ๊ด๋ จ๋ ์ง๋ฌธ๋ค์ ๋๋ ค์.
2์ฐจ ๋ฉด์ (๊ธฐ์ ๋ฉด์ )
1์ฐจ์์ ๋๋ ์ด์ผ๊ธฐ๋ฅผ ํ ๋๋ก, ๋ผ์ด๋ธ ์ฝ๋ฉ ํ
์คํธ๋ฅผ ์งํํด์. ๋ผ์ด๋ธ ์ฝ๋ฉ ํ
์คํธ๋ ์๊ณ ๋ฆฌ์ฆ์ด ์๋ ์ค์ ์์ด๋ธ๋ฆฟ์ง์ ์๋ ์์คํ
์ ํ ๋๋ก ์งํํด์.
3์ฐจ ๋ฉด์
ํ์ฌ ์
๋ฌด ๋ฐ ๋ฌธํ ์ ํฉ๋ ๋ฑ์ ํ๋จํ๊ธฐ ์ํด ๊ด๋ จ๋ ์ง๋ฌธ๋ค์ ๋๋ ค์.
์ ์ฌ ํ์
์
์ฌ ์กฐ๊ฑด์ ํ์ํ๊ณ ์
์ฌ๋ฅผ ํ์ ํด์.
* ์
์ฌ ํ์๊ฐ ์ข
๋ฃ๋๋ ์์ ๊น์ง ์ต๋ ํ ๋ฌ ์ ๋์ ์๊ฐ์ด ๊ฑธ๋ฆด ์ ์์ด์.
* ๊ฒฐ๊ณผ๋ 1์ฃผ์ผ ์ด๋ด๋ก ๋ฉ์ผ์ ํตํด ํ์ธ ํ์ค ์ ์๊ณ , ์ง์ฐ๋๋ ๊ฒฝ์ฐ ๊ฐ๋ณ์ ์ผ๋ก ์ฐ๋ฝ๋๋ฆฝ๋๋ค.
๋ ์์๋ณด๊ธฐ
์ง๊ธ ๋น์ฅ ์ง์ํ์ง ์๋๋ผ๋, ์ ํฌ๋ฅผ ๋ ์๊ณ ์ถ์ผ์ ๋ถ๋ค๊ณผ ๋ง์ ์ด์ผ๊ธฐ๋ฅผ ๋๋ ๋ณด๊ณ ์ถ์ด์!
๊ถ๊ธํ ์ ์ด ์๋ค๋ฉด ์ธ์ ๋ ์ง ์ฐ๋ฝ์ฃผ์ธ์ โ hr@ab180.co
์ด ํ์ด์ง๋ฅผ ์ฃผ๋ณ์ ๋ง์ด ์๊ฐํด์ฃผ์ธ์! โ