2022-11-27 (์ผ)
cd desktop
$ yarn create react-app re-todo
yarn start
๋๋ ๊ฒ:
VS์ฝ๋๊ฐ ์ฒ์์ด๋ผ ๋ค๋ฃจ๊ธฐ ๋๋ฌด ์ด๋ ค์ ๋ค ใ
_ใ
๊ณ์ yarn start๋ ์๋ฌ๊ฐ ๋๋ฉด์ ์คํ์ด ์๋๊ณ , ๊ฐ์๋ฅผ ๋ณด๊ณ ๋ฐ๋ผ์ด๋ค๊ณ ์ผ๋๋ฐ๋ ์คํ๊ฐ ์์ด์ ์๋ฌ๊ฐ ๋๊ธฐ๋ ํ์. ์ฐ์ ์ด์ ์ ์ค๋ 1ํ๋
์ผ๋ก ์ด 18~20์๊ฐ์ ์ฒ์ฒํ ๋ณด๋ฉด์ VS์ฝ๋์ ๋ฐ๋ผ ์จ๋ณด์๋๋ฐ, ์์ง ๋๋ถ๋ถ์ด ์ดํด๊ฐ ๋์ง์๋๋ค. ๊ฐ์ธ๊ณผ์ ๋ฅผ ์ต๋ํ ๋นจ๋ฆฌ ๋๋ธ ํ ์ต์ 1๋ฒ์ ๋ ๋ด์ผ ์ง๊ธ๋ณด๋ค๋ ๋ ๋์ ๊ฒ ๊ฐ๋ค.
์ค์ค๋ก ์์ฌ์ ๋ ์ :
๊ฐ์๋ฅผ ๋ณด๋ฉด์๋ ์คํ๊ฐ ๋ฌ๋ ๋ถ๋ถ์ด ๋ด๊ฐ ๊ผผ๊ผผํ ๋ณด์ง ์์์, ๋ง์ง๋ง์๋ ์กธ๋ ค์ ์คํ๊ฐ ๋ฌ๋ ๊ฒ ๊ฐ๋ค. ์ข ๋ ์์ธํ ๋ด์ผ๊ฒ ๋ค. ๊ทธ๋ฆฌ๊ณ ์ด๋ฒ ์ฃผ 11/23(์)์ 6์ฃผ๋์ ์งํ๋๋ ์คํฐ๋์์ ๋ฐํ๋ฅผ ๋งก์ ๋ ์ด์๋๋ฐ, ๋๋ฃ๋ถ๊ป 1:1๊ฐ์ ๋์์ ๋ฐ์ ์๊ฒ๋๋ง ์ดํด๋ฅผ ํ๊ณ ๋ฐํ๋ฅผ ์งํํ๊ธดํ๋๋ฐ ๋ค๋ฅธ ๋ถ๋ค์ด ์ดํด๊ฐ ์ ๋์ง์์ผ์ ๊ฒ ๊ฐ์๋ค. ๋ถ๋์ ๋ง์ด ๋ณด๋ค๋ ๋ถ๋์ด ์ ๋๋ผ๋ ๊น๊ฒ ๋ค์ด๊ฐ์ ๊ณต๋ถํด์ผํ ๊ฒ ๊ฐ๋ค. ์ ํ๋ธ๋ ์๋ฃ๋ฅผ ๋ง์ด ์ฐธ๊ณ ํด์ ๋ค์์ฃผ์ ๋ฐํ์ค๋น๋ฅผ ํด์ผ๊ฒ ๋ค.
๐ฅจJavaScript์ ES๋?
ECAMSCRIPT์ ์ฝ์๋ก ์๋ฐ์คํฌ๋ฆฝํธ์ ํ์ค ๊ท๊ฒฉ์ ๋ํ๋ด๋ ์ฉ์ด
ES5 (2009๋ ) ES6(2015๋ )์ถ์
๋งค๋ ์ ๋ฐ์ดํธ ๋๊ณ ์์ง๋ง ES5์ ES6์ ์ฐจ์ด๊ฐ ํฌ๊ธฐ ๋๋ฌธ์ ๋ง์ด ๋น๊ต๋จ
์์ฆ ๋ง์ ํ์ฌ๋ค์ด ES6์ ์ฐ๊ณ ์๋๋ฐ ๊ธฐ์กด์ ์์ฑ๋ ์ฝ๋๋ฅผ ์ดํดํ๊ธฐ ์ํด ES5๊น์ง ์์์ผ ํ๋ค.
๐ฅจES5/ES6 ๋ฌธ๋ฒ ์ฐจ์ด
let, const ์ถ๊ฐ
ํจ์๋ ๋ฒจ ์ค์ฝํ๋ฅผ ์ฌ์ฉํ๊ณ ์ฌํ ๋น์ด ์ฌ์ ์ธ์ด ๊ฐ๋ฅํ var ์ ๋ฌ๋ฆฌ
let๊ณผ const๋ ๋ธ๋ก๋ ๋ฒจ ์ค์ฝํ๋ฅผ ๊ฐ์ง๋ฉฐ,
let์ ์ฌํ ๋น ๊ฐ๋ฅ, ์ฌ์ ์ธ ๋ถ๊ฐ
const๋ ์ฌํ ๋น/์ฌ์ ์ธ ๋ถ๊ฐํ์ฌ ์์์๋ง ์ฐ์
ํ์ดํํจ์ ์ถ๊ฐ
ํ์ดํ ํจ์(Arrow function)๊ฐ ์ถ๊ฐ๋์ด ํจ์๋ฅผ ๊ฐ๊ฒฐํ๊ฒ ๋ํ๋ผ ์ ์๊ณ ๊ฐ๋
์ฑ ๋ฐ ์ ์ง๋ณด์์ฑ์ด ์ฌ๋ผ๊ฐ
๋จ, ๊ธฐ์กด์ ํจ์์ this ๋ฐ์ธ๋ฉ์ด ๋ค๋ฅด๊ธฐ ๋๋ฌธ์ ์ ์ ํ ์ฌ์ฉ
ํด๋์ค ์ถ๊ฐ
ES5๊น์ง๋ ํ๋กํ ํ์
์ ๊ธฐ๋ฐ์ผ๋ก ํด๋์ค๋ฅผ ๋์ ํ์ง๋ง
ES6๋ถํฐ ํด๋์ค๊ฐ ๋์
๋จ
ํด๋์ค : ๊ฐ์ฒด๋ฅผ ์์ฑํ๋ ํจ์ (=์์ฑ์ ํจ์)
ํ
ํ๋ฆฟ ๋ฆฌํฐ๋ด
์์๋ฐ์ดํ๋ ํฐ ๋ฐ์ดํ ๋์ ๋ฐฑํฑ(`)์ผ๋ก ๋ฌธ์์ด์ ๊ฐ์ธ ํํํ๋ ๊ธฐ๋ฅ
const name = "๋๋จน"
cosnt age = "20"
console.log(`๋ด ์ด๋ฆ์ ${name}์ด๊ณ , ๋์ด๋ ${age}์ด์ด์ผ. ${`์ ๋ถํํด`}`)
// ๋ด ์ด๋ฆ์ ๋๋จน์ด๊ณ , ๋์ด๋ 20์ผ. ์ ๋ถํํด
๋ชจ๋์ฌ์ฉ
๋ชจ๋์ด๋ ์ฌ์ฌ์ฉํ๊ธฐ ์ํ ์ฝ๋ ์กฐ๊ฐ์ผ๋ก ์ธ๋ถ์ฌํญ์ ์บก์ํ์ํค๊ณ API๋ถ๋ถ๋ง ์ธ๋ถ์ ๋
ธ์ถ์ํจ ์ฝ๋๋ค
๋ชจ๋์ ๋ชจ๋ ์ค์ฝํ๋ฅผ ๊ฐ์ง๋ฉฐ export, import ํค์๋๋ก ์ฌ์ฉ ๊ฐ๋ฅ
Default parameter
๊ธฐ์กด ๋งค๊ฐ๋ณ์์ ์ด๊ธฐ๊ฐ์ ์์ฑํ๋ ค๋ฉด ํจ์ ๋ด๋ถ์์ ๋ก์ง์ด ํ์ํ์ผ๋, ES6์ดํ default parameter๊ฐ ์ถ๊ฐ๋จ
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
Promise
๊ธฐ์กด์ ์ฝ๋ฐฑ์ง์ฅ์ ํด๊ฒฐํ๊ธฐ ์ํด ๋์
ํ๋ก๋ฏธ์ค ํ์์ฒ๋ฆฌ ๋ฉ์๋๋ฅผ ํตํด ์๋ฌ ์ฒ๋ฆฌ๋ฅผ ํจ๊ณผ์ ์ผ๋ก ํ ์ ์๊ฒ ๋จ
Multi-line Strings
๋ฐฑํฑ(`)์ ์ด์ฉํ์ฌ ์ฌ๋ฌ ์ค์ ๋ฌธ์์ด์ ์ฝ๊ฒ ์ฒ๋ฆฌ