Weekly I Learned-02

์ก์ด๐Ÿฅจยท2022๋…„ 11์›” 27์ผ
0

๊ฐœ๋ฐœ์ผ์ง€

๋ชฉ๋ก ๋ณด๊ธฐ
17/38
post-thumbnail

2022-11-27 (์ผ)

๐ŸžWIL


11/21(์›”)~27(์ผ)

  • ๋ฐฐ์šด ๊ฒƒ:
    gitbash์—์„œ ๋ฐ”ํƒ•ํ™”๋ฉด(desktop)์— ํด๋”๋ฅผ ๋งŒ๋“ค์–ด์ค˜์•ผ ๋‚˜์ค‘์— ๊นƒํ—™์— ์˜ฌ๋ฆด ๋•Œ ์ข€ ๋” ์ˆ˜์›”ํ•˜๊ณ  VS์ฝ”๋“œ์—์„œ๋„ ๊ณ„์† ํด๋”๋ฅผ ๋”ฐ๋กœ ๋“ค์–ด๊ฐ€์ค˜์•ผํ•˜๋Š” ์ˆ˜๊ณ ๋กœ์›€์ด ์—†๋‹ค.
    (๊ฐ€์šด๋ฐ ๊ณต๋ฐฑ์นธ์€ ์‹ค์ˆ˜๋กœ ์˜คํƒ€๋‚˜์„œ ์ง€์› ์Œ !)
    ๊ทธ๋ฆฌ๊ณ  VS์ฝ”๋“œ์—์„œ yarn start(=ํŒŒ์ด์ฐธ์˜ app.py ์‹คํ–‰๊ณผ ๊ฐ™์Œ)๋ฅผ ํ•ด์ค˜์•ผ ํŒŒ์ผ์ด ๋ Œ๋”๋ง ๋ผ์„œ localhost:3000์œผ๋กœ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.
cd desktop
$ yarn create react-app re-todo
yarn start

  • ๋Š๋‚€ ๊ฒƒ:
    VS์ฝ”๋“œ๊ฐ€ ์ฒ˜์Œ์ด๋ผ ๋‹ค๋ฃจ๊ธฐ ๋„ˆ๋ฌด ์–ด๋ ค์› ๋‹ค ใ… _ใ… 
    ๊ณ„์† yarn start๋„ ์—๋Ÿฌ๊ฐ€ ๋‚˜๋ฉด์„œ ์‹คํ–‰์ด ์•ˆ๋๊ณ , ๊ฐ•์˜๋ฅผ ๋ณด๊ณ  ๋”ฐ๋ผ์“ด๋‹ค๊ณ  ์ผ๋Š”๋ฐ๋„ ์˜คํƒ€๊ฐ€ ์žˆ์–ด์„œ ์—๋Ÿฌ๊ฐ€ ๋‚˜๊ธฐ๋„ ํ–ˆ์Œ. ์šฐ์„  ์–ด์ œ์™€ ์˜ค๋Š˜ 1ํšŒ๋…์œผ๋กœ ์ด 18~20์‹œ๊ฐ„์€ ์ฒœ์ฒœํžˆ ๋ณด๋ฉด์„œ VS์ฝ”๋“œ์— ๋”ฐ๋ผ ์จ๋ณด์•˜๋Š”๋ฐ, ์•„์ง ๋Œ€๋ถ€๋ถ„์ด ์ดํ•ด๊ฐ€ ๋˜์ง€์•Š๋Š”๋‹ค. ๊ฐœ์ธ๊ณผ์ œ๋ฅผ ์ตœ๋Œ€ํ•œ ๋นจ๋ฆฌ ๋๋‚ธ ํ›„ ์ตœ์†Œ 1๋ฒˆ์€ ๋” ๋ด์•ผ ์ง€๊ธˆ๋ณด๋‹ค๋Š” ๋” ๋‚˜์„ ๊ฒƒ ๊ฐ™๋‹ค.

  • ์Šค์Šค๋กœ ์•„์‰ฌ์› ๋˜ ์ :
    ๊ฐ•์˜๋ฅผ ๋ณด๋ฉด์„œ๋„ ์˜คํƒ€๊ฐ€ ๋‚ฌ๋˜ ๋ถ€๋ถ„์ด ๋‚ด๊ฐ€ ๊ผผ๊ผผํžˆ ๋ณด์ง€ ์•Š์•„์„œ, ๋งˆ์ง€๋ง‰์—๋Š” ์กธ๋ ค์„œ ์˜คํƒ€๊ฐ€ ๋‚ฌ๋˜ ๊ฒƒ ๊ฐ™๋‹ค. ์ข€ ๋” ์ž์„ธํžˆ ๋ด์•ผ๊ฒ ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด๋ฒˆ ์ฃผ 11/23(์ˆ˜)์— 6์ฃผ๋™์•ˆ ์ง„ํ–‰๋˜๋Š” ์Šคํ„ฐ๋””์—์„œ ๋ฐœํ‘œ๋ฅผ ๋งก์€ ๋‚ ์ด์—ˆ๋Š”๋ฐ, ๋™๋ฃŒ๋ถ„๊ป˜ 1:1๊ฐ•์˜ ๋„์›€์„ ๋ฐ›์•„ ์–•๊ฒŒ๋‚˜๋งˆ ์ดํ•ด๋ฅผ ํ•˜๊ณ  ๋ฐœํ‘œ๋ฅผ ์ง„ํ–‰ํ•˜๊ธดํ–ˆ๋Š”๋ฐ ๋‹ค๋ฅธ ๋ถ„๋“ค์ด ์ดํ•ด๊ฐ€ ์ž˜ ๋˜์ง€์•Š์œผ์‹  ๊ฒƒ ๊ฐ™์•˜๋‹ค. ๋ถ„๋Ÿ‰์„ ๋งŽ์ด ๋ณด๋‹ค๋Š” ๋ถ„๋Ÿ‰์ด ์ ๋”๋ผ๋„ ๊นŠ๊ฒŒ ๋“ค์–ด๊ฐ€์„œ ๊ณต๋ถ€ํ•ด์•ผํ•  ๊ฒƒ ๊ฐ™๋‹ค. ์œ ํŠœ๋ธŒ๋‚˜ ์ž๋ฃŒ๋ฅผ ๋งŽ์ด ์ฐธ๊ณ ํ•ด์„œ ๋‹ค์Œ์ฃผ์˜ ๋ฐœํ‘œ์ค€๋น„๋ฅผ ํ•ด์•ผ๊ฒ ๋‹ค.

<React WIL ๊ณผ์ œ>

๐ŸฅจJavaScript์˜ ES๋ž€?
ECAMSCRIPT์˜ ์•ฝ์ž๋กœ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํ‘œ์ค€ ๊ทœ๊ฒฉ์„ ๋‚˜ํƒ€๋‚ด๋Š” ์šฉ์–ด
ES5 (2009๋…„) ES6(2015๋…„)์ถœ์‹œ
๋งค๋…„ ์—…๋ฐ์ดํŠธ ๋˜๊ณ  ์žˆ์ง€๋งŒ ES5์™€ ES6์˜ ์ฐจ์ด๊ฐ€ ํฌ๊ธฐ ๋•Œ๋ฌธ์— ๋งŽ์ด ๋น„๊ต๋จ
์š”์ฆ˜ ๋งŽ์€ ํšŒ์‚ฌ๋“ค์ด ES6์„ ์“ฐ๊ณ  ์žˆ๋Š”๋ฐ ๊ธฐ์กด์— ์ž‘์„ฑ๋œ ์ฝ”๋“œ๋ฅผ ์ดํ•ดํ•˜๊ธฐ ์œ„ํ•ด ES5๊นŒ์ง€ ์•Œ์•„์•ผ ํ•œ๋‹ค.

๐ŸฅจES5/ES6 ๋ฌธ๋ฒ• ์ฐจ์ด

  1. let, const ์ถ”๊ฐ€
    ํ•จ์ˆ˜๋ ˆ๋ฒจ ์Šค์ฝ”ํ”„๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žฌํ• ๋‹น์ด ์žฌ์„ ์–ธ์ด ๊ฐ€๋Šฅํ•œ var ์™€ ๋‹ฌ๋ฆฌ
    let๊ณผ const๋Š” ๋ธ”๋ก๋ ˆ๋ฒจ ์Šค์ฝ”ํ”„๋ฅผ ๊ฐ€์ง€๋ฉฐ,
    let์€ ์žฌํ• ๋‹น ๊ฐ€๋Šฅ, ์žฌ์„ ์–ธ ๋ถˆ๊ฐ€
    const๋Š” ์žฌํ• ๋‹น/์žฌ์„ ์–ธ ๋ถˆ๊ฐ€ํ•˜์—ฌ ์ƒ์ˆ˜์—๋งŒ ์“ฐ์ž„

  2. ํ™”์‚ดํ‘œํ•จ์ˆ˜ ์ถ”๊ฐ€
    ํ™”์‚ดํ‘œ ํ•จ์ˆ˜(Arrow function)๊ฐ€ ์ถ”๊ฐ€๋˜์–ด ํ•จ์ˆ˜๋ฅผ ๊ฐ„๊ฒฐํ•˜๊ฒŒ ๋‚˜ํƒ€๋‚ผ ์ˆ˜ ์žˆ๊ณ  ๊ฐ€๋…์„ฑ ๋ฐ ์œ ์ง€๋ณด์ˆ˜์„ฑ์ด ์˜ฌ๋ผ๊ฐ
    ๋‹จ, ๊ธฐ์กด์˜ ํ•จ์ˆ˜์™€ this ๋ฐ”์ธ๋”ฉ์ด ๋‹ค๋ฅด๊ธฐ ๋•Œ๋ฌธ์— ์ ์ ˆํžˆ ์‚ฌ์šฉ

  3. ํด๋ž˜์Šค ์ถ”๊ฐ€
    ES5๊นŒ์ง€๋Š” ํ”„๋กœํ† ํƒ€์ž…์„ ๊ธฐ๋ฐ˜์œผ๋กœ ํด๋ž˜์Šค๋ฅผ ๋Œ€์‹ ํ–ˆ์ง€๋งŒ
    ES6๋ถ€ํ„ฐ ํด๋ž˜์Šค๊ฐ€ ๋„์ž…๋จ
    ํด๋ž˜์Šค : ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•˜๋Š” ํ•จ์ˆ˜ (=์ƒ์„ฑ์ž ํ•จ์ˆ˜)

  4. ํ…œํ”Œ๋ฆฟ ๋ฆฌํ„ฐ๋Ÿด
    ์ž‘์€๋”ฐ์˜ดํ‘œ๋‚˜ ํฐ ๋”ฐ์˜ดํ‘œ ๋Œ€์‹  ๋ฐฑํ‹ฑ(`)์œผ๋กœ ๋ฌธ์ž์—ด์„ ๊ฐ์‹ธ ํ‘œํ˜„ํ•˜๋Š” ๊ธฐ๋Šฅ

const name = "๋†€๋จน"
cosnt age = "20"

console.log(`๋‚ด ์ด๋ฆ„์€ ${name}์ด๊ณ , ๋‚˜์ด๋Š” ${age}์‚ด์ด์•ผ. ${`์ž˜ ๋ถ€ํƒํ•ด`}`)

// ๋‚ด ์ด๋ฆ„์€ ๋†€๋จน์ด๊ณ , ๋‚˜์ด๋Š” 20์•ผ. ์ž˜ ๋ถ€ํƒํ•ด
  1. ๋ชจ๋“ˆ์‚ฌ์šฉ
    ๋ชจ๋“ˆ์ด๋ž€ ์žฌ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•œ ์ฝ”๋“œ ์กฐ๊ฐ์œผ๋กœ ์„ธ๋ถ€์‚ฌํ•ญ์„ ์บก์Šํ™”์‹œํ‚ค๊ณ  API๋ถ€๋ถ„๋งŒ ์™ธ๋ถ€์— ๋…ธ์ถœ์‹œํ‚จ ์ฝ”๋“œ๋“ค
    ๋ชจ๋“ˆ์€ ๋ชจ๋“ˆ ์Šค์ฝ”ํ”„๋ฅผ ๊ฐ€์ง€๋ฉฐ export, import ํ‚ค์›Œ๋“œ๋กœ ์‚ฌ์šฉ ๊ฐ€๋Šฅ

  2. Default parameter
    ๊ธฐ์กด ๋งค๊ฐœ๋ณ€์ˆ˜์— ์ดˆ๊ธฐ๊ฐ’์„ ์ž‘์„ฑํ•˜๋ ค๋ฉด ํ•จ์ˆ˜ ๋‚ด๋ถ€์—์„œ ๋กœ์ง์ด ํ•„์š”ํ–ˆ์œผ๋‚˜, ES6์ดํ›„ default parameter๊ฐ€ ์ถ”๊ฐ€๋จ

  3. Destrucuring
    ๋น„๊ตฌ์กฐํ™” ํ• ๋‹น. ๊ฐ์ฒด๋‚˜ ๋ฐฐ์—ด์˜ ์š”์†Œ๋ฅผ ํ•ด์ฒดํ•˜์—ฌ ๊ฐœ๋ณ„ ๋ณ€์ˆ˜๋ฅผ ํ• ๋‹นํ•˜๋Š” ๊ฒƒ

let arr = ["one", "two", "three"];
let [one, two, three] = arr;
console.log(one, two, three);
// one two three

let [one,two,three] = ["one", "two", "three"];
console.log(one,two,three)
// one two three
  1. Promise
    ๊ธฐ์กด์˜ ์ฝœ๋ฐฑ์ง€์˜ฅ์„ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ๋„์ž…
    ํ”„๋กœ๋ฏธ์Šค ํ›„์†์ฒ˜๋ฆฌ ๋ฉ”์„œ๋“œ๋ฅผ ํ†ตํ•ด ์—๋Ÿฌ ์ฒ˜๋ฆฌ๋ฅผ ํšจ๊ณผ์ ์œผ๋กœ ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋จ

  2. Multi-line Strings
    ๋ฐฑํ‹ฑ(`)์„ ์ด์šฉํ•˜์—ฌ ์—ฌ๋Ÿฌ ์ค„์˜ ๋ฌธ์ž์—ด์„ ์‰ฝ๊ฒŒ ์ฒ˜๋ฆฌ

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