Goodbye 2020. Hello 2021 ๐Ÿ‘‹

Jusung Hwang
5 min readDec 31, 2020

--

2019๋…„์— ์ด์–ด 2020๋…„ ํ•œํ•ด๋„ ์ •๋ง ๋งŽ์€ ์ผ์ด ์žˆ์—ˆ๋„ค์š”.
์˜›๋‚ ๋ถ€ํ„ฐ ์–ธ์ œ ํ•œ๋ฒˆ ์ €์˜ ์–˜๊ธฐ๋“ค์„ ๊ธ€๋กœ ๋‚จ๊ฒจ๋ณด๊ณ  ์‹ถ์—ˆ๋Š”๋ฐ ๋งค๋ฒˆ ๊ธ€์„ ์“ธ ํƒ€์ด๋ฐ์„ ์ž˜ ์žก์ง€ ๋ชปํ•ด์„œ ์ด์ œ์•ผ ์จ๋ณด๊ฒŒ ๋˜์—ˆ๋„ค์š”.
(์–ด๋–ป๊ฒŒ ์“ธ์ง€๊ฐ์ด ์ž˜ ์•ˆ ์žกํžˆ๊ณ  ๊ฐ€์žฅ ํฐ ์ด์œ ๋Š” ๊ท€์ฐฎ์•˜๊ธฐ ๋•Œ๋ฌธ์ธ ๋“ฏํ•˜๋‹คโ€ฆ)

์‚ฐ์—…๊ธฐ๋Šฅ์š”์›์œผ๋กœ ๋ณต๋ฌด ์‹œ์ž‘

ํ˜„์žฌ ์žฌ์ง ์ค‘์ธ Wizpace(์œ„์ฆˆํŽ˜์ด์Šค) ํšŒ์‚ฌ์—์„œ ์ž‘๋…„์— ๋ณ‘์—ญํŠน๋ก€์—…์ฒด๋กœ ์„ ์ •์ด ๋˜์—ˆ๊ณ , ํ˜„์—ญ TO๊ฐ€ ๋‚˜์™€์„œ ์˜ฌํ•ด 1์›”๋ถ€ํ„ฐ ์‚ฐ์—…๊ธฐ๋Šฅ์š”์›์œผ๋กœ ๋ณต๋ฌด๋ฅผ ์‹œ์ž‘ํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

์ฃผ๋ณ€ ์นœ๊ตฌ ๋ฐ ์ง€์ธ๋“ค์€ ์ด๋ฏธ ์˜›๋‚ ๋ถ€ํ„ฐ ์‚ฐ์—…๊ธฐ๋Šฅ์š”์›์œผ๋กœ ๋ณต๋ฌด ์ค‘์ด์—ˆ๊ธฐ์— ์ •๋ง ๋ถ€๋Ÿฌ์› ์ง€๋งŒ, ํ˜„ ํšŒ์‚ฌ์—์„œ 2020๋…„ 1์›” ๊ธฐ์ค€ 2๋…„ ๊ฐ€๊นŒ์ด ์ง€๋‚ด๋ฉด์„œ ๋“œ๋””์–ด ๋‚˜๋„ ๋ณต๋ฌด๋ฅผ ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ๋‹ค๋Š” ๊ฒŒ ์ •๋ง๋กœ ๊ธฐ๋ปค๋˜ ๊ฒƒ ๊ฐ™์•„์š”. ๐Ÿ˜„

์ž ์‹œ ์•ˆ๋…•. ํ›ˆ๋ จ์†Œ๋กœ ๋– ๋‚ฉ๋‹ˆ๋‹ค.

4์›” ์ดˆ, ๊ตญ๊ฐ€์˜ ๋ถ€๋ฆ„์œผ๋กœ 1๋‹ฌ ์ •๋„ ๋…ผ์‚ฐ ํ›ˆ๋ จ์†Œ์— ๊ฐ€๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.
๊ฐ€๊ธฐ ์ „์—” ์ •๋ง ๋ณ„์ƒ๊ฐ์ด ์—†์—ˆ๋Š”๋ฐ ๋ง‰์ƒ ํ›ˆ๋ จ์†Œ์— ๋“ค์–ด๊ฐ€์„œ ๋ฉฐ์น  ์ง€๋‚ด๋ณด๋‹ˆ ๋ถ€๋ชจ๋‹˜๊ณผ ๊ณ ์–‘์ด ๋ฃจ๋ฃจ, ์นœ๊ตฌ๋“ค์ด ๋„ˆ๋ฌด๋‚˜๋„ ๋ณด๊ณ  ์‹ถ์—ˆ์–ด์š”โ€ฆ

๊ทธ๋ž˜๋„ ์ธํŽธ(์ธํ„ฐ๋„ท ํŽธ์ง€)์„ ํ†ตํ•ด ์—ฐ๋ฝ์„ ๋ฐ›์•˜๋˜๊ฒƒ๊ณผ ๊ฐ€๋” ํ•  ์ˆ˜ ์žˆ์—ˆ๋˜ ํ†ตํ™”๊ฐ€ ๋ฒ„ํŒ€๋ชฉ์ด ๋งŽ์ด ๋˜์—ˆ๋‹ค๊ณ  ์ƒ๊ฐ์ด ๋˜๋„ค์š” ใ…‹ใ…‹โ€ฆ

1๋‹ฌ ์ •๋„ ๊ฐ™์ด ์ง€๋‚ด๊ฒŒ ๋˜์—ˆ๋˜ ๋ถ„๋“ค ์ค‘์—์„œ๋Š” ๋ฐฐ๋ฏผ, ํ•˜์ดํผ ์ปค๋„ฅํŠธ, ๊ฐ•๋‚จ ์–ธ๋‹ˆ ๋“ฑโ€ฆ ์—ฌ๋Ÿฌ IT ํšŒ์‚ฌ์— ์žฌ์ง ์ค‘์ธ ๋ถ„๋“ค์ด ๊ณ„์…จ๊ณ  ๊ทธ ๋•๋ถ„์— ํ›ˆ๋ จ์†Œ ๊ธฐ๊ฐ„ ๋™์•ˆ ์—ฌ๋Ÿฌ ๋ง›์ง‘๋„ ์•Œ๊ฒŒ ๋˜๊ณ โ€ฆ ๊ธฐ์ˆ  ์Šคํƒ์— ๋Œ€ํ•ด ์žฌ๋ฏธ์žˆ๊ฒŒ ์–˜๊ธฐํ–ˆ๋˜ ๊ธฐ์–ต์ด ์ƒ๊ฐ๋‚˜๋„ค์š”.

๊ทธ ๋ฐ–์—๋„ ํ›ˆ๋ จ์†Œ์— ์˜ค๊ธฐ ์ „์— ๊ฐ€์ง€๊ณ  ์žˆ๋˜ ์ €์˜ ์ง„๋กœ ๋ฐ ์—ฌ๋Ÿฌ ๊ณ ๋ฏผ์„ ์šฉ๊ธฐ๋‚ด์–ด ํ„ธ์–ด๋†“์„ ์ˆ˜ ์žˆ๋Š” ์ž๋ฆฌ๊ฐ€ ์žˆ์—ˆ๊ณ , ๋‹ค๋“ค ์ข‹์€ ๋ถ„๋“ค์ด์…”์„œ ์—ฌ๋Ÿฌ ๋งŽ์€ ์กฐ์–ธ์„ ๋ฐ›์„ ์ˆ˜ ์žˆ๋Š” ๊ธฐํšŒ๋„ ์žˆ์—ˆ๋„ค์š”. ์ •๋ง ๊ฐ์‚ฌํ–ˆ์Šต๋‹ˆ๋‹ค..ใ… ใ… 

Vercel์„ ๋„์ž…ํ•˜์—ฌ ์‚ฌ๋‚ด ๋ฐฐํฌ ํ”„๋กœ์„ธ์Šค ๊ฐœ์„ 

๊ธฐ์กด ์‚ฌ๋‚ด์—์„œ๋Š” AWS EC2์™€ S3 ๊ทธ๋ฆฌ๊ณ  Elastic Beanstalk์„ ์‚ฌ์šฉํ•˜์—ฌ ์„œ๋น„์Šค๋ฅผ ๋ฐฐํฌ ๋ฐ ๊ด€๋ฆฌ๋ฅผ ํ–ˆ์—ˆ๋Š”๋ฐ ์ด ๋ถ€๋ถ„์—์„œ ๋งค๋ฒˆ ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑํ•˜๊ฑฐ๋‚˜ ๋‹จ์ˆœ html ํŒŒ์ผ์„ ์„œ๋น™ํ•˜๋Š” ๋ถ€๋ถ„์—์„œ ๋งŽ์€ ํ”„๋กœ์ ํŠธ์˜ ๊ด€๋ฆฌ ๋ฐ ๋น„์šฉ์ ์ธ ์ธก๋ฉด์—์„œ ์ฝ”์ŠคํŠธ๊ฐ€ ์ปธ์—ˆ๊ธฐ์— Vercel(now.sh)๋ฅผ ๋„์ž…ํ•˜์—ฌ ์ด ๋ถ€๋ถ„์„ ํ•ด๊ฒฐํ–ˆ์–ด์š”.

Vercel์— ๋Œ€ํ•œ ๋„์ž… ํ›„๊ธฐ๋Š” ๊ธฐํšŒ๊ฐ€ ๋œ๋‹ค๋ฉด ๋‹ค์Œ์— ์ ์–ด๋ณผ๊ฒŒ์š”!

๋„์ž… ํ›„ ๊ฐ„๋‹จ ๋Š๋‚€ ์  : Vercel ์งฑ์งฑ ์ข‹์•„์š”.

RxJS. ์ •ํ™•ํžˆ๋Š” ๋ฆฌ์•กํ‹ฐ๋ธŒ ํ”„๋กœ๊ทธ๋ž˜๋ฐ๊ณผ ์‚ฌ๋ž‘์— ๋น ์กŒ์–ด์š”.

Redux๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์‚ฌ๋‚ด ์„œ๋น„์Šค๋ฅผ ๋งŒ๋“ค๋‹ค๊ฐ€ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ์—์„œ redux-thunk์˜ ๊ตฌ์กฐ ํ•œ๊ณ„(?)๋ฅผ ๋Š๋ผ๊ณ  Redux-saga์™€ Redux-Observable ์ด ๋‘˜์˜ ํ›„๋ณด๋ฅผ ๋†“๊ณ  ๊ณ ๋ฏผ์„ ํ–ˆ์—ˆ๋Š”๋ฐ ๋ญ๋ž„๊นŒ saga๋Š” generator ๋ฐฉ์‹์ด ์ •๋ง ์ข€โ€ฆ ์ €์—๊ฒ ์ข‹๊ฒŒ ์™€๋‹ฟ์ง€ ์•Š์•˜์–ด์š”. ๊ทธ๋ž˜์„œ Redux-Observable์„ ์‚ฌ์šฉํ•˜๊ธฐ๋กœ ํ–ˆ์Šต๋‹ˆ๋‹ค.

๋ญ?.. Netflix์—์„œ Redux Observable์„ ์“ด๋‹ค๊ณ ?! RxJS? ์˜คโ€ฆ. ๊ถ๊ธˆํ•œ๋ฐ? ํ•ด๋ณผ๊นŒ..
> ๋‹˜์•„ ๊ทธ ๊ฐ•์„ ๊ฑด๋„ˆ์ง€ ๋งˆ์‹œ์˜คโ€ฆ ์•—โ€ฆ Rx ๋Šช์— ๋น ์กŒ๋‹คโ€ฆ ์œผ์•…

๋‹ค๋งŒ Redux Observable์—๋Š” ํ•œ ๊ฐ€์ง€ ํฐ ๋ฌธ์ œ์ ์ด ์žˆ์—ˆ๋Š”๋ฐ, ๋ฐ”๋กœ ๋ฆฌ์•กํ‹ฐ๋ธŒ ํ”„๋กœ๊ทธ๋ž˜๋ฐ(Reactive Programing)๋ฐฉ์‹์„ ์ดํ•ดํ–ˆ์–ด์•ผ ํ–ˆ์Šต๋‹ˆ๋‹ค.

์™œ ๊ทธ๋žฌ์„๊นŒ์š”โ€ฆ ์‚ฝ์„ ๋“ค๊ณ  ํŒŒ๋ฉด ํŒ”์ˆ˜๋ก ์ดํ•ดํ•ด์•ผ ํ•  ์ •๋ณด๋“ค์€ ์ˆ˜์—†์ด ๋Š˜์–ด๋‚˜๊ณ  ์•ฝ๊ฐ„์˜ ํ›„ํšŒ๊ฐ€ ์กฐ๊ธˆ์”ฉ ์˜ค๋”๊ตฐ์š”.

ํ•˜์ง€๋งŒ ๋ญ๋ž„๊นŒโ€ฆ ์š•์‹ฌ ๋•Œ๋ฌธ์— ํฌ๊ธฐํ•˜๊ณ  ์‹ถ์ง€๊ฐ€ ์•Š์•˜์–ด์š”. ๋ณ€ํƒœ๊ฐ™์€ ์ €์˜ ์„ฑ๊ฒฉ ๋•Œ๋ฌธ์ธ์ง€.. ๋‚ด๊ฐ€ ์ด๊ฑด ๊ผญ ์ดํ•ดํ•ด์„œ ์ œ๋Œ€๋กœ ์จ๋จน๊ณ  ๋ง ํ…Œ๋‹คโ€ฆ. ๊ทธ๋Ÿฐ..? ๋Š๋‚Œ์ด ์ปธ๋˜ ๊ฒƒ ๊ฐ™๋„ค์š”.

๊ทธ๋ž˜์„œ RxJS์ฑ…๋„ ์‚ฌ๋ณด๊ณ โ€ฆ ์ „ํ˜€ ์นœํ•˜์ง€๋„ ์•Š์•˜๋˜ Angular, RxJava, RxSwift์ฝ”๋“œ๋„ ๋ณด๋ฉด์„œ ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค์€ ์˜คํผ๋ ˆ์ดํ„ฐ๋ฅผ ์–ด๋–ค ์ƒํ™ฉ์—์„œ ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ•˜๋Š”์ง€ ๋“ฑโ€ฆ ์ •๋ง ๋งŽ์ด ์ฐพ์•„๋ณด์•˜๋˜ ๊ฒƒ ๊ฐ™์•„์š”.

์ด๋ ‡๊ฒŒ ํ•˜๋‹ค ๋ณด๋‹ˆ ์ผ์ •๋„ ๋ช‡ ๋ฒˆ ๋ฐ€๋ฆฌ๊ณ ..(ใ… ใ… ) ์•ผ๊ทผ๋„ ๋งŽ์ด ํ•˜๊ฒŒ ๋˜์—ˆ์ง€๋งŒ ์ด๋Ÿฐ ๊ฒฝํ—˜๋“ค๋กœ ํฌ์ŠคํŠธ๋ชจํ…œ์„ ์ž‘์„ฑํ•ด๋ณผ ์ˆ˜ ์žˆ๋Š” ๊ธฐํšŒ๋„ ์ƒ๊ฒผ์œผ๋ฉฐ, ์กฐ๊ธˆ์”ฉ ์ดํ•ดํ•˜๊ฒŒ ๋˜๋‹ค ๋ณด๋‹ˆ ์ œ ์ž์‹ ์—๊ฒŒ ์•ฝ๊ฐ„ ์Šน๋ฆฌํ•œโ€ฆ ๊ธฐ๋ถ„์ด์–ด์„œ ์กฐ๊ธˆ์€ ๋ฟŒ๋“ฏํ–ˆ์—ˆ๋„ค์š”.

React ๊ณต์‹ ๋ฌธ์„œ ๋‹ค์‹œ ์ฝ์–ด๋ณด๊ธฐ

โ€œ๋‚˜โ€ฆ React.js๋Š” ์“ฐ๋Š”๋ฐ ์ž˜ ์•Œ๊ณ  ์“ฐ๋Š” ๊ฑธ๊นŒ?โ€ ๋ฌธ๋“ ๊ทธ๋Ÿฐ ์ƒ๊ฐ์ด ๋“ค๋”๊ตฐ์š”.

3๋…„ ์ •๋„ ๋ฆฌ์•กํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉฐ ์ด์ œ ์–ด๋Š ์ •๋„ ํ”„๋กœ์ ํŠธ๋ฅผ ๋งŒ๋“ค ๋•Œ โ€œ์ด๊ฑด ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ์ข‹๋”๋ผ.โ€๋ผ๋˜ ์ง€ ๊ตฌ์กฐ๋ฅผ ์ข€ ๋” ์ž˜ ์žก์„ ์ˆ˜ ์žˆ๊ฒŒ๋Š” ๋˜์—ˆ์ง€๋งŒ ์ •์ž‘ ์ด๊ฒŒ ์™œ ์ค‘์š”ํ•˜๊ณ  ์ด๋ ‡๊ฒŒ ๋™์ž‘์ด ๋˜๋Š”์ง€ ์ž˜ ์•Œ์ง€๋Š” ๋ชปํ–ˆ๋˜ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๊ทธ๋ž˜์„œ ์ด๋ฒˆ ๊ธฐํšŒ์— ๊ณต์‹๋ฌธ์„œ๋ฅผ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋‹ค์‹œ ์ฝ์–ด๋ณด๋ฉฐ ์ถ”๊ฐ€๋กœ facebook ๊นƒํ—™์— ์˜ฌ๋ผ์™€ ์žˆ๋Š” react์˜ ์ฝ”์–ด ๋ถ€๋ถ„ ์ฝ”๋“œ๋„ ํ•จ๊ป˜ ์ฐพ์•„๋ณด๋ฉฐ ๊ณต๋ถ€๋ฅผ ํ•ด๋ณด์•˜๋„ค์š”.

๊ทธ ์™ธ

๊ทธ ์™ธ์—๋„ ๊ธฐ์กด์— ์‚ฌ์šฉํ•˜๋˜ Sketch ๋””์ž์ธ ํˆด์—์„œ Figma๋กœ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ์ž‘์—…๋„ ์ง„ํ–‰ํ–ˆ์—ˆ๊ณ , uwu-ui๋ผ๋Š” UI ์ปดํฌ๋„ŒํŠธ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๊ธฐ ์‹œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค. (Figma ๋„ˆ๋ฌด ์ข‹์•„์š”.. ์• ์šฉํ•˜๋Š”์ค‘..)

๊ทธ๋ฆฌ๊ณ  ์Œโ€ฆ ์–ผ๋งˆ ์ „์— UI/UX ๊ทธ๋ฆฌ๊ณ  Design System์— ๊ด€์‹ฌ์ด ์ƒ๊ฒจ์„œ e-book์„ ๊ตฌ๋งคํ•ด์„œ ์ฝ๊ธฐ ์‹œ์ž‘ํ–ˆ์–ด์š”.

๋งˆ์น˜๋ฉฐ

๋น„๋ก 2020๋…„์—๋Š” ๋ฐ”์ด๋Ÿฌ์Šค ๋•Œ๋ฌธ์— ์ƒํ™œํ•˜๊ธฐ ๋งŽ์ด ํž˜๋“ค์—ˆ์ง€๋งŒ 2021๋…„์—๋Š” ๋ถ€๋”” ์ข€ ๋” ๋‚˜์€ ์ƒํ™œ์„ ํ•  ์ˆ˜ ์žˆ๊ธธ ๋นŒ๋ฉฐ ๋ถ€์กฑํ•˜๋‹ค๊ณ  ๋Š๊ปด์ง€๋Š” ๊ฒƒ๋“ค์„ ์ข€ ๋” ๊ฐ€๊พธ์–ด๊ฐ€๊ณ  ์‹ถ์–ด์š”.

2021๋…„์—๋Š” ์šฐ๋ฆฌ ๋ชจ๋‘๊ฐ€ ์ข€ ๋” ํ–‰๋ณตํ•˜๊ณ  ์ข‹์€ ์ผ๋“ค์ด ๊ฐ€๋“ํ•˜๊ธฐ๋ฅผ. Adieu 2020.

๋™๋ฌผ์˜ ์ˆฒ์—์„œ 2020๋…„ ๋งˆ์ง€๋ง‰ ์นด์šดํŠธ ๋‹ค์šด์„ ํ•˜๋ฉฐ.

--

--

Jusung Hwang

Web Frontend Developer. ๋””์ž์ธ๊ณผ ๊ฐœ๋ฐœ์˜ ์˜์—ญ์„ ์กฐํ™”๋กญ๊ฒŒ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ๋Š” ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์˜ ๋งค๋ ฅ์— ๋น ์ง„ ์‚ฌ๋žŒ, ํ™ฉ์ฃผ์„ฑ์ž…๋‹ˆ๋‹ค :)