/the-road-to-learn-react-korean

๐Ÿ‡ฐ๐Ÿ‡ท ๋ฆฌ์•กํŠธ ๋„์›€๋‹ซ๊ธฐ - The the Road to learn React (2018) [Deprecated]

โ›”๏ธ Deprecated

์ตœ์‹  ๋ฆฌ์•กํŠธ Hooks ๋ฒ„์ „์œผ๋กœ ๊ฐœ์ •ํŒ <๋” ๋กœ๋“œ ํˆฌ ๋ฆฌ์•กํŠธ(2020)>๊ฐ€ ์ถœ๊ฐ„๋˜์–ด, ๋ณธ ๋ฆฌ์•กํŠธ ๋„์›€๋‹ซ๊ธฐ (2018) ์ €์žฅ์†Œ์™€ ์ „์ž์ฑ…์€ ๋” ์ด์ƒ ์—…๋ฐ์ดํŠธ ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋ณธ ์ฑ…์€ ๋ฆฌ์•กํŠธ ํ•จ์ˆ˜ ์ปดํฌ๋„ŒํŠธ์™€ Hooks ๊ฐœ๋…์ด ๋„์ž…๋˜๊ธฐ ์ด์ „ ๋ฒ„์ „(2018)์ž…๋‹ˆ๋‹ค. ๋‹ค์Œ ๋งํฌ์—์„œ ์ตœ์‹  ๊ฐœ์ •ํŒ์„ ํ™•์ธํ•˜์„ธ์š”.


[ํŠœํ† ๋ฆฌ์–ผ] ๋ฆฌ์•กํŠธ ๋„์›€๋‹ซ๊ธฐ

Slack

๋ฆฌ์•กํŠธ ๋„์›€๋‹ซ๊ธฐ(์›์ œ: The Road to learn React) ํ•œ๊ตญ์–ด ๊ณต์‹ ๊นƒํ—ˆ๋ธŒ ๋ฆฌํผ์ง€ํ† ๋ฆฌ์ž…๋‹ˆ๋‹ค.

๋ชฉ์ฐจ

  1. ์‹œ์ž‘ํ•˜๋Š” ๊ธ€

  2. ๋ฆฌ์•กํŠธ ๊ธฐ์ดˆ ๋‹ค์ง€๊ธฐ

    1. ๋ฆฌ์•กํŠธ๋ฅผ ๋ฐฐ์›Œ์•ผ ํ•˜๋Š” ์ด์œ 
    2. ์ค€๋น„ ์‚ฌํ•ญ
      1. ์ฝ”๋“œ์—๋””ํ„ฐ ยท ํ„ฐ๋ฏธ๋„
      2. node ยท npm
    3. ๋…ธ๋“œ ํŒจํ‚ค์ง€ ์„ค์น˜ ยท ๊ด€๋ฆฌ
    4. ๋ฆฌ์•กํŠธ ์„ค์น˜
      1. CDN
      2. npm
    5. create-react-app
    6. JSX ๊ธฐ์ดˆ
    7. ES6 const ยท let
    8. ReactDOM
    9. Hot Module Replacement
    10. JSX ๋‚ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐ์ฒด ์ฒ˜๋ฆฌ
    11. ES6 ํ™”์‚ดํ‘œ ํ•จ์ˆ˜
    12. ES6 ํด๋ž˜์Šค
  3. ๋ฆฌ์•กํŠธ ๊ธฐ์ดˆ ํ–ฅ์ƒํ•˜๊ธฐ

    1. ์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€ ์ƒํƒœ ๊ด€๋ฆฌ
    2. ES6 ๊ฐ์ฒด ์ดˆ๊ธฐ์ž
    3. ๋‹จ๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ํ๋ฆ„
    4. ํด๋ž˜์Šค ๋ฉ”์„œ๋“œ ๋ฐ”์ธ๋”ฉ
    5. ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ
    6. ํผ๊ณผ ์ด๋ฒคํŠธ
    7. ES6 ๊ตฌ์กฐํ•ด์ฒด
    8. ์ œ์–ด๋˜๋Š” ์ปดํฌ๋„ŒํŠธ
    9. ์ปดํฌ๋„ŒํŠธ ๋ถ„๋ฆฌ
    10. ๊ตฌ์„ฑ ๊ฐ€๋Šฅํ•œ ์ปดํฌ๋„ŒํŠธ
    11. ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ปดํฌ๋„ŒํŠธ
    12. ์ปดํฌ๋„ŒํŠธ ์„ ์–ธ
    13. ์ปดํฌ๋„ŒํŠธ ์Šคํƒ€์ผ๋ง
  4. ์™ธ๋ถ€ API ์‚ฌ์šฉํ•˜๊ธฐ

    1. ์ƒ๋ช…์ฃผ๊ธฐ ๋ฉ”์„œ๋“œ
    2. ๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ
    3. ES6 ์ „๊ฐœ ์—ฐ์‚ฐ์ž
    4. ์กฐ๊ฑด๋ถ€ ๋ Œ๋”๋ง
    5. Search ์ปดํฌ๋„ŒํŠธ ํด๋ผ์ด์–ธํŠธ ยท ์„œ๋ฒ„ ์ฒ˜๋ฆฌ
    6. ํŽ˜์ด์ง€ ๋งค๊น€ ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ
    7. ํด๋ผ์ด์–ธํŠธ ์บ์‹œ
    8. ์˜ค๋ฅ˜ ์ฒ˜๋ฆฌ
    9. Axios ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์‚ฌ์šฉ
  5. ์ปดํฌ๋„ŒํŠธ ๋ชจ๋“ˆ ๊ตฌ์„ฑ ยท ํ…Œ์ŠคํŠธ

    1. ES6 Import ยท Export
    2. ES6 ๋ชจ๋“ˆ ๊ตฌ์„ฑ
    3. Jest ์Šค๋ƒ…์ƒท ํ…Œ์ŠคํŠธ
    4. Enzyme ๋‹จ์œ„ ํ…Œ์ŠคํŠธ
    5. PropTypes ์ปดํฌ๋„ŒํŠธ ์ธํ„ฐํŽ˜์ด์Šค
  6. ์‹ฌํ™”: ๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ

    1. Ref ยท DOM
    2. Loading ์ปดํฌ๋„ŒํŠธ
    3. ๊ณ ์ฐจ ์ปดํฌ๋„ŒํŠธ
    4. ์‹ฌํ™”: ์ •๋ ฌ
  7. ์‹ฌํ™”: ๋ฆฌ์•กํŠธ ์ƒํƒœ ๊ด€๋ฆฌ

    1. ์ƒํƒœ ๋Œ์–ด์˜ฌ๋ฆฌ๊ธฐ
    2. ์‹ฌํ™”: setState()
    3. ์ƒํƒœ ์ œ์–ด
  8. ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋ฐฐํฌํ•˜๊ธฐ

    1. Eject
    2. Heroku ๋ฐฐํฌ
  9. ๋งˆ์น˜๋Š” ๊ธ€


์ง€์€์ด ยท ์˜ฎ๊ธด์ด

์ง€์€์ด

๋กœ๋นˆ ์œ„์›Œํฌ (Robin Wieruch) @rwieruch

์˜ฎ๊ธด์ด

์ด์ˆ˜์ง„ (Sujin Lee) @sujinleeme

๋„์›€์ฃผ์‹  ๋ถ„


์ฐธ์—ฌ ๋ฐฉ๋ฒ•

ํ›„๊ธฐ์“ฐ๊ธฐ

์†Œ์‹๋ฐ›๊ธฐ

๋„์›€๋ฐ›๊ธฐ

  • ํ•™์Šต ๋„์ค‘ ๋„์›€์ด ํ•„์š”ํ•˜๊ฑฐ๋‚˜, ๋‹ค๋ฅธ ์‚ฌ๋žŒ์„ ๋„์™€์ฃผ๊ณ  ์‹ถ๋‹ค๋ฉด "The Road to learn React" ๋…์ž ์ปค๋ฎค๋‹ˆํ‹ฐ ์Šฌ๋ž™์— ๋“ค์–ด์˜ค์„ธ์š”.
  • ํ•œ๊ตญ์–ด ์‚ฌ์šฉ์ž๋ฅผ ์œ„ํ•œ ์ฑ„๋„์ด ์—ด๋ ค์žˆ์Šต๋‹ˆ๋‹ค. #road-to-react-korean ์ฑ„๋„์—์„œ ํ•จ๊ป˜ ๊ณต๋ถ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํ›„์›ํ•˜๊ธฐ

  • ์ด ์ฑ…์˜ ํ”„๋กœ์ ํŠธ ํ›„์›์ž๊ฐ€ ๋˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ›„์› ๋ฐฉ๋ฒ•์—์„œ ์ž์„ธํ•œ ๋‚ด์šฉ์„ ํ™•์ธํ•˜์„ธ์š”.

๊ธฐ์—ฌํ•˜๊ธฐ

  • ๋ณธ๋ฌธ ๋‚ด ์˜คํƒˆ์ž๋ฅผ ์ˆ˜์ •ํ•˜๊ฑฐ๋‚˜, ์ถ”๊ฐ€ ์„ค๋ช…์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ ํ’€ ๋ฆฌํ€˜์ŠคํŠธ(Pull Request)๋ฅผ ๋ณด๋‚ด์ฃผ์„ธ์š”.
  • ์‹ค์Šต ๋„์ค‘ ๋ฌธ์ œ๊ฐ€ ์ƒ๊ธฐ๋ฉด ์ด์Šˆ(Issues)์— ๋“ฑ๋กํ•ด์ฃผ์„ธ์š”. ์ด์Šˆ๋ฅผ ๊ฒŒ์‹œํ•  ๋•Œ, ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•œ ๋ถ€๋ถ„์˜ ์˜ค๋ฅ˜ ๋กœ๊ทธ ๋ฉ”์‹œ์ง€, ์Šคํฌ๋ฆฐ ์ƒท, ์ฑ… ํŽ˜์ด์ง€, ๋…ธ๋“œ ๋ฒ„์ „๋ฅผ ํ•จ๊ป˜ ๋ช…์‹œํ•ด์ฃผ์„ธ์š”. ์—ฌ๋Ÿฌ๋ถ„๋“ค์˜ ๋ฆฌ๋ทฐ์™€ ์ด์Šˆ๋Š” ์ฝ˜ํ…์ธ ๋ฅผ ๊ฐœ์„ ํ•˜๋Š”๋ฐ ํฐ ๋„์›€์ด ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.