1. VSCode
1) ! + tab 을 누르면 html 기본 틀이 나옴 (emmet)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>2) tr * 3 하면 tr 3개 생성
<tr></tr>
<tr></tr>
<tr></tr>3) td.cn*3 하면 class가 cn인 td 3개 생성
<td class="cn"></td>
<td class="cn"></td>
<td class="cn"></td>2. ES6
1) let , const
ES5까지 변수를 선언할 수 있는 방법은 var 키워드를 사용하는 것이었다. var 키워드에는 몇가지 특징이 있다.
-
함수레벨 스코프
- 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서 참조할 수 없다. ( 함수 외부에서 선언한 변수는 자연스럽게 전역변수가 된다.)
-
var 키워드의 생략을 허용
- 의도치 않은 전역 변수를 양산할 가능성이 크다.
-
변수의 중복 선언 허용
- 의도치 않은 변수 값의 변경이 일어날 가능성이 크다.
-
호이스팅
- 변수를 선언하기 이전에 참조할 수 있다.
var 의 특징들은 전역 변수들과 많은 연관이 있는데 전역 변수는 코드의 복잡성을 증가시키는 원인이 된다.
ES6 에서는 이러한 var 키워드의 단점을 보완하기 위해 let과 const 키워드를 도입하였다.
let 과 const는 어떤 특징을 가지는 지 대략적으로 알아보자.
1. let과 const 예약어는 한번 선언한 똑같은 변수를 재선언할 수 없다.let a = 10;
let a = 20; //Identifier 'a' has already been declared2. const 예약어는 한번 할당한 값을 변경할 수 없다. const b = 20;
b = 30; // Uncaught TypeError: Assignment to constant variable.
// 하지만 객체의 속성이나 배열의 요소는 변경이 가능하다. (주소값을 복사했기 때문)
const user = {
name: '최동욱',
age: 25,
};
console.log(user.name); // 최동욱
user.name = '홍길동';
console.log(user.name); // 홍길동3. 수업에서는 let 과 const가 호이스팅되지 않는다고 하였지만 이는 엄밀히 말하면 맞지 않다.var v = 10;
{
console.log(v);
let v = 20;
}만약 let 이 호이스팅되지 않는다고 한다면 콘솔에 10이 출력되겠지만 직접 실행해보면 Cannot access 'v' before initialization
이라는 메세지가 출력된다. 변수가 생성될 때는 선언 , 초기화 , 할당 의 3단계를 거치는데 let과 const는 선언 단계만 거친 후 호이스팅되기 때문에 참조 에러가 발생한다.
2) PropertyShorthand
property shorthand는 객체를 정의 할 때 객체의 key값과 value의 값이 같으면, key 와 value 값을 각각 표기하지 않고 한 번만 표기하는 것을 의미한다.
const id = ‘ssafy',
name = ＇싸피＇,
age = 3;
const member = {
id // id: id,
name // name: name,
age // age: age
};3) Concise Method
ES5 문법에서 func 는 메서드로 info 함수를 프로퍼티에 할당하였고 ES6에서는 이러한 할당 자체를 콜론과 함수 키워드를 생략함으로서 간결한 문법을 제공해 주고 있다. 이러한 메서드 축약을 통해 메서드 본연의 역할에 충실할 수 있도록 제약할 수 있다. 자세한 내용
const id = 'ssafy',
name = '싸피',
age = 30;
const user = {
id,
name,
age,
// func : info(){ // ES5
info() { // ES6
console.log('user info : ' + this.id + ' ' + this.name + ' ' + this.age);
},
};
user.info();4) DestructuringAssignment
비구조화 할당이란 배열이나 객체에 입력된 값을 개별적인 변수에 할당하는 자바스크립트 표현식이다.
const user = {
id: 'ssafy',
name: '김싸피',
age: 25,
};
// 기존 Object
{
let id = user.id;
let name = user.name;
let age = user.age;
console.log(id, name, age);
}
//비구조화 할당 (변수 이름을 다르게 할당할 수도 있다.)
{
let { id, name, age: ssafyage } = user;
console.log(id, name, ssafyage);
}5) SpreadSyntax
배열을 간단하게 펼쳐서 사용할 수 있다
// Spread Syntax (전개 구문)
const user1 = { id: 'ssafy1' };
const user2 = { id: 'ssafy2' };
const array = [user1, user2];
// array copy
const arrayCopy = [...array];
console.log(array, arrayCopy);
// 주의 : spread operator의 경우 값 복사가 아닌 주소를 가지고 오기때문에 값을 바꿀경우 모두 변경된다.
user1.id = 'ssafy5';
// add
const arrayAdd = [...array, { id: 'ssafy3' }];
console.log(arrayAdd);
// object copy
const user3 = { ...user1 };
console.log(user3);
// array concat
const team1 = ['대전', '광주'];
const team2 = ['구미', '서울'];
const team = [...team1, ...team2];
console.log(team);
// obejct merge(병합)
const u1 = { id1: 'ssafy1' };
const u2 = { id2: 'ssafy2' };
const u = { ...u1, ...u2 };
console.log(u);
// 주의점 : key가 같은 obejct를 병합 하게 되면 마지막 obj가 기존 값을 덮어쓴다.
const user = { ...user1, ...user2 };
console.log(user);6) DefaultParameter
default parameter은 함수에 전달된 파라미터의 값이 undefined이거나 전달된 값이 없을 때, 초기값을 설정할 수 있다.
function print1(msg) {
console.log(msg);
}
print1('hello ssafy');
print1();
function print2(msg2 = 'inital msg') {
console.log(msg2);
}
print2('hello ssafy');
print2();7) TemplateString
템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다. 큰따옴표(“) 대신 백틱(`)을 사용하고, 변수을 넣고자 하는 부분에 ${} 키워드를 사용해 그냥 변수를 넣어서 사용할 수 있다. 템플릿 리터럴은 런타임 시점에 일반 자바스크립트 문자열로 처리/변환된다.
console.log(name + '(' + id + ')님 \n나이는 ' + age + '입니다.');
console.log(`${name}(${id})님 나이는 ${age}입니다.`); //템플릿 문자열8) ArrowFunction
function 키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수를 선언할 수 있다.
// arrow function (화살표 함수)
// function(param) {code} 형태를 축약
// (param) => {code}
// 함수 이름이 없는 익명 함수 이므로 사용시 변수에 담아서 사용.
// (param) => {code};
// param => {code};
// () => {code};
// () => code;
// () => ({key: value});
//기존 방식
const func1 = function () {
console.log('익명 함수');
};
func1();
//화살표 함수
const func2 = () => {
console.log('화살표 함수');
};
func2();
//기존 방식
const func3 = function (num) {
console.log('익명 함수', num);
};
func3(3);
//화살표 함수
const func4 = (num) => {
console.log('화살표 함수', num);
};
func4(4);
const func7 = (num1, num2) => {
console.log('화살표 함수', num1, num2);
};
func7(6, 7);
// 매개변수가 2개 이상일 때 소괄호 없이 사용 x
// const func8 = num1, num2 => {
// console.log('화살표 함수', num1, num2);
// };
// func8(6, 7);
// 추가적으로 parameter와 화살표 사이에 개행이 불가능.
3. Vue.js
3-1) MVVM 패턴 (Model + View + ViewModel)
MVVM 패턴이란 모델과 뷰 사이에 뷰모델이 위치하는 구조이다. DOM이 변경됐을 때, 뷰모델의 DOM Listeners를 거쳐서 모델로 신호가 간다.
모델에서 변경된 데이터를 뷰모델을 거쳐서 뷰로 보냈을 때, 화면이 reactive하게 반응이 일어난다.
Model : 순수 자바스크립트 객체
View : 웹페이지의 DOM
ViewModel : Vue의 역할
vue는 view와 model을 연결하고 자동으로 바인딩하므로 양방향 통신을 가능하게 함
양방향 통신 : DOM이 바뀌면 스크립트단이 바뀌고 스크립트단이 바뀌면 DOM이 바뀐다
MVC패턴에서는 사용자의 요구를 컨트롤러가 받아서 모델에 데이터를 갱신해 달라고 했음 그리고 데이터를 가지고 화면단에 가서 요청했음 .
MVVM 패턴에서는 viewModel이 사이에 껴서 데이터 바인딩을 해줌
3-2) 시작
<!--html-->
<div id="app">
{{ message }}
</div>//js
var app = new Vue({
el: '#app',
data: {
message: '안녕하세요 Vue!'
}
})el에다가 나는 누구랑 연결할거다 라고 설정
data를 객체처럼 사용하기도 하고 함수처럼 사용하기도 하는데 함수처럼 하는게 일반적
<div id="app">
<h1>{{ msg }}</h1>
<script>
new Vue({
el: "#app", //id가 app인 애랑 연결하겠다
data() {
// 이 데이터를 div 안에 출력하겠다.
return {
msg: "안녕 Vuejs !!!",
};
},
});
</script>
</div>
루트 인스턴스 ( 뷰 인스턴스 )
양방향이기 때문에 텍스트가 바뀌면 화면이 바뀐다.
<div id="app">
<!-- html로 인식해라-->
<p v-html="msg"></p>
<script>
//뷰 객체 (어떤 엘리먼트랑 연결할지 어떤 데이터를 사용할지 어떤 메서드를 사용할지)
new Vue({
el: "#app", //id가 app인 애랑 연결하겠다
data() {
// 이 데이터를 div 안에 출력하겠다.
return {
msg: "<big>안녕</big> Vuejs !!!",
};
},
});
</script>
</div> 뷰가 렌더링하는 속도가 살짝 빠르다
리액트는 반복문하는 방법이 여러가지라 표준이없다 . 뷰는
redux vs vuex
