추상화 

1. 네모,세모,원,선을 만들다 보니 동일한 서비스들이 있다→ 동일한 기능을 일괄적으로 관리하기위해 추상화된 자료형 도형을 만들다.

2. 성적관리프로그램을 만들다→ 성적관리프로그램을 기반으로 만들어지는 제품을 위해 (다음에도 계속 사용하기위해)→ 공통분모화,추상화를하다.

DI (조립)

1. Constructor (생성자 종속성 조립)

2. Setter DI

• 추상클래스는 추상메소드를 가지고 있다.
• protected : 자식만 구현하도록 추상부모클래스에서 메소드에 제한거는것. 자식에게만 공
•                같은 패키지 내에서, 그리고 다른 패키지의 자손 클래스에서 접근 가능
• 부모의 private 멤버변수는 자식에게도 안보인다.
• 클래스가 상속할 (자식을 낳을) 준비가 되지않았다면 , 재사용하기 불가능할 수 있다.
• 객체가 YBMExam일때 출력도구도 달라져야한다. 
• YBMExam전용 콘솔도구를 만들어야한다. 그때 ExamConsole이 재사용할 준비가 안되었다면 자식이 재사용할수 없게된다.

고쳐쓰는 방법 1 : 추상화 

사용자를 위한  껍데기부분을 만들때 상속이 많아지는 문제가 발생한다.

Exam class에 abstract를 지우고 시작.

출력을 위한 ExamConsole class{ }를 만들고 Exam class에 getter, setter를 추가한다.

Exam은 아직 객체를 갖지않았다.

객체를 갖는방벙 2가지

1. 객체를 자기가 만들거나

2. 남이 객체를 만들어서 넘겨주는것

ExamConsole console = new ExamConsole(exam);

ExamConsole 은 exam없이는 살 수없다.

exam을 생성할때 한번 꽂으면 더이상 다른 exam으로 대체할 수 없다.

Constructor DI : Dependency(종속성) Injection(주입) 생성자 종속성 주입

부품을 껴넣다.

AssoAssociation Has A 관계를 Injection하는것 => DI라고 한다.

ExamConsole은 exam을 분리형태로 부품으로 쓴다. 조립형

console.setExam(exam); 

언제든지 다른 객체로 바꿀 수 있다.

다양한 객체를 부품으로 사용한다.

Dependency: 재료가 되는 객체를 말한다. (has a)

exam은 ExamConsole이 자기 부품으로 쓰는것

Random은 함수를 일시적으로 쓰는것.

필드를 사용하는 초기화하는 생성자

마우스오른쪽 -> source -> Generate constructor using fields

ExamConsole()와 ExamConsole(Exam exam) 생성자 공존 할 수없다.

Exam exam은 null이고

객체를 꽂을 수 있는 방법은 ExamConsole(Exam exam) 를 통해서만 가능하다.

ExamConsole()를 지우면 사용자는 ExamConsole(Exam exam)을 통해서만 객체를 생성할 수있다.

(기본생성자를 지우면 exam을 넣어야하는상황이된다)

ExamConsole()를 가능하게 한다면 

생성할때 exam을 껴놓는 이유  ?  (exma)

exam을 생성자를 통해서만 만들게 했을까 ?

ExamConsole의 모든기능은 exam없이는 사용할 수없다.

e.g 스캐너도 기본생성자가없다. 입력스트림객체를 넣어줘야한다. 꽂지않으면 오류발생

객체를 넘겨줘야만 사용할 수 있다.

ExamConsole은 exam없이 독단적으로 사용가능?

사용할 수 없다.

ExamConsole은 반드시 생성하자 마자 exam을 갖고있어야 한다.

만약 누군가가 기본생성자를 호출한다면 내가 만들어주는것으로

public ExameConsole(){ exam = new Exam(); }

기본생성자를 저렇게만들면 밖에서 ()으로만으로도 할수있음

만들기나름,기획하기나름,선택가능

Setter를 통해 객체전달

 public abstract int total();

total은 국,영,수뿐만 아니라 다른과목도 추가할 수 있어야한다.

국,영,수 합계를 자식이 직접계산할 필요는 없다. YBM ,다른고등학교에서는 과목이 달라질것이므로 고쳐쓸 수 있게한다.

상속을 통해 고쳐쓴다.

protected 

baseTotal()이 public이면 상속받는 자식에게만 구현하도록 만든 서비스이다.

자식에게만 보이게하는 키워드

내가 공통분모고 abstact, 자식만 구현하록하고싶을때 사용 

고쳐쓰는방법 2 : 인터페이스

객체를 YBMExam으로 바꿨는데, 여전히 국,영,수만 출력이된다.

기존코드를 고치는 방법에 대해 ..

콘솔: 사용자에게 출력하는코드

exam은 자식을 계속 낳을 수 있다.

examConsole은 어떤객체(어떤자식)이꽂아질지모른다.

프린트가 부모영역으로만 한정된출력을가지고 있다.

달라져야한다 프린트의 기능이 객체종류에 따라 달라질 필요가 있다

저안에 들어갈 국영수외에 확장될부분을 너가 책임져줘.

단 구현해놔. 구현하지않으면 안하는거고~

자바는 함수만 꽂는건불가능 클래스안에 넣어야한닫.

onPrint를 구현해줘

누군가가 함수를 구현해서 객체를 넣어주기만 하면 ExamConsole을 재사용할 수있다.

public interface PrintListener 

함수에대한 약속만 나열한것 (구현x)

기본데이터객체 : boolean, number, string, undefined

배열 : 공간을 미리정하지 않아도 알아서 만들어준다. 공간을 줄였다 붙였다 할 수 있다.

• var nums = new Array();
• var nums = new Array(5); // 숫자가하나면 5개의 빈공간만들어짐(참조변수 5개만든것)
• var nums = new Array(5,10,21); //  2개이상값은 배열의 초기화값으로됨. 3개짜리방에 1번째 5, 2번째 10, 3번째 21
• var nums = new Array(5,10,21,"hello"); 다양한 형식넣을 수 있음
• var nums = new Array(5,10,21,"hello", new Array(2,3,4));  alert(nums[4][1]) // 3

new Array(5) 공간생성, 비어있는 공간 5개 만들어짐

new Array(5,10); 배열의 초기화, 0번인덱스에 5, 1번인덱스에 10이 들어간다.

new Array(5, 10, "hello", new Array(2,3,4)); 배열을 담는 배열

배열속 배열의 1번 인덱스출력

자료구조

FIFO구조 : Queue 구조 선입선출

LIFO구조 : Stack 구조 후입선출

push(); 배열에 숫자 넣음 

pop(); 배열에서 마지막에넣은 숫자를 뺀다

shift() 앞에서부터 빼기 (큐)

문서가 고정되어있지않고 달라져야한다면 ?

요구되는 시점에 문서를 만들어야하는 경우가 생긴다.

동적인문서가 서버쪽에있다가 클라이언트쪽으로 갈것이다.

웹서버 톰캣이 사용자요청을 받는다.

톰캣이 정적인 static문서(홈디렉토리에있는 문서)와 동적인 dynamic문서(프로그램)를 받는다.

톰캣이 로드할 수 있는 컨테이너가있고, 프로그램을 실행하게한다. 실행환경 WAS(web application server)

톰캣은 웹서버보다 WAS의 기능이 중요하다.

아파치웹서버는 확장성을 가지고있어서 PHP,닷넷등 다양한 애플리케이션을 묶어서 구현할때 유용

자바만으로 개발할때는 톰캣으로 충분

홈디렉토리는 정적인문서를 서비스하기위해 웹서버가 갖게되는 디렉토리

WAS가 사용하게될 동적인 문서를 만들 서브프로그램 만들기

이클립스로 만들 수 있지만, 메모장으로도 가능하다.

메모장작성->WAS가 함수호출, 객체를 참조

(WAS : 어플리케이션이 동작할 수 있도록 도와줌)

사용자에게 돌려주는 내용은 없지만 사용자가 요청을하면 톰캣이 로드를해서 실행해줄 수 있다는것을 검증해보자

사용자요청이오면 서버쪽 콘솔에 "hello Servlet"이 뜨게된다.

톰캣이 내것은 실행 해 줄 수있느냐가 중요->사용자에게 출력하는 방법 배울예정

클래스명은 자유롭게 만들 수있다. Nana

톰캣이 Nana클래스를 실행 해 줄 수있다.

실행할 수있는 요건

1. 내가 만든 클래스를 참조할 수 있어야한다

2. 톰캣과 내가만든 클래스를 이어주는 참조형이 있어야한다(HttpServlet)

->톰캣은 약속되어있는 함수를 호출한다.

그 함수(서비스)를 우리는 구현하지않아도 된다. 서비스함수를 재정의해서 함수실행을 확인할것이다.

메모장으로 java파일을 만들고 저장 후 cmd창에서 컴파일을 한다. javac Nana.java

다음과 같은 에러가 나타난다. 심볼이없다.

자바가 가진 라이브러리 안에서 HttpServlet을 찾을 수 없기 때문이다.

 servlet-api.jar라이브러리가 필요하다

1. 이 라이브러리를 자바파일이 있는곳에 두던지

2. 자바파일의 디렉토리를 지정해야한다.

자바컴파일러는 외부라이브러리를 추가할 수 있는 설정이있다.

같은 오류가 발생했다. 톰캣의 10버전의 문제였다. 톰캣9을 다시 받는다.

9버전의 경로를 복사하고 9버전에있는 servlet-api.jar로 경로를 바꾸고 컴파일한다. 

dir로 class파일 생성여부를 확인한다.

Nana.class 컴파일된 코드를 실행할때는 일반적인 콘솔어플리케이션처럼 실행하지않고 웹어플리케이션이니까 톰캣에 의해서 실행되게해야한다. 

클라이언트가 브라우저창에 url로 이름을 명령 ->서버쪽에서는 요구를 인식하고 실행하게해준다.

패키지명을 추가하고 다시번역해준다.

일반적인 정적인 문서의 경우 ROOT에 넣으면된다. 프로그램파일은 web-inf에 넣어야한다.

web-int \ classes \ com \ newlecture\ web 프로그램배포하는작업

내가직접실행하는게아니라 원격의 사용자가 실행을 요청(url주소를통해)

만들고 배포라는작업

톰캣한테 내가만든클래스 객체화되도록요청해야한다

xml 파일을 비주얼스투디오로 연다.

사용자가 url로 요청하면 na라는 변수를 가진 servlet을 실행시킨다. 

실제로 /min이라는 파일이있지않다. 요청을 받는 웹서버는 /min파일을 찾아보고 없으면 WAS에게 넘기면

맵핑정보를 찾아서 /min에 해당하는 서블릿코드를 실행한다.

• <servlet-class>패키지명+클래스이름
• 첫번째 <servlet> 메모리에 올림
• 두번째 <servlet-mapping> url매핑 :na라는 이름을 갖는 서블릿을 /min이라는 요청이오면 실행

브라우저에 설정한 /min을 넣으면 cmd창에 hello Servlet이 뜬다.

web.xml 이란 ?

• Web Application의 Deployment Descriptor(환경파일 : 배포서술자, DD파일)로서 XML 형식의 파일
• 모든 Web application은 반드시 하나의 web.xm l파일을 가져야 함
• 위치 : WEB-INF 폴더 아래

서블릿설정

<servlet> : 서블릿 객체 설정

<servlet-name> : 객체의 이름 </servlet-name>

<servlet-class> : 객체를 생성할 클래스 </servlet-class>

</servlet>

웹개발자의 직업군 : Front-end 개발자

문서의 내용을 동적으로 만들거나 사용자 행위에따라 내용을 바꾸는것

DOM : 다큐먼트객체, 모델, 표준

다큐먼트객체화한것 + 스크립트 이용

자바스크립트버전

5.0 , 6.0 둘다 공부한 후 선택적으로 쓸 수 있어야한다.

두 버전의 능력은 같지만 6.0에서는 표현식이 달라졌다.

HTML파일이 로드되어 메모리에 올라 가고 객체가 갖고있는 속성이 사용자 인터페이스에 보인다.

-스크립트언어 : 연산자, 제어구조, 함수구현(절차작성)

-화면출력: 사용자 입출력, 브라우저

->스크립트로 브라우저 기능을 조작

과거에 유효하지않은 값을 넣고 로그인을 누르면 서버에서 서비스를 제공하는데 어려움이 있었다. (e.g 디도스공격)

이것을 해결하기 위해 폼객체가 만들어졌다. 폼태그안에 있는 입력객체만 메모리에 올라감

90년 말 : 문서를 다 바꿀 수 있는 범위로 플랫폼의 확장

Dynamic html -> ajax -> 제이쿼리 -> AI , 빅데이터 순으로 유행이 바뀜.

값이 유효하면 전송해서 불필요한 요청의 처리를 줄였다.

HTML파일에 script를 넣어보자

새로고침을하면 화면에 입력한 값이 나온다.

태그내역에 변화주기

input 태그에 id명과 value값을 넣고

script에서 이를 수정하면 수정한 내역이 반영된다.

태그들을 객체화해서 이용한다.

원하는대로 바꿔 쓸 수 있다.

자바스크립트의 특징

자바스크립트 : 인터프리터언어. 컴파일러가 없고 소스코드가 그대로 전달된다. 그때그때 번역기를 돌려서 실행한다.

자료형이 구체적이지 않다.

모든변수가 참조형식이다.

자바에서의 변수선언이란 공간을 마련하는 것이지만,

자바스크립트는 기본형식이 없고 기본래퍼타입만 있다.

100%참조형식이다.

변수들은 내부적으로 4바이트만 마련한다. 정수객체, 실수객체, 문자객체, 문자열객체이다.

변수는 공간이 아니다. var x =3 ; 3스스로가 공간을 확보한다.

실행중에 오류를 만나야만 알 수 있다.

값을 대입안했을 경우 ? undefined 

변수중 객체를 할당하지않은 변수는 undefined라는 객체를 갖는다.

아직 객체를 참조한적 없는 변수를 의미

변수에 값을 대입하기 전과 후의 차이

x =3를 대입하기 전에는 undefined로 출력이되고 , 대입 후에는 대입한 값이 나온다.

undefined인지 아닌지 확인하려면 ""없이 입력

출력함수  console.log(typeof x);

자바에서의 System.out.print()와 비슷

배열 객체

공간을 미리 만들 필요 없다.

자바 : 컬렉션

자바스크립트 : 컬렉션화된 배열

데이터를 가변적으로 담을 수 있다.

초기값비교

undefined자체가 값이다. ""쓰지말것

x == undefined

클라이언트 프로그램을 CS로 만들때의 문제점 :

1. 설치작업의 부담

2. 고객불만

3. 안정성문제

웹기반의 클라이언트 / 서버프로그램

1. 클라이언트 : 프로그램을 설치할 필요가 없어진다.

2. 데이터전달이 아니라 문서를 주면된다.

   코드를 실행해서  실행결과를 돌려주는것

동적인 문서(코드) 

브라우저 + 웹서버 + 실행환경이 필요하다.

Servlet 이란 ? 

서블릿(servlet)은 서버에서 웹페이지 등을 동적으로 생성하거나 데이터 처리를 수행하기 위해 자바로 작성된 프로그램이다. 

웹서버 실행

static문서 서비스

톰캣을 실행해서 사용자에게 서비스해봤다.

Nana.txt파일은 정적인문서이다. 항상 같은 문서를 서비스해보자.

Tomcat : 웹서버

apache.org 접속 - tomcat - 10.0.4버전 - 압축버전

압축풀기 - \apache-tomcat-10.0.4 - bin - startup.bat 실행

웹브라우저에 localhost:8080치면 서버에서 제공한 내용이 뜬다.

IP

공인IP :전세계에서 유일한 식별 ip

사설IP : 지역적으로 사용

Summary

• 추상클래스 : 공통클래스
• abstract라는 키워드로 객체화를 못하게하고, 메소드가 재정의 되도록 할 수 있다.
• abstract 메소드 : 일괄처리를 위해 부모 영역에 둔다. (서비스항목만 공통 / 구현은  공통이 아님)

추상화로 만들어진 클래스의 특징
1. 추상클래스는 뼈대이므로 절대로 실체화 되어서는 안됨.(객체화X)
2. 추상클래스는 뼈대이므로 반드시 재정의 해야하는 메소드가 있다.

객체지향 프로그래밍

캡슐화 : 개체가 하는 서비스함수를 모아둔 것.. ?

캡슐 : 주체, 대상

캡슐의 조립 : has a(조립) / is a (고쳐서 쓰는형태)

Is a 상속

-오버라이드

-생성자 오버로드

-super

-참조형식의 다양화

-동적바인딩(참조형식이 부모일 경우의 상황)

(오버라이드, 주소, 자식객체) 

추상화 

다형성 

추상화

개체(모듈,캡슐)가 3가지 목적으로 사용된다.

1. 큰거를 잘라서사용

2. 공통적이고 반복된 부분을 집중화

3. 잘라낸부분다음에 재사용

추상화 : (캡슐의)공통부분을 잘라내는 것

아우를수있는 추상적인 것

추상화도 is a 상속이다

클래식,자동차,세단,suv 의 공통분모 : 자동차

사람+토끼 : 동물

동물,생물의 공통분모 : 생명체

전투기,적기 : 비행기

*Bottom→ up

고도화작업/리팩토링

*Top→down :

공통적인것 -> 구체적인것 만드는 것

설계가 잘되어 있어야할 때 (바람직한 방법)

 abstract : 실체화되지못하도록 막는작업

Exam은 뼈대일 뿐 객체화되지 않게한다.

YBMExam와 NewlecExam들이 구체화될 것.

Exam클래스에 abstract를 붙이면 객체 생성할 수 없다라고 뜬다.

abstract는 결여된 부분이있기때문에 객체화될 수 없다.

추상클래스: 공통분모지만 객체화해야하는 경우가 있나요 ?

반드시 객체화되지 않아야하는건 아니다. (abstract를 붙이지않는 경우)

e.g. AWT(Abstract Window Toolkit 추상화된클래스)

Frame : 추상클래스

이것만가지고 쓸필요가있다면 쓰라고 마음으로만 추상클래스로 준비

코드로는 abstract를안붙여놓은것도 추상클래스가 될 수 있다.

객체화되지않길원하면 abstract를 붙여 실체화 못하도록 막을 수 있다.

추상클래스를 만들다보면 강요하고싶어질수가있다.

부모참조형식인 이유 ? 

Exam을 한 이유는 일괄관리를 하기위해 , 범용적으로 쓸수있는자료형

네모,세모,원의 공통분모는 도형이다. 도형이라면 자식모두를 참조할 수 있다.

moveBy()기능이 서로 다르게 구현되었더라도 도형에 있어야만 한다. 

부모 Exam에 avg()가 있어야하는 이유 ?

각각다르게구현되더라도 부모에 avg()가있어야한다.

Exam이 avg() 가지고있어야 일괄적으로 자식을 관리할 수 있다.

자식객체만 avg를 갖고있다면 일괄관리가 불가능 (e.g. exam.avg()오류발생)

1. 오버라이드를 해야해서 ? (X)

2. Exam으로 참조하려면 Exam클래스안에 avg()가 있어야한다 (△)

3. 일괄관리를 위해서, 범용적으로 쓸 자료형이 필요하다. 일괄적인 행위를 구현하기위해.

일괄처리를 위해 함수는 두지만 구현은 공통이아니다.

몸통은 상속하는 클래스들이 할것.

추상메소드

추상클래스가 갖고있는 공통기능을 의미

기능은 공통으로 가지고있고, 구현은 공통이 아니다.

서비스 항목만 공통으로 가지고있다.

상속하는애들이 구현 .자식이 구현책임을 갖는다.

자식이 무조건 오버라이드해야함

 abstact 메소의 의미 

추상처리안하면 : 자식은 오류가안나니까 부모것을 그대로 사용할수도있다.

부모: 자식이 반드시 구현하도록 명시화,

자식: 모든자식이 구현하도록만드는 것

avg()메소드의 경우 NewlecExam 객체, YBMExam객체에서 각각 따로 구현되어야한다.

재정의 하지않으면 부모것을 그대로 실행하게되는데, 그럼 의도한 결과가 나오지않는다.

각 객체마다 가지고있는 멤버변수가 달라 구현과정이 다르다.

서버와 클라이언트 :

게임(클라이언트: 사용자의 입/출력) ↔ [서버]

문서를 요청(클라이언트) 하고 읽는 클라이언트 ↔ 문서제공(서버) 웹서버

                                                                 게임/미세먼지/ 날씨/ 문서(프로그램:자바/C/..)

• 서버의 변화 : 농구게임, 시합,미세먼지에대한 요청이올때 마다 문서를 만들게됨->프로그램으로바뀌었다. 요청타임에 사용자에게 돌려준다.
• 서버의 변화 : 게임중인 결과 페이지 3:1 받아서 읽고있다 
• 서버의 변화 :  3:3 ....5:4 똑같은 페이지인데, 새로고침할때마다 달라지고 다시요청하게된다. 
• 똑같은문서인데, 문서를 새로만드는것에 대한 부담  → 점수만줘 ~ 데이터만 제공하는쪽으로 바뀜
• 점수만교체하는 작업: 클라이언트에서 프로그램으로 문서를 살짝바꾸는 코드가 들어간다. 자바스크립트등장
• 서버에서는 데이터만 준다. 문서만드는작업X

페이지를 새로고침하지않는 장점 ?

e.g 싸이월드 : 댓글클릭하면 bgm이 꺼진다. (페이지새로고침)

페이지를 고정시키면서 데이터를 바꿀 수있다는것의 장점이크다.

스크립트언어를 이용해서 화면갱신없이 데이터만 요청하고 데이터만 바꾸는것

서버가 문서를 다 제공해주는것 : 백엔드로만 이루어짐

서버가 문서가아니라 데이터를 제공하고 나머지 문서를 바꾸는것은 클라이언트 : 프론트와 백엔드로 나누어짐.

스타일링 : 방(크기), 가구,가구배치

가구의 종류 : 수평정렬 , 수직정렬

수직정렬은 inline-block이 아니다. static으로 내려가야하기때문에. 밑으로 나열되도록해야한다.

Position

div는 position을 지정하지않으면 기본적으로 static(미리정해진)이 적용된다.

row타입인 수직방향으로 적재된다. 뒤 따르는 태그들이 겹치지않게 끔 수직방향으로 적재된다.

static은 left와 top이 적용안된다.

1. 두번째 div에 position: absolute를 적용하면 ?

• left 와 top을 사용할 수있다.
• 문서좌상단을 기준으로 100,100적용된다.
• 두번째div가 이동하면서 뒤에있던 div4와 div5가 이동했다.
• 너비가 콘텐트너비만큼만 적용.

2. 두번째 div에 width:100%를 적용하면 ?

• 부모의 너비를 그대로 사용
• absolute는 부모로 부터 떨어져나와서 그 여백을 동생이 차지하게된다.

3. 문서좌상단이 기준이고, 스크롤바가 생겨서 올라가면 기준(원점)도 올라가게된다.

4. 보여지는 영역을 기준으로 하고 싶다면 (position : fixed) ?

• 원점을 바꾼다. fixed로 바꾸면 스크롤을 움직여도 화면에서 고정되어 나타난다.
• fixed는 화면에 붙이는것 (화면의 좌상단이 기준)
• 문서가 올라가도 상관없이 보여지는 영역을 기준으로 100,100적용된다.

 5. div2에 position : relative를 적용하면 ?

• 자기위치를 아무도 못쓰게한다.
• relative는 자기위치가 기준이다.
• absolute일떄는 동생이 그위치를 차지했지만, 원래 위치가 보존되어있다.
• 자기공간을 절대 내주지않는다. 자기 안에있는 애들은 자신을 따르게한다.

6. div2에 하위태그를 넣고 div2를 기점으로 위치하고 싶다면 ?  

• div2가 움직이면 같이 따라가도록
• div2를 기점으로 위치하게려면 ?
• absolute ,fixed, relative로는 div2를 원점으로 할 수 없다.
• div 2 : 내 위치를 이제부터 상대적으로 두겠다. 내 안에있는 애들은 다 날따라오게 하겠다
• relative가 옮겨다니면 그 안에있는 애들도 같이 따라 움직이게된다.
• 자식 absolute의 원점이 부모의 relative이다.

7. 부모 div2의 위치를 옮기면 ?

수직목록

수직목록은 인라인블록할 필요 없다.

<a href="">태그의 특징 

• <a href="">태그는 기본적으로 색상이 적용되어있기때문에 감싸고있는 <nav>태그에 폰트색상을 적용하면 안먹힌다.
• 울타리에 하지말고, a태그로 범위를 잡고 적용해야한다. 

현재 페이지에만 반응하도록 클래스명 지정

.aside-main-menu a:hover{ }

마우스를 대면 오렌지마크가 나오게한다.

padding-left가 26이므로 x축도 그의 절반인 12px과 x축 center로 지정

background: url("../images/bg-aside-menu-hsp.png") no-repeat center bottom

정리

1. 부모자식관계에서 자식클래스 객체는 부모클래스형식으로 참조가가능
2. 부모형식으로 참조할경우 : 객체가 자식이면 자식이 갖고있는 오버라이드가 우선이다.
부모형식의 정의된 함수목록으로만 함수호출이 한정된다
3. 벗어나고싶다면 형변환해야한다

캡슐(화):개체->실체,객체,인스턴스

캡슐 함수를 포장 : 메소드(스태틱,인스턴스) -> 차이점 ?

스태틱은 인스턴스를 넘겨받지않는다.

인스턴스메소드는 객체를넘겨받는 메소드다.

인스턴스를통해서 사용. this사용가능

캡슐이 객체지향에서 가장 기본 모듈 단위이다.

캡슐과 캡슐을 엮어서 프로그램을 만든다.

조립관계 : has A 관계 (부모가 부품)

틀로 사용하는 관계 : Is a 관계 (부모가 틀) , 일반적인 상속

->틀에 덧붙이거나 메소드 수정하거나, 사용자에게는 마치 내가 제공하는것처럼 보임,ㅠ 고쳐사용하는 메소드 : 오버라이드

오버로드 메소드: 기존메소드보다 인자를 확장 또는 추가 또는 수정된 메소드

                       (기존메소드에  인자가 추가된, 형식이 다른메소드, 새로운 메소드)

생성자:초기화하는 함수 init()

두가지 초기화조건이있어야 한다

1. 객체가 생성되자 마자 초기화 되어야한다. (new Eaxm(); 수동으로 우리가 객체를 생성하며 호출한것)

2. 한번만 초기화가 되어야한다.

B extends A처럼 두 클래스가 Is A상속관계에 있을때는 생성자가 두 번 호출된다.

New B()에서 A의 기본생성자를 호출하는 방법은 ? super(); //부모객체 ,자식에 의해 만들어진 객체

B extends A처럼 두 클래스가 Is A상속관계에 있을때는 new B()객체를 참조할 수 있는 참조형식은 두가지가 가능하다. 어떤형식인가 ? B와 A (B안에있는 A도 참조할 수 있다)

함수 호출 관계

오버라이드우선

형변환: ((B)a).f6();

• A형을 B형식으로 먼저바꾼 뒤 f6()을 호출해야한다.
• (B)a.f6() 오류 : a.f6(을 호출하고나서 형식을바꿈

문제1 . 오버라이드우선

부모함수가 f3()을 호출했고 객체가 B객체고 오버라이드되었다면 자식의 f3()이 호출된다. 

오버라이드되서 자식의 f3()이호출된다.

문제2 . 무한루프

문제3. 오버라이드함수의 우선권 : F4는 오버라이드되서 먼저 불려와진다.

• 형식이 A이더라도 객체가 B면 B의 메소드를 호출한다.
• 함수호출이 번역이되면 어셈블리어로 바뀐것을 보면 JUMP 주소 으로 바뀐다.

함수가있는 위치의 주소로 맵핑된다. 함수이름이 결국 주소로되서 주소로 가게된다.

함수가 주소가 맵핑될때 , 주소를 결정짓는 과정에서 컴파일러가 A가 자식이 여럿이 있다면 

자식이 B,C 등 있을 수 있는데, 그 동작은 어떻게되는가 ? 

• 어떤것을 기준으로 주소를 바인딩하는가 ?
• A형식에 맞춰서 A안에있는 f3()를 주소로 바인딩한다.
• 함수라는게 호출될떄 함수주소로 번역하는것 : 바인딩 

메소드 동적 바인딩 (함수 호출 위치 결정 방식 이해하기)

C++와 자바의 차이점

NewlecExam을 호출하려면 virtual를 써줘야한다.
virtual를 붙이면 바인딩을 미룬다.
함수의 위치를 객체가 가진다. 객체가 갖고있는 상자를 열어서 점프하게한다.
전달되는 객체에따라 달라진다.

컴파일 : static 바인딩 (virtual 아닌것)
실행 : dynamic 바인딩 
다이나믹바인딩, 동적바인딩 : 컴파일할때 바인딩하지않도록하고 실행할때 (자바는없음)
객체가 가지고오는 주소로가라. 실행되어야만 알 수 있다.

자바는 모든 메소드가 virtual이다.
자바는 모두 동적바인딩

자바의 함수 호출

자바는 동적바인딩만 지원하므로 모든 함수호출이 점프하는곳이 결정을 미룬다.

점프할곳을 어떻게찾는가 ? 
클래스가 만들어지면 점프번지를 기록하는 virtual 테이블이존재. 위치정보를 가지고있음
객체가만들어질때 추가적으로 4바이트씩 더 가진다.
그 4바이트가 자기가 가지는 메소드의 위치를 기록하는곳을 가리킨다. 
객체가전달될때 전달된 객체의 앞머리를통해 그쪽 total()로가게된다.
전달된 내용의 앞머리를 통해 virtual 테이블의 주소로 간다.
전달되는 객체가 뭐냐에따라 달라지게된다. 전달된 객체가 뭐냐에따라서 전달된 객체의 함수로 가게된다.
동적으로 실행해봐야 아는, 실행중에 주소가 결정되는 시스템

함수호출시 항상 자료형보다는 전달되는 객체가 뭐냐가 중요하다.
자료형: 형식은 한정만 시킨다.

A형식이라는것의 의미 : A가 가지고있지않은 멤버를 호출할 수없다.
e.g : a.f6();

자바는 컴파일할때 함수위치를 알려주지않고 객체가 위치를가지고있고 그 함수를 우선으로 호출된다.

int total = jump [    ];

함수주소가 A가 가지고있는 주소를 벗어나 자식이 전달될 수 있다고 생각하고 비워놓은상태 , A 범주내에서 호출되게끔하되 자식이 재정의한것을 넘겼을경우 자식이 호출될 수 있도록 잠깐비워둔 상태, 동적바인딩이라고한다.

나중에바인딩-다이나믹바인딩
A의 자식들의 객체가 전달될 수 있게금 비워두는것
나중에 전달된 객체를 찾고 실행중에 찾아서실행 (동적)

new Exam객체 : 12바이트 + 4바이트(virtual)

new NewlecExam객체 : 16바이트 +4바이트(virtual)

자바는 데이터공간 외에 4바이트를 더 갖는데. 그 4바이트는 메서드의 위치를 가리킨다.

객체가가진 앞머리를 통해 virtual 테이블에있는 주소로 가게된다.

Exam이 전달되면 앞머리(4바이트)를 통해 초록색 total 주소 로 가게되고

NewlecExam이 전달되면 앞머리(4바이트)를 통해 오렌지total주소로 가게된다.

전달되는 객체에따라 전달되는것이 다르다.

자료형을 자신의 개체보다 부모개체로 하면 다양한 객체를 넘겨 받을 수 있다.

print(B b)일경우
B로 참조를 한정할경우
b에 new C, new D를 전달할수없다.
B로 한정해버리면 다양한 객체를 넘겨받을 수 없게된다.

부모자료형으로  쓰면 넘겨받은 객체의 범위가 넓어진다.

A라는 클래스는 여러 자식을 갖을 수 있다.

자식C, B, D는 A부모형을 참조할 수 있다.

자식객체는 자기 개체를 참조할 수있고, 부모개체를 참조할 수있다.

A a = new C();

C가 아무것도 구현하지않았어도 A의기능을 구현할 수있다.

C가 f()를 재정의하면 f는 C의것이다.

A a = new C();

a.f()일지라도 C의 것이 호출된다. 

다음 수업순서 :

• 자바 객체지향 → 서블릿(Back End) → 오라클 → Restful API→ JSP
•                    →자바스크립트 → AJAX (DOM:event) 화면갱신→ HTML5 API
• CSS → PC페이지 → 모바일viewpoint → 
• 모바일 고정길이 dp(안드로이드) / pt(iso)

스타일링 : 방(크기), 가구,가구배치

레이아웃이란 ? 크기와 위치를 잡아주는것

헤더영역에 가구를 배치하면서 absolute를 주로  썼다. 그 이유는

header라는 콘텐트방이 크기가 고정되어있기 때문에 절대위치로 지정해줄 수 있다.

• absolute지정시 원점 ?
• offset영역을 할 영역에 relative를 지정 -> 하위부분에 absolute
• 문서의 기준 : absolute
• 현재위치 : relative
• 화면위치 : fixed

Header item 배치 / 헤더 아이템 위치

헤더영역은 고정이다. 위아래 높이가 달라지지않는다.

logo와 메인메뉴들의 위치가 다르다.

고정위치에 배치방법

position : absolute, relative, fixed

Logo에 position:absolute 적용시 생기는 문제 

창을 줄이면 다른메뉴들은 움직이는데 로고만 고정되어있다.

로고가 파란색의 범위(콘텐트가있어야할 범위)를 벗어나 왼쪽에  쏠려있다.

같은범주안에 로고 넣기

float-content 부모를 기준(파란색)으로 logo의 위치가 left 0, top 23적용된다. 

Position  속성

기본값 static :부모나 조상이 relative가 없으면 전체페이지 좌상단

• relative를 적용하지않았을떄, 문서좌상단이 기준이되어 left , top이 적용된다.
• 1. 부모없이 포지셔닝을 absolute로 하면 문서좌상단이 기준이되고 left, top적용
• 2. 부모없이 포지셔닝을 fixed로 하면 화면이 기준이 되고 left,top적용 
• 3. 어떤박스안에서 위치를 정하고싶으면 박스(부모)를 relative로 지정하고 자식(지정하고싶은아이템)을 absolute로하면 부모를 기준으로 left,top이 적용된다.
• 가까운 relative 포지셔닝되어있는것을 기준으로 원점이 바뀐다.
• 부모가 relative, 자식이 relative면 각자의 원래 위치가 기준이 된다.

static 일때 left와 top을 적용해도 의미가없다.

left와 top에 영향을 미치려면 최소한 absolute / relative / fixed / sticky이어야한다.

기준점이다르다.

• absolute : 부모나 조상이 relative가없으면 전체페이지의 좌측상단의 기준으로 left 0, top 23px 적용
• relative : 원위치, 현재위치의 기준에서 left 0, top 23px이 적용
• fixed : 화면좌상단(화면을 기준) , 화면은 스크롤이안됨,

logo에만 absolute를적용하면 문서의 좌상단을 기준으로 적용되어 float-content밖에 위치하게된다.

float-content를 부모로 만들고(position : relative), logo를 부모기준으로 위치하게한다.

자식들이 모두 relative 포지셔닝된다면 ? 

• 형이 위치를 바꾸어도 동생은 그대로 있고, 부모의 영역만 커진다.
• 영역이 비어있는데 큰 영역이 만들어진다.
• 좌표계산시에도 어렵다.
• relative로 하나씩 값을 지정해줘도 되지만 부모의 크기문제가 발생한다.

헤더아이템을 오른쪽기준으로 정렬시키기.

콘텐트중에 오른쪽기준으로 정렬해야하는 것들이 있다.

Home/로그아웃/회원가입에 동일하게 left,top을 적용해도되지만

콘텐트길이가 길어진다면 ? 왼쪽기준일때 오른쪽으로 늘어난다. 오른쪽벽을만나면 콘텐트가 깨진다. (내려쓰기되거나)

오른쪽으로 기준하면 왼쪽으로 늘어난다. 

aside의 배경 : 그라데이션 + 장식

1.그라데이션 : 콘텐트가 늘어난만큼 반복되어야하는 부분

2.장식 : 반복x

한 영역에 두 개의 박스가 필요하다.

aside와 main을 감싸는 블록을 만들고 그 블록에 배경을 넣고 aside에도 배경(장식)을 넣는다.

body와 aside사이에 <div class="float-content">를 넣었을때 body에 적용된 레이아웃이 깨졌다.

body > float-content > aside 순

중간에 다리(<div class="float-content">) 가 생긴느낌. 바디자손(aside와 main)에게 적용하려해놓고 바디에게 넣은것.

float-content에 레이아웃을 적용한다 ( float-content안에 aside와 main이 포함)

이미지크기와 float=content크기가 동일해서 center를 뺴도 무관하다.

 repeat-y : 반복을 수직으로한다

Visual의 콘텐트영역에 그림넣기

객체지향

• 캡슐=개체 ->실체:객체
• 객체들로 이루어진 프로그래밍
• [A]->[B] : B가 A의 멤버 또는 부품으로 사용될 경우 : has a (상속)관계
• [A]->[B] : B가 A의 부모 또는 틀,기반,기저,뼈대(프레임)으로 사용될 경우 : Is a (상속)관계
• Is a 상속: (A extends B) 자식클래스에서 멤버를 추가하거나 기존에있는 부모의 함수를 수정
• 부모의 멤버메소드를 수정하는 새로운 메소드를  오버라이드 메소드라고한다.
• 오버라이드 : 자식우선권, 부모함수 덮어쓰기(자식이 부모랑 똑같은 함수를 가지고 있어서 부모것이가려진다)
• 오버로드 : 기존메소드 + 동일한이름 + 파라미터 (즉, 이름동일한 메소드 공존가능)
• 생성자? 객체초기화. 생성자간 호출 : this()

오버로드란 ?

과적된 상태, 기존함수에서 인자가 확장된것

기존애+동일한이름 +파라미터

인자가 추가되어 개별함수가 된다. total() 과 total(int ext)는 개별함수

함수구별하는 식별단위가 인자까지추가되었다(함수지향:함수이름으로만식별)

인자가 달라지면 다른함수로 인식된다.

인자를 받는 생성자만 받도록 설정한 경우?

Frame클래스를 상속하고 오버라이딩

Frame을 상속한다

밖에서는 MyFrame의 기능처럼보인다.

원하는것으로  빠르게 만들어 쓸 수 있게된다.

Exam exam = new NewExam(); / 자식이 부모를 참조하다.

NewExam이 Exam, NewExam 둘다 가지고있어서 둘다 참조할 수 있다.

class A {

  int a ; //각 4바이트

  int b ;

}

class B extends A{

  int c;

}

B b = new B(); //총 12바이트가 만들어진다. 

자식이 부모를 가지고있어서 부모를 참조할 수 있다.

A b = new B();

오버로드가 계속 생기면 오버로드숫자만큼 코드가 중복된 것

코드중복이 발생→수정사항이 생기면 중복된 갯수만큼 고쳐야한다.→하나로 합치는 작업이 필요

둘중 하나는 없애고, 한쪽에서 다른 Exam()을 이용하도록한다.

위의 Exam()이 없어진다. 밑의 Exam()가 위의 Exam()일을 할 수 있다.

위에서는 호출만

밑에서는구현

오버로드는 코드중복->중복값갖고있는애들이 호출을 하게한다.

초기화는 자식부터, 자식생성자 끝에서 부모생성자호출

Q. 어제수업 기본생성자를 자동으로 호출해서 super() 가 생략.

오늘은 디스를 써서 오버로드된 생성자호출.그럼 super()는 호출이 안됨 ?

 : 안된다.

super()는 this이후에 호출된다.

NewExam() → this(1) → NewExam(int value) → super(value) → com=10;

객체생성은 부모것이만들어지고 자식객체가 만들어지지만, 초기화는 자식부터 초기화된다.

This(1)가 끝난이후에 super()가 호출된다

매개변수가 있는 super(value)를 명시해서 매개변수있는 부모생성자를 호출하도록했다.

super(value)를 쓰지않았다면 묵시적으로 super()가 호출된다. 

생성자는 최초로 한번만 호출되어야하는데, 내가 초기화하려는게 매개변수하나있는거니까 부모생성자도 super(value) 로 명시했다. 이걸적지않앗다면 컴파일러가 기본생성자로 초기화 했을것

입력 폼 태그

fieldset을 form에 맞추려면 ?

fieldset내용이 form에서 삐져나온다.

fieldset가 갖고있는 마진과 패딩을 없애준다.

*form을 25px했는데도, 여전히 필드들이 밖으로 나왔었다. -> 개발자도구로 확인하기->fieldset이 패딩과 마진을 가지고있었다.

첫번째 input만 지목하고, 여백을 모두 갖게 하려면 ? 

해당 항목을 지목하고, flex-grow를 적용한다.

돋보기 배경넣고 집중화태그 사용하기

검색이라는 글자를 가리기위해 새로 태그를 쓰지않고 기존 집중화시켰던 태그를 사용한다.

button이라는 클래스명을 만들어 집중화시켰으므로 input태그에 클래스명 "button"을 추가한다. 

텍스트의 수평정렬, 수직정렬

텍스트 수평정렬 text-align : center;

텍스트 수직정렬 line-height : 23px;

커서간격띄우기(검색창) 

text-indent대신 flexbox덕분에 padding-left를 쓸 수 있다.

flex아이템의 너비, 높이 설정

label 은 인라인태그인데, 너비와 높이가 적용됐다. 왜 적용되는걸까?

• flex안에있기때문이다. flex아이템으로서의 너비를 갖고있게된다.
• flex박스는 align-items : stretch 로 기본설정(수직정렬) 부모의 높이를 그대로가진다.→기본설정이라 삭제

flex-basis가 넓이를 나타낸다. width는 범용적으로 쓰이므로 flex-basis가 우선권을 갖게된다. 

* 특정태그 선택시 주의사항

위 태그는 input이면서 first-child 의미이다. input은 맞지다. fieldset의 첫번째자식은 legend이다.

input은 맞지만 첫번째자식이 아니라서 안먹힌다.

3/30 수업정리

Summary

• A has a B 상속관계 : A제품을 만들때 B를 부품으로 사용
• A is a B 상속관계 : A제품을 만들때 B를 틀로 사용 (extends , override)
• Override : 부모의 함수명을 동일하게 써야한다. 우선순위가 높아진다.부모것을 확장해쓴다.
• 상속 : 자식객체생성시 부모객체생성도 자동호출된다 (super(); )
• 부모를 가지는 클래스는 두개의 객체를 생성한다.
• 인스턴스함수: 객체를 넘겨받는 함수, 객체함수, 객체를 통해 호출, ex:생성자();
• print메소드는 콘솔출력을 위한것→Lotto클래스안에 포함할 수있지만 콘솔출력용이 되버린다.→재사용률을높이고,결합도를 낮추기 위해 분리시킴.

Frame frame = new Frame();

Is A 상속관계

Is a : 기존 엔진을 틀로서 가져다가 고쳐서 이용. (ex,타이어가 타이어를 이용)

public class Lotto2 extends Lotto

Lotto라는 프레임으로 부터 물려받는 기능을 고쳐서 사용하다.

Lotto2에는 아무것도없었지만, lotto를 extends하면 (import 하기)

Lotto2의 객체를 통해 Lotto안에있는 gen()을 호출할 수 있다.

밖에서 봤을땐(main함수입장) Lotto2가 구현한 것 처럼 보인다. 

Lotto와 Lotto2를 같은것으로 인식한다.

Override

기존의 Lotto안에있는 gen()를 고쳐쓰다.

자식클래스의 메소드가 우선순위가 높아진다.

캡슐화

Exam이 단순히 데이터를 구조화하고있을뿐 아니라, 총점과 평균을 구현하는 서비스까지 포함한다.

시험성적관리하는 역할을 부여

NewExam클래스를 만들고 Exam클래스를 extends 한다. 

Exam클래스 / NewExam클래스

부모 / 자식

상위/하위

기반/파생

자바에서는 부모객체를 super라고 부른다.

this 는 자식객체를 호칭.

NewExam클래스에 total()이 없는데, total이 출력되는 이유 ? 

Exam()생성자가 자동호출되었기때문에 합계가 30이 나온다.

Exam클래스의 생성자안의 kor,eng,math는 this의 kor, this의 eng, this의 math가 초기화 된것이다. this생략.

부모를 가지는 클래스는 두개의 객체를 생성한다.

New NewExam()을 호출하는 순간 Super()생성자가 자동으로 호출된다.

super()생성자가 적용이 안되었다면 Exam()생성자에서 초기화된부분이 반영이 되지않았어야한다.

total :30출력된것은 자식클래스 객체생성과 동시에 부모클래스객체 생성도 자동반영되었기 때문이다.

• super();가 생략되었지만, 명시해줘도된다. 명시할때 무조건 가장먼저 호출되어야한다.
• 생성자는 한번만호출 되고, 제일먼저 호출되어야하기 때문이다.

NewExam클래스에서 total()를 오버라이딩한다면 ? 

NewExam클래스에서 ctrl + space를 누르면 오버라이딩할 수 있는 부모의 함수들이 뜬다.

total()선택. return 값에 부모의 total() + com; 더해준다.

오버라이딩한 total()에서  super를 지운다면 ?

super를 지우면, this가붙게된다.현재 객체가 가지고있는 total()를 찾게된다.

자신이 자신을 부르게된다. 내가 부모를 부르기위해 super를 써야한다.

내가 나를호출한다.

생성자도 인자값을 받을 수 있다.

인자를 갖고있지않다면 기본값이된다.

인자를 통해서 내가 원하는 값으로 바꿀수도있다.

ul>li>a에서 <a>만 선택해서 적용하기

모두 동일하게 red컬러적용됨

하지만 나중에 바뀔 수도있고 태그가 많으니까 클래스명으로만 지정하는것으로 바꿈 

background: url("") no-repeat 

콘텐트가리기 overflow: hidden

블록은 오른쪽으로커지기때문에 텍스트를 왼쪽으로 밀어내는게 일반적이다.

text-indent로 밀어내도 보이는 콘텐트를 완전히 가리기 위해 overflow:hidden 처리를한다.

텍스트를 이미지로 대체하기

반복코드 줄이기 : 집중화

class이름에 button을 추가하고 css에서 집중화한다. (반복코드 없애기)

코드 우선순위 적용 !important;

객체지향 프로그래밍 : 객체를 중심으로 하는 프로그래밍
객체를 프로그램을 구성하는 기본단위로 본다.

객체에게 함수는 어떤 존재인가요 ?
기능,서비스로서의 존재이다.
서비스를 구현할 때  함수의 원래 목적인 나누기, 집중화, 재사용

객체-역할자-기능/서비스

class 상점관리{
   private 점원 점원1;
   private  손님 손님1;

}

• 구조적함수 : 데이터구조에 영향을 받는것모아둔것
• 객체지향:객체의 행위를 모아둔것, 좀더 큰단위의 함수들
               public 외부로노출해야할 객체행위
               private 반복,중첩,내부적으로 쓸 구조적방식함수
              과거 구조적프로그래밍  + 함수를 묶는개념
              선택적으로 만든다.
              분석,기획-객체찾게되고  서비스를찾음-서비스를 구조화시킴-함수를 구현(절차작성)-API
• 객체지향적 관점 :~를 담당하는 것으로 볼것. 역할자로보는것 : 캡슐화, 클래스,객체
• Has A상속 : 다른객체를 가지고 자기를 구현

자바실습 정리: 

출력역할을 위한 캡슐을 만들자 ->lotto가 필요하다
그래서 lotto를 가지게된다
this가 lotto를 가진다. has a
생성은 외부에서, 또는 자기스스로 하는게있다, (composition, association)


 

포함관계: 부품관계 has관계
객체로 객체단위로 나누기,집중화,재사용가능
나누기 : has
집중화 : is a
재사용 둘 다 가능

[객체지향] 프로그래밍
:  프로그램 => 코딩(절차를 다루는 부분) 
+ (절차를 나누고 정리하는 부분) : 구조적인 방법 / 객체지향적인 방법
구조적인 방법과 객체지향 방법은 절차를 나누고 정리하는 방법에서 어떤 차이가 있는가

절차만드는것 : 배열까지 배운것들

절차를나누고, 정리하는것은 사용자에게 보이지않는 부분이다.

절차를 나누는 방법(함수를 나누는 기준은)에서의 차이는?
-구조적인 방법에서는
   크기나 중첩/복잡도 높아지는 부분에서 코드를 나누었다.
    (IBM에서는 3년차 코딩 경험을 50라인 정도 ...)
   재사용/반복(집중화)/난이도 높아/...

   내가 감당할 수 있는정도가 기준이었다->애매함

    코드를 잘게 쪼갠다. 복잡하면 나눈것

-객체지향 방법에서는
   객체가 서비스하는 단위(실세계에서 객체의 행위)가 추가됨. //함수를 나누는 방법이 늘어남

   고객이 주문한다 - 주문하는 행위를 서비스로 만듦.
   주문을 order() -> 100줄 .. 중첩/반복/난이도..

    구조적인방법에서달라진게아니라 얹어진 것. 더큰개념의의 함수

(함수를)정리하는 방법에서의 차이는?
-구조적인 방법에서는
  데이터구조가 사용되면 함수가 외부의 코드로부터 영향을 받는 이상현상이 발생한다.
  따라서 데이터 구조를 사용하는 함수들을 하나로 묶어야 하는 필요성이 생기는데...
  
-객체지향 방법에서는
  객체라는 실세계에 반영함으로써 캡슐화된 함수를 그 객체의 행위로 보는 방식으로
  정리를 하자.   

  잘게 쪼개는 볼룸/중첩을 없애는 함수들은? -> 마찬가지로 캡슐화가 되어 있어야 한다.
 

분석/기획 -> 객체/서비스->구조적으로->함수를 구현(절차)/코딩 : API == 플랫폼

                          방정리                          구동      

자바언어가 물리적으로 사용하는 장치는 ?

컴퓨터 
 -CPU : 프로그래밍 언어 : 연산자/제어구조
 -주기억장치 : 프로그래밍 언어 : 변수/배열

캡슐화/함수/구조화/          ->   컴파일러 -> 절차(API 플랫폼을 사용)

(컴파일러가 제공해주는기능)

 -입/출력 : API == 플랫폼 (API는 플랫폼을 사용하기위한 도구.언어에따라 달라진다)

플랫폼        : API (플랫폼을 직접쓰는게아니라 API이용한다.)
그래픽 카드 : Win32API/AWT/Direct/OpenGL (그래픽을 다뤘을때 사용한 플랫폼)
카카오 친구 : 카카오 API (데이터를 이용하는 플랫폼이 카카오)

자바에서 클래스의 용도

1. 데이터를 구조화하는 용도(방정리)

   (사원/학생/교사) ~의 이름, ~의 주소, 나이, 연락처

    사원(이름/나이/주소/..), 학생, 교사

    사원 hailey = new 사원();

    울타리(유형) 안의 속성을 묶음, 거시적으로 데이터관리

2. 캡슐화를 위한 용도

   서비스를 묶는 역할

   캡슐은 역할자고 그 역할자가 가지는 기능(서비스)에 초점을 맞추는 방식

   데이터 속성은 가리고, 기능만 노출, 캡슐을 역할자로 본다. 객체화

LottoConsole.print(lotto);

객체를 생성하지않음 함수위주 코드.

실존하는 객체를 만들지않았다 = 개체가 아니다.

LottoConsole은 print함수가 있는 위치정보. 함수지향

print()안의 lotto들도 Program클래스에서 인자로 받은 lotto이다. 

public static void print(Lotto lotto) 인스턴스메소드로 , 역할자개념

로또출력을 위한 객체를 만들자.

인스턴스메소드로 바꾸기

static 지우기, 매개변수 사라짐

LottoConsole.print(lotto);

LottoConsole는 print함수의 위치정보만 나타낸다. print함수가 있는 울타리.개체가아니다.함수지향

함수만있고 역할자는 없음, lotto를 인자로 넘겨받아서 출력

LottoConsole console = new LottoConsole(lotto);

console.print();

lotto를 이용해서 출력을 담당하는 객체, 출력해주는 역할자(객체)를 만듦, 객체지향

역할로 바라보는것

new Lotto와 new LottoConsole의 차이 (두 개체의 차이) 

Lotto로또 번호를 관리하는 역할, 객체지향적으로 봐야함

LottoConsole 로또번호를 출력하는 역할 ~를 담당하는 것으로 볼것.

Lotto : 다른 객체를 가지고있지않고 스스로 gen(), sort()기능을 가진 캡슐, 로또번호를 관리하는 역할

LottoConsole : 로또번호를 출력하는 역할. Lotto를 부품으로 가지고있다. 다른객체를 재이용

                    Has a 상속, 다른객체를 부품으로 이용

                    lotto의 기능을 직접구현할 필요없이 물려받아서 구현한다.

상속

물려받다보다는 제공받다로 이해할것

능력,기능을 제공받다. 능력,기능을 가진 객체를 has한다

Composition has A 상속 : 일체형

생성될때 Lotto()같이만들어지고 , LottoConsole이 사라지면 Lotto()같이 사라진다.

생명주기가 일치한다.

Association has A 상속 (분리형)

배터리를 꽂아서 쓰는것처럼, 이용할때만 사용

print()메소드의 매개변수로 Lotto lotto를 넣는다면 ?

private Lotto lotto 선언할 필요가 없어진다. this객체의 구성으로 넣어서 부품으로쓰려고한것

캡슐인 객체와 기본형데이터의 차이

캡슐은 다양한 서비스를 가지고있어서 this가 가지고있는 lotto의 gen()기능을 불러올 수있다.

Pseudo-classes

하이퍼링크 초기화

하이퍼링크는 기본적으로 밑줄 및 파란색/보라색이 적용되어 있어 그위에 색상,폰트가 안먹는다.

꾸며주기전에 초기화 작업을 해준다.

display: none;

화면에 가리기

display:flex

수평목록

기본속성인 수평방향으로 적용된다.

padding에 이미지 넣기 (background지정)

배경이미지경로, 반복여부, 가로방향,  세로방향

background: url("") no-repeat 12px center;

이미지가 제일 왼쪽에있으므로 24px중 12px을 적용해서 수평가운데에 적용

.main-menu>ul>li>a:hover{

마우스를 대면 색깔변화

display: inline-block;

콘텐트블럭이 너비나 높이를 가질 수 있지만, 다른컨텐트블럭과 같은 라인에 설 수있게해야한다.

컨텐트를 감싸면서 너비,높이를 가질 수 있다. 콘텐트 블록을 감싸줘야한다. 

컨텐트블록의 바깥을 인라인블록으로 감싸줘야한다. 

html,body{
    height: 100%;
    margin:0;
}

a{
    color:initial;
    text-decoration: initial; /*선으로 텍스트를꾸밈*/
}

ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ---------------------------------------------------- */
.d-none{
    display: none;
}


/* --------------------------------------------------------------- */
.float-content{
    /* background-color: black; */
    width:960px;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    min-height:inherit;
    opacity: 0.7;
    /* height: inherit; */
}

#root{
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 205px 755px 1fr;
    grid-template-rows: 500px 171px 1fr 100px;
    grid-template-areas: 
    "header header header header"
    "visual visual visual visual"
    "body body body body"
    "footer footer footer footer";
}

#header{
    background-color: #ffffff;
    grid-area: header;
}

#visual{
    border-top:3px solid #8CBA34;
    /* background:#313131 url("../images/bg-visual.png") no-repeat center; */
    grid-area: visual;
}

#body{
    border-top:5px solid #8CBA34;
    margin-top: 1px;
    grid-area: body;

    display: grid;
    grid-template-columns: 1fr 205px 755px 1fr;  
    grid-template-rows: 1fr;  
    grid-template-areas: ". aside main .";
}

#aside{
    background-color: blue;
    grid-area: aside;
}

#main{
    background-color: blueviolet;
    grid-area: main;
}

#footer{
    background-color: #313131;
    grid-area: footer;
}

/* @media screen and (min-width: 500px){

} */

@media screen and (max-width: 960px){
    
    .float-content{        
        width:100%;
    }
    
    #root{
        
        grid-template-columns: 1fr;        
        grid-template-areas: 
        "header"
        "visual"
        "body"
        "footer";
    }

    #body{        
        grid-template-columns: 1fr;    
        grid-template-areas: "main";
    }
}

/* ------------------------------------------------------------------- */

.main-menu{    
    font-family: "맑은 고딕", "고딕", 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 15px;
    font-weight: bold;
    color: #000;
    display: inline-block;
}

    .main-menu>ul{
        display: flex;
    }

        .main-menu>ul>li{
            padding-left:24px;
            background: url("../images/bg-main-menu-vsp.png") no-repeat 12px center;
        }
        .main-menu>ul>li:first-child{
            padding-left: 0px;
            background: none;
        }

        .main-menu>ul>li>a:hover{
            color: orange;
        }


.member-menu{    
        font-family: "맑은 고딕", "고딕", 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size: 10px;
        font-weight: bold;
        color:#979797;
        display: inline-block;
    }
    .member-menu>ul{
        display: flex;
    }
        .member-menu>ul>li{
            padding-left: 9px;
            background: url("../images/bg-member-menu-sp.png") no-repeat 4.5px center;
        }
        .member-menu>ul>li:first-child{
            padding-left: 0px;
            background: none;
        }

.breadcrumb{
        font-family: "맑은 고딕";
        font-size: 10px;
        font-weight: bold;
        color:#979797;
        display: inline-block;
    }
    .breadcrumb>ol{
        display: flex;
        list-style: none; /*번호속성지움*/
        padding-left: 0;
    }
    .breadcrumb>ol>li{
        padding-left: 10px;
        background: url("../images/icon-path.png") no-repeat 0px center;
    }
    .breadcrumb>ol>li:first-child{
        padding-left: 20px;
        background:url("../images/icon-home.png") no-repeat 0px center;
    }

개체와 서비스함수로 구별한다면 ?

개별적으로 움직인다면 개체

노을,나무,언덕 - 고정 

추상화 : 개체의 역할이나 행위가 비슷 할때

객체 : 보이는것, 실존하는것, 식별이름

개체 : 유형. 적절한 추상화가 필요.개별적으로 움직일 수 있는 유형

• 비행기 (왼쪽비행기,오른쪽비행기)
• 자동차(클래식차,SUV,세단)
• 사람 또는 더 작은 개체로 보면 농부,행인 

class 농부{

  public void쉬다(){

   }

  public void탈곡하다(){

   }

}

산,달,언덕 : 움직임이없어서 고정배경

객체분석

객체지향에서의 캡슐화 : 실생활의 내용을 그대로 표현하는 도구

개체가 하는 서비스함수(행위)를 모아둔것 

객체지향이란 ?

프로그램을 구성하는 요소로서 객체라는 것을 중심에두고 프로그램을 만드는것.

객체지향의 장점 ?

코드의 구조를 실세계내용을 반영해서 인간의 사고에 가깝게 쉽게 표현한다.

Summary

• Lotto구조체사용→외부변화에 취약→캡슐화→캡슐도구에 함수를 모음
• 기존코드는 함수위주의 코딩. 예 : Lotto.sort(lotto);
• 자바는 함수사용시 무조건 캡슐화를 해야한다. (클래스를 만들고 클래스안에서 함수를 만든다)
• 반면 자바스크립트는 클래스없이 함수사용가능.
• 개체: 구조적인 데이터형식
• 객체: 개체의  실체, 인스턴스 
• static메소드 :객체사용하지않음, 클래스이름.메소드이름으로 호출, 언제든지 호출가능,매개변수로 작업
• 인스턴스메소드 : 객체를 생성후 호출, 객체이름.메소드이름으로 호출, 매개변수없음
• 함수에서 사용하는 변수가 지역변수인지, this의 멤버변수인지, 전역변수(static)인지 구별할것

Object Oriented Programming

• 객체지향 프로그래밍
• 객체로부터 출발하는 프로그래밍
• 객체를 중심에 두는 프로그래밍
• what → how 
• 주어,목적어가 우선 ( 행위의 주체가 눈에 띄도록한다)
• 함수는 동사, 행위
• lotto.gen(); : lotto를 gen()한다.

객체지향 적인 표현식으로 바뀐 함수

객체를 사용하는 함수 : Object function / Instance function / method

static과 매개변수를 지운다.

lotto.대신 this를 쓴다.

외부에서는 객체이름.함수이름()으로 호출

내부클래스에서는 this.가 lotto를 대신한다. → this생략가능Summary

Lotto구조체사용→외부변화에 취약→캡슐화→캡슐도구에 함수를 모음

기존코드는 함수위주의 코딩. 예 : Lotto.sort(lotto);

자바는 함수사용시 무조건 캡슐화를 해야한다. (클래스를 만들고 클래스안에서 함수를 만든다)

반면 자바스크립트는 클래스없이 함수사용가능.

객체지향 적인 표현식으로 바꾸기

객체를 사용하는 함수 : Object function / Instance function / method

static과 매개변수를 지운다.

lotto.대신 this를 쓴다.

외부에서는 객체이름.함수이름()으로 호출

내부클래스에서는 this.가 lotto를 대신한다. → this생략가능 

라디오의 높이, 라디오의 길이를 말하지않고 라디오라고 말하는 것처럼, 그룹핑해서 쓴다. →표현하는 단위가 됨

                                                .

this

인스턴스 함수가 넘겨받는 객체를 참조하는 변수

size는 함수내에서 선언되지 않았다.

size를 전역변수라고 잘못 이해하는 경우가 있다.

Lotto클래스의 private int[] nums;와 private int size는 설계도일뿐이다.

this.size에 값이 대입된것이다.

lotto객체외에 lotto1객체를 또 생성하면 

lotto.nums[i] , lotto.size와 lotto1.nums[i], lotto1.size 에 각각 값이 담기게된다.

static 메소드 : 객체를 쓰지않는다. 매개변수로만 넘겨받는다. '클래스이름.메서드이름'으로 호출한다.

인스턴스메소드 : 객체를 넘겨받는 메소드, 객체메소드, 실체메소드, 객체생성 후 사용가능.

Getter / Setter

사용자입장에서 생각하기.

main()함수가 있는 Program클래스는 외부이다.(사용자입장)

Lotto{}클래스는 데이터와 데이터에 관련된 메서드의 집합, 제공자입장이다.

main()메소드에서 lotto.getSize()를 호출하면 : lotto에 있는 숫자를 불러와줘.

main()메소드에서 lotto.setSize(6)를 호출하면 : size에 6을 넣어줘.

setSize{ this.size = size(지역변수) } this생략하면 지역변수를 지역변수에넣게된다. 

지역변수size를 this.size에 대입한다.

캡슐화

기존 캡슐화 : 데이터변화에 영향을 받는것들을 한곳에 모아 둔것

객체지향 캡슐화 : 객체가 갖고있는 서비스들, 즉 객체가 제공해야할 서비스들을 모아둔것

객체를 행위자로 만드는 작업이다.

Print()함수의 재사용

콘솔출력을 위한 클래스를 만들고 Program클래스에서 LottoConsole.print(lotto)를 호출해서 출력하게한다.

static함수로 만들어 언제든지 호출할 수있게한다. 

static함수는 인자를 전달받으므로 public static void print(Lotto lotto)로 매개변수를 넣어준다.

생성자(Constructor)

클래스명(){ }

생성자는 함수명이없지만 객체형식을 클래스형식으로 한정한다는 것을 의미.

반환값X, 매개변수O, 오버로드O

생성자를 사용하는 이유 ?

초기화는 단 한번만 실행되어야한다.

초기화는 다른 어떤 로직보다 먼저 실행 되야한다.

기존코드의 문제점:

일반함수였을땐느 init()함수가 한번만 실행 되지 않았고, 먼저 실행되도록 하지 못했다.

lotto.gen();을 언제든지 사용할 수있으며, 무조건 먼저 실행되도록 제어할수 없었다.

해결:

Lotto lotto = new Lotto();

객체를 생성할때 자동으로 호출되는 '인스턴스 초기화 메서드'.

subgrid를 쓰지않아도 적용가능

header, visual, body, footer로 나눈뒤 body안에서 aside, main으로 나눈다.

PC형에 먼저 맞춘 후 태블릿형 미디어쿼리 적용

html,body{
    height: 100%;
    margin:0;
}

/* --------------------------------------------------------------- */
.float-content{
    width:960px;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    min-height:inherit;
    opacity: 0.7;    
    /* height: inherit; */

}

#root{
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 205px 755px 1fr;
    grid-template-rows: 70px 171px 1fr 100px;
    grid-template-areas: 
    "header header header header"
    "visual visual visual visual"
    "body body body body"
    "footer footer footer footer";
}

#header{
    background-color: #ffffff;
    grid-area: header;
}

#visual{
    border-top:3px solid #8CBA34;
    background:#313131 url("../images/bg-visual.png") no-repeat center;
    grid-area: visual;
}

#body{
    border-top:5px solid #8CBA34;
    margin-top: 1px;
    grid-area: body;

    display: grid;
    grid-template-columns: 1fr 205px 755px 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: ". aside main .";

}

#aside{
    background-color: blue;
    grid-area: aside;
}

#main{
    background-color: blueviolet;
    grid-area: main;
}

#footer{
    background-color: #313131;
    grid-area: footer;
}
/*pc먼저 스타일링*/
@media screen and (min-width: 500px){/*500이 넘어가면*/

}

@media screen and (max-width: 960px){/*800보다 작아지면*/
.float-content{
    width:100%;
}
#root{ /*덮어쓰기할것만 넣기*/
    height: 100%;
    display: grid;
    grid-template-columns:1fr;
    grid-template-areas: 
    "header"
    "visual"
    "body"
    "footer";
    }

#body{
    border-top:5px solid #8CBA34;
    margin-top: 1px;
    grid-area: body;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "main";
    }

#main{
        background-color: blueviolet;
        grid-area: main;
    }
}