잠깐 JS문법 시간을 가져보자.간혹 Class를 만들고 복사해서 또 다른 Class를 만들어야 할때가 있는데 그때 처음 부터 Class를 새로 만들던가 extends를 사용하면된다.
이렇게 extends를 사용하면 User안에있는 내용이 그대로 복사외어 NewUser에 들어간다.
그럼 Class안에서 사용할수 있는 키워드를 하나 배워보자.
이전 시간에 private를 배웠는데 private는 Class안에서만 사용할수 있는 변수값을 만드는 것이였다. 중괄호 안에서 즉 Class 안에서만 사용할수 있게 하는 키워드였는데 이것과 유사한 protected가 있다.
protected는 좀 더 확장성을 제공해준다고 보면 된다. 위 처럼 private를 사용하면 extends된 클래스에서는 저 x 변수를 사용할수 없었다. private를 사용하면 복사한 클래스에서는 해당 변수를 사용할수 없지만 protected를 사용하면 복사한 클래스에서도 해당 변수를 사용할수 있다.
정리하자면 protected는 extends된 클래스에서는 사용이 가능하다 하지만 역시 자식들은 사용이 불가능하다.
결론은 클래스를 여러개 만들고 싶은데 클래스 끼리 공유를 할수있는 속성을 만들고 싶으면 protected를 선언해주면 된다. 해당 class 안에서만 사용하게 하고싶으면 private를 사용하면 된다.
또 static이라는 속성도 있는데 static키워드를 붙이면 부모 class에 직접 부여되어서 자식들이 물려받지 못하게 부모만 사용할수 있게 하는것이다.
이렇게 자식이 x를 찾으면 찾을수가 없는데 아래처럼 부모는 사용이 가능하다. 이런식으로 사용하게 하는것이다. 자식에게 안물려주는것이고 extends를 사용해서 복제하면 요소가 복제되긴한다.
static은 다른 속성과 함께 사용할수 있다. private / protected / public 과 함께 말이다.
그럼 대체 언제 활용해야하는가?
static을 붙이면 자식들이 물려 받을수 없게 되니 자식들은 skill이라는 변수를 못물려받는다. 무조건 부모만 사용할수 있기때문에 this.skill도 안된다.이렇게 하면 모든 자식들은 js전문가입니다 라는 값을 출력하게 된다.
그러다 중간에 skill 속성을 다르게 변경하고 싶다면 위처럼 User를 불러와 수정하면 된다.
하지만 private 나 protected를 사용하는게 더 나을것이다.노출하고 싶지 않을때 말이다. 그럼 더 안전하게 코드를 구성할수 있다. 외부에서 코드를 수정하게 하면 위험성이 따라오기 마련이다.
숙제1) 다음 x, y, z 속성의 특징을 설명해보십시오.
class User {
private static x = 10;
public static y = 20;
protected z = 30;
}
누가 쓸 수 있고, 어디서 수정할 수 있는지 이런 것들이요.
친구가 물어봤을 때 어떻게 답해줄 것입니까
private는 부모만 사용할수있고 자식은 사용할수없는 요소 그리고 복제한 클래스 에서도 사용이 불가능하다 오직 해당 클래스에서만 사용이 가능 즉 나만사용하는 속성.
public은 모두가 사용할수있는 속성.
pritected는 복제된 클래스에서도 사용이 가능한 좀 더 범위가 넓어진 private?라고 생각한다.
센세 풀이
1. 필드값은 원래는 모든 User의 자식들에게 물려주는 속성이지만
x와 y에는 static 키워드가 붙었기 때문에 User.x 이런 식으로만 접근해서 쓸 수 있습니다.
User의 자식들은 x와 y를 쓸 수 없습니다.
2. private static x는 class 내부에서만 수정가능합니다.
3. public static y는 class 내부 외부 상관없이 수정가능합니다. public 키워드 지워도 똑같이 동작할 듯
4. protected z는 private 키워드와 유사하게 class 내부에서만 사용이 가능한데
약간 범위가 넓어서 extends로 복사한 class 내부에서도 사용할 수 있습니다. 숙제2) x 속성에 숫자를 더해주는 함수가 필요합니다.
class User {
private static x = 10;
public static y = 20;
}
User.addOne(3) //이렇게 하면 x가 3 더해져야함
User.addOne(4) //이렇게 하면 x가 4 더해져야함
User.printX() //이렇게 하면 콘솔창에 x값이 출력되어야함
저렇게 User.addOne() 쓸 때마다 x가 증가하는 함수는 어떻게 만들 수 있을까요?
그리고 x값을 콘솔창에 출력해주는 printX() 함수도 한번 만들어보십시오.
(조건) private static x = 10; 이 코드 수정금지
나의 풀이
class User {
private static x = 10;
public static y = 20;
static addOne(props:number){
return User.x+ props;
}
static printX(){
return User.x;
}
}
console.log("----")
console.log(User.addOne(3))
console.log(User.addOne(4))
console.log(User.printX())
console.log("----")
센세 풀이
일단 static 속성들은 class에 직접 부여되는 속성이랬습니다.
그래서 static 속성을 수정하거나 가져다 쓰고 싶으면
그냥 클래스명.속성명 이렇게 하면 나옵니다.
class User {
private static x = 10;
public static y = 20;
static addOne(파라미터 :number){
User.x += 파라미터
}
static printX(){
console.log(User.x)
}
}
User.addOne(3)
User.addOne(10)
User.printX()
그래서 1. addOne() 함수를 만들었습니다. 그리고 static을 붙여줬음
그러면 이제 User.addOne() 이렇게 쓸 수 있으니까요.
2. addOne(파라미터) 실행하면 x속성에 파라미터만큼 더해달라고 했습니다.
3. 그리고 printX() 실행하면 콘솔창에 User.x 출력해달라고 했습니다.
의도대로 잘 동작하는 군요. 숙제3) 이런거 어떻게 만들게요
웹 요소 애니메이팅하는거 이런 것의 기초 격인데
let 네모 = new Square(30, 30, 'red');
네모.draw()
네모.draw()
네모.draw()
네모.draw()
이렇게 네모.draw()를 할 때마다
index.html에 가로 30px, 세로 30px, 배경색이 'red' 의
가로 400px 세로 400px 공간 안에 무작위로 배치되어야합니다.
나의풀이 = X 감이 안와서 손도 못댐..
센세 풀이
일단 index.html 안에 타입스크립트가 변환된 js 파일 첨부가 잘 되어있는지 확인하시고
(index.html 내부)
<body>
<script src="index.js"></script>
</body>
그 다음에 저는 이렇게 만들었습니다.
class Square {
constructor (public width :number, public height :number, public color :string){
}
draw(){
let a = Math.random();
let square = `<div style="position:relative;
top:${a * 400}px;
left:${a * 400}px;
width:${this.width}px;
height : ${this.height}px;
background:${this.color}"></div>`;
document.body.insertAdjacentHTML( 'beforeend', square );
}
}
let 네모 = new Square(30, 30, 'red');
네모.draw()
네모.draw()
네모.draw()
네모.draw()
1. constructor를 이용해서 새로뽑는 object 들은 width, height, color를 입력할 수 있게 만들었습니다.
2. 자식들은 draw()를 쓰면
(1) 0과 1사이의 무작위 숫자를 뽑습니다. 그걸 변수 a에 저장해둡니다.
(2) <div>를 디자인합니다. 근데 <div>박스의 폭, 높이, 색상은 constructor로 입력한 것들을 활용합니다.
(3) <div> 박스의 위치는 left, right 속성을 이용해서 0~400px 사이로 무작위로 배치합니다.
(4) insertAdjacentHTML 이런거 이용하면 원하는 곳에 html 추가가 가능합니다.
그래서 실제로 자식을 하나 뽑아서 draw() 했더니 진짜 빨간 박스 4개 나옵니다.
다른 사이즈, 다른 색상으로도 뽑아서 draw() 이것도 가능하겠군요