ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Step by step Guide ... 2019
    ๊ธฐํƒ€ 2019. 4. 14. 21:48

    Step by step Guide to becoming a Web developer in 2019

     

    ์•ˆ๋…•ํ•˜์„ธ์š”. 
    Jerry์˜ ๊ณต๋ถ€๋ฐฉ์—์„œ Jerry๋ฅผ ๋งก๊ณ  ์žˆ๋Š” Jerry์ž…๋‹ˆ๋‹ค. (์‘?)

    ์—ฌ๋Ÿฌ ์›น๊ฐœ๋ฐœ ๊ด€๋ จํ•œ ๋ธ”๋กœ๊ทธ์™€ ์œ ํŠœ๋ธŒ๋ฅผ ์‹ฌ์‹ฌ์ฐฎ๊ฒŒ ๋ณด๋˜ ์ค‘, ์˜ฌ ํ•ด ๋ฐฐ์›Œ์•ผํ•  ๊ฒƒ๋“ค์„ ๋‹จ๊ณ„๋ณ„๋กœ ๋‚˜ํƒ€๋‚ธ ์ข‹์€ ์ปจํ…์ธ ๊ฐ€ ์žˆ์–ด ๊ณต์œ ํ•˜๊ณ  ์‹ถ์€ ๋งˆ์Œ์— ์‹œ๊ธฐ๊ฐ€ ์กฐ๊ธˆ ๋Šฆ์—ˆ์ง€๋งŒ ํฌ์ŠคํŒ…ํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

     

    ์‹œ๊ฐ„์ , ๊ธˆ์ „์  ์—ฌ์œ ๊ฐ€ ์žˆ๋‹ค๋ฉด ํ•˜๋Š˜์„ ๊ผญ ๋‚ ์•„๋ณด๊ณ  ์‹ถ๋‹ค. -(์—ฌ์œ ๊ฐ€ ํ•„์š”ํ•œ) jerry-

     

    ์ด ๋ฆฌ์ŠคํŠธ๋“ค์„ ์˜ฌ ํ•ด ์•ˆ์— All Clearํ•˜๊ธด ํž˜๋“ค๊ฒ ์ง€๋งŒ ์กฐ๊ธ‰ํ•œ ๋งˆ์Œ์„ ์ž ์‹œ ๋’ค๋กœ ํ•œ ์ฑ„ ํ•œ Step์”ฉ Step by step์œผ๋กœ ๋‚˜์•„๊ฐ€๋ฉฐ ํฌ์ŠคํŒ…์„ ๊ฐ™์ด ํ•œ๋‹ค๋ฉด ํ›—๋‚  ์ œ ์†Œ์ค‘ํ•œ ์ž์‚ฐ์ด ๋  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

     

    ๊ฐ์ƒ์€ ์ด๋”ฐ๊ฐ€ ๋‹ค์‹œ ํ•˜๊ธฐ๋กœ ํ•˜๊ณ  ์ด ํฌ์ŠคํŒ…์— ์ค‘์š”ํ•œ ๋ถ€๋ถ„์„ ์ฐจ์ง€ํ•˜๋Š” ๋ฆฌ์ŠคํŠธ๋ฅผ ํ•œ ๋ฒˆ ์ ์–ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

     

    • HTML/CSS

    • JavaScript

      - data types, functions, conditionals, loops, operators, DOM manipulation, events, JSON, fetch API

      - ES6+ (Arrow functions, promises, async/await, destructuring)

    • Git, npm, Yarn, webpack, parcel, gulp

    • ReactJS

    • Rest API, Redux, GraphQL, APOLLO

    • Node.js

      - express, koa, Adonis

    • postgresQL, mongoDB, Redis

    • firebase, aws

    • Next.js(react)

    • Devops.....

    • ......

    JavaScript๋Š” 2015๋…„์— ES6๊ฐ€ ๋‚˜์˜ค๋ฉด์„œ ๋งŽ์€ ๊ฒƒ์ด ๋ฐ”๋€Œ์—ˆ๊ณ , ๊ตฌ๊ธ€์—์„œ V8์—”์ง„์„ ๋งŒ๋“ฆ์œผ๋กœ ์ธํ•ด์„œ JS๋กœ ํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ๋“ค์ด ๋ฌด๊ถ๋ฌด์ง„ํ•˜๊ฒŒ ๋งŽ์•„์กŒ์Šต๋‹ˆ๋‹ค. ํ”„๋ก ํŠธ์—”๋“œ์—์„œ ์“ฐ์ด๋˜ JS, ๋„ˆ๋ฌด ์œ ์—ฐํ•ด์„œ ์š•๋จน๋˜ JS๊ฐ€ ๋ฐฑ์—”๋“œ์—์„œ๋„ ์“ฐ์ด๋Š” ๋ชจ์Šต๋“ค์ด ์šฐ๋ฆฌ๋ฅผ ๋” ์• ํƒ€๊ฒŒ ๋งŒ๋“ญ๋‹ˆ๋‹ค.

     

    ์™œ?

    ๋ฐฐ์›Œ์•ผ ํ•˜๋Š”๋ฐ ํ˜„์žฌ ES10๊นŒ์ง€ ๋‚˜์™”์„ ๋ฟ๋”๋Ÿฌ TypeScript, CoffeeScript ๋“ฑ JS์™€ ํ•จ๊ป˜ ๋ฐฐ์›Œ์•ผ ํ•  ๊ฒƒ๋“ค์ด ๊ณ„์† ๋Š˜์–ด๋‚ฉ๋‹ˆ๋‹ค. React๋ฅผ ์“ฐ๋ ค๊ณ  ํ•ด๋„ JS๋ฅผ ์•Œ์•„์•ผ ํ•˜๊ณ  Node.js๋„ JS๋ฌธ๋ฒ•์ด์ง€์š”. ๊ทธ๋Ÿฌ๋‹ค๋ณด๋‹ˆ ์ €๋Š” ์• ๊ฐ€ ํƒ‘๋‹ˆ๋‹ค. ํ•˜๋ฃจ ๋นจ๋ฆฌ React, Node.. ๋“ฑ ์ž˜ํ•˜๊ณ  ์‹ถ์€๋ฐ JS๋ฅผ ๋จผ์ € ํ•ด์•ผํ•˜๊ณ 

    (๋ฌผ๋ก  JS๋ฅผ ๋ชจ๋ฅด๊ณ  React, Node๋ฅผ ๋ชปํ•˜๋Š” ๊ฑด ์•„๋‹™๋‹ˆ๋‹ค. JS๋ฅผ ๋„˜๊ธฐ๊ณ  ๋ฐ”๋กœ ํ•ด๋„ ๋ฌด๊ด€ํ•ฉ๋‹ˆ๋‹ค. ์ง€๊ทนํžˆ JS๋ฅผ ๋จผ์ € ์ˆ™๋‹ฌํ•˜๊ณ  ์‹ถ์€ ๋งˆ์Œ์ด ํฐ ์ €์˜ ๊ฐœ์ธ์ ์ธ ์ƒ๊ฐ์ด ๋‹ด๊ฒจ์žˆ์Šต๋‹ˆ๋‹ค.) 

     

    ๊ทธ๋ž˜์„œ ์ด ๋ฆฌ์ŠคํŠธ์—” ์ถœ์ฒ˜์—์„œ ๋‚˜์˜จ ๋‚ด์šฉ์„ ์ „๋ถ€ ๋‹ด์ง„ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ์ „๋ถ€ ์ ์„๊นŒ ํ•˜๋‹ค๊ฐ€ ์˜ฌ ํ•ด๋Š” ์ปค๋…• ๋‚ด ๋…„์—๋„ ๋‹ค ํ•  ์ˆ˜ ์žˆ์„๊นŒ๋ผ๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ๊ณ  ๋‚ด ๋…„์—๋Š” ๋˜ ๋‹ค๋ฅธ ๊ธฐ์ˆ (ํ”„๋ ˆ์ž„์›Œํฌ, ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋“ฑ) ๋ฐ ์–ธ์–ด๋“ค๋กœ ๋ฆฌ์ŠคํŠธ๋“ค์˜ ์ˆœ์„œ๊ฐ€ ๋ฐ”๋€Œ๊ณ  ์—†์–ด์ง€๊ณ  ์ถ”๊ฐ€๋˜์ง€ ์•Š์„๊นŒ ํ•˜๋Š” ๋งˆ์Œ์— Devops ์ดํ›„๋ก  ์ ์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ์ •๋ง ์ƒ๊ฐ๋ณด๋‹ค ๋งŽ์•„์„œ ๋ฆฌ์ŠคํŠธ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ๋‚ด๋‚ด ์ž ์‹œ ์ ‘์–ด๋‘๊ธฐ๋กœ ํ•œ ์กฐ๊ธ‰ํ•จ์ด ๋กœ์ผ“์„ ํƒ€๊ณ  ๋งˆ์Œ๋ถ€ํ„ฐ ๋จธ๋ฆฌ๊นŒ์ง€ ํ•œ ํ์— ์˜์•„์กŒ๋„ค์š”.

     

    ํ•  ๊ฒŒ ๋งŽ์€ ๊ฒƒ๋„ ์žˆ์ง€๋งŒ, ๋ชจ๋ฅด๋Š”๊ฒŒ ๋งŽ๋‹ค๋Š” ๊ฒƒ์ด ์ œ ์ž์‹ ์ด ์ž‘์•„์ง€๋Š” ๋Š๋‚Œ์ด ๋“ค์–ด์„œ ๋‹ค์‹œ ๋งˆ์ธ๋“œ ์ปจํŠธ๋กค์„ ํ•˜๋ฉฐ ๋งˆ์Œ์„ ์ข€ ์ถ”์Šค๋ ค์•ผ๊ฒ ์Šต๋‹ˆ๋‹ค.

     

    ์œ„์˜ ๋‚ด์šฉ์€ ์•„๋ž˜ ์œ ํŠœ๋ธŒ์˜์ƒ์—์„œ ๋ฐœ์ทŒํ–ˆ์Šต๋‹ˆ๋‹ค. Devops ์ดํ›„๋กœ ์ œ๊ฐ€ ์ ์ง€ ์•Š์€ ๋‚ด์šฉ์ด ๊ถ๊ธˆํ•˜์‹œ๋ฉด ์ฒœ์ฒœํžˆ ์˜์ƒ์„ ๋ณด์…”๋„ ๋  ๊ฒƒ ๊ฐ™๊ณ (์•„, ์˜์–ด์—์š”. ์ €๋„ ๊ทธ๋ž˜์„œ ๋‚ด์šฉ์„ ๋“ฃ์ง„ ๋ชปํ–ˆ์Šต๋‹ˆ๋‹ค..ใ…‹) ์˜์ƒ๊ณผ ๋น„๊ตํ•˜์‹œ๋ฉด ์ œ๊ฐ€ ์ ์€ ๋ฆฌ์ŠคํŠธ์™€ ์•ฝ๊ฐ„ ์ƒ์ดํ•œ ๊ฒƒ์„ ์•„์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ด€์‹ฌ์‚ฌ ๋ฐ–์ธ ๋‚ด์šฉ์€ ์ œ๊ฐ€ ๋ฐฐ์ œํ–ˆ์Šต๋‹ˆ๋‹ค.

     

     

    ์ด ๊ธ€์„ ์ฝ๊ณ  ๊ณ„์‹  ๋ถ„๋“ค์€ 2019๋…„ ํ•œ ํ•ด๋™์•ˆ ์ด๋ฃจ์‹œ๊ณ ์ž ํ–ˆ๋˜ ๊ฒƒ๋“ค ๋ชจ๋‘ ์„ฑ์ทจํ•˜์‹œ๋Š” ํ•œ ํ•ด๊ฐ€ ๋˜์‹œ๊ธธ ๋ฐ”๋ผ๊ฒ ์Šต๋‹ˆ๋‹ค.

     

    ์ปจํ…์ธ  ์ถœ์ฒ˜ : https://www.youtube.com/watch?v=UnTQVlqmDQ0(web development in 2019 - a practical guide)

    '๊ธฐํƒ€' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

    Virtual DOM (feat.React) ์ฐธ๊ณ ์ž๋ฃŒ  (0) 2019.06.06

    ๋Œ“๊ธ€

Posted by Bejerry.