Angular
: TypeScript ๊ธฐ๋ฐ์ผ๋ก ์์ ์ ์ด๊ณ ํํํ app๊ฐ๋ฐ์ด ๊ฐ๋ฅํ๋ฉฐ,Framework๋ต๊ฒ ๋คํฅํ ๊ธฐ๋ฅ์ด ๋ด์ฅ๋์ด์๋ค. ํ์ง๋ง ๋ฌด๊ฒ๊ณ ๋ฐฐ์ฐ๊ธฐ๊ฐ ์ด๋ ต๋ค๋ ๋จ์ ์ ๊ฐ์ง๊ณ ์๋ค.
Vue
: Evan You๋ผ๋ ๊ฐ์ธ์ด ๊ฐ๋ฐํ ํ๋ ์์ํฌ๋ก ์ฝ๋๊ฐ ๊น๋ํ๊ณ ๋ฐฐ์ฐ๊ธฐ ์ฝ๊ธฐ ๋๋ฌธ์ ๊ฐ์ฅ ๋์ค์ ์๊ฒผ์ง๋ง, ์ฑ์ฅ ์๋๊ฐ ์ ๋ง ๋น ๋ฅธ ํธ์ด๋ค.
React
: MVC(Model-View-Controller) Architecture(Angular,Vue)์๋ ๋ค๋ฅด๊ฒ ๋ฆฌ์กํธ๋ ์ค๋ก์ง View๋ง ๋ด๋นํ๋ค. ๋ด์ฅ๋ ๊ธฐ๋ฅ์ด ๋ถ์กฑํด Third-party๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ React-router, Redux๋ฅผ ํจ๊ป ์ฌ์ฉํ๋ค.
ํ์ด์ค๋ถ์ ์ง์์ ์ธ ๊ด๋ฆฌ์ ํจ๊ป ์ํ๊ณ๊ฐ ํ์ฑํ ๋์ด์์ผ๋ฉฐ ๋ค์ํ ์๋ฃ์ React Native์ ์ฌ์ฉ์ผ๋ก ์ธํด ์ฌ์ฉ์๊ฐ ๊พธ์คํ ์ฆ๊ฐํ๊ณ ์๋ค.
React๋ ํ์ด์ค๋ถ์์ ๊ฐ๋ฐํ๊ณ ๊ด๋ฆฌํ๋ ์ฌ์ฉ์ ์ธํฐํ์ด์ค(UI)๋ฅผ ๋ง๋ค๊ธฐ ์ํ JS๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๋ค. React์ ๊ฐ์ ํ๋ก ํธ์๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ํ๋ ์์ํฌ๋ฅผ ์ฌ์ฉํ๋ ๊ฐ์ฅ ํฐ ์ด์ ์ค ํ๋๋ UI๋ฅผ ์๋์ผ๋ก ์ ๋ฐ์ดํธ ํด์ค๋ค๋ ์ ์ด๋ค. ๋ฆฌ์กํธ๋ ๊ฐ์ ๋์ ํตํด UI๋ฅผ ๋น ๋ฅด๊ฒ ์ ๋ฐ์ดํธํ๋๋ฐ, ๊ฐ์๋์ ์ด์ ์ UI์ํ๋ฅผ ๋ฉ๋ชจ๋ฆฌ์ ์ ์งํด์, ๋ณ๊ฒฝ๋ UI์ ์ต์ ์งํฉ์ ๊ณ์ฐํ๋ ๊ธฐ์ ์ด๋ค. (๋ถํ์ํ ์ ๋ฐ์ดํธ โฌ, ์ฑ๋ฅ์ โฌ)
So,
๋ฆฌ์กํธ๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๊ธฐ๋ณธ์ผ๋ก ์ฐ๋, ์ฝ๊ฐ์ ์ ๊ทธ๋ ์ด๋๊ฐ ๋์ด์๋ค๊ณ ๋ณผ ์ ์๋ค.
๊ทธ๋ฌ๋ฉด, ์ด ์ฝ๊ฐ์ ์ ๋ฐ์ดํธ๋ ๋ฌด์์ผ๊น?
์๋์ผ๋ก UI๋ฅผ ์ ๋ฐ์ดํธ ํด์ค๋ค. : ๊ธฐ์กด์ ์น์ฌ์ดํธ ๊ฐ์ ๊ฒฝ์ฐ์๋ ์ ๋ฐ์ดํธ ๋ ๊ฒ์ ๋ณด๋ ค๋ฉด ๋ฆฌํ๋ ์ฌ๋ฅผ ํ๋ ํ๋ ํด์ค์ผ ํ์ง๋ง, ๋ฆฌ์กํธ ๊ฐ์ ๊ฒฝ์ฐ์๋ ์ด๋ค ๋ด์ฉ์ด ๋ฐ๋์์ ๋ ์๋์ผ๋ก ์ ๋ฐ์ดํธ๋ฅผ ํด์ค๋ค.
์ฝ๋์ ์ฌํ์ฉ์ ๋ง์ด ํ ์์๋ค.
์ฝ๋ ์ ๋ฆฌ๋ฅผ ํด์ค๋ค.
HTML๊ณผ Javascript๋ฅผ ํฉ์น ๊ฒ์ด JSX๋ฌธ๋ฒ์ด๋ผ๊ณ ํ๋ค.
let person = {
name : "kim",
age : 40
}
//let name = person.name
//let age = person['age']
let {age} = person
console.log(age)
< 40
let array = [1,2,3,4]
let [a,b,...rest] = array
console.log(rest);
< [3,4]
//spread
let person = {name: "kim", age: 12}
let person2 = {...person}
let person3 = person
console.log(person2);
< {name: "kim", age: 12}
console.log(person3);
< {name: "kim", age: 12}
๐ฉโ๐ซ ์ ๊ด์์ผ๋ก ๋ณด๋ฉด person2์ person3 ๊ฐ๊ฐ ๋๊ฐ์ ๊ฐ์ด ๊ฐ์ ๋ณด์ด์ง๋ง ์ด ๋๊ฐ์ ๋ณต์ฌ ๋ฉ์ปค๋์ฆ์ด ์กฐ๊ธ ๋ค๋ฅด๋ค.
person3๊ณผ ๊ฐ์ด ...์ ๋ฃ์ง ์๊ณ ๋ฐ๋ก ํ ๋น์ ํ๊ฒ๋๋ฉด, ์ด๊ฑฐ๋ ๊ฐ์ฒด์ ์ฃผ์ ๊ฐ๋ง ๋ณต์ฌํ๋ ๊ฒ์ด๋ผ๊ณ ๋ณผ ์ ์๋ค. ์ฆ ๊ฐ์ฒด๋ ํ๋์ด๊ณ ๊ทธ ๊ฐ์ฒด๋ฅผ ์ฐธ์กฐํ๋ ๋ณ์๊ฐ ๋๊ฐ์ด๋ค. !! ํ์ง๋ง ...์ ๋ฃ์ person2๊ฐ์ ๊ฒฝ์ฐ๋ ๋ณต์ฌ๊ฐ ๋์ด์ ...์ ๋ฃ์ด์ ๊ฐ์ฒด๊ฐ ํ๋ ์๊ธฐ๋ ๊ฒ์ด๋ค.
console.log(person2 == person2)๋ก ๋น๊ตํด ๋ณด๋ฉด false๊ฐ ๋์ค๋ ๊ฒ์ ์ ์ ์๋ค.
ํ์ง๋ง, console.log(person == person3)๋ก ํ๋ฉด true ๋์ ๊ฐ์ด ๊ฐ๋ค๊ณ ๋์จ๋ค.
let person = {name: "kim", age: 12}
let person2 = {...person, name:"kayoung"}
let person3 = person
console.log(person2);
< {name: "kayoung", age: 12}
console.log(person3);
< {name: "kim", age: 12}
person2์ ์ด๋ฆ์ ์ถ๊ฐํด์ ๋ณ๊ฒฝํด์ฃผ๋ ๊ฒ๋ ๊ฐ๋ฅํ๋ค.
let a = [1,2]
let b = [...a,3]
console.log(b);
<[1,2,3]
let c = [...a,...b]
console.log(c);
<[1,2,1,2,3]
๋๋
//์ผํญ์ฐ์ฐ์
let person = {name:ka, age:50}
if(person){
console.log(person.name)
}else{
console.log("there is no person")
}
< ka
----------------------------------------------------
console.log(person? person.name:"there is no person")
< ka
๋ฆฌ์กํธ ํ๋ก์ ํธ๋ฅผ ์์ํ๋๋ฐ ํ์ํ ๊ฐ๋ฐ ํ๊ฒฝ์ ์ธํ ํด์ฃผ๋ ๋๊ตฌ(toolchain)