About AB180
home
AB180 Culture
home
๐ŸฆŠ

Front-end Engineer(Senior)

ํ”„๋ก ํŠธ์—”๋“œ์˜ ๊ฝƒ์ด๋ผ๊ณ  ๋ถ€๋ฅด๋Š” ์—”์ง€๋‹ˆ์–ด๋ง ์š”์†Œ๋“ค์„ ๊ฒฝํ—˜ํ•˜๋ฉฐ ์„ฑ์žฅํ•  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
์ด ํŽ˜์ด์ง€๋ฅผ ์ฃผ๋ณ€์— ๋งŽ์ด ์†Œ๊ฐœํ•ด์ฃผ์„ธ์š”! โ†’