1. JS ES5 Prototype 이용 : 22.12.29
1) Prototype을 써야만 하는 이유? 다음의 문제점 해결을 위해서
- 문제점 의문
<script>
// ----- 문제점 1. 객체 생성 시, 계속 total이라는 함수가 계속 만들어낸다? -------
// ----- 문제점 2. 은닉성 문제?? -------
// 클로저 문제는 아니다...
function Exam(){
this.kor = 30;
this.eng = 20;
this.math = 40;
this.total = function(){
return this.kor+this.eng+this.math; // this를 넣으면 값이 나온다. this를 빼면 에러 발생!!
// 하지만, 이렇게 쓴 코드도 에러가 있다! ES6와 차이가 있을 것이며 자바코드와도 차이가 있을 것이다.
}
}
var exam = new Exam(); // 자기만의 객체 이용가능.
console.log(exam.total());
var exam1 = new Exam(); // new로 객체가 새로 만들어지기 때문에 또 새로 만들어진다.
console.log(exam1.total());
</script>
- 문제점 결론
<script>
// **** 최종 문제점 :
// 1) 값을 넘겨 받을 때, 인자가 없으면, undefined가 출력된다. 그래서 기본값을 ||로 설정해주고 진행한다.
// 2) 생성자에서 만들어진 함수를 객체에서 바로 호출하면, 그 함수는 호출될 때마다 계속 생성된다.
// 원래는 이렇게 썼다.
function Exam(kor, eng, math){
this.kor = kor || 0; // 앞에 값이 계속 false이면, 0으로 기본값을 넣어줘야한다.
this.eng = eng || 0; // 은닉성 문제!! (외부 접근 시)
this.math = math || 0;
this.total = function(){ // 생성자가 호출될 때마다, 계속 total 함수가 생겨난다.
return this.kor+this.eng+this.math;
}
}
var exam = new Exam();
console.log(exam.total());
console.log(exam.total === exam1.total); // 결국, total 또 생성 안되게 객체를 비교해야된다.
var exam1 = new Exam();
console.log(exam1.total());
</script>
- 위의 문제점 해결 방법
<script>
// -------- 위 문제의 해결방법 : prototype 이용 ------------------
function Exam(kor, eng, math){
this.kor = kor || 0;
this.eng = eng || 0;
this.math = math || 0;
// this.total = function(){
// return this.kor+this.eng+this.math;
// }
}
Exam.prototype.total = function(){
return this.kor+this.eng+this.math;
}
var exam = new Exam();
console.log(exam.total());
var exam1 = new Exam();
console.log(exam1.total());
var isEquals = exam.total === exam1.total; // 결국, total 또 생성 안되게 객체를 비교
console.log(isEquals); // true가 출력되므로 exam.total와 exam1.total은 같은 도구를 사용해서 메모리적으로 효율적이다.
</script>
2) JS ES5 Prototype의 개념
<script>
// -------- prototype의 개념 이해 ------------------
프로토타입 : 정의되지 않은 것들을 새로 정의해주면, 그것을 계속 이용할 수 있다.
function Exam(){
this.kor = kor || 0;
this.eng = eng || 0;
this.math = math || 0;
// this.total = function(){
// return this.kor+this.eng+this.math;
// }
}
var examProtoType = { // 이렇게 사용하면, 결과는 같지만 메모리 효율 측면에서는 매우 다르다.
total : function(){
return this.kor + this.eng + this.math;
}, // 프로토타입 내부의 함수 여러 개 만들 시, "," 주의!!
avg : function(){
return this.total() / 3.0; // 무조건 this를 사용해야 한다.
}
};
// Exam.prototype.total = examProtoType; // 똑같이 객체이다.
Exam.prototype = examProtoType // 바로 윗줄과 같이 쓰기 위해서 prototype으로 지정하고 물려 받은 것으로 사용하는 것으로 개념이 같다.
// int kor = exams[i].setKor(); 과 같은 개념.
// *** 정의가 되지 않는 환경(자바스크립트)에서 반복되는 업무를 처리할 때, prototype 이용
// 자바스크립트에서 모든 객체는 prototype을 가진다.
var exam = new Exam(); // 위에서 만들어진 protoType을 가져와서
var exam1 = new Exam();
console.log(exam.total);
console.log(exam1.total);
</script>
3) JS ES5 Prototype 개념과 사용법
- Prototype 개념
- 자바스크립트에서는 만들면서 정의하기 때문에 반복해서 코드를 만들어야한다.(자바스크립트에서는 무조건 메모리 문제가 발생한다.)
- 자바스크립트는 모든 객체의 공유할 정보를 가지고 있는 것이다. Prototype를 사용하면, 상속아닌 상속의 효과를 가지고 있다.
- 하지만, 회귀함수가 아니다. 이지산?
<script>
var ar = [];
ar.total = function(){
return 40;
}
console.log (ar.total());
var ar1 = [];
console.log (ar1.total());
</script>
- Prototype의 문제점 및 특이점
- 우리는 생성자에서 만들어진 함수를 이용할 때, 프로토타입을 계속 만들어줘야 한다. 너무 반복적인 일을 해야 한다.
- 프토토타입은 생성자가 될 수 있는 애한테만 존재한다.(함수로서 사용할 수 있는 경우에만 존재)**
<script>
var ar = [];
// Array.prototype = { // 이렇게 만들면, 안 된다.
// }
// ********** 중요
// Array가 여기서 생성자이다. 생성자로부터 prototype이 만들어짐.
Array.prototype.total = function(){ // 즉, ar는 배열이라서 prototype이 없다.
// ar을 프토토타입으로 사용하기 위해서는 부모 객체(Array)에서 상속 받아서 사용한다.
return 40; // 프로토 타입은 함수로서 사용할 수 있는 경우에만 존재
} // 위에서 Exam은 함수로 만들수 있어서 prototype이 존재하는 것이였다.(그래서 key, value 형태인 object 형식으로도 선언 가능)
console.log (ar.total());
var ar1 = [];
console.log (ar1.total());
</script>
- 프로토 타입의 다른 특징 : 모든 생성자는 자기 생성자를 알고 있다.
<script>
console.log(ar.constructor);
console.log(ar.constructor === Array); // true
console.log(typeof ar.constructor); // function
console.log(typeof Array); // function
Array.prototype.total = function(){ // (1)
return 40;
}
ar.constructor.prototype.avg = function(){ // (2)
console.log("평균"); // (1), (2)는 같은 개념이다.
}
console.log(ar.constructor);
console.log(Array);
console.log(ar.constructor.prototype.avg);
console.log(Array.prototype.total);
console.log(ar.constructor === Array); // true
console.log(typeof ar.constructor); // function
console.log(typeof Array); // function
// ****** ex) .avg라고 묶여서 prototype은 객체라서 생성자를 확인할 수 있다.
console.log(Array.prototype); // 따라서, prototype은 객체가 맞다..(앞에서 중괄호로도 묶였다.)
// 상속 개념...
console.log(ar.constructor.prototype.constructor.prototype); // 따라서, 모든 객체는 prototype이 될 수 있다.
</script>
- 자기 객체(Object.create()) 란?
- JS : 함수가 생성자 역할도 하게되면서 캡슐화가 되는 느낌이 되면서 객체지향스럽게 바뀌었다.(은닉성을 불가능!!) -> ES6에서는 개선됨
<script>
// 자기 객체: Object.create() 이용!!
// - 프로토타입을 갖는 자식 객체가 만들어진다.(아무 속성이 없는 자식 객체)
function Exam(kor, eng, math){
this.kor = kor || 0;
this.eng = eng || 0;
this.math = math || 0;
}
Exam.prototype.total = function(){
return this.kor+this.eng+this.math;
}
var exam = new Exam();
// 원래 prototype을 만들기 위해서는 .prototype으로 만들어줘서 길어지는데 이렇게 1줄로도 가능하다.
var exam2 = Object.create(exam); // 생성자가 정해지지 않은 형태이다. 1회성으로 자식 객체를 생성.
console.log(exam);
console.log(exam2);
</script>
3. 브라우저 플랫폼
1) 브라우저 플랫폼
- 크롬 OS, 크롬 북
- 타이젠
2) JS의 브라우저 플랫폼
- JS의 프론트단: DOM, BOM, CSSOM
- JS의 서버단: node.js
3) window의 api 사용법
<script>
//window.open(); // 요즘에는 모바일 때문에 잘 안 쓴다.(원래는 팝업차단창이 뜬다.)
window.alert("hi") // 문서에 있는 문서창으로 사용한다.
window.location.href("https://www.newlecture.com"); // 브라우저가 시작하자마자 해당 url을 home으로 인식
window.location.port;
</script>
4) window document 이용(DOM 강의로 듣기 )
-
node의 개념 : 나뭇가지 마디, 마디를 node라고 부른다.
-
cross-site 요청 : front-end 에서도 서버를 요청해서 그것을 back-end 서버에게도 요청하는 것
5) 자바스크립트
-
Window api를 자바스크립트가 직접 사용하지 못해서 web 플랫폼에서 사용해서 개발을 한다.
-
UI로 window를 경계로 다른 세상을 만들어 간다.
- node를 사용하는 것이 node.js
- 그래픽을 이용하는 것이 canvas js
6) 게임 만들기
-
메타버스 느낌으로 만들기?(캐릭터가 움직여서 쇼핑도하고 대화도 하는 것)
-
아이디어 생각해서 이야기하기!!
-
사람이 생각하는 순서대로 게임을 생각하기 : 글로 쓰기
7) OOA(객체 분석)**
- 사람이 생각하는 순서대로 게임을 시나리오 생각하기 : 글로 쓰기
4. 게임 만드는 과정 : 22.12.30
-
이벤트 : load가 되면, click할 때, keydown할 떄가 모두 객체 지향이다.
-
먼저, 객체에 역할을 부여한다. 그리고 나서, 개체와 객체를 분석하고 의미를 부여한다.
-
게임 개발에서 너무 벡터를 많이 사용하고 있으면, 문제가 많다.
-
우리는 게임을 최대한 현실과 이질감이 없게 만들기!!
-
게임 개발은 이정도면 되나? 아직 감이 없어서…부터 시작한다!!
-
topdown 방식은 어려워서 bottom up 기준으로 만들자
1) 게임 회의 정리
-
맵은 같고 난이도 올리는 방식
-
단서 찾는 것은 순서 있게 찾게 만들거나 임의적으로 아무렇게 하는 방식
-
최대한 간단한 것부터 구현하고 계속 덧붙여라
-
탈출 게임 찾기(+시나리오)
-
예전 모바일 탈출 게임 형식
-
방에서 나가는 것부터 해서 점점 못나가는 방식으로 구현
-
3명씩 쪼개서 일하기? 스테이지별?
-
스토리, 단서 및 열쇠 찾는 과정은 최대한 가져오기(이스케이프룸 보드게임)
2) 자바 스크립트의 역사
-
노출되어 있는 데이터 기반(크롤링), 문서 자체 데이터가 기동, 화면과 분리되는 XML
-
역사적으로 html 4를 버리고 멀티미디어를 웹에 포함시키면서 개발되었다.
-
애플은 html을 지원하지 않는다?
3) 자바 스크립트를 위한 입/출력 객체
- 자바스크립트에서 이용하는 내용과 웹에서 이용하는 내용을 동기화시켜야 한다.
- 이처럼 JS와 WEB을 동기화 시키기 위해서 자바스크립트에서는 DOM을 이용한다.
4. Canvas JS 개념 : 22.12.30
0) Canvas JS를 사용하기 위한 무료 리소스 가져오는 법
- 구글에서 “game sprite” 이나 “OpenGameArt” 검색해서 소스가 져오기
- “OpenGameArt” 사이트 이용법 아무거나 클릭해서 왼쪽 탭에서 “2d enemies” 등등 찾기
1) Canvas에 기본 도형 그리기
- main.html
<!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>
<script src="./app.js"></script>
<!-- 문서가 다 읽혀지고 읽어지는 방법 : html, js에서 해결 가능 -->
<!-- ./app.js는 현재 디렉토리에서 찾는 것이다.
/app.js는 root에서 찾는 것이다.
../app.js는 위의 위의 디렉토리에서 찾는 것이다. -->
</head>
<body>
<!-- 주의사항 : css를 키우면 배율이 커진다. 그래서 속성을 키워야 한다. 즉, canvas를 키워야 한다. -->
<canvas class="game-canvas" width="500" height="400"></canvas>
</body>
</html>
- app.js
window.addEventListener("load", function(){
// 이것을 붙여줘야지 canvas 자동완성 한다.
/** @type {CanvasRenderingContext2D} */
var canvas = document.querySelector(".game-canvas");
// document.querySelector는 css에서 style을 부여할 때, 이름을 명시해줄때, id명을 주거나 태그를 줄 수 있다.
// .를 안붙이면 그 자체로 태그명을 찾는다. .를 붙이면, .game-vas의 클래스명을 찾는다.
// #을 붙이면 html의 id를 찾는다.
// #를 안붙이면, id를 못 찾는다.
// 있으면 주는 것이고 없으면 안 준다.
// this가 window라서 생략가능하다.
var ctx = canvas.getContext('2d'); // 처음에 왜 안 읽혀졌지?
ctx.fillRect(10,10,50,50); // 사각형 색깔 채우기
ctx.strokeStyle(20,10,150,200); // 사각형 틀 그리기
// 구글에서 "game sprite" 이나 "OpenGameArt" 검색해서 소스가 져오기
// 전체이미지를 일부분만 따서 가져와야한다. 따라서, img 자르는 API를 배우자!!
// "OpenGameArt" 사이트 이용법 아무거나 클릭해서 왼쪽 탭에서 2d enemies 등등 찾기
});
2) 이미지 표시하기
window.addEventListener("load", function(){
// 이것을 붙여줘야지 canvas의 메서드가 자동완성 한다.
/** @type {CanvasRenderingContext2D} */
var canvas = document.querySelector(".game-canvas");
// document.querySelector는 css에서 style을 부여할 때, 이름을 명시해줄때, id명을 주거나 태그를 줄 수 있다.
var ctx = canvas.getContext('2d'); // 처음에 왜 안 읽혀졌지?
//var img = document.createElement('image'); // 이런 방식도 가능하다!!
var img = new Image(); // image 객체 만들기
img.src = './image/boy.jpg'; // image를 해당 경로로 가져오기
img.addEventListener("load", function(){
ctx.drawImage(img,300,300); // 바로 실행하기!
});
});
<!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>
<script src="./app.js"></script>
</head>
<body>
<!-- 주의사항 : css를 키우면 배율이 커진다. 그래서 속성을 키워야 한다. 즉, canvas를 키워야 한다. -->
<canvas class="game-canvas" width="500" height="400"></canvas>
</body>
</html>
- 현재 이 상태는 일부분이 잘리므로 전체이미지를 일부분만 따서 가져와야한다. 따라서, image 자르는 API를 배우자!!