ํ๋ก ํธ์๋์ ๊ฝ์ด๋ผ๊ณ ๋ถ๋ฅด๋ ์์ง๋์ด๋ง ์์๋ค์ ๊ฒฝํํ๋ฉฐ ์ฑ์ฅํ Frontend Engineer๋ฅผ ์ฐพ๊ณ ์์ด์!
AB180์ ์ธ๊ณ ๊ฐ๊ตญ์์ ํ๋ฃจ 10์ต ๊ฑด์ ๋ฌํ๋ ๋ฐ์ดํฐ๋ฅผ ๋ฐ์ ์ค์๊ฐ์ผ๋ก ๋ถ์ํ๊ณ ์์ด์. Frontend ํ์ ๊ณ ๊ฐ๋ค์ด ๋ถ์๋ ๋ง์ผํ ์ฑ๊ณผ๋ฅผ ํ์ธํ๊ณ , ์ธก์ ๊ธฐ์ค ๋ฑ์ ๋ณ๊ฒฝํ๊ฑฐ๋, ์์ ๋ฐ์ดํฐ๋ฅผ ๋ค๋ฅธ ๊ณณ์ ์ ์กํ ์ ์๋๋ก ๋์์ฃผ๋ ๋์๋ณด๋๋ฅผ ๋ง๋ค์ด์.
AB180 Frontend ํ์์,
์์ด๋ธ๋ฆฟ์ง ๋์๋ณด๋์ ๊ธฐ๋ฅ์ ๋ง๋ค์ด์.
๋์๋ณด๋๋ฅผ ํตํด ๊ณ ๊ฐ๋ค์ ๋ถ์๋ ๋ง์ผํ
์ฑ๊ณผ๋ฅผ ํ์ธํ๊ณ , ์ธก์ ๊ธฐ์ค ๋ฑ์ ๋ณ๊ฒฝํ๊ฑฐ๋, ์์ ๋ฐ์ดํฐ๋ฅผ ๋ค๋ฅธ ๊ณณ์ ์ ์กํ ์ ์์ด์. ๊ณ ๊ฐ์ ํธ์๋ฅผ ์ํ ๊ธฐ๋ฅ์ ์๋ก ๋ง๋ค๊ฑฐ๋ ๊ฐ์ ํ๋ ์ผ์ ํจ๊ป ํ๊ฒ ๋ ๊ฑฐ์์.
๊ธ๋ก๋ฒ, ์ค์๊ฐ, ๊ทธ๋ฆฌ๊ณ ๋ค๋์ ๋ฐ์ดํฐ๋ฅผ ๋ค๋ฃจ๊ธฐ์, ๋ณต์กํ state ๊ด๋ฆฌ์ ์๋ง์ ์ปดํฌ๋ํธ์ ์กฐ๋ฆฝ๊ณผ ํด์ฒด, ์ฐจํธ ๋ฑ์ ์๊ฐํ, ๋ค๊ตญ์ด ๋ฐ Timezone ๋์ ๋ฑ์ ๊ฒฝํํ๋ฉฐ ์์ถ๋ ์ฑ์ฅ์ ํ ์ ์์ด์.
๋ ๋์ ์ฌ์ฉ์ ๊ฒฝํ์ ๋ง๋ค๊ธฐ ์ํ ๊ธฐ์ ์ ๊ฐ์ ์ ํด์.
์ ์ ์๋, ๋ค๋ฃจ๋ ๋ฐ์ดํฐ์ ์, ๋ ๋๋ง ์๋๋ ์ฌ์ฉ์ ๊ฒฝํ๊ณผ ์ง๊ฒฐ๋์ด ์์ด์. ์ฌ์ฉ์ ๊ฒฝํ์ ๊ฐ์ ํ๋ฉด์, ๊ฐ๋ฐ์ ํธ์์ ํจ์จ์ฑ๋ ๋์ด๊ณ , ํ
์คํ
๋ฑ ์ ํ์ ์์ ์ฑ์ ๋ณด์ฅํ ๋งํ ๋ฐฉ๋ฒ์ ๊ฐ์ด ๊ณ ๋ฏผํ๊ฒ ๋ ๊ฑฐ์์.
๊ฐ์ด ์ผํ๋ ๋๋ฃ๋ค์ ์ ๋ฌด ํจ์จ์ ๋์ด๋ ๋ฐฉ๋ฒ์ ๊ณ ๋ฏผํด์.
Frontend ํ์ ์ ํ์ ๋ง๋๋ ๋ชจ๋ ํ๊ณผ ์ด์ผ๊ธฐ๋ฅผ ๋๋์ด์. ๋ฒ์ญ ๊ด๋ฆฌ/๋ฐฐํฌ ์๋ํ ๋๊ตฌ, ๋์์ธ ์์คํ
, API ์๋ต ์๋ ํธ๋์ปค ๋ฑ์, ํจ๊ป ์ผํ๋ฉฐ ์๋ก์ ๋ฅ๋ ฅ์ ๋์ด๋ผ ์ ์๋ ๋ฐฉ๋ฒ์ ๊ณ ๋ฏผํ ๊ฒฐ๊ณผ์์ ๋์์ด์.
์ ํ๊ณผ ํ์ ์ต์ ์ ์์ ๋ชจ๋๊ฐ ๋์ฑ ์ ์ผํ ์ ์๋๋ก ๊ฐ์ด ๊ณ ๋ฏผํด์!
์ค๋ ฅ์๋ ๊ฐ๋ฐ์๋ก ์ฑ์ฅํ ์ ์๋ ์ข์ ๊ฒฝํ๋ค์ ์์ ์ ์์ด์.
์ด์ ๊น์ง ์ ํด๋ณด์ง ๋ชปํ๋ ๋น์ฆ๋์ค ๋ก์ง๊ณผ ๋์ฉ๋ ํธ๋ํฝ์ ๊ฒฝํํ๊ณ ์ด๋ ค์ด ๊ธฐ์ ๊ณผ์ ๋ฅผ ๋ค๋ค๋ณด๋ฉฐ ๋์์์ด ๋์ ํด์. ๋น์ฐํ ๊ทธ๋งํผ ์ค๋ ฅ๋ ํจ๊ป ์ฑ์ฅํด์. ๋ถ์ผ๋ณ ๋ฐ์ดํฐ์ ํ๋ฆ์ ๋์ผ๋ก ์ง์ ๋ณด๋ฉฐ ๋ฐฐ๊ฒฝ ์ง์์ ์๊ณ ๋ค์ํ ๊ฒฝํ์ ํ ์ ์์ด์.
ํ์ด์ฝ ๋ฑ ์ปจํผ๋ฐ์ค์์ ์ฌ๋ฐ๊ฒ ํ์ฌ๋ฅผ ์๋ฆด ์ ์๋ ๋ฐฉ๋ฒ์ Frontend ํ ์ฃผ๋๋ก ๋ง๋ค์ด์. ์ด๋ฒ์๋ ์ด๋ค ์ด๋ฒคํธ๋ฅผ ์งํํ์๊น์?
๋์์ธํ๊ณผ ํจ๊ป ๋ชจ์ฌ ๋์๋ณด๋์ ๋ค์ด๊ฐ๋ ์ปดํฌ๋ํธ๋ฅผ ์ด๋ป๊ฒ ๋ง๋ค์ง '๋์์ธ ์์คํ
ํ์'๋ฅผ ์งํํ๊ณ ์์ด์.
Frontend Team ๋ง๋๋ณด๊ธฐ 
๋จ์ํ ์ ๊ทผํ ์ ์๋ ์์ ์ผ ์๋ ์์ง๋ง, ๋ชฉ์ ๊ณผ ๋ฐฐ๊ฒฝ์ ์ดํดํ๋ฉฐ ๋ ๊น์ด ํ๊ณ ์๊ฒฌ์ ๋ด์ด ์ ํ์ ๊ฐ์ ํฉ๋๋ค. ์ด๋ฅผ ํตํด ๋ฌธ์ ๋ฅผ ํ์์ ๋์ ์พ๊ฐ ํน์ ๊ทธ๋ ์ง ๋ชปํ์ ๋์ ์์ฌ์์ ๋๊ตฌ๋ณด๋ค ์์์ ๊ฒฝํํ ์ ์์ต๋๋ค.
Frontend Team Lead, ์ด์ฐฌํฌ๋ | LinkedIn Profile
ํ๋ก๋ํธ๋ฅผ ๋ง๋๋ ๊ณผ์ ์์ ์ฃผ๋์ ์ผ๋ก ์์ฑ๋๋ฅผ ๋์ฌ ๋๊ฐ ์ ์์ต๋๋ค. ๋จ์ํ ๊ฐ๋ฐ์ ์ธ ๋ถ๋ถ์์์ ์ต์ ํ๋ถํฐ, UX์ ๋ํด ๊ณ ๋ฏผํ๊ณ ๊ฐ์ ์ ์ ์ฐพ์๋๊ฐ ์ ์๋ ํ๊ฒฝ์ด ๋ง๋ จ๋์ด ์์ต๋๋ค.
Frontend Engineer, ์ง์ค๊ธฐ๋
์์ ์ ๊ฐ์ธ์ด ์งํํ์ง๋ง ํ๋ก๋ํธ๋ฅผ ๋ง๋ค์ด๊ฐ๋ ๊ฒ์ ํ์ด๋ผ๊ณ ์๊ฐํฉ๋๋ค. ๋ฌธ์ ๊ฐ ๋ฐ์ํ์ ๋์๋ ๊ฐ์ธ์ ์ค์๋ฅผ ๋น๋ํ์ง ์๊ณ , ๋ฌธ์ ํด๊ฒฐ์ ์ด์ ์ ๋ง์ถ๋ ํฌ์คํธ๋ชจํ (postmortem) ๋ฌธํ๋ฅผ ์งํฅํฉ๋๋ค.
Frontend Engineer, ์ ์น์ฐ๋ | LinkedIn Profile
Frontend ํ์ ๊ตฌ์ฑํ๋ ๊ธฐ์ 
โข
Vercel๋ก ์์
ํ ๋ด์ฉ์ ํ๋ก๋์
์ ๋ถ์์ ๋์ ๋ชจ์ต์ ๋ฏธ๋ฆฌ ํ์ธํ๊ณ QAํด์.
โข
LogRocket์ผ๋ก ์ฌ์ฉ์๋ค์ด ๊ธฐ๋ฅ์ ์ด๋ป๊ฒ ์ฐ๋์ง, ์ด๋ค ๋์์์ ์๋ฌ๊ฐ ๋ฐ์ํ๋์ง ๋ชจ๋ํฐ๋งํด์.
โข
TypeScript๋ฅผ ๊ธฐ๋ณธ์ ์ผ๋ก ์ฌ์ฉํด์. ์์ ์ฑ์๋ ๋์์ด ๋์ง๋ง, ๊ฐ์ด ์์
ํ๋ ํ์๋ค์ ์ปค๋ฎค๋์ผ์ด์
๋ฐ ๋ ๊ฑฐ์ ๊ด๋ฆฌ์ ๋์์ด ๋ ๊ฑฐ๋ผ๊ณ ์๊ฐํ๊ณ ์์ด์.
โข
Recoil๊ณผ React Query ๊ธฐ๋ฐ์ผ๋ก ๊ธฐ์กด์ Redux ์ค์ฌ์ ์ํ ๊ด๋ฆฌ ๊ตฌ์กฐ๋ฅผ ๋ฐ๊พธ๊ณ ์์ด์. ๋ณด๋ค ์์ ๋จ์๋ก ๊ธฐ๋ฅ์ ๊ฐ๋ฐ, ๋ฐฐํฌํ๊ธฐ ์ํด ํ์์ฑ์ ๋๊ปด ์งํํ๊ณ ์์ด์.
โข
Emotion์ผ๋ก ๊ธฐ์กด CSS, Sass ์ฝ๋๋ฅผ ์ฎ๊ธฐ๊ณ ์์ด์. ๋์์ธ ์์คํ
๊ณ ๋ํ์ ์ ๊ทน ํ์ฉํ๊ณ ์์ด์.
โข
์ฃผ์ ์
๋ฌด
โข
์์ด๋ธ๋ฆฟ์ง Attribution Dashboard์ Frontend ์ค๊ณ ๋ฐ ๊ตฌํ
โข
๋์์ธํ๊ณผ์ ํ์
์ ํตํ Design System์ ์ค๊ณ ๋ฐ ๊ตฌํ
โข
Sales, CSM ๋ฑ ๋ค๋ฅธ ํ์ ๋ฅ๋ฅ ์ ์ฌ๋ ค์ค ์ ์๋ ๋ด๋ถ ๋๊ตฌ ๊ฐ๋ฐ
์๊ฒฉ ์๊ฑด
โข
1๋
์ด์์ Web Frontend ๊ฐ๋ฐ ๊ฒฝ๋ ฅ์ด ์์ผ์ ๋ถ
โข
React, Redux, Webpack, ESNext ๋ฑ ์ต์ ๊ธฐ์ ์ ๊ดํ ๊น์ ์ดํด์ ๋น ๋ฅธ ํ์ต ๋ฅ๋ ฅ์ ๊ฐ์ง๊ณ ๊ณ์ ๋ถ
โข
์น ํ์ค ๋ฐ ์น ์ ๊ทผ์ฑ์ ์ค์ํ๋ ๋งํฌ์
(Markup)๊ณผ ์คํ์ผ์ ๊ณ ๋ฏผํ๋ ๋ถ
โข
์ฃผ์ด์ง ์ํฉ์ ๊ณผํ์ง ์์ '์ ์ ํ ์์ง๋์ด๋ง'์ผ๋ก ํด๊ฒฐํ์๋ ๋ถ
(์ค๋ฒ ์์ง๋์ด๋ง๊ณผ ์ธ๋ ์์ง๋์ด๋ง์ ๋ํ ์ดํด์ ํต์ ๊ฐ ๊ฐ๋ฅํ์ ๋ถ)
โข
๋ณธ์ธ์ GitHub ๊ณ์ ์ด ์์ด, ์์ฑํ์ ์ฝ๋ ํน์ ์คํ ์์ค ํ๋ ๋ฑ์ ํ์ธํ ์ ์๋ ๋ถ
โข
TypeScript๋ฅผ ๋ฌด๋ฆฌ ์์ด ์ฌ์ฉํ ์ ์์ผ์ ๋ถ
์ฐ๋ ์ฌํญ
โข
D3 ๋ฑ์ ์ฌ์ฉํ ๋ฐ์ดํฐ ์๊ฐํ, ํ๋ก ํธ์๋ ํ
์คํ
๊ด๋ จ ๊ฒฝํ
โข
๋์์ธ๊ณผ ์ฌ์ฉ์ ๊ฒฝํ์ ๋ํ ๊น์ ๊ด์ฌ
โข
์ ๊ด๋ถ์์์ ํ์
, ์ธํ์ฐ์ค ํด ๊ฐ๋ฐ ๋ฑ ์
๋ฌด ํจ์จ์ฑ ์ฆ๋์ ๊ด๋ จํ ๊ฒฝํ
๊ทผ๋ฌด ํ๊ฒฝ
โข
์์จ์ ์ธ ์
๋ฌดํ๊ฒฝ๊ณผ ํจ์จ์ ์ธ ์
๋ฌด์ ์ํด ์ง์์ ์๋ผ์ง ์์์!
โข
์ฝ์ด ์ํน ํ์ ๊ธฐ๋ฐ์ ์์ฐจ ์ถํด๊ทผ์ ๋ก ์ ๋์ ์ธ ์๊ฐ๋๋ก ์ผํ ์ ์์ด์.
โข
์ฌ๋น์ญ ๋๋ณด 30์ด ๊ฑฐ๋ฆฌ์ ์ดํน๊ธ ์ญ์ธ๊ถ์ ์ฌ๋ฌด์ค์ด ์์ด์.
โข
์
๋ฌด์ ๊ด๋ จํ ๋น์ฉ์ ์ผ์ฒด ์ง์ํด์.
โข
๋ถ๋์ดํ ์ผ๊ทผ ์, ์ ํ ์์ด ์ ๋
์๋๋ฅผ ์ง์ํด์. (+๊ตํต๋น๋ ๋ค)
โข
์ฌ๋ฌด์ค์ ํญ์ ํ์ฑํ ๊ฐ์๊ฑฐ๋ฆฌ๊ฐ ์ค๋น๋์ด ์๊ณ , ์ปคํผ์ ํ์ฐ์๋ฅผ ๋ฌดํ์ผ๋ก ์ ๊ณตํด์.
ํฉ๋ฅ ํ๋ก์ธ์ค
* ์ํฉ์ ๋ฐ๋ผ ์ถ๊ฐ ์ธํฐ๋ทฐ๋ฅผ ์งํํ๊ฑฐ๋, ์ฑ์ฉ ์ ์ฐจ์ ๋ณ๋์ด ์์ ์ ์์ต๋๋ค.
์๋ฅ ์ ํ
์
์ฌ์ง์์์ GitHub ๋งํฌ๋ฅผ ๋ด์์ ์ง์ํด์ฃผ์ธ์.
1์ฐจ ์ธํฐ๋ทฐ
ํฌ์ง์
์ ํฉ ์ฌ๋ถ๋ฅผ ํ๋จํ๊ธฐ ์ํด, ๊ฒฝํ/๊ธฐ์ ๊ณผ ๊ด๋ จ๋ ์ง๋ฌธ์ ๋๋ ค์.
์ธํฐ๋ทฐ ์๋ฃ๋ก ํ์ฉํ๊ธฐ ์ํ ๊ฐ๋จํ ์ฌ์ ๊ณผ์ ๊ฐ ์์ด์.
2์ฐจ ๋ฉด์ (๊ธฐ์ ๋ฉด์ )
1์ฐจ์์ ๋๋ ์ด์ผ๊ธฐ๋ฅผ ํ ๋๋ก, ๋ผ์ด๋ธ ์ฝ๋ฉ ํ
์คํธ๋ฅผ ์งํํด์.
๋ผ์ด๋ธ ์ฝ๋ฉ ํ
์คํธ๋ ์๊ณ ๋ฆฌ์ฆ์ด ์๋ ์ค์ ์์ด๋ธ๋ฆฟ์ง์ ์๋ ์ปดํฌ๋ํธ๋ฅผ ํ ๋๋ก ์งํํด์.
3์ฐจ ์ธํฐ๋ทฐ
ํ์ฌ ์
๋ฌด ๋ฐ ๋ฌธํ ์ ํฉ๋ ๋ฑ์ ํ์ธํ๊ธฐ ์ํด ๊ด๋ จ๋ ์ง๋ฌธ์ ๋๋ ค์.
์ ์ฌ ํ์
์
์ฌ ์กฐ๊ฑด์ ํ์ํ๊ณ ์
์ฌ๋ฅผ ํ์ ํด์.
* ์
์ฌ ํ์๊ฐ ์ข
๋ฃ๋๋ ์์ ๊น์ง ์ต๋ ํ ๋ฌ ์ ๋์ ์๊ฐ์ด ๊ฑธ๋ฆด ์ ์์ด์.
* ๊ฒฐ๊ณผ๋ 1์ฃผ์ผ ์ด๋ด๋ก ๋ฉ์ผ์ ํตํด ํ์ธ ํ์ค ์ ์๊ณ , ์ง์ฐ๋๋ ๊ฒฝ์ฐ ๊ฐ๋ณ์ ์ผ๋ก ์ฐ๋ฝ๋๋ฆฝ๋๋ค.
๋ ์์๋ณด๊ธฐ 
AB180 ํ๋ก ํธ์๋ ํ์ ์ด๋ ๊ฒ ์ผํด์
์ด๋ฐ ๊ธฐ์ ์ ๋ฌธ์ ๋ฅผ ํ๊ณ ์์ด์