🌱[구디아카데미 IT국비지원]

김희진·2023년 4월 17일

GDJ 66기 - 클라우드 활용 자바 개발자 양성과정

목록 보기

9/25

[구디아카데미 IT국비지원] 형변환과 ArrayList 타입, 랩퍼타입과 External CSS방식에 대해 배우고 이를 이용하여 직접 페이지를 만드는 실습을 했다.

💡 형변환

int x = 10;
double dx = (double) x; // int타입을 double타입으로 바꾸는 것은 소숫점을 추가하는 것이기 때문에 데이터 손실이 발생하지 않음
// double dx = x; // 앞에 타입을 안써줘도 가능=자동형변환, 데이터 손실이 발생하지 않는 경우에만 사용 가능!
	
double dy = 3.0;
int y = (int) dy; // double타입을 int타입으로 바꾸면 소숫점이 잘리기 때문에 데이터 손실이 발생 = 명시적형변환
// int y = dy; error // 데이터 손실이 발생하는 형변환이기 때문에 자동형변환 불가능!
	
float fz = 3.14F;
long z = (long)fz; // 이 경우는 자동형변환 불가! -> float가 long보다 물리적크기는 작지만 값을 표현하는 범위가 크기 때문이다
// float는 값표현방식에 오차를 허용하는 '부동소숫점 방식'을 사용하기 때문에!

앞 시간에 배운대로 (타입)을 써서 앞에 붙여주면 그 타입을 바꿀 수 있다. 이것을 형변환이라고 한다.
하지만 형변환이 항상 가능한 것은 아니다. 기본타입은 기본타입끼리, 참조타입은 참조타입끼리만 형변환이 가능하다.
(BUT 자바언어에서 blooean 타입은 불가능!)

✔ 자동형변환

자동형변환은 (타입)을 굳이 쓰지 않아도 자동으로 형변환이 가능하다.
하지만 데이터 손실이 발생하지 않는 형변환인 경우에만 자동형변환이 가능하다!
특히 float타입과 long타입을 주의해야 한다. float타입이 4byte고 long타입이 8byte이기 때문에 헷갈릴 수 있지만, 물리적 크기를 따지는 것이 아닌 값을 표현하는 범위를 따져야 데이터 손실이 발생하는지 아닌지 알 수 있기 때문이다.
자동형변환은 추후에 배울 상속의 개념과 관련되어 있으므로 지금 잘 이해하고 넘어가면 좋다.

💡 ArrayList

앞서 배운 배열보다 더 많이 사용하게 될 것이 바로 ArrayList 이다.
앞 시간에 실습한 참조타입의 배열 대신 참조타입의 ArrayList도 자주 사용하게 될 것이다.
ArrayList는 자바언어에서 불편한 배열대신 사용 가능하도록 제공하는 기본 라이브러리(API) 클래스이다.
ArrayList<String> list = new ArrayList<String>(3); : 이러한 형태로 생성할 수 있는데, 이때 괄호()안에는 배열처럼 반드시 숫자를 지정할 필요 없이 공백으로 둘 수 있다. 이것은 ArrayList가 동적배열이라는 특징을 가지고 있기 때문이다.

✔ 동적배열

배열은 length(길이)가 존재 한다. 그래서 처음 생성할 때 지정한 길이를 초과해서 입력하면 예외가 발생한다. 이것을 정적배열 이라 한다.
하지만 ArrayList는 size(크기)가 존재한다. 미리 정해진 값 없이 list.add로 추가한 만큼 크기가 결정된다. 또한, 배열처럼 인덱스를 지정할 필요도 없다. 이것을 동적배열이라 한다.

💡 랩퍼타입

<%
	//랩퍼타입 8개
	Byte a = new Byte((byte)1);
	short b = new Short((short)2);
	Integer c = new Integer(3);
	Long d = new Long(4L);
	Character e = new Character('가');
	Float f = new Float(3.14F);
	Double g = new Double(3.14);
	Boolean h = new Boolean(true);
	
	Integer c2 = 3; // 보통 이렇게 작성, auto boxing이라고 부른다
	int x = c2; // auto unboxing
	
	int y = Integer.parseInt("777"); // String -(참조타입 형변환)-> Integer -(언박싱)-> int, 즉 이건 형변환이라고 부를 수는 없음
%>

// 다음은 참조타입의 형변환과 언박싱이 발생하여 String이 int로 변경됨
// ex) int x = Integer.parseInt("14");
// 1)문자14를 (Integer)"14"  Integer타입으로 형변환 <- 참조타입간에 형변환
// 2) Integer 14를 int 14로 변경 <- 언박싱(랩퍼타입과 기본타입간에 변환, 박싱:기본->랩퍼, 언박싱:랩퍼->기본)

ArrayList<int> list; // error
ArrayList<Integer> list;

랩퍼(박싱) 타입 : 기본타입과 동일한 데이터가 저장가능한 자바의 참조타입으로 기본 라이브러리(API)에 포함된 클래스이다.
ArrayList는 참조타입의 배열만 생성 가능하므로 기본 타입의 배열을 ArrayList로 생성하려면 자바의 랩퍼(박싱)타입을 사용해야 한다.
기본타입을 참조타입처럼 쓸 수 있으며, 박싱과 언박싱타입은 서로 호환이 가능하다.

💡 실습

빅데이터란? 네이버회원과 카카오회원 등.. 성질이 다른 데이터들의 집합을 뜻한다. 보통 소셜로그인 기능을 구현할때 쓰게되는 개념이다.
이런 데이터들을 모아서 필터링 하기 (다른 성질의 데이터에서 공통된 성질의 데이터를 모으기=정제하기)는 실무에서 자주하게 되는 기능이다.

📌 학생 목록 만들기

그래서 먼저 첫번째 실습으로, ArrayList를 이용하여 다양한 정보들을 가지고 있는 학생의 목록을 정제하여 출력하는 연습을 해보았다.

📍 작성 (1) - Person.java

package onepiece;

public class Person {
	public String name;
	public String gender;
	public int age;
}

클래스를 생성한다.

📍 작성 (2) - PersonList.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.util.ArrayList" %>
<%@ page import="onepiece.Person" %>
<%
	// 데이터 생성
	ArrayList<Person> list = new ArrayList<Person>();
	// data 1
	Person kcs = new Person(); // 변수생성
	kcs.name = "김철수"; // 값 넣기
	kcs.gender = "남";
	kcs.age = 17;
	list.add(kcs); // 리스트에 추가
	
	// data 2
	Person lsh = new Person();
	lsh.name = "이순희";
	lsh.gender = "여";
	lsh.age = 20;
	list.add(lsh);
		
	// data 3
	Person hkd = new Person();
	hkd.name = "홍길동";
	hkd.gender = "남";
	hkd.age = 21;
	list.add(hkd);
		
	// data 4
	Person kha = new Person();
	kha.name = "김현아";
	kha.gender = "여";
	kha.age = 16;
	list.add(kha);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="./myStyle.css"> <!-- (External CSS방식) -->
</head>
<body>
	<table>
		<thead>
			<tr>
				<th>이름</th>
				<th>성별</th>
				<th>나이</th>
			</tr>
		</thead>
		
		<tbody>
			<%
				for(Person p : list) { // list.size()만큼 반복, p는 내가 임의로 지어주는 변수, 변수 p에 배열이 순서대로 대입됨
			%>
					<tr>
						<td><%=p.name%></td>
						<td><%=p.gender%></td>
						<td><%=p.age%></td>
					</tr>
			<%
				}
			%>
		</tbody>
	</table>
</body>
</html>

page import로 패키지명 생략하기
ArrayList<Person> list = new ArrayList<Person>(); : 앞서 작성한 클래스(참조타입, Person)의 ArrayList 생성, 이름은 list로 지정
Person kcs = new Person(); : 클래스 변수 kcs 생성
kcs.name = "김철수"; : 값 넣기
list.add(kcs); : 변수 kcs에 입력된 모든 값들을 ArrayList에 최종적으로 추가
for(Person p : list) : foreach문 사용, list에 저장된 값들을 클래스에서 생성한 타입대로 불러올 수 있다.
<%=p.name%> : 값을 불러올 땐 foreach문 작성시 임의로 대입하기 위해 지정된 변수의 이름과 마침표 이용

📍 결과

학생들의 목록을 이름, 성별, 나이로 정제하여 출력했다.

📌 원피스 등장인물 목록 만들기 (1)

원피스 등장인물의 데이터 추상화하기

📍 작성 (1) - Pirate.java

package onepiece;
import java.util.ArrayList; // 패키지명 줄이기
public class Pirate {
	public String name;
	public String nickName;
	public char gender; // 'M', 'F' 출력시 남여 이미지
	public String birth;
	public int age;
	public int height;
	public ArrayList<String> hobby; // ☆ 이렇게 하면 취미 여러개를 넣을 수 있음
	public String blood;
	public String country;
	public long money; // 현상금 20억을 넘어가서
	public String group; // 해적(소속)
	public boolean isDevilFruit; // 악마의 열매 유무 // 출력 시 이미지
}

클래스를 생성한다.
public ArrayList<String> hobby; : 입력되는 값이 하나가 아니라 여러개일 경우 이렇게 ArrayList안에 또다른 ArrayList를 생성할 수 있다.

📍 작성 (2) - onepiece.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="onepiece.Pirate" %>
<%@ page import="java.util.ArrayList" %>
<%
	// RDBMS(오라클,mysql(mariadb),mssql) 로 데이터를 불러와서
	// 코드상에서 사용 가능한 형태로 (ArrayList<Pirate>) 로 변경할 수 있으나
	// 우리는 직접 데이터를 입력하는 것
%>
<%
	ArrayList<Pirate> list = new ArrayList<Pirate>(); // 배열
	
	// Pirat 객체를 20개 생성
	// 1)
	Pirate p1 = new Pirate(); // 클래스
	p1.name = "몽키 D. 루피";
	p1.nickName = "밀짚모자";
	p1.gender = 'M';
	p1.birth = "5월 5일";
	p1.age = 19;
	p1.height = 174;
	p1.hobby = new ArrayList<String>(); // 배열 생성
	p1.hobby.add("모험"); // 취미 추가
	p1.hobby.add("잔치");
	p1.blood = "F형";
	p1.country = "이스트 블루 고아 왕국 후샤 마을";
	p1.money = 3000000000L;
	p1.group = "밀짚모자 일당";
	p1.isDevilFruit = true;
	list.add(p1); // 배열에 추가
	
	Pirate p2 = new Pirate();
	p2.name = "롤로노아 조로";
	p2.nickName = "해적 사냥꾼";
	p2.gender = 'M';
	p2.birth = "11월 11일";
	p2.age = 21;
	p2.height = 181;
	p2.hobby = new ArrayList<String>();
	p2.hobby.add("음주");
	p2.hobby.add("수행");
	p2.blood = "XF형";
	p2.country = "이스트 블루 시모츠키 마을";
	p2.money = 1111000000L;
	p2.group = "밀짚모자 일당";
	p2.isDevilFruit = false;
	list.add(p2);
	
	Pirate p3 = new Pirate();
	p3.name = "나미";
	p3.nickName = "도둑고양이";
	p3.gender = 'F';
	p3.birth = "7월 3일";
	p3.age = 20;
	p3.height = 170;
	p3.hobby = null; // 취미가 없음
	p3.blood = "X형";
	p3.country = "이스트 블루 오이코트 왕국";
	p3.money = 366000000L;
	p3.group = "밀짚모자 일당";
	p3.isDevilFruit = false;
	list.add(p3);
	
	Pirate p4 = new Pirate();
	p4.name = "우솝";
	p4.nickName = "갓(GOD)";
	p4.gender = 'M';
	p4.birth = "4월 1일";
	p4.age = 19;
	p4.height = 176;
	p4.hobby = null; // 취미가 없음
	p4.blood = "S형";
	p4.country = "이스트 블루 시롭 마을";
	p4.money = 500000000L;
	p4.group = "밀짚모자 일당";
	p4.isDevilFruit = false;
	list.add(p4);
	
	Pirate p5 = new Pirate();
	p5.name = "상디";
	p5.nickName = "검은 다리";
	p5.gender = 'M';
	p5.birth = "3월 2일";
	p5.age = 21;
	p5.height = 180;
	p5.hobby = null; // 취미가 없음
	p5.blood = "Rh- S형";
	p5.country = "노스 블루 제르마 왕국";
	p5.money = 1032000000L;
	p5.group = "밀짚모자 일당";
	p5.isDevilFruit = false;
	list.add(p5);
	
	Pirate p6 = new Pirate();
	p6.name = "토니토니 쵸파";
	p6.nickName = "솜사탕광";
	p6.gender = 'M';
	p6.birth = "12월 24일";
	p6.age = 17;
	p6.height = 90;
	p6.hobby = null; // 취미가 없음
	p6.blood = "X형";
	p6.country = "위대한 항로 사쿠라 왕국(구 드럼 왕국)";
	p6.money = 1000L;
	p6.group = "밀짚모자 일당";
	p6.isDevilFruit = true;
	list.add(p6);
	
	Pirate p7 = new Pirate();
	p7.name = "니코 로빈";
	p7.nickName = "악마의 아이";
	p7.gender = 'F';
	p7.birth = "2월 6일";
	p7.age = 30;
	p7.height = 188;
	p7.hobby = null; // 취미가 없음
	p7.blood = "S형";
	p7.country = "웨스트 블루 오하라";
	p7.money = 930000000L;
	p7.group = "밀짚모자 일당";
	p7.isDevilFruit = true;
	list.add(p7);
	
	Pirate p8 = new Pirate();
	p8.name = "커티 프람";
	p8.nickName = "프랑키";
	p8.gender = 'M';
	p8.birth = "3월 9일";
	p8.age = 36;
	p8.height = 240;
	p8.hobby = null; // 취미가 없음
	p8.blood = "XF형";
	p8.country = "사우스 블루";
	p8.money = 394000000L;
	p8.group = "밀짚모자 일당";
	p8.isDevilFruit = false;
	list.add(p8);
	
	Pirate p9 = new Pirate();
	p9.name = "브룩";
	p9.nickName = "소울 킹";
	p9.gender = 'M';
	p9.birth = "4월 3일";
	p9.age = 90;
	p9.height = 277;
	p9.hobby = null; // 취미가 없음
	p9.blood = "X형";
	p9.country = "웨스트 블루";
	p9.money = 383000000L;
	p9.group = "밀짚모자 일당";
	p9.isDevilFruit = true;
	list.add(p9);
	
	Pirate p10 = new Pirate();
	p10.name = "징베";
	p10.nickName = "바다의 협객";
	p10.gender = 'M';
	p10.birth = "4월 2일";
	p10.age = 46;
	p10.height = 301;
	p10.hobby = null; // 취미가 없음
	p10.blood = "F형";
	p10.country = "용궁 왕국 어인가";
	p10.money = 1100000000L;
	p10.group = "밀짚모자 일당";
	p10.isDevilFruit = false;
	list.add(p10);
	
	Pirate p11 = new Pirate();
	p11.name = "에드워드 뉴게이트";
	p11.nickName = "흰 수염";
	p11.gender = 'M';
	p11.birth = "4월 6일";
	p11.age = 72;
	p11.height = 666;
	p11.hobby = new ArrayList<String>();
	p11.hobby.add("저금");
	p11.blood = "F형";
	p11.country = "신세계 스핑크스";
	p11.money = 5046000000L;
	p11.group = "흰 수염 해적단";
	p11.isDevilFruit = true;
	list.add(p11);
	
	Pirate p12 = new Pirate();
	p12.name = "카이도";
	p12.nickName = "백수";
	p12.gender = 'M';
	p12.birth = "5월 1일";
	p12.age = 59;
	p12.height = 710;
	p12.hobby = null; // 취미가 없음
	p12.blood = "F형";
	p12.country = "위대한 항로 보드카 왕국";
	p12.money = 4611100000L;
	p12.group = "백수 해적단";
	p12.isDevilFruit = true;
	list.add(p12);
	
	Pirate p13 = new Pirate();
	p13.name = "샬롯 링링";
	p13.nickName = "빅 맘";
	p13.gender = 'F';
	p13.birth = "2월 15일";
	p13.age = 68;
	p13.height = 880;
	p13.hobby = new ArrayList<String>();
	p13.hobby.add("다과회");
	p13.hobby.add("진귀한 동물 수집");
	p13.blood = "X형";
	p13.country = "위대한 항로";
	p13.money = 4388000000L;
	p13.group = "빅 맘 해적단";
	p13.isDevilFruit = true;
	list.add(p13);
	
	Pirate p14 = new Pirate();
	p14.name = "샹크스";
	p14.nickName = "빨간 머리";
	p14.gender = 'M';
	p14.birth = "3월 9일";
	p14.age = 39;
	p14.height = 199;
	p14.hobby = new ArrayList<String>();
	p14.hobby.add("방랑");
	p14.blood = "XF형";
	p14.country = "웨스트 블루 갓밸리";
	p14.money = 4048900000L;
	p14.group = "빨간 머리 해적단";
	p14.isDevilFruit = false;
	list.add(p14);
	
	Pirate p15 = new Pirate();
	p15.name = "마샬 D 티치";
	p15.nickName = "검은 수염";
	p15.gender = 'M';
	p15.birth = "8월 3일";
	p15.age = 40;
	p15.height = 344;
	p15.hobby = new ArrayList<String>();
	p15.hobby.add("도박(겜블링)");
	p15.hobby.add("역사 탐구");
	p15.blood = "F형";
	p15.country = "위대한 항로";
	p15.money = 3996000000L;
	p15.group = "검은 수염 해적단";
	p15.isDevilFruit = true;
	list.add(p15);
	
	Pirate p16 = new Pirate();
	p16.name = "트라팔가 D 웨텔 로";
	p16.nickName = "죽음의 외과의";
	p16.gender = 'M';
	p16.birth = "10월 6일";
	p16.age = 26;
	p16.height = 191;
	p16.hobby = null; // 취미가 없음
	p16.blood = "F형";
	p16.country = "노스 블루 프레반스";
	p16.money = 3000000000L;
	p16.group = "하트 해적단";
	p16.isDevilFruit = true;
	list.add(p16);
	
	Pirate p17 = new Pirate();
	p17.name = "버기";
	p17.nickName = "천냥광대";
	p17.gender = 'M';
	p17.birth = "8월 8일";
	p17.age = 39;
	p17.height = 192;
	p17.hobby = new ArrayList<String>();
	p17.hobby.add("보물지도 모으기");
	p17.blood = "F형";
	p17.country = "위대한 항로";
	p17.money = 3189000000L;
	p17.group = "크로스 길드";
	p17.isDevilFruit = true;
	list.add(p17);
	
	Pirate p18 = new Pirate();
	p18.name = "마르코";
	p18.nickName = "불사조";
	p18.gender = 'M';
	p18.birth = "10월 5일";
	p18.age = 45;
	p18.height = 203;
	p18.hobby = new ArrayList<String>();
	p18.hobby.add("바의 코스터 수집");
	p18.blood = "X형";
	p18.country = "위대한 항로";
	p18.money = 1374000000L;
	p18.group = "스핑크스";
	p18.isDevilFruit = true;
	list.add(p18);
	
	Pirate p19 = new Pirate();
	p19.name = "쥬라클 미호크";
	p19.nickName = "매의 눈";
	p19.gender = 'M';
	p19.birth = "3월 9일";
	p19.age = 43;
	p19.height = 198;
	p19.hobby = null; // 취미가 없음
	p19.blood = "S형";
	p19.country = "";
	p19.money = 3590000000L;
	p19.group = "크로스 길드";
	p19.isDevilFruit = false;
	list.add(p19);
	
	Pirate p20 = new Pirate();
	p20.name = "골 D 에이스";
	p20.nickName = "불주먹";
	p20.gender = 'M';
	p20.birth = "1월 1일";
	p20.age = 20;
	p20.height = 185;
	p20.hobby = null; // 취미가 없음
	p20.blood = "S형";
	p20.country = "사우스 블루 바테리라";
	p20.money = 550000000L;
	p20.group = "흰 수염 해적단";
	p20.isDevilFruit = true;
	list.add(p20);
	
	System.out.println(list.size() + "<-- list.size()"); // 20
	// 디버깅 코드, 20개가 작성이 잘 됐는지
%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>onepiece.jsp</title>
	<style>
		table, th, td {border: 1px solid #000000; text-align: center;}
		table {border-collapse: collapse;}
		.small {width: 30px; height: 30px;}
	</style>
</head>
<body>
	<h1>등장인물 리스트</h1>
	<h3>
		<div>
			전체 <%=list.size()%>명 <!-- 배열의 전체 사이즈 출력 -->
		</div>
	</h3>
	<table>
		<tr>
			<th>이름</th>
			<th>별명</th>
			<th>성별</th>
			<th>생일</th>
			<th>나이</th>
			<th>키</th>
			<th>취미</th>
			<th>혈액형</th>
			<th>출신지</th>
			<th>현상금</th>
			<th>소속</th>
			<th>악마의 열매</th>
		</tr>
		<%
			for(Pirate p : list) {
		%>
				<tr>
					<td><%=p.name%></td>
					<td><%=p.nickName%></td>
					<td>
						<%
							if(p.gender == 'M') {
						%>
								<img class="small" src="./img/man.jpg">
						<%
							} else {
						%>
								<img class="small" src="./img/woman.jpg">
						<%
							}
						%>
					</td>
					<td><%=p.birth%></td>
					<td><%=p.age%>세</td>
					<td><%=p.height%>cm</td>
					<td>
						<%
							if(p.hobby != null){ // 취미에 값이 있을 때만 foreach문 실행
								int cnt = 1; // foreach문 밖에서 변수 생성
								for(String h : p.hobby) {
						%>
									<%=h%>
						<%
									if(cnt<p.hobby.size()) { // 취미 사이사이에 쉼표(,) 입력
						%>
										,
						<%
									}
									cnt = cnt + 1; // 마지막엔 쉼표(,)가 안나오도록
								}
							}
						%>
					</td>
					<td><%=p.blood%></td>
					<td><%=p.country%></td>
					<td><%=p.money%>베리</td>
					<td><%=p.group%></td>
					<td>
						<%
							if(p.isDevilFruit == true) {
						%>
								<img class="small" src="./img/fruit_o.jpg">
						<%
							} else {
						%>
								<img class="small" src="./img/fruit_x.jpg">
						<%					
							}
						%>
					</td>
				</tr>
		<%
			}
		%>
	</table>
</body>
</html>

page import : 패키지명 생략
ArrayList<Pirate> list = new ArrayList<Pirate>(); : 클래스 Pirate 타입의 ArratList인 list 생성
Pirate p1 = new Pirate(); : p1 클래스 변수 생성
p1.name = "몽키 D. 루피"; : p1 클래스 변수에 타입에 맞는 값 넣기
p1.hobby = new ArrayList<String>(); : 값이 여러개이므로 ArrayList 생성
p1.hobby.add("모험"); : ArrayList타입이므로 add로 값 추가
p3.hobby = null; : 넣을 값이 없으면 null 입력
list.add(p1); : p1에 입력된 모든 값들을 최종적으로 list에 추가
System.out.println(list.size() + "<-- list.size()"); : 디버깅 코드, ArrayList는 length가 아닌 size이다.
for(Pirate p : list) : 테이블 작성을 위한 전체 foreach문
if(p.hobby != null) : hobby의 입력값이 null이 아닐 때만 for문 실행하기
int cnt = 1; : 취미 출력시 사이사이에 쉼표(,)를 넣기 위한 카운트 변수 생성
for(String h : p.hobby) : hobby 입력을 위한 foreach문
if(cnt<p.hobby.size()) : 카운트 변수가 hobby의 size보다 작을 때까지만 쉼표(,) 입력, 맨 마지막 값 뒤에는 쉼표가 붙으면 안되므로!
cnt = cnt + 1; : 카운트 변수는 1씩 증가해야 하므로 foreach문 마지막에 입력

📍 결과

📌 원피스 등장인물 목록 만들기 (2)

form action 태그를 이용하여 검색조건(성별)에 따라 필터링 이 가능한 기능을 추가해보았다.

📍 작성 (기존 작성 파일에 추가)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="onepiece.Pirate" %>
<%@ page import="java.util.ArrayList" %>
<%
	// RDBMS(오라클,mysql(mariadb),mssql) 로 데이터를 불러와서
	// 코드상에서 사용 가능한 형태로 (ArrayList<Pirate>) 로 변경할 수 있으나
	// 우리는 직접 데이터를 입력하는 것
%>
<%
	ArrayList<Pirate> list = new ArrayList<Pirate>(); // 배열
	
	// Pirat 객체를 20개 생성
	// 1)
	Pirate p1 = new Pirate(); // 클래스
	p1.name = "몽키 D. 루피";
	p1.nickName = "밀짚모자";
	p1.gender = 'M';
	p1.birth = "5월 5일";
	p1.age = 19;
	p1.height = 174;
	p1.hobby = new ArrayList<String>(); // 배열 생성
	p1.hobby.add("모험"); // 취미 추가
	p1.hobby.add("잔치");
	p1.blood = "F형";
	p1.country = "이스트 블루 고아 왕국 후샤 마을";
	p1.money = 3000000000L;
	p1.group = "밀짚모자 일당";
	p1.isDevilFruit = true;
	list.add(p1); // 배열에 추가
	
	Pirate p2 = new Pirate();
	p2.name = "롤로노아 조로";
	p2.nickName = "해적 사냥꾼";
	p2.gender = 'M';
	p2.birth = "11월 11일";
	p2.age = 21;
	p2.height = 181;
	p2.hobby = new ArrayList<String>();
	p2.hobby.add("음주");
	p2.hobby.add("수행");
	p2.blood = "XF형";
	p2.country = "이스트 블루 시모츠키 마을";
	p2.money = 1111000000L;
	p2.group = "밀짚모자 일당";
	p2.isDevilFruit = false;
	list.add(p2);
	
	Pirate p3 = new Pirate();
	p3.name = "나미";
	p3.nickName = "도둑고양이";
	p3.gender = 'F';
	p3.birth = "7월 3일";
	p3.age = 20;
	p3.height = 170;
	p3.hobby = null; // 취미가 없음
	p3.blood = "X형";
	p3.country = "이스트 블루 오이코트 왕국";
	p3.money = 366000000L;
	p3.group = "밀짚모자 일당";
	p3.isDevilFruit = false;
	list.add(p3);
	
	Pirate p4 = new Pirate();
	p4.name = "우솝";
	p4.nickName = "갓(GOD)";
	p4.gender = 'M';
	p4.birth = "4월 1일";
	p4.age = 19;
	p4.height = 176;
	p4.hobby = null; // 취미가 없음
	p4.blood = "S형";
	p4.country = "이스트 블루 시롭 마을";
	p4.money = 500000000L;
	p4.group = "밀짚모자 일당";
	p4.isDevilFruit = false;
	list.add(p4);
	
	Pirate p5 = new Pirate();
	p5.name = "상디";
	p5.nickName = "검은 다리";
	p5.gender = 'M';
	p5.birth = "3월 2일";
	p5.age = 21;
	p5.height = 180;
	p5.hobby = null; // 취미가 없음
	p5.blood = "Rh- S형";
	p5.country = "노스 블루 제르마 왕국";
	p5.money = 1032000000L;
	p5.group = "밀짚모자 일당";
	p5.isDevilFruit = false;
	list.add(p5);
	
	Pirate p6 = new Pirate();
	p6.name = "토니토니 쵸파";
	p6.nickName = "솜사탕광";
	p6.gender = 'M';
	p6.birth = "12월 24일";
	p6.age = 17;
	p6.height = 90;
	p6.hobby = null; // 취미가 없음
	p6.blood = "X형";
	p6.country = "위대한 항로 사쿠라 왕국(구 드럼 왕국)";
	p6.money = 1000L;
	p6.group = "밀짚모자 일당";
	p6.isDevilFruit = true;
	list.add(p6);
	
	Pirate p7 = new Pirate();
	p7.name = "니코 로빈";
	p7.nickName = "악마의 아이";
	p7.gender = 'F';
	p7.birth = "2월 6일";
	p7.age = 30;
	p7.height = 188;
	p7.hobby = null; // 취미가 없음
	p7.blood = "S형";
	p7.country = "웨스트 블루 오하라";
	p7.money = 930000000L;
	p7.group = "밀짚모자 일당";
	p7.isDevilFruit = true;
	list.add(p7);
	
	Pirate p8 = new Pirate();
	p8.name = "커티 프람";
	p8.nickName = "프랑키";
	p8.gender = 'M';
	p8.birth = "3월 9일";
	p8.age = 36;
	p8.height = 240;
	p8.hobby = null; // 취미가 없음
	p8.blood = "XF형";
	p8.country = "사우스 블루";
	p8.money = 394000000L;
	p8.group = "밀짚모자 일당";
	p8.isDevilFruit = false;
	list.add(p8);
	
	Pirate p9 = new Pirate();
	p9.name = "브룩";
	p9.nickName = "소울 킹";
	p9.gender = 'M';
	p9.birth = "4월 3일";
	p9.age = 90;
	p9.height = 277;
	p9.hobby = null; // 취미가 없음
	p9.blood = "X형";
	p9.country = "웨스트 블루";
	p9.money = 383000000L;
	p9.group = "밀짚모자 일당";
	p9.isDevilFruit = true;
	list.add(p9);
	
	Pirate p10 = new Pirate();
	p10.name = "징베";
	p10.nickName = "바다의 협객";
	p10.gender = 'M';
	p10.birth = "4월 2일";
	p10.age = 46;
	p10.height = 301;
	p10.hobby = null; // 취미가 없음
	p10.blood = "F형";
	p10.country = "용궁 왕국 어인가";
	p10.money = 1100000000L;
	p10.group = "밀짚모자 일당";
	p10.isDevilFruit = false;
	list.add(p10);
	
	Pirate p11 = new Pirate();
	p11.name = "에드워드 뉴게이트";
	p11.nickName = "흰 수염";
	p11.gender = 'M';
	p11.birth = "4월 6일";
	p11.age = 72;
	p11.height = 666;
	p11.hobby = new ArrayList<String>();
	p11.hobby.add("저금");
	p11.blood = "F형";
	p11.country = "신세계 스핑크스";
	p11.money = 5046000000L;
	p11.group = "흰 수염 해적단";
	p11.isDevilFruit = true;
	list.add(p11);
	
	Pirate p12 = new Pirate();
	p12.name = "카이도";
	p12.nickName = "백수";
	p12.gender = 'M';
	p12.birth = "5월 1일";
	p12.age = 59;
	p12.height = 710;
	p12.hobby = null; // 취미가 없음
	p12.blood = "F형";
	p12.country = "위대한 항로 보드카 왕국";
	p12.money = 4611100000L;
	p12.group = "백수 해적단";
	p12.isDevilFruit = true;
	list.add(p12);
	
	Pirate p13 = new Pirate();
	p13.name = "샬롯 링링";
	p13.nickName = "빅 맘";
	p13.gender = 'F';
	p13.birth = "2월 15일";
	p13.age = 68;
	p13.height = 880;
	p13.hobby = new ArrayList<String>();
	p13.hobby.add("다과회");
	p13.hobby.add("진귀한 동물 수집");
	p13.blood = "X형";
	p13.country = "위대한 항로";
	p13.money = 4388000000L;
	p13.group = "빅 맘 해적단";
	p13.isDevilFruit = true;
	list.add(p13);
	
	Pirate p14 = new Pirate();
	p14.name = "샹크스";
	p14.nickName = "빨간 머리";
	p14.gender = 'M';
	p14.birth = "3월 9일";
	p14.age = 39;
	p14.height = 199;
	p14.hobby = new ArrayList<String>();
	p14.hobby.add("방랑");
	p14.blood = "XF형";
	p14.country = "웨스트 블루 갓밸리";
	p14.money = 4048900000L;
	p14.group = "빨간 머리 해적단";
	p14.isDevilFruit = false;
	list.add(p14);
	
	Pirate p15 = new Pirate();
	p15.name = "마샬 D 티치";
	p15.nickName = "검은 수염";
	p15.gender = 'M';
	p15.birth = "8월 3일";
	p15.age = 40;
	p15.height = 344;
	p15.hobby = new ArrayList<String>();
	p15.hobby.add("도박(겜블링)");
	p15.hobby.add("역사 탐구");
	p15.blood = "F형";
	p15.country = "위대한 항로";
	p15.money = 3996000000L;
	p15.group = "검은 수염 해적단";
	p15.isDevilFruit = true;
	list.add(p15);
	
	Pirate p16 = new Pirate();
	p16.name = "트라팔가 D 웨텔 로";
	p16.nickName = "죽음의 외과의";
	p16.gender = 'M';
	p16.birth = "10월 6일";
	p16.age = 26;
	p16.height = 191;
	p16.hobby = null; // 취미가 없음
	p16.blood = "F형";
	p16.country = "노스 블루 프레반스";
	p16.money = 3000000000L;
	p16.group = "하트 해적단";
	p16.isDevilFruit = true;
	list.add(p16);
	
	Pirate p17 = new Pirate();
	p17.name = "버기";
	p17.nickName = "천냥광대";
	p17.gender = 'M';
	p17.birth = "8월 8일";
	p17.age = 39;
	p17.height = 192;
	p17.hobby = new ArrayList<String>();
	p17.hobby.add("보물지도 모으기");
	p17.blood = "F형";
	p17.country = "위대한 항로";
	p17.money = 3189000000L;
	p17.group = "크로스 길드";
	p17.isDevilFruit = true;
	list.add(p17);
	
	Pirate p18 = new Pirate();
	p18.name = "마르코";
	p18.nickName = "불사조";
	p18.gender = 'M';
	p18.birth = "10월 5일";
	p18.age = 45;
	p18.height = 203;
	p18.hobby = new ArrayList<String>();
	p18.hobby.add("바의 코스터 수집");
	p18.blood = "X형";
	p18.country = "위대한 항로";
	p18.money = 1374000000L;
	p18.group = "스핑크스";
	p18.isDevilFruit = true;
	list.add(p18);
	
	Pirate p19 = new Pirate();
	p19.name = "쥬라클 미호크";
	p19.nickName = "매의 눈";
	p19.gender = 'M';
	p19.birth = "3월 9일";
	p19.age = 43;
	p19.height = 198;
	p19.hobby = null; // 취미가 없음
	p19.blood = "S형";
	p19.country = "";
	p19.money = 3590000000L;
	p19.group = "크로스 길드";
	p19.isDevilFruit = false;
	list.add(p19);
	
	Pirate p20 = new Pirate();
	p20.name = "골 D 에이스";
	p20.nickName = "불주먹";
	p20.gender = 'M';
	p20.birth = "1월 1일";
	p20.age = 20;
	p20.height = 185;
	p20.hobby = null; // 취미가 없음
	p20.blood = "S형";
	p20.country = "사우스 블루 바테리라";
	p20.money = 550000000L;
	p20.group = "흰 수염 해적단";
	p20.isDevilFruit = true;
	list.add(p20);
	
	System.out.println(list.size() + "<-- list.size()"); // 20
	// 디버깅 코드, 20개가 작성이 잘 됐는지
	
	// 검색조건에 따라 필터링될 list2를 생성
	ArrayList<Pirate> list2 = new ArrayList<Pirate>();
	
	char gender = ' ';
	if(request.getParameter("gender") != null) { // 즉, 어떤 값을 form에서 선택했다면
		gender = request.getParameter("gender").charAt(0); // option에서 받아오는 값이 string 타입 이므로 앞에 첫 글자를 가져와서 char타입으로 바꾸는 메소드 사용
	} // form에서 선택한 값이니까 request.getParameter로 불러와서 gender 변수에 M or F 넣기
	// gender는 ' ' or 'M' or 'F' 
	
	/*
	if(gender == ' ') {
		list2 = list;
	} else if(gender == 'M') {
		for(Pirate p : list) {
			if(p.gender == 'M') {
				list2.add(p);
			}
		}
	} else { // gender == 'F'
		for(Pirate p : list) {
			if(p.gender == 'F') {
				list2.add(p);
			}
		}
	}
	*/
	
	if(gender == ' ') {
		list2 = list;
	} else {
		for(Pirate p : list) {
			if(p.gender == gender) {
				list2.add(p);
			}
		}
	}
	
	System.out.println(list2.size() + "<-- list2.size()");
	// 디버깅 코드
%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>onepiece.jsp</title>
	<style>
		table, th, td {border: 1px solid #000000; text-align: center;}
		table {border-collapse: collapse;}
		.small {width: 30px; height: 30px;}
	</style>
</head>
<body>
	<h1>등장인물 리스트</h1>
	<h3>
		<div>
			전체 <%=list.size()%>명 <!-- 배열의 전체 사이즈 출력 -->
		</div>
	</h3>
	
	<form action="./onepiece.jsp" method="post"> <!-- 데이터 필터링 하기 -->
		<select name="gender">
			<option value="M">남자</option>
			<option value="F">여자</option>
		</select>
		<div>
			<button type="submit">검색</button>
		</div>
	</form>
	
	<table>
		<tr>
			<th>이름</th>
			<th>별명</th>
			<th>성별</th>
			<th>생일</th>
			<th>나이</th>
			<th>키</th>
			<th>취미</th>
			<th>혈액형</th>
			<th>출신지</th>
			<th>현상금</th>
			<th>소속</th>
			<th>악마의 열매</th>
		</tr>
		<%
			for(Pirate p : list2) { // 필터링 된 list2 출력
		%>
				<tr>
					<td><%=p.name%></td>
					<td><%=p.nickName%></td>
					<td>
						<%
							if(p.gender == 'M') {
						%>
								<img class="small" src="./img/man.jpg">
						<%
							} else {
						%>
								<img class="small" src="./img/woman.jpg">
						<%
							}
						%>
					</td>
					<td><%=p.birth%></td>
					<td><%=p.age%>세</td>
					<td><%=p.height%>cm</td>
					<td>
						<%
							if(p.hobby != null){ // 취미에 값이 있을 때만 foreach문 실행
								int cnt = 1; // foreach문 밖에서 변수 생성
								for(String h : p.hobby) {
						%>
									<%=h%>
						<%
									if(cnt<p.hobby.size()) { // 취미 사이사이에 쉼표(,) 입력
						%>
										,
						<%
									}
									cnt = cnt + 1; // 마지막엔 쉼표(,)가 안나오도록
								}
							}
						%>
					</td>
					<td><%=p.blood%></td>
					<td><%=p.country%></td>
					<td><%=p.money%>베리</td>
					<td><%=p.group%></td>
					<td>
						<%
							if(p.isDevilFruit == true) {
						%>
								<img class="small" src="./img/fruit_o.jpg">
						<%
							} else {
						%>
								<img class="small" src="./img/fruit_x.jpg">
						<%					
							}
						%>
					</td>
				</tr>
		<%
			}
		%>
	</table>
</body>
</html>

✔ 추가된 내용

form action 태그를 이용하여 검색조건(성별) 선택이 가능한 select form 생성하기, button type은 submit인 것 잊지 말기!
주소는 현재 페이지("./onepiece.jsp")로 지정

ArrayList<Pirate> list2 = new ArrayList<Pirate>(); : 검색 조건에 따라 출력될 list2를 따로 생성한다.
char gender = ' '; : Pirate 클래스의 gender 타입은 char 타입이므로 동일한 타입의 변수 생성, char 타입은 null을 입력하지 못하므로 공백 으로 입력.
if(request.getParameter("gender") != null) : form action 태그에서 값이 입력되었는지 (선택되었는지) , 이때 받아오게될 option의 value값은 "M" 또는 "F" 이며, 타입은 String 타입이 된다.
charAt(0) : String 타입의 값에서 첫번째(0번째) 글자를 가져와서 char 타입으로 바꾸는 메소드

필터링된 char타입 gender의 값(M 또는 F 또는 공백)을 list2에 추가하기
공백일 경우, list2에 기존의 모든 성별값이 보여지는 list를 대입
p.gender의 값이 gender와 일치하는 경우, 즉 M 또는 F 값만 list2에 추가하기

전체 foreach문 for(Pirate p : list2)로 수정.

📍 결과

성별 선택 select 태그가 추가되었다.

여자 선택 시 출력 화면

남자 선택 시 출력 화면

💡 External CSS

기존에 배웠던 Internal 방식 (클래스나 id를 이용하여 style태그에서 적용)과 Inline 방식 (html태그에 직접 적용) 외에 또다른 방법인 External 방식을 이용하는 방법을 추가로 배웠다.

📌 CSS 파일 직접 생성하기

말그대로 css 파일을 따로 생성하여 적용시키는 방식이다.
🧐참고하면 좋을 링크

📍 css 파일 생성 - myStyle.css

@charset "UTF-8";
.x {color: #00FF00;}
table, th, td {border: 1px solid #000000; text-align: center;}
table {border-collapse: collapse;}

기존에 사용하던 Internal 방식처럼 작성하면 된다. 파일만 외부에 따로 있다고 보면 된다.

📍 적용하기

<link rel="stylesheet" href="./myStyle.css">

기존 style 태그의 위치와 동일한 head 태그 안에 입력하면 된다.
사용 또한 Internal 방식처럼 클래스 또는 id를 지정해서 사용한다.

📌 부트스트랩5 사용하기

다른 사용자가 만든 css 파일을 사용하는 방법이다. href 링크에는 외부링크도 입력가능하기 때문이다. 부트스트랩5를 적극 활용하면 다채로운 css를 편하게 적용할 수 있다!
🧐참고하면 좋을 링크

📍 링크 가져오기

<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>

위 링크에서 부트스트랩5를 사용하기 위한 링크를 가져온다.
위치와 사용방식은 동일하다.

📍 사용해보기

<body>
<div class="container-fluid">
<!-- body태그에 직접 class를 주는 것은 위험해서 div로 전체를 묶음 -->
	<table class="table table-striped table-dark">
    <!-- class명 여러개 추가할떈 빈칸 -->
		<thead>
			<tr>
				<th>이름</th>
				<th>성별</th>
				<th>나이</th>
			</tr>
		</thead>
		
		<tbody>
			<%
				for(Person p : list) {
			%>
					<tr>
						<td><%=p.name%></td>
						<td><%=p.gender%></td>
						<td><%=p.age%></td>
					</tr>
			<%
				}
			%>
		</tbody>
	</table>
	
<div class="row">
	<div class="col-sm-6">
		<h1>첫번째 제목</h1>
		<table class="table table-hover">
			<tr>
				<td>안녕</td>
				<td>하세요</td>
				<td>안녕</td>
			</tr>
			<tr>
				<td>안녕</td>
				<td>하세요</td>
				<td>안녕</td>
			</tr>
		</table>
	</div>
	<div class="col-sm-6">
		<h1>두번째 제목</h1>
		<table class="table table-hover">
			<tr>
				<td>안녕</td>
				<td>하세요</td>
				<td>안녕</td>
			</tr>
			<tr>
				<td>안녕</td>
				<td>하세요</td>
				<td>안녕</td>
			</tr>
			<tr>
				<td>안녕</td>
				<td>하세요</td>
				<td>안녕</td>
			</tr>
		</table>
	</div>
</div>