๐Ÿ–‹ ํ˜„์žฌ ์ƒํƒœ, ํ˜„์žฌ ์œ„์น˜ ํŒŒ์•…ํ•˜๊ธฐ

[meษช]ยท2022๋…„ 1์›” 2์ผ
0

0-2. Run-up

๋ชฉ๋ก ๋ณด๊ธฐ
2/9
post-thumbnail

๐Ÿง ๋ฐฐ์›Œ์•ผ ํ•˜๋Š” ์–ธ์–ด ๋ณ€์ฒœ์‚ฌ, ๋ฐฐ๊ฒฝ ์ง€์‹

์ƒˆํ•ด๋ฅผ ๋งž์•„ ์ง€๊ธˆ ๋‚ด๊ฐ€ ํ•˜๊ณ  ์žˆ๋Š” ๊ณต๋ถ€๊ฐ€ ์–ด๋Š ๋‹จ๊ณ„์ธ์ง€, ์•ž์œผ๋กœ ์–ด๋””๋กœ ๋ฐฉํ–ฅ์„ ์žก๊ณ  ๋” ๊ณต๋ถ€ํ•ด์•ผ ํ• ์ง€ ์•Œ์•„๋ณด๊ณ  ์‹ถ์–ด์„œ roadmap์„ ๋‹ค์‹œ ์ฐพ์•„๋ดค๋‹ค.

Trend

Hot Languages, Frameworks

Tech Tree

Books

  • 2020๋…„
    ใ€Œ ๋น„์ „๊ณต์ž๋ฅผ ์œ„ํ•œ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋Š” IT ์ง€์‹ - IT์‹œ๋Œ€์˜ ํ•„์ˆ˜ ๊ต์–‘์„œ ใ€ ์ตœ์›์˜ ่‘—
  • 2021๋…„
    ใ€Œ ์˜ค๋Š˜๋ถ€ํ„ฐ ๊ฐœ๋ฐœ์žใ€ ๊น€๋ณ‘์šฑ ่‘—

๐Ÿง ํ•ด์•ผ ํ•˜๋Š” ๊ณต๋ถ€ ํ›„๋ณด

So far...

  • HTML
  • CSS
  • JavaScript
  • React

โž•

What's Next?


๐Ÿง ๋‚ด๊ฐ€ ํ•˜๊ณ  ์‹ถ์€ ๊ฒƒ

๋‚ด๊ฐ€ ํ•˜๊ณ  ์‹ถ์€ ๊ฐœ๋ฐœ์€ ์„ธ ๊ฐ€์ง€์ด๋‹ค.

  1. back office์—์„œ ์‚ฌ์šฉํ•˜๋Š” web app
    • user๋Š” ์ œํ’ˆ ํ•˜๋‚˜๋ฅผ ์‚ฌ์šฉํ• ์ง€๋ผ๋„ ๊ทธ ์ œํ’ˆ ํ•˜๋‚˜๋ฅผ ์šด์˜ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” back office ๋‹จ์— ์—ฌ๋Ÿฌ web app์ด ํ•„์š”ํ•  ํ…๋ฐ, ๋‚œ ์ด๋ ‡๊ฒŒ ๋‚ด๋ถ€ ๊ตฌ์„ฑ์›์ด ์‚ฌ์šฉํ•˜๋Š” web์„ ๋งŒ๋“ค๊ณ  ์‹ถ๋‹ค.
      • client์ธ ๋‚ด๋ถ€ ๊ตฌ์„ฑ์›์˜ needs๋ฅผ ์ž˜ ํŒŒ์•…ํ•ด ํŽธ๋ฆฌํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์ œํ’ˆ์„ ๋งŒ๋“ค์–ด์•ผ ํ•œ๋‹ค.
      • ํƒ€ ์ œํ’ˆ๊ณผ ์ถฉ๋Œ์ด ๋ฐœ์ƒํ•˜์ง€ ์•Š๋„๋ก ์„ค๊ณ„ํ•ด์•ผ ํ•œ๋‹ค.
      • data๋ฅผ ๋‹ค๋ฃจ๋Š” ๋ฐ์— ์žˆ์–ด์„œ๋Š” ์•ˆ์ •์„ฑ์„ ํ™•๋ณดํ•ด์•ผ ํ•œ๋‹ค.
      • ๋ณด์•ˆ issue๊ฐ€ ์—†๋„๋ก ๊ฐœ๋ฐœํ•ด์•ผ ํ•œ๋‹ค.
  2. web ์ ‘๊ทผ์„ฑ ์ธ์ฆ ๋ฐ›์€ web app
    • ์‹œ๊ฐ์— ์˜์กดํ•˜์ง€ ์•Š๊ณ ๋„ ์šฐ๋ฆฌ ์ œํ’ˆ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ web์„ ๋งŒ๋“ค๊ณ  ์‹ถ๋‹ค.
  3. interactive web
    • ์šฐ๋ฆฌ๊ฐ€ ํ•˜๊ณ  ๋ง์„ ๊ทน์ ์œผ๋กœ ์ „๋‹ฌํ•˜๊ณ  ์‹ถ๋‹ค.
    • ์šฐ๋ฆฌ์˜ message์— user๋ฅผ ๋Œ์–ด๋“ค์ด๊ณ  ์‹ถ๋‹ค.

1๋ฒˆ์€ ๋‚ด๊ฐ€ ์„ ํƒํ•  ์ˆ˜ ์—†๋‹ค. B2C์šฉ web site๋ฅผ ๋งŒ๋“ค๊ฒŒ ๋ ์ง€, B2B์šฉ web site๋ฅผ ๋งŒ๋“ค๊ฒŒ ๋ ์ง€, ์ •๋ง๋กœ back office์—์„œ ์‚ฌ์šฉํ•˜๋Š” web site๋ฅผ ๋งŒ๋“ค๊ฒŒ ๋ ์ง€ ๋‚ด๊ฐ€ ์„ ํƒํ•  ์ˆ˜ ์—†์„ ํ™•๋ฅ ์ด ๋†’๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๋ˆ„๊ตฌ๋ฅผ ๋Œ€์ƒ์œผ๋กœ ํ•˜๋Š” web site์ด๊ฑด ์ง€๊ธˆ๊นŒ์ง€ ๋ฐฐ์šด ๊ฒƒ์— ๋”ํ•ด์„œ ์˜์—ญ์„ ํ™•์žฅํ•˜๊ณ  ์—ญ๋Ÿ‰์„ ๋†’์—ฌ์•ผ ํ•œ๋‹ค.

2๋ฒˆ์€... ๋”๋”์šฑ ๋‚ด๊ฐ€ ์„ ํƒํ•  ์ˆ˜ ์—†์„ ํ™•๋ฅ ์ด ๋†’๋‹ค. ๋‚˜ ํ˜ผ์ž ํ•˜๊ณ  ์‹ถ๋‹ค๊ณ  ํ•ด์„œ ํ•˜๋ฉด ๋˜๋Š” ๋ถ„์•ผ๊ฐ€ ์•„๋‹Œ ๊ฒƒ ๊ฐ™๋‹ค. ๋งŒ์•ฝ ๋‚ด๊ฐ€ ์–ด๋–ค web site๋ฅผ ๊ฐœ๋ฐœํ•˜๊ฒŒ ๋˜์—ˆ๋Š”๋ฐ ๊ฐ์‚ฌํ•˜๊ฒŒ๋„ ๋‚ด๋ถ€ ๊ฒฐ์ •์— ๋”ฐ๋ผ web ์ ‘๊ทผ์„ฑ guide๋ฅผ ์ค€์ˆ˜ํ•˜๊ธฐ๋กœ ๊ฒฐ์ •ํ–ˆ๋‹ค๋ฉด ๋™๋ฃŒ๋“ค๊ณผ ํ•จ๊ป˜ ๋งŒ๋“ค์–ด๊ฐˆ ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™๋‹ค. ์ด๋ฅผ ๋Œ€๋น„ํ•ด์„œ ๊ด€์‹ฌ์˜ ๋ˆ์„ ๋†“์ง€ ์•Š์•„์•ผ์ง€.

3๋ฒˆ์€ ๋‚ด๊ฐ€ BE์™€ ์นœํ•œ(?) ์šด์˜ ์ถœ์‹ ์ž„์—๋„ FE๋ฅผ ์„ ํƒํ•œ ๊ณ„๊ธฐ ์ค‘ ํ•˜๋‚˜์ธ๋ฐ, ๋ง‰์ƒ tech tree๋ฅผ ๋ณด๋ฉด ํ•ด๋‹น ๋‚ด์šฉ์„ ์ฐพ๊ธฐ๊ฐ€ ์–ด๋ ต๋‹ค. WebGL, Three.js, Canvas ์ด๋Ÿฐ ๊ฒŒ ํ•˜๋‚˜๋„ ์ ํ˜€์žˆ์ง€ ์•Š์•„์„œ ์ด์ชฝ์œผ๋กœ career๋ฅผ ์Œ“๋Š” ์‚ฌ๋žŒ์ด ๊ทธ๋ ‡๊ฒŒ ์ ์€ ๊ฑด์ง€, ์•„๋‹ˆ๋ฉด vision์ด ์—†์–ด์„œ ์ถ”์ฒœ์„ ํ•˜์ง€ ์•Š๋Š” ๊ฑด์ง€ ๊ถ๊ธˆํ•˜๋‹ค. ํ•˜์ง€๋งŒ ์žฅ๋ž˜์„ฑ๊ณผ ์ƒ๊ด€์—†์ด ๋‚œ ์ด๋Ÿฐ website๋ฅผ ๋งŒ๋“ค๊ณ  ์‹ถ๋‹ค. ๊ฐ€์น˜ ์žˆ๋Š” brand๋ฅผ ํ™”๋ฉด์— ์ž˜ ๊ตฌํ˜„ํ•ด์„œ ๋งŽ์€ ์‚ฌ๋žŒ๋“ค์—๊ฒŒ ์ „๋‹ฌํ•˜๋Š” ์ผ์„ ํ•˜๊ณ  ์‹ถ๋‹ค.

ํ•˜์ง€๋งŒ ํ˜„์‹ค์€ ์•„์ง ๊ฐœ๋ฐœ์ž ์ง€๋ง์ƒ...!
์ผ๋‹จ ๋‚œ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๋Š” ๊ฒŒ ๋จผ์ €๋‹ˆ๊นŒ HTML, CSS, JS, React ๊ณ„์† ํ•™์Šตํ•˜๊ณ  ํ•ด๋ณด๊ณ  ์‹ถ์—ˆ๋˜ Three, ๊ผญ ํ•ด์•ผ ํ•˜๋Š” TS ๊ทธ๋ฆฌ๊ณ  ์ƒํƒœ ๊ด€๋ฆฌ, Vue ์ˆœ์„œ๋กœ ๊ณต๋ถ€ํ•ด ๋ด์•ผ๊ฒ ๋‹ค.

profile
๋Š๋ ค๋„ ํ•  ๊ฑฐ์•ผ.......

0๊ฐœ์˜ ๋Œ“๊ธ€