'WEB' 카테고리의 글 목록

WEB

1-6 Summary

2023. 2. 21. 09:05

'WEB > 웹 프로그래밍(Boostcourse)' 카테고리의 다른 글

1-5 Servlet -BE (0)	2023.02.21
1-4 개발환경 설정 - BE (0)	2023.02.21
1-3 CSS - FE (0)	2023.02.21
1-2 HTML - FE (0)	2023.02.20
1-1 웹개발의 이해 (0)	2023.02.20

1-5 Servlet -BE

2023. 2. 21. 09:05

'WEB > 웹 프로그래밍(Boostcourse)' 카테고리의 다른 글

1-6 Summary (0)	2023.02.21
1-4 개발환경 설정 - BE (0)	2023.02.21
1-3 CSS - FE (0)	2023.02.21
1-2 HTML - FE (0)	2023.02.20
1-1 웹개발의 이해 (0)	2023.02.20

1-4 개발환경 설정 - BE

2023. 2. 21. 09:04

'WEB > 웹 프로그래밍(Boostcourse)' 카테고리의 다른 글

1-6 Summary (0)	2023.02.21
1-5 Servlet -BE (0)	2023.02.21
1-3 CSS - FE (0)	2023.02.21
1-2 HTML - FE (0)	2023.02.20
1-1 웹개발의 이해 (0)	2023.02.20

1-3 CSS - FE

2023. 2. 21. 09:04

CSS의 구성

span{

color:red;

}

- span: selector (선택자)

- color: property

- red: value

CSS의 구성 요소

inline

internal

external

inline

- html 태그 안에 넣는 것

- 같은 속성 추가 시 다른 CSS 적용보다 최우선으로 적용

<p style="border:1px solid gray;color:red;font-size:2em;">

internal

- head안에 <style></style> 태그 넣는 방식

- 구조와 스타일이 섞이게 되므로 유지보수가 어렵다

- 별도의 CSS파일을 관리하지 않아도 되며 CSS 파일을 부르기 위해 별도의 브라우저가 요청을 보낼 필요가 없다

<head>
<style>
p  {
  font-size : 2em;
  border:1px solid gray;
  color: red;
}
</style>
</head>

<body>
<div>...</div>
</body>

external

- 외부파일(.css)로 지정하는 방식

- html파일 안에 CSS 파일 추가하는 방식

- CSS 코드가 짧지 않다면 이 방법으로 구현하는 것이 좋다

- 여러 개의 CSS 파일을 분리하고 이를 합쳐 서비스에 사용하기도 하낟

- internal 코드와 같은 css코드를 구현하고 style, css와 같은 별도 파일로 만든다

- 이후 아래처럼 link 태그로 추가하면 된다

<html>
	<head>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<div>
			<p>
				<ul>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</p>
		</div>
	</body>
</html>

우선순위

- inline은 별도의 우선순위를 갖지만 internal과 external은 우선 순위가 동등하다

- 따라서 겹치는 선언이 있을 경우 나중에 선언된 속성이 반영된다

javascript로 동적으로 css코드를 수정하려고 하면 어떻게 해야 할까요? 나중에 차츰 알게 되지만, 미리 어떤 방법이 있을지 고민해보세요.
1. javascript의 getElementById() 등의 메소드를 이용하여 css를 수정할 수 있습니다.

구글 웹사이트는 어떻게 css를 선언하고 있을까요? 구글 웹사이트(구글 내 여러가지 웹사이트중 하나)에서 소스보기를 해서 CSS 코드를 한번 찾아보세요. internal 방식이나 external 방식 등을 목격할 수 있을 겁니다.
2. internal, external 모두 사용하고 있습니다.

상속의 우선순위 결정

- 상위에서 적용한 스타일은 하위에서도 반영된다

- 이로 인해 여러 단계로 중첩된 element마다 매번 같은 색상과 글자 크기를 부여하지 않아도 된다

<!DOCTYPE html>
<html>
<head>
  <style>
    div{
      color:green;
    }</style>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div><span>my text is upper!</span>
  <ul>
    <li><span>my text is dummy</span>
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda
      molestiae in architeco non quos aperiam , incidunt.
      Ex sequi ullam, culpa explicabo fecere
      modi ad fugiat ipsa cupidiate provident , a, expedita!</p>
    </div></li>
  </ul></div>
</body>
</html>

Cascading

- CSS는 여러 스타일 정보를 기반으로 최종적으로 경쟁에 의해서 적절한 스타일이 반영된다

선언 방식에 따른 차이

inline>internal (head태그 사이)>external 순으로 먼저 적용

span{

color:red;

}

span{

color:blue;

}

동일하면 나중의 것이 적용됨

body<span {

color:red;

}

span{

color:blue;

}

더 구체적으로 표현된 것이 적용됨

text....

</div>

#a {

color:red;

}

.b {

clolor:blue;

}

div{

color:green;

}

id값이 우선됨

id>class>element

google search

-> CSS specificity

class는 우선점수가 10점, id는 100점이라고 표현했습니다. 그런데 class 가 11개라면 어떻게 될까요? id보다 우선순위가 높을까요? 실제로는 그렇지 않습니다.이현상은 올림픽순위가 금메달의 갯수를 통해 우선결정되는 것과 비슷한데요.id는 금메달, class는 은메달, tag는 동메달로 이해하는게 편합니다.

CSS selector

- HTML의 요소를 tag,id,html 태그 속성 등을 통해 쉽게 찾아주는 방법

- tree 구조로 되어 있는 데이터를 빠르게 찾아가는 방법

-태그 : 부모 자식 관계로 되어 있

element에 style 지정을 위한 3가지 기본 선택자

-tag로 지정하기

span{

color:red;

}

- id로 지정하기

#spantag{

color:red;

}

- class로 지정하기

.spanclass{

color:red;

}

CSS Selector의 다양한 활용

- id, class 요소 선택자와 함께 활용

#myid {color:red}

div.myclassname{color.red}

span#myspan

<<span인데 아이디가 myspan인 요소들 선택

- 그룹 선택 해야 한다면 (여러 개 셀렉터에 같은 style 적용해야한다면)

h1, span, div{color:red;}

- 하위 요소 선택(공백)

#jisu span {color:red;}

- 자식 선택 (>)

#jisu>span {color:red}

- n번째 자식 요소를 선택

#jisu>p:nth-child(2) {color:red}

id가 지수인 태그의 자식 태그 들 중 n번째 자식 태그가 p이면 색상 변경

#jisu>p:nth-of-type(2) {color:red}

id가 지수인 태그의 자식 태그들 중 n번째 p태그의 색상을 red로 변경

- 자식 선택: 자식은 바로 하위 엘리먼트를 가리킨다

pseudo-class인 nth-child 와 nth-of-type의 차이점은 무엇일까요? 두 개의 차이점을 꼭 기억하시기 바랍니다.
nth-child: 유형과 관계 없이 n번째를 선택
nth-of-type: 특정 유형부터 n 카운팅

:nth-child(N)= 부모안에 모든 요소 중 N번째 요소
A:nth-of-type(N)= 부모안에 A라는 요소 중 N번째 요소
:first-child= 부모안에 모든 요소 중 첫번째 요소
:last-child= 부모안에 모든 요소 중 마지막 요소
A:first-of-type= 부모안에 A라는 요소 중 첫번째 요소
A:last-of-type= 부모안에 A라는 요소 중 마지막 요소

'WEB > 웹 프로그래밍(Boostcourse)' 카테고리의 다른 글

1-6 Summary (0)	2023.02.21
1-5 Servlet -BE (0)	2023.02.21
1-4 개발환경 설정 - BE (0)	2023.02.21
1-2 HTML - FE (0)	2023.02.20
1-1 웹개발의 이해 (0)	2023.02.20

1-2 HTML - FE

2023. 2. 20. 23:11

tag의 종류

- 태그는 의미에 맞게 사용해야 한다 Symantic tags

- 링크

- 이미지

- 목록

- 제목

- anchor 태그, img 태그, ul/li 태그, heading 태그, p 태그 등이 자주 사용

- 그 밖에 가장 많이 사용하는 div태그가 있다

- div 태그는 block 엘리먼트라고 하는데 일반적인 영역을 표현할 때 가장 많이 사용

레이아웃을 위한 태그

- header

- section

- nav

- footer

- aside

html design structure

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <header>
    <h1>Company Name</h1>
    <img src=" " alt="logo">
   </header>
  <section>
    <nav>
      <ul>
        <li> Home </li>
        <li> Home </li>
        <li> About </li>
        <li> Map </li>
        </ul>
    </nav>
    
    <section>
      <button></button>
      <div> <img src="" alt=""></div>
      <div> <img src="" alt=""></div>
      <div> <img src="" alt=""></div>
      <button></button>
    </section>
    
    <section>
      <ul>
        <li>About us</li>
        <li><h3>Wha we do<h3></li>
          <li> Contact us </li>
        </ul>
      </sction>
      
    </section>
  <footer>
    </footer>
  

</body>
</html>

- 고유한 속성으로 html문서에 하나만 사용 가능

- 고유한 id값이 있으면 하나 하나에 특별한 제어를 할 수 있고 검색에 용이

Class

- 하나의 html 문서 안에 중복해서 사용 가능

- 하나의 태그에 여러 개 다른 class 이름을 공백을 기준으로 나열 가능

- 홈페이지 전체적인 스타일을 일관성 있게 지정하기 위해서는 class 사용 필수

- 비슷한 스타일을 여러번 사용하기 위해

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <header>
    <h1>Company Name</h1>
    <img src=" " alt="logo">
   </header>
  <section class="nav-secction">
    <nav>
      <ul>
        <li> Home </li>
        <li> Home </li>
        <li> About </li>
        <li> Map </li>
        </ul>
    </nav>
    
    <section class="roll-section">
      <button></button>
      <div> <img src="" alt=""></div>
      <div> <img src="" alt=""></div>
      <div> <img src="" alt=""></div>
      <button></button>
    </section>
    
    <section>
      <ul>
        <li class="our_description">About us</li>
        <li class="our_description"><h3>Wha we do<h3></li>
          <li class="our_description"> Contact us </li>
        </ul>
      </sction>
      
    </section>
  <footer>
    </footer>
  

</body>
</html>

'WEB > 웹 프로그래밍(Boostcourse)' 카테고리의 다른 글

1-6 Summary (0)	2023.02.21
1-5 Servlet -BE (0)	2023.02.21
1-4 개발환경 설정 - BE (0)	2023.02.21
1-3 CSS - FE (0)	2023.02.21
1-1 웹개발의 이해 (0)	2023.02.20

1-1 웹개발의 이해

2023. 2. 20. 22:51

저급언어

- 기계 중심의 언어

- 2진수로 이뤄진 값으로 작성하는 프로그래밍 언어를 기계어 라고 한다

- 숫자로만 된 문장과 1:1로 대응하는 기호를 만들고 프로그래밍 하는데 이 때 사용하는 도구를 컴파일러라고 하며, 이러한 기호로 작성된 언어를 어셈블리어라고 말한다

고급언어

- 사람 중심의 언어

- 소스코드를 번역하는 과정은 컴파일

웹 프로그래밍 언어

웹 관련 인기 언어

- Python : 프로그래밍 입문자가 읽기 쉽고 적은 코드를 사용하여 프로그램을 개발한다. 데이터 과학, 웹사이트 개발에 많이 사용

- PHP : 웹의 80% 이상이 PHP로 만들어졌다고 말한다.

- JavaScript : 자바 스크립트는 처음 시작이 브라우저에서 동작하는 언어. 현재는 서버에서도 작성하는 프로그램으로 점차 영역을 넓혀가고 있다. 프론트 개발자라면 반드시 알아야 할 언어입니다.

- JAVA : 엔터프라이즈 소프트웨어 환경에 잘 맞는 언어. 큰 규모의 소프트웨어 개발에 자바언어가 많이 사용. JAVA언어를 지원하는 수많은 커뮤니티에 위해서, 지속적으로 발전되어 훌륭한 구조와 설계 기법들이 잘 갖춰져 있다.

- Ruby : 빠른 개발에 널리 사용되며, 단순함과 세련된 웹 어플리케이션을 만들 수 있기 때문에 인기 있는 언어 중의 하나.

물리적인 하나의 컴퓨터에는 여러개의 서버 동작

서버는 port로 구분되어 동작

인터넷: 네트워크 들의 네트워크

TCP/IP 기반의 네트워크가 전세계적으로 확대되어 하나로 연결된 네트워크들의 네트워크

HTTP : 웹 브라우저와 웹 서버간 통신하기 위한 규약

- 서버와 클라이언트가 인터넷 상에서 데이터를 주고 받기 위한 프로토콜이다

- HTTP/2 버전까지

- 어떤 종류의 데이터든 전송할 수 있음

HTTP 작동방식

- 서버/클라이언트 모델을 따름 (클라이언트가 요청 - 서버가 응답)

- 무상태 프로토콜 Stateless

- 장점: 불특정 다수를 대상으로 하는 서비스에 적합 클라이언트와 서버가 계속 연결된 형태가 아니기 때문에 클라이언트와 서버 간의 최대 연결 수보다 훨씬 많은 요청과 응답을 처리할 수 있다

- 단점: 연결을 끊어버리기 때문에 클라이언트의 이전 상황을 알 수 없다. 이러한 특징을 무상태 Stateless라고 말한다. 이러한 특징 때문에 정보를 유지하기 위해서 Cookie가 등장

URL

- 인터넷 상의 자원의 위치

- 특정 웹 서버 특정파일에 접근하기 위한 경로 혹은 주소

- 프로토콜의 종류 :// IP주소, 도메인 이름 / (자원의 위치) 문서 경로/ 문서 이름

http://www.sunny.co.kr/docs/index.html

+) IP는 집주소 (하나만 존재) , port는 각각의 방들 (여러 개)

하나의 방에 여러 개 서버가 존재할 수 X

하나의 물리적 컴퓨터에는 여러 개의 서버 존재 가능

이 서버는 포트값이 다르게 동작해야 함

포트값은 0보다 큰 값

http는 기본이 80번

1) 클라이언트가 원하는 서버에 접속

2) 원하는 정보 요청

- 첫번째 줄의 요청 메서드는 서버에게 요청의 종류를 알려주기 위해 사용

- 요청 데이터 format

- 요청할 때는 HTTP 요청 메시지를 따라야함

- 요청 헤더/바디로 나뉨

- 첫번째 줄에는 필수 등장 요소

- GET : 요청 메서드/ 자원의 경로/ http 버전

- 요청 메서드는 다양하게 존재

- GET은 요청 바디가 존재하지 X

GET : 정보를 요청하기 위해서 사용한다. (SELECT)
POST : 정보를 밀어넣기 위해서 사용한다. (INSERT)
PUT : 정보를 업데이트하기 위해서 사용한다. (UPDATE)
DELETE : 정보를 삭제하기 위해서 사용한다. (DELETE)
HEAD : (HTTP)헤더 정보만 요청한다. 해당 자원이 존재하는지 혹은 서버에 문제가 없는지를 확인하기 위해서 사용한다.
OPTIONS : 웹서버가 지원하는 메서드의 종류를 요청한다.
TRACE : 클라이언트의 요청을 그대로 반환한다. 예컨데 echo 서비스로 서버 상태를 확인하기 위한 목적으로 주로 사용한다.

3) 응답

- 응답 데이터 format 또한 헤더/바디 부분으로 나뉨

- 첫줄에는 반드시 응답 HTTP의 버전, 프로토콜, 메시지

4) 끝나고 나면 서버와 클라이언트의 연결 끝남

웹 프론트엔드

- 사용자에게 웹을 통해 다양한 콘텐츠( 문서, 동영상, 사진 등)을 제공

- 사용자의 요청에 반응해 동작

- 웹 자체가 문서

웹 프론트엔드의 역할

- 웹 콘텐츠를 잘 보여주기 위해 구조를 만들어야 함

- 적절한 배치와 일관된 디자인 제공해야함

- 사용자 요청을 잘 반영해야 함

- HTML, CSS, JavaScript

- html은 구조를 계층적으로 표현

백엔드

- 정보를 처리하고 저장

- Server Side라고 말함

- 요청에 따라 정보를 내려주는 역할

백엔드 개발자가 알아야 할 것들

- 프로그래밍 언어 (JAVA, Python, PHP, Javascript)

- 웹의 동작 원리

- 알고리즘, 자료구조 등 프로그래밍 기반 지식

- 운영체제, 네트워크 등에 대한 이해

- 프레임 워크에 대한 이해

- DBMS 에 대한 이해와 사용 방법( MySQL, Oracle)

브라우저의 동작

- 웹을 통해 데이터, 서버에서 전송한 데이터가 클라이언트에 도착해야 할 곳은 브라우저

- 브라우저에는 데이터를 해석해주는 파서(Parser) 와 데이터를 화면에 표현해주는 렌더링 엔진이 포함되어 있음

- 렌더링 엔진 - 색칠해주는

- 브라우저는 월드와이드웹(WWW)에서 정보를 검색, 표현하고 탐색하기 위한 소프트웨어

- 브라우저는 http로 서버와 네트워킹

- 파싱은 문자 단위로 하나하나 분석해서 데이터 객체로 구조화

- html은 구조화된 정보 -- tree 형태로 가짐

HTML을 해석해 DOM Tree를 만들고

CSS를 해석해 CSS Tree를 만든다

이 과정에서 Parsing이 필요하며 토큰 단위로 해석되는 방식은 일반적인 소스 코드의 컴파일 과정이다

DOM Tree와 CSS Tree는 연관되어 있으므로 Render Tree로 다시 조합된다

이렇게 조합된 결과는 화면에 어떻게 배치될지 크기와 위치 정보를 담고 있다

이후 이렇게 구성된 Render Tree 정보를 통해 화면에 어떤 부분에 어떻게 색칠할지 Painting 과정을 거친다

Markup Language

- 문서가 화면에 표시되는 형식을 나타내거나 데이터의 논리적인 구조를 명시하기 위한 규칙들을 정의한 언어의 일종

- 데이터를 기술한 언어

Parsing (해석)

브라우저가 트리 구조를 만들어 데이터를 해석 -> DOM tree

CSS

- key와 value 구조

인터넷에서 특정 벙보로 이동할 수 있는 주소 입력창이 있고 서버와 HTTP로 정보를 주고받을 수 있는 네트워크 모듈도 포함하고 있다

서버에서 받은 문서를 해석하고 실행하여 화면에 표현하기 위한 해석기 (Parser)들을 가지고 있다

브라우저마다 서로 다른 엔진을 포함한다

브라우저가 동작하는 방식

https://d2.naver.com/helloworld/59361

https://web.dev/howbrowserswork/

How browsers work

web.dev

특징

-HTML문서는 html이라는 태그로 시작해서 html 태그로 끝난다

- HTML은 계층적이며 tag를 사용해 표현한다

- JavaScript와 CSS는 html 안에 여기저기 존재

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    div{
      color:blue;
    }
    </style>
   <script>
    console.log("javascript codes..");
    </script>
</head>
<body>
 <div>웹 프론트엔드</div>
</body>
</html>

브라우저는 한 줄씩 코드 해석

렌더링은 화면을 보여주는 것

자바 스크립트가 렌더링을 방해 <- 자바 스크립트를 아래 위치 시킴 , body 태그 닫히기 직전 위치

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>저를소개해요</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/start.js"></script>
  </head>
  <body>
    <h1>안녕하세요</h1>
    <div>코드스쿼드 크롱이라고 합니다</div>
    <script src="js/library.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>

javascript 코드는 body 태그 닫히기 전에 위치하는 것이 렌더링을 방해하지 않아 좋고

CSS 코드는 head 안에 위치해서 렌더링 처리 시에 브라우저가 더 빨리 참고할 수 있게 하는 것이 좋음

웹서버

- 소프트웨어를 보통 말하지만 , 웹 서버 소프트웨어가 동작하는 컴퓨터

- 웹 서버의 가장 중요한 기능은 클라이언트가 요청한 HTML 문서나 각종 리소스를 전달하는 것

- 웹 브라우저나 웹 크롤러가 요청하는 리소스는 컴퓨터에 저장되어 있는 정적인 데이터이거나 동적인 결과가 될 수 있다

- 동적인 결과 <- 프로그램을 통해 만들어진 것

- 웹 크롤러 <- 네이버나 구글 이나 검색 사이트에서 다른 웹사이트를 읽어갈 때 사용하는 소프트웨어

웹 브라우저와 웹 서버는 http를 통해 통신

url 주소가 http로 시작한다는 것은 http를 사용한다는 의미

hyper text transfer protocol

프로토콜은 규약!

렌더링

- 하나로 합쳐서 보여주는 작업

웹 서버 소프트웨어의 종류

- 가장 많이 사용하는 웹 서버는 Apache(점유율 가장 높음), Nginx (성장중), Microsoft IIS

- Apache웹 서버는 Apache Software Foundation에서 개발한 웹서버로 오픈소스 소프트웨어(Open-source Software)이며, 거의 대부분 운영체제에서 설치 및 사용을 할 수 있습니다.

- Nginx는 차세대 웹서버로 불리며 더 적은 자원으로 더 빠르게 데이터를 서비스하는 것을 목적으로 만들어진 서버이며 -- - - Apache웹 서버와 마찬가지로 오픈소스 소프트웨어입니다.

WAS (Web Application Server)

클라이언트/서버 구조

- 클라이언트는 서비스를 제공하는 서버에게 정보를 요청하여 응답 받은 결과를 사용한다

DBMS (database management System)

- 다수의 사용자들이 데이터베이스 내의 데이터를 접근할 수 있도록 해주는 소프트웨어

- 보안이 취약하며 매번 접속해야 해서 클라이언트의 로직이 많아

미들웨어(MiddleWare)

- 클라이언트 쪽에 비즈니스 로직이 많을 경우, 클라이언트 관리 (배포 등) 로 인해 비용이 많이 발생하는 문제가 발생

- 비즈니스 로직을 클라이언트와 DBMS 사이의 미들웨어 클라이언트는 입력과 출력만 담당하도록 함

- 미들웨어는 데이터 조작할이 생기면 DBMS에게 부탁, 결과를 클라이언트에게 전송

- 클라이언트는 복잡한 로직이 줄어듬

- 프로그램 로직이 변경된다 하더라도 클라이언트 배포를 전부 변경할 필요 없이 미들웨어 로직만 변경하면 된다

WAS(Web Application Server)

- WAS는 일종의 미들웨어로 웹 클라이언트(보통 웹 브라우저)의 요청 중 보통 웹 애플리케이션이 동작하도록 지원하는 목적을 가진다

- 처음에는 정적인 데이터만 가능했음

- 프로그램 실행 환경과 데이터 베이스 접속 기능을 제공

- 여러 개의 트랜잭션(논리적인 작업 단위) 관리

- 업무를 처리하는 비즈니스 로직을 처리

- 웹 서버의 기능도 기본적으로 제공

- tomcat이 포함

웹서버 vs WAS

- WAS도 보통 자체적으로 웹 서버 기능을 내장하고 있다

- 현재는 WAS가 가지고 있는 웹 서버도 정적인 컨텐츠를 처리하는 데 있어 성능상 큰 차이 없다

- 규모가 커질수록 웹 서버와 WAS를 분리한다. 그 목적은 장애 극복 기능 (failover)인 경우가 많다

- 웹 서버는 보통 정적인 컨텐츠, WAS는 주로 동적인 결과를 웹 브라우저에게 전달

- 웹 서버가 WAS 앞단에 있으면 웹 서버는 상대적으 WAS보다 더 간단한 구조

- 대용량 어플리케이션, 여러 개의 서버 인 경우 -> WAS 자체 문제의 발생하면 재시작 해야함 -> 이때 웹 서버에서 먼저 WAS 문제 만나지 않도록 하게

- 무중단 서비스를 제공하기 위해 보통 WEB 서버는 WAS 앞단에 배

'WEB > 웹 프로그래밍(Boostcourse)' 카테고리의 다른 글

1-6 Summary (0)	2023.02.21
1-5 Servlet -BE (0)	2023.02.21
1-4 개발환경 설정 - BE (0)	2023.02.21
1-3 CSS - FE (0)	2023.02.21
1-2 HTML - FE (0)	2023.02.20

[JAVA] 상속 클래스 생성 과정

2023. 2. 3. 11:45

하위 클래스를 생성하면 상위 클래스가 먼저 생성됨

package ch03;

public class Customer {
	protected int customerID; //하위 클래스에선 접근 가능하지만 외부 클래스는 접근 불가
	protected String customerName;
	protected String customerGrade;
	int bonusPoint; //package default ->다른 package에서 접근 불가
	double bonusRatio;
	
	/*public Customer() {
		
		customerGrade="SILVER";
		bonusRatio=0.01;
		
		System.out.println("Customer() call");
	}*/
	public Customer(int customerID, String customerName) {
		this.customerID=customerID;
		this.customerName=customerName;
		
		customerGrade="SILVER";
		bonusRatio=0.01;
		System.out.println("Customer(int,String) call");
	}
	public int clacPrice(int price) {
		bonusPoint+=price*bonusRatio;
		return price;
	}
	public String showCustomerInfo() {
		return customerName+"님의 등급은 "+customerGrade+"이며 보너스포인트는 " + bonusPoint+"입니다.";
	}
	public int getCustomerID() {
		return customerID;
	}
	public void setCustomerID(int customerID) {
		this.customerID = customerID;
	}
	public String getCustomerName() {
		return customerName;
	}
	public void setCustomerName(String customerName) {
		this.customerName = customerName;
	}
	public String getCustomerGrade() {
		return customerGrade;
	}
	public void setCustomerGrade(String customerGrade) {
		this.customerGrade = customerGrade;
	}
	

}

package ch03;

public class VIPCustomer extends Customer {
	
	double salesRatio;
	String agentID;
	
	/*public VIPCustomer() {
		// super(); 오류 발생
		super(0,null); //상위 클래스의 생성자를 명시적으로 호출해줘야 O
		bonusRatio=0.05;
		salesRatio=0.1;
		customerGrade="VIP";
		System.out.println("VIP Customer() call");
	}*/
	
	public VIPCustomer(int customerID, String customerName) {
		super(customerID,customerName);
		
		//여기서 값 덮어씌우기!
		customerGrade="VIP";
		bonusRatio=0.1;
		System.out.println("VIP Customer(int,String) call");
		
	}
}

package ch03;

public class CustomerTest {

	public static void main(String[] args) {
		// TODO Auto-generated method stub
		Customer customerLee= new Customer(10010,"이순신");
		customerLee.bonusPoint=1000;
		System.out.println(customerLee.showCustomerInfo());
		
		VIPCustomer customerKim = new VIPCustomer(10020,"김유신");
		customerKim.bonusPoint=10000;
		System.out.println(customerKim.showCustomerInfo());
	}

}

'WEB > Java' 카테고리의 다른 글

[JAVA] 상속(inheritance) (0)	2023.01.23
[JAVA] 객체배열 ArrayList (0)	2023.01.23
[JAVA] 객체지향입문- 배열 (0)	2023.01.22
[JAVA] 객체지향입문- static 변수 (0)	2023.01.22
[JAVA] 객체지향입문- 객체 자신을 가리키는 this (0)	2023.01.22

[JAVA] 상속(inheritance)

2023. 1. 23. 17:25

멤버십 시나리오

회사에서 고객 정보를 활용한 맞춤 서비스를 하기 위해 일반고객(Customer)과
이보다 충성도가 높은 우수고객(VIPCustomer)에 따른 서비스를 제공하고자 함

물품을 구매할 떄 적용되는 할인율과 적립되는 보너스 포인트의 비율이 다름
여러 멤버십에 대한 각각 다양한 서비스를 제공할 수 있음
멤버십에 대한 구현을 클래스 상속을 활용하여 구현해보기

일반 고객 (Customer) 클래스 구현

고객의 속성: 고객 아이디, 고객 이름, 보너스 포인트, 보너스 포인트 적립 비용

일반 고객의 경우 물품 구매 시 1%의 보너스 포인트 적립

package ch03;

public class Customer {
	protected int customerID; //하위 클래스에선 접근 가능하지만 외부 클래스는 접근 불가
	protected String customerName;
	protected String customerGrade;
	int bonusPoint; //package default ->다른 package에서 접근 불가
	double bonusRatio;
	
	public Customer() {
		
		customerGrade="SILVER";
		bonusRatio=0.01;
	}
	public int clacPrice(int price) {
		bonusPoint+=price*bonusRatio;
		return price;
	}
	public String showCustomerInfo() {
		return customerName+"님의 등급은 "+customerGrade+"이며 보너스포인트는 " + bonusPoint+"입니다.";
	}
	public int getCustomerID() {
		return customerID;
	}
	public void setCustomerID(int customerID) {
		this.customerID = customerID;
	}
	public String getCustomerName() {
		return customerName;
	}
	public void setCustomerName(String customerName) {
		this.customerName = customerName;
	}
	public String getCustomerGrade() {
		return customerGrade;
	}
	public void setCustomerGrade(String customerGrade) {
		this.customerGrade = customerGrade;
	}
	

}

우수 고객 구현(VIP Customer)

매출에 더 많은 기여를 하는 단골 고객

제품을 살 때 10% 할인해 줌

보너스 포인트는 제품 가격의 5%를 적립해줌

담당 전문 상담원이 배정됨

이미 Customer에 구현된 내용이 중복되므로 Customer을 확장하여 구현함(상속)

package ch03;

public class VIPCustomer extends Customer {
	
	double salesRatio;
	String agentID;
	
	public VIPCustomer() {
		bonusRatio=0.05;
		salesRatio=0.1;
		customerGrade="VIP";
	}
}

package ch03;

public class CustomerTest {

	public static void main(String[] args) {
		// TODO Auto-generated method stub
		Customer customerLee= new Customer();
		customerLee.setCustomerName("이순신");
		customerLee.setCustomerID(10010);
		customerLee.bonusPoint=1000;
		System.out.println(customerLee.showCustomerInfo());
		
		VIPCustomer customerKim = new VIPCustomer();
		customerKim.setCustomerName("김유신");
		customerKim.setCustomerID(10020);
		customerKim.bonusPoint=10000;
		System.out.println(customerKim.showCustomerInfo());
	}

}

'WEB > Java' 카테고리의 다른 글

[JAVA] 상속 클래스 생성 과정 (0)	2023.02.03
[JAVA] 객체배열 ArrayList (0)	2023.01.23
[JAVA] 객체지향입문- 배열 (0)	2023.01.22
[JAVA] 객체지향입문- static 변수 (0)	2023.01.22
[JAVA] 객체지향입문- 객체 자신을 가리키는 this (0)	2023.01.22

PREV 1 2 3 NEXT

AUSPICIOUS

WEB

1-6 Summary

'WEB > 웹 프로그래밍(Boostcourse)' 카테고리의 다른 글

1-5 Servlet -BE

'WEB > 웹 프로그래밍(Boostcourse)' 카테고리의 다른 글

1-4 개발환경 설정 - BE

'WEB > 웹 프로그래밍(Boostcourse)' 카테고리의 다른 글

1-3 CSS - FE

'WEB > 웹 프로그래밍(Boostcourse)' 카테고리의 다른 글

1-2 HTML - FE

'WEB > 웹 프로그래밍(Boostcourse)' 카테고리의 다른 글

1-1 웹개발의 이해

'WEB > 웹 프로그래밍(Boostcourse)' 카테고리의 다른 글

[JAVA] 상속 클래스 생성 과정

'WEB > Java' 카테고리의 다른 글

[JAVA] 상속(inheritance)

'WEB > Java' 카테고리의 다른 글

+ Recent posts

티스토리툴바