1. 객체 지향 프로그래밍 (Object-Oriented Programming, OOP)
배운 내용
-
OOP가 나오기 이전 시대의 절차지향 언어 (ex. C언어)로도 현실을 반영할 수 있었음
절차지향 언어의 최대기술은 함수였으나, 함수만으로 현실을 반영하려면 수많은 코드중복이 발생 ㅠㅠ -
객체지향 언어는 현실의 사물을 반영할 때,
'상태는 변수로, 동작이나 상태의 변경은 함수로 표현'하되, 이 둘의 조합이 곧 사물임을 깨닫게 된 상황에서 탄생된 언어 -
신기술이 아니라 현실을 반영하는 방법을 바꾼 것 뿐 (각성)
-2015에 발표된 ES6부터 지원하는 클래스는 우리가 알고있는 Java언어와는 100% 일치하지 않음 -
코드 재사용성, 유지보수, 협업 면에서 객체지향 언어가 유리함
클래스(Class): 객체를 대량으로 생성할 수 있도록 설계도를 정의한 틀
모든 클래스 안에는 본질적으로 단 2가지 작성
변수: 속성(상태)와 함수: 메서드(동작)
(파일명과 클래스명 동일하게 해주기 - Java 권장)
인스턴스 (Instance): 클래스(틀)로부터 만들어진 실제 객체
생성자 (Constructor): 클래스로부터 생성시킬 사물들을 어떤 스타일로 생성할 지 결정하는 초기화 함수
(클래스가 보유한 변수는 반드시 생성자라 불리는 함수 내에 작성
클래스가 보유한 변수 앞에는this를 명시해야함)
메서드 (Method): 객체지향 언어에서 객체가 보유한 함수는 메서드라 불러야 함
해당 객체의 상태나 움직임에 대한 방식(method)을 결정하기때문
(클래스 안으로 들어가면서 function 키워드 삭제. 함수x 메서드o)
- 클래스 안에 선언된 변수는
속성(Property): 사물의 상태 표현 - 클래스 안에 정의된 함수는
메서드(Method): 사물의 동작 표현, 상태 값 변화방식 제공 - new 연산자는 틀에 쇳물붓기
- new 연산자 뒤의 ( )는 생성자(constructor) 호출
- '.'은 소유권 표현
당구공 예제로 보는 클래스의 활용
Ball 클래스
class Ball{
//이 공이 태어날 때 부여하고 싶은 특징들을 여기서 결정 (생성자)
constructor(container, x, y, width, height, velX, velY, bg){
this.container=container; // 이 공을 어디에 붙일지 결정
this.div=document.createElement("div");
this.x=x;
this.y=y;
this.width=width
this.height=height;
this.velX=velX; //x축으로의 속도
this.velY=velY; //y축으로의 속도
this.bg=bg; //공의 색상
//style
this.div.style.position="absolute";
this.div.style.left=this.x+"px";
this.div.style.top=this.y+"px";
this.div.style.width=this.width+"px"
this.div.style.height=this.height+"px";
this.div.style.background=this.bg;
this.div.style.borderRadius=50+"%"
this.container.appendChild(this.div);
//넘겨받을 대상 컨테이너가 document.body일 수도 있고
//wrapper일 수도 있다. 결정되어있지 않음. 개발자가 호출 시 결정해야함
}
//현재 이 공의 움직임을 정의
move(){
this.x+=this.velX;
this.y+=this.velY; //지정한 속도만큼씩 누적
//각 4면을 만날 때마다, 적절하게 velX, velY를
//양수로 부여할지, 음수로 부여할지만 결정하면
//방향바꾸기 가능
if(this.y<=0 || this.y>=(600-this.height)){this.velY=-this.velY;} //위 또는 아래쪽 경계에 도달하면 부호바꾸기
if(this.x<=0 || this.x>=(600-this.width)){this.velX=-this.velX;}
this.div.style.left=this.x+"px";
this.div.style.top=this.y+"px";
}
}클래스 호출은 ↓ 이렇게
<script src="../js/Ball.js"></script>당구공.html
<style>
#wrapper{
width: 600px;
height: 600px;
border: 4px solid black;
margin: auto;
background-color: green;
position: relative;
overflow: hidden;
}
</style>
<script src="../js/Ball.js"></script>
<script>
let ballArray=[]; //다량의 공을 담게될 배열
let colorArray=["red","blue","navy","green","orange","yellow"];
function gameLoop(){
// 배열에 들어있는 모든 공을 대상으로 move()메서드 호출 예정
for(let i=0; i<ballArray.length; i++){
ballArray[i].move();
}
}
function fire(){ // Ball 틀(클래스)으로부터 객체(인스턴스)를 생성하자
let wrapper=document.getElementById("wrapper"); //매개변수 너무 길어져서 뺌
//다른 각도로 랜덤하게 움직이게하기
let x=parseInt(Math.random()*11);
let y=parseInt(Math.random()*11);
//공 색깔 다양하게
let c=parseInt(Math.random()*colorArray.length);
//인스턴스 생성
let ball=new Ball(wrapper,100,200,40,40,x,y,colorArray[c]);
ballArray.push(ball);
}
addEventListener("load",function(){
//키보드 이벤트 구현
//사용자가 이벤트를 일으키면, 해당 이벤트 정보 객체인 이벤트 객체가 생성되어
// addEventListener 메서드의 두번째 매개변수로 전달이 됨
// 개발자가 매개변수 받을지 말지는 자유
addEventListener("keydown", function(e){
if(e.keyCode==32){ //스페이스바
fire(); //발사!
}
});
setInterval(gameLoop,10);
});
</script>
<body>
<div id="wrapper"></div>
</body>-
랜덤 값 뽑을 때
parseInt(Math.random()*(MAX+1)) -
속성을 각각 다르게 주고싶으면
매개변수를 써라 -
등속도운동: 속도가 일정한 운동. 속도가 일정한 경우에는 동일한 방향, 동일한 속력으로 운동this.velX=velX; //x축으로의 속도 this.x+=this.velX; // (this.x=this.x+this.velX)중요한 부분
-
색을 랜덤으로 정의하고 싶을 때 (랜덤+배열)
let colorArray=["red","blue","navy","green","orange","yellow"];
//한 줄 버전 (직접 인덱스 계산)
let color = colorArray[parseInt(Math.random() * colorArray.length)];
//두 줄 버전 (인덱스를 변수에 담음)
let c = parseInt(Math.random() * colorArray.length);
let color = colorArray[c]; | 항목 | 한 줄 버전 | 두 줄 버전 |
|---|---|---|
| 기능 | 동일 | 동일 |
| 가독성 | 조금 더 짧고 간결하지만 인덱스가 숨겨짐 | 명시적으로 인덱스가 보여서 더 명확함 |
| 디버깅 용이성 | 디버깅 시 인덱스 값을 직접 보기는 어려움 | 인덱스를 변수로 확인 가능 |
| 선호도 | 간단한 경우 선호됨 | 복잡한 로직이 있을 땐 두 줄이 유리 |
- 클래스로부터 생성된 각 인스턴스(객체)의 메서드를 호출
let ballArray=[]; //다량의 공을 담게될 배열
for(let i=0; i<ballArray.length; i++){
ballArray[i].move();
} 배열에 들어있는 모든 공을 대상으로 move()메서드 호출
(배열에 담긴 모든 공을 움직인다)
2. 자바스크립트 함수 3가지 방식의 특징
배운 내용
let init=function(){...}함수 표현식 (함수를 변수에 할당하는 방식)funtion init(){...}함수 선언문let init=()=>{...}화살표 함수
★ 화살표 함수 내에서의this는 상위스코프(영역) 객체를 가리킴 ★
| 함수 종류 | 목적 및 특징 | 언제 사용하면 좋을까? |
|---|---|---|
| 함수 선언문 | 전통적인 방식, 이름이 반드시 있고 호이스팅 O | 전역에서 먼저 정의한 후, 어디서든 호출하고 싶을 때 |
| 함수 표현식 | 함수를 변수처럼 저장, 호이스팅 X | 조건에 따라 함수 생성하거나, 콜백으로 넘길 때 |
| 화살표 함수 | 짧은 문법, this가 바깥 스코프 | 간결하게 작성하고 싶을 때, 특히 콜백 함수, 배열 메서드 안에서 |
참고)
호이스팅: 자바스크립트는 코드를 실행하기 전에 함수 선언과 변수 선언을 위로 끌어올려서 먼저 준비
이퀄라이저 effect 예제 中
(랜덤함수, 화살표 함수, 감속도 공식)
setTimeout(()=>{ //화살표함수
this.move();
},10);
//setTimeout("this.move()"); 안먹힘"this.move()"는 문자열이기 때문에, 이 문자열이 실행될 때 this가 의도한 객체를 가리키지 않게 되어 오류가 발생
화살표 함수는 this를 상위 스코프에서 자동으로 바인딩
→화살표 함수 사용하기
이퀄라이저 예제는 내일 보충해서 보기....
(막대길이의 자동+랜덤호출 부분)
3. Oracle - 제약 조건 중 PRIMARY KEY
배운 내용
-
제약 조건에는
NOT NULL,UNIQUE,DEFAULT,CHECK,FOREIGN KEYPRIMARY KEY있음 -
★
UNIQUE+NOT NULL=PRIMARY KEY★ -
UNIQUE는 중복을 허용하지 않는 장치이긴 하지만, NULL을 허용할 때도 있음 (무결성 보장X)
→ 테이블에 입력된 데이터들 간 구분을 위한 숫자형 컬럼을 추가할 때는 UNIQUE + NOT NULL을 합친 PRIMARY KEY를 부여해야 안전
PRIMARY KEY는 무조건 만들어라! (유일성 확보)
CREATE TABLE MEMBER3(
ID NUMBER PRIMARY KEY,
EMAIL VARCHAR2(30),
REGDATE DATE DEFAULT SYSDATE,
USERID VARCHAR2(20));PRIMARY KEY 값은 유일해야하므로, 시스템이 알아서 증가시켜가며 스스로 넣도록 맡겨야함
→ 오직 숫자값만을 증가시켜주는 객체인 SEQUENCE 이용
CONN SYSTEM/비밀번호
GRANT CREATE SEQUENCE TO JS;▲ 그 전에 JS(내가 접속한 계정)에게 시퀀스 만들 권한 부여
CONN JS/비밀번호
--다시 계정 전환
CREATE SEQUENCE SEQ_MEMBER3
--생성할 시퀀스의 이름
START WITH 1;
--시퀀스가 1부터 시작
INCREMENT BY 1
--1씩 증가하는 숫자를 생성▲ 시퀀스 객체를 생성하는 명령
INSERT INTO MEMBER3(ID, USERID, EMAIL)
VALUES(SEQ_MEMBER3.NEXTVAL, 'KING','DAUM');▲ 시퀀스 사용방법
SEQ_MEMBER3.NEXTVAL : 시퀀스에서 다음 숫자값을 가져옴
추가로 알게된 것들
-
이미 SQLPLUS에 접속을 한 상태에서 다른계정으로 전환할 때 SQLPLUS 호출X 접속 전환 명령어는
CONNECT또는CONN -
PRIMARY KEY를 쓰면 그 컬럼에 대해 UNIQUE와 NOT NULL을 따로 쓸 필요는 없지만,
다른 컬럼이나 상황에서는 여전히 UNIQUE나 NOT NULL 제약이 필요할 수 있음
느낀 점
오늘 아침에 '노마드 코더'의 객체지향 개념정리를 들으면서 교육장으로 향했는데, 마침 오늘부터 객체지향에 대한 내용을 배우게되었다. 수박 겉핥기식이었지만 객체지향에 관한 큰 개념을 미리 살펴보고 수업에 참여하니, 개념들이 조금이나마 친숙하게 다가와서 수업이 꽤나 흥미로웠다. 교육을 들으면서 늘 나만 모르는 것 같고, 전공자들에 비해 뒤쳐지는 느낌만 받아왔다가 아는 내용이 나오니 '오늘은 나도 안다!'의 마인드로 자신감이 조금 상승했던 것 같다 ㅋㅋ 객체지향은 정말 중요한 개념이라고 모두가 입모아 강조하던데. 정신 바짝차리고 열심히 따라가야지
