1. 소프트웨어 아키텍처

소프트웨어 아키텍쳐는 소프트웨어의 골격이 되는 기본 구조이자, 소프트웨어를 구성하는 요소들 간의 관계를

표현하는 시스템의 구조는 또는 구조체이다.

• 모듈화(Modularity)

모듈화란 관리가 용이하게 모듈 단위로 나누는 것

• 추상화(Abstraction)

불필요한 부분을 생략, 필요한 부분을 강조하여 모델화 하는 것

• 정보 은닉(Information Hiding)

정보은닉은 감기약 캡슐에 어떤 재료가 들어 있는지는 몰라도

감기 결렸을때 먹는 약이라는 것만 알고 복용하는 것을 의미

@@Information Hiding,Abstraction,Modularity,Encapsulation(캡슐화)

시험에서 영어로 나올때가 있어서 영어도 외우자

• 소프트웨어 아키텍처의 품질 속성

품질 속성으로는 성능,보안,가용성,기능성,사용성이 있다.

(성능,보안은 말 그대로니깐 넘어갈께요)

가용성 : 장애 없이 서비스를 제공

기능성 : 사용자가 요구한 기능을 만족스럽게 구현

사용성 : 사용자가 헤매지 않게 명확하고 편리하게 구현

 2. 아키텍처 패턴

아키텍처 패턴의 장점

• 시행착오를 줄여 개발시간 단축
• 공통된 아키텍처 공유할 수 있어 의사소통 간편
• 아키텍처 패턴으로 레이어 패턴, 클라이언트-서버 패턴, 파이프-필터 패턴, 모델-뷰-컨트롤러 패턴

레이어 패턴 : 계층으로 구분하여 구성, OSI 참조 모델

클라이언트-서버 패턴 : 요청과 응답을 받기 위해 동기화되는 경우를 제외하고는 서로 독립적

파이프-필터 패턴 : 대포적으로 UNIX의 쉘이 있다.

                            데이터 변환, 버퍼링, 동기화 등에 주료 사용

모델 - 뷰 - 컨트롤러 패턴 

3. 객체 지향

객체 지향의 주요 구성 요소와 개념에는

객체(Object), 클래스(Class), 캡슐화(Encapsulation), 상속(Inheritance)

, 다형성(Polymorphism)이 있다.

객체는 데이터와 데이터를 처리하는 함수를 묶어 놓은 하나의 소프트웨어 모듈

클래스는 공통된 속성과 연산을 갖는 객체의 집합

캡슐화(Encapsulation)

데이터(속성)와 데이터를 처리하는 함수를 하나로 묶는 것을 의미한다.

캡슐화된 객체들은 재사용이 용이한다.

인터페이스가 단순해지고, 객체 간의 결합도가 낮아진다.

상속(Inheritance)

부모클래스의 속성,연상을 자식클래스가 물려받는 것.

다형성(Polymorphism)

4. 모듈(Module)

결합도(Coupling)

모듈 간에 상호 의존하는 정도 또는 두 모듈 사이의 연관 관계를 의미

★★★결합도순서는 거의 필수로 나온다 ★★★

<- 결합도가 약함                                                                                                                                              결합도가 강함->

자스제외공내 (약한순으로)

응집도(Cohesion)

정보은닉개념을 확장한 것으로 즉, 모듈이 독립적인 기능으로 정의 되어있는 정도를 의미

<- 응집도 강함                                                                                                                                              응집도 약함->

우논시절교순기(약한순으로)

ex) 우논시에 친구와 절교한 순기가 살고 있다.(전 이렇게 외웠어요ㅋㅋ)

팬인(Fan-in) / 팬아웃(Fan-out)

팬인은 어떤 모듈을 제어하는 모듈의 수를 나타낸다.

팬아웃은 어떤 모듈에 의해 제어되는 모듈의 수를 나타낸다.

ex) G의 팬인은 BCD (그 이유는 어떤모듈에 의해 제어당하고 있는지가 팬인

팬아웃은 G가 제어가하고 있는 모듈 I,J)

1. Object

• JS의 데이터 타입 중 하나
• 관련 데이터,함수 집합체
• JS의 거의 모든 객체는 Object의 인스턴스
• 객체는 key와 value의 집합체 (object = {key : value};)
• 하나의 properties는 key:value로 구성됨

1. Literals and properties (데이터 그리고 특성)

Literals는 변하지 않는 데이터를 말한다.

const obj1 = {}; // 'obect literal' 문법
const obj2 = new Object(); // 'object constructor' 문법

function print(person) {
  console.log(person.name);
  console.log(person.age);
}

const yyeo = { name: `yyeo`, age: 4 };
//key는 name, value는 yyeo

print(yyeo); // > yyeo \n 4
//Runtime(프로그램이 동작하고 있을 때)
// dynamically typed(동적 타입) language

// can add properties later (나중에 속성 추가 가능)
yyeo.hasJob = true;
console.log(yyeo.hasJob); // > true

// can delete properties later (나중에 속성 삭제 가능)
delete yyeo.hasJob;
console.log(yyeo.hasJob); // > undefined

2. Computed(계산된) properties

• object['key']
• 동적으로 key의 value를 받아와야 할 때 유용한 방법

2. Computed properties
 console.log(yyeo.name);
 //그 값이 필요할때
 //or
 console.log(yyeo['name']);
 yyeo['hasJob'] = true;
 console.log(yyeo.hasJob);
 //그 값이 뭔지 모를때 즉,Runtime때 받아야할때
 //key는 항상 StringType으로
 function printValue(obj,key) {
     console.log(obj[key]);
 }
 printValue(yyeo,'name');
 printValue(yyeo,'age');
 
 //동적으로 키를 받을때 유용~

3. Property shorthand(단축 속성명)

• key와 value의 이름이 동일하다면 간단하게 정의할 수 있다.

//3. Property value shorthand

function makeperson(name,age) {
    //다른계산을 하지않고 순수하게 오브젝트를 생성하는 놈들은 대문자로 쓴다
    //this - {};
    this.name = name;
    this.age = age;
    // return  {
    //     name,
    //     age,
    //     //키와 값이 값으면 name, 으로 써도 된다.
    //     //key, value
    // };
}

//리턴으로 써도 되고, this로도 써도 된다.

4. Constructor function (생성자 함수)

• class가 없었을 때 방식
• 함수명 첫 글자는 대문자로 (약속)
• 호출 시 class처럼 new  키워드 사용

// 위 class와 기능적으로 똑같음
function Person(name, age) {
  this.name = name;
  this.age = age;
}

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
	}
}

const person2 = new Person(`gunwoo`, 28.8);
console.log(person2); // > Person {name: "yyeo", age: 28.8}

5. in 연산자

• 해당 object에 key를 체크하는 연산자
• key in obj

6. for in, for of 문

// for (key in obj)
for (const key in ellie) {
  console.log(key); // > name \n age \n hasJob
}

// for (value of iterable)
const array = [1, 2, 4, 5];

// for(let i = 0; i < array.length; i++) {
//     console.log(array[i]);

//위 아래와 동일하지만 아래를 쓸 경우 좀 더 간결,간단해진다

for (const value of array) {
  console.log(value); // > 1 \n 2 \n 4 \n 5
}

7. Cloning (복제)

• Object.assign은 얕은 복사이다

//7. cloning
// Object.assign(dest, [obj1, obj2, obj3...])
const user = { name : 'yyeo',age : '20'};
const user2 = user;
user2.name = 'coder';
console.log(user);

//old way
const user3 = {};
for ( key in user) {
    user3[key] = user[key];
}
console.clear();
console.log(user3);

//const user4 = {};
//Object.assign(user4, user);
//console.log(user4);
//위와 동일 아래꺼가 더 간결.
const user4 = Object.assign({},user);
console.log(user4);
//assign 열거할 수 있는 하나 이상의 출처 객체로부터 
//대상 객체로 속성을 복사할 때 사용합니다. 대상 객체를 반환합니다.

//another example
const fruit1 = { color: 'red'};
const fruit2 = { color: 'blue', size: 'big'};
const fruit3 = { color: 'pink', size: 'small'};
const mixed = Object.assign({},fruit1,fruit2,fruit3);
//3에서부터 1까지 덮어씌운다. 3블랙은 2로 2의 블랙은 1로
console.log(mixed.color);
console.log(mixed.size);

복제 관련 링크

https://www.daleseo.com/js-objects-clone/

파일을 읽고 그 값들을 한줄씩 테이블에 출력

member.txt

<member.txt>

milks,밀키스,사랑해요 밀키스,042-7x9-8x50
oreo,오레오,우유랑 먹자, 010-12xx-5x78
꼬북칩, 꼬북이, 물 못 뱉어요, 0x0-14x-2x89
야채타임, 야채싫어, 케찹 안먹어, 02-1x35-xx67

한줄씩 출력을 한다.

파일을 읽을려면 'BufferedReader'를 써야합니다.

BufferedReader는 Enter만 경계로 인식하고 받은 데이터가 String으로 고정되어 있다.

많은 양의 데이터를 입력 받을 경우 효율이 좋다고 합니다.

결과 화면

application02.jsp

<%@page import="jdk.management.resource.internal.inst.FileInputStreamRMHooks"%>
<%@page import="java.io.FileInputStream"%>
<%@page import="java.io.InputStreamReader"%>
<%@page import="java.io.BufferedReader"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<title>application02.jsp</title>
</head>
<body>	
	<style>
	.table{min-width: 600px; padding : 5px;border-collapse;}
	.table td {border-style: solid; border-width: 1px; background-color: #ee26; text-align:center;}
	.table th {border-style: solid; border-width: 1px; background-color: #fff5df; text-align:center;}
	</style>
	<h3> 회원목록 </h3>
	<table class = "table";>
	<colgroup>
		<col style ="width: 15%;"/>
		<col style ="width: 15%;"/>
		<col /> 
        <!-- 아무것도 안쓰면 남은 %에 따라 비율이 정해진다. 45%가 된다.  -->
		<col style ="width: 25%;"/>
		</colgroup>
	<thead>
	<tr>
		<th>ID</th>
		<th>회원명</th>
		<th>주소</th>
		<th>연락처</th>
		</tr>
		</thead>
		<tbody>
		<%
		String filePath = application.getRealPath("/_07/member.txt");
		out.println("filepath=" + filePath);
		BufferedReader reader= new BufferedReader(new InputStreamReader(new FileInputStream(filePath),"UTF-8"));

		while((filePath = reader.readLine()) != null) {
			String temp_Arr [] = filePath.split(",");
            <!-- split "," 경계로 끊어서 배열에 넣는다.-->
			out.println("<tr>");
			for(int i = 0; i < temp_Arr.length;i++){
			out.println("<td>"+temp_Arr[i]+"</td>");
			}
			out.println("</tr>");
		}
		if(reader != null) reader.close();
	%>
		</tbody>
	</table>
</body>
</html>

1.  BufferedReader 사용법

2.  split "," 마다 배열에 넣는다. temp_Arr

3.  null이면 읽는것을 그만둔다.

1. 두수 입력 연산자 선택 후 값 출력(게산기)

work_.calc.jsp

<body>
<h3>계산하자!!!</h3>
<!-- 5 * 10의 결과는 50입니다. 
단, 숫자가 아니거나, 연산자가 선택되지 않았다면 메시지를 출력해 주세요.  -->
<form action="work_result.jsp" method="get">
	<input type="text" name="num1" size="5" placeholder="첫번째 숫자입력">
	<select name="oper" >
		<option value="">연산자 선택</option>
		<option value="+">+</option>
		<option value="-">-</option>
		<option value="*">*</option>
		<option value="/">/</option>
	</select>
	<input type="text" name="num2" size="5" placeholder="두번째 숫자입력">
	<button type="submit">계산</button>
</form>
</body>
</html>

work_result.jsp

<%
	//Integer.parseInt
	//객체가 null이면 메소드는 쓸 수 없다.
	String n1 = request.getParameter("num1");
	boolean res = isDigit(n1);
	if(res == false) {
		out.println("첫번째 숫자가 입력되지 않았습니다.");
		return;
	}
	String n2 = request.getParameter("num2");
	res = isDigit(n2);
	if(res == false) {
		out.println("두번째 숫자가 입력되지 않았습니다.");
		return;
	}
	int nu1 = Integer.parseInt(n1);
	int nu2 = Integer.parseInt(n2);
	String oper = request.getParameter("oper");
	
	int r = 0;
	//java7 이후부터 switch문에 문자열을 쓸 수 있게 되었다.
	switch(oper) {
	case"+" : r = nu1 + nu2; break;
	case"-" : r = nu1 - nu2; break;
	case"*" : r = nu1 * nu2; break;
	case"/" : r = nu1 / nu2; break;
	}
	
/* 	if(oper.equals("+")) {
		r = nu1 + nu2;
	}else if("-".equals(oper) ) {
		r = nu1 + nu2;
	} */
	
	
%>
<%=nu1 %> <%=oper %> <%=nu2 %>의 결과는 <%=r %>

<%!
	public boolean isDigit(String str) {
	if(str == null){
	return true;
}
	char chArr [] = str.toCharArray();
	for(char x : chArr) { //for(대입받을 변수정의 : 배열명)
	if(x < '0' || x > 57) {
		//0 -> 숫자 8 57 -> 문자
	}
}
	return true;
}
%>

</body>
</html>

1. 연산자를 미선택 하면 선택하라고 나오지만, 두 숫자를 미 입력 시 나오는건 못했다 ㅠㅠ 추후에 해볼 예정이다.

2. switch문

1. 사용자 인터페이스(User Interface)

사용자 인터페이스는 사용자와 시스템 간의 상호작용이 위험하게 이뤄지도록 도와주는

장치나 소프트웨어를 의미한다.

• 사용자 인터페이스 특징

(많은 특징이 있지만, 간략하게)

1. 변경이 제일 많이 생긴다.(사용자의 만족도 영향을 제일 받는 곳 UI)
2. 수행결과의 오류를 줄인다.
3. 정보 제공자와 공급자 간의 매개 역할을 수행한다.
4. 소프트웨어 아키텍쳐를 반드시 숙지해야한다.

(소프트웨어 아키텍쳐는 초기설계라고도 불리고 기본틀을 만드는 것, 밑그림이라고 생각하면 된다)

• 사용자 인터페이스의 기본 원칙

1. 직관성 : 누구나 쉽게 이해
2. 유효성 : 목적을 정확,완벽 달성
3. 학습성 : 누구나 쉽게 배우고 익힘
4. 유연성 : 요구사항을 최대한 수용, 실수 최소

2. UI 설계 도구

UI의 화면 구조나 화면 배치 설계할때 쓰는 도구

종류로는 (와이어프레임, 목업, 스토리보드,프로토타입, 유스케이스)

• 와이어프레임(Wireframe)

기획 단계 초기에 제작, 뼈대를 설계하는 단계

와이어프레임 툴로는

(손그림,파워포인트, 키노트,스케치,일러스트,포토샵)

• 목업(Mockup)

실제화면과 유사하게 만든 정적인 형태의 모형

목업 툴로는

(파워목업,발사믹 목업)

• 스토리보드(Story Board)

와이어프레임에 설명,페이지,이동흐름 추가한 모형

스토리보드 툴로는

(파워포인트, 키노트, 스케치,Axure)

• 프로토타입(Prototype)

테스트가 가능한 동적인 형태의 모형

프로토타입 툴로는

(HTML/CSS, Axure,Flinto,네이버 프로토나우,카카오 오븐)

여기서, 목업은 툴에 목업이 들어있어 헷갈리지 않지만,
생소한 Axure은 스토리,프로토타입에 있다는거 메모!

• 유스케이스(Use Case)

사용자가 원하는 목표를 달성하기 위해 수행할 내용을 기술 함

(사용자 측면에서 기술한다는 것만 기억)

3. UI 프로토타입 제작 및 검토

• UI 시나리오 문서로 인한 기대 효과

1. 요구사항,의사소통에 대한 오류 감소
2. 재작업이 감소, 혼란 최소화
3. 불필요한 기능 최소화
4. 개발 비용 절감
5. 개발 속도 향상

ex.) 다음 중 UI 시나리오 문서에 대한 설명으로 틀린 것은

X ( 해당 시스템의 기능에 초점을 맞춰 작성한다)

--> UI 시나리오 문서는 시스템의 기능보단 사용자의 테스크에 초점에 맞춰 있음)

1.  검색어 입력하면 사이트에 검색하기

request.getparameter(); // 이름이 name인 파라미터의 값을 구한다. 존재하지 않을 경우 null을 리턴

response.sendRedirect(); // 특정 처리 후, 또는 특정 조건일 때에 지정한 페이지로 이동하고 싶은 경우 많이 사용되는 것

form.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%
    	//요청 정보의 인코딩을 변경 (기본 ISO-8859-1)
    	request.setCharacterEncoding("UTF-8");
    %>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div style="text-align: center;">
	<h2>검색</h2>
		<form action="search.jsp" method="POST"> <!-- GET 요청 . POST 전송 -->
			<table>
				<colgroup>
					<col style = "width:"20%;" />
					<col />
				</colgroup>
				<tr>
				<th>검색어</th>
				<td><input type="text" name="find" 
				placeholder="검색어 입력"></td>
				</tr>
				<tr>
				<th>검색사이트</th>
				<td>
                <% //<lable> 태그는 사용자 인터페이스 요소의 라벨을 정의할때 사용%>
					<label><input type="radio" name = "site" value = "naver">네이버  </label>
					<label><input type="radio" name = "site" value = "daum">다음  </label>
					<label><input type="radio" name = "site" value = "google">구글  </label>
					<label><input type="radio" name = "site" value = "bing">빙  </label>
				</td>
				<tr>
					<td colspan="2"><button type="submit">찾아보기</button>
					</td>
					</tr>
					
			</table>
		</form>
		</div>
</body>
</html>

//name = find가 검색어

//site = 포털사이트를 선택해 어디서 검색할지

search.jsp

<%@page import="java.net.URLEncoder"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
	String f = request.getParameter("find"); 
	//form에서 "검색어"에서 입력한 파라미터를 f 변수에 저장
	String s = request.getParameter("site");

//form에서 "사이트"에서 입력한 파라미터를 s 변수에 저장
//https://www.google.com/search?q=%EC%98%A4%ED%86%A0%EB%B0%94%EC%9D%B4
//https://search.daum.net/search?w=tot&DA
//
%>

검색어 : <%=f %> <br>
사이트 : <%=s %> <br>
<%
	//URLEncoder.encode(s);
	String encF = URLEncoder.encode(f,"utf-8");
	String url = "";
switch(s) {
<%-- 구글이나 다음,네이버에 '오토바이'라고 검색 할 시 주소창 =까지 복사 -->
<%-- f는 검색할 단어,문장 + f를 해주면 그에 해당하는 검색을 한다. -->
case "naver" : url = "https://search.naver.com/search.naver?query=" + f;
break;
case "daum" : url = "https://search.daum.net/search?w=tot&q=" + f;
break;
case "google" : url = "https://www.google.com/search?q=" +f;
break;
}
<%-- s는 라디오버튼을 선택 해야 하지만 만약 null(선택하지 않으면)
if문이 실행 된다. 
if( !"".equals(url)  ) {
	response.sendRedirect(url);
}else{
	%>
	<h4>윤고랭이</h4>
	<% }%>
</body>
</html>

1. getparameter를 사용해 name "site" 불러오기

2. switch문을 사용해서 url 복사 후 검색할 단어,문장 붙이기 + f

3. if( !"".equals(url)  : s는 라디오 버튼인데

    아무것도 선택하지 않을 때 if문 이 실행된다.

    (url)에 링크 입력 하면 그쪽으로 간다.

1. UML(통합 모델링 언어)

시스템 개발자와 고객 또는 개발자 상호간의 의사소통이 원활하게 이루어질수있도록 

표준화한 대표적인 객체 지향적 언어

사물(Things)

ex.) UML의 구성 요소 중 사물에 속하지 않는 것은?

이렇게 문제가 나온다.

• 구조 사물 (Structural Things)
• 행동 사물 (Behavioral Things)
• 그룹 사물 (Grouping Things)
• 주해 사물 (Annotation Things)

관계(Relationships)

사물과 사물 사이의 연관성을 표현하는 것

정처기 3번째인데 문제가 다 일반화 관계만 나온거 같다.

다른 연관,집합,포함,의존가 있는데 대부분 이름만 들어도 대충 알 수 있는거라 뺏다.(귀찮으..ㄴ거 절대아님)

• 일반화 관계 

하나의 사물이 다른 사물에 비해 더 일반 적인지 구체적인지를 표현

ex)아메리카노와 에스프레소는 커피이다. 다시 말하면, 커피에는 아메리카노와 에스프레소가 있다.

다이어그램(Diagram)

사물과 관계를 도형으로 표현한 것

• 구조적 다이어그램

1. 클래스 다이어그램 : 클래스와 클래스가 가지는 속성, 클래스 사이의 관계를 표현
2. 객체 다이어그램 : 클래스에 속한 사물들 , 객체와 객체 사이의 관계로 표현
3. 컴포넌트 다이어그램 : 구현 단계에서 사용되는 다이어그램
4. 배치 다이어그램 : 물리적 요소들의 위치를 표현, 구현단계에서 사용 ( 컴포넌트와 차이라면 물리적 요소!)
5. 복합체 구조 다이어그램
6. 패키지 다이어그램

• 행위 다이어그램

1. 유스케이스 다이어그램
2. 시퀀스 다이어그램 : 상호 작용하는 시스템이나 객체들이 주고 받는 메세지 표현
3. 커뮤니케이션 다이어그램
4. 상태 다이어그램 : 상호작용에 따라 상태가 어떻게 변화하는지
5. 활동 다이어그램 : 처리의 흐름을 순서에 따라 변화한다.
6. 상호작용 개요 다이어그램
7. 타이밍 다이어그램

구구단 몇 단인지 선택해서 출력하기

getParameter(String name) : 이름이 name인 파라미터의 값을 구한다. 존재하지 않을 경우 null을 리턴

dan_input.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div style="text-align: center;">
	<h2>구구단 입력</h2>
		<form action="dan_result.jsp" method="POST"> <!-- GET 요청 . POST 전송 -->
        <!-- daun_result.jsp에 전송 
        	즉, 제출하기를 누르면 선택한 정보들이 dan_result.jsp에 간다.-->
			<table>
				<colgroup>
					<col style = "width:"20%;" />
					<col />
				</colgroup>
				<tr>
				<th>아이디</th>
				<td><input type="text" name="memName" 
				placeholder="성명입력"></td>
				</tr>
				<tr>
				<th>구구단</th>
				<td>
					<select name ="dan">
						<option value="">== 선택 == </option>
						<option value="2"> 2단  </option>
						<option value="3"> 3단  </option>
						<option value="4"> 4단  </option>
						<option value="5"> 5단  </option>
						<option value="6"> 6단  </option>
						<option value="7"> 7단  </option>
						<option value="8"> 8단  </option>
						<option value="9"> 9단  </option>
					</select>
				</td>
				<tr>
					<td><button type="submit">제출하기</button>
					</td>
					</tr>
					
			</table>
		</form>
		</div>
</body>
</html>

출력을 하면 

이렇게 나온다. 여기서 n단을 선택 후 제출하기를 누르면 해당 단이 나오도록 한다.

여기서 중요한것은 name과 value이다. name = dan에서 value를 가져와 단을 가져오는 것이다.

dan_result.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
    
    <%
    	request.setCharacterEncoding("UTF-8");
   %>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
	String num = request.getParameter("dan");
    <!-- name이 dan이라는 파라미터의 value를 가져온다. -->
	int dan = Integer.parseInt(num);%>
	<!-- String타입의 숫자를 int타입으로 변환해준다. -->
	
	<h3> <%=request.getParameter("memName") %> 님 방가방가</h3>
    <!-- 아이디 name을 받아온다.-->
	<h4> <%=request.getParameter("dan")%> 단</h4>
    <!-- 몇단인지를 받아온다 -->
			<ul>
				<%request.getParameter("dan");
				
				for(int i =1; i < 10;i++){
				%>
					<li> <%=dan%> * <%=i%> = <%= dan * i %>
					<%
					}
					%>
		</ul>
</body>
</html>

1.  String타입의 숫자를 int타입으로 바꿔야한다.(parseInt)

2.  getparameter는 이름이 name인 파라미터의 value를 구한다.

3.  반복문