NOTE

[팀프로젝트]HappyTogeDOG

시원해지고 싶은 사람 — Sun, 28 Apr 2024 17:05:18 +0900

목적 과 대상

목적 : 반려견 기반 지역 커뮤니티 활성화 및 편의 제공 및 실시간 유기견 홍보 및 입양 유도 서비스
대상 : 전국 반려 가구 및 반려동물을 맞이하고자 하는 사람, 동물을 사랑하는 모두

학습목표

jsp/servlet을 활용한 서버 사이드 동적 웹페이지 구현
비동기 api 호출, Ajax 비동기 통신에 대한 이해 및 클라이언트 사이드 동적 웹 페이지 구현
디자인 패턴 MVC 에 대한 이해
브라우저 개발자 도구 활용

협업 프로세스

팀 구성원들의 많은 협의를 통해 아이디어와 목표 이해
목적에 맞는 API 선택과 학습 및 정보 수집
구현할 페이지를 구성하고 페이지에 따라 클래스를 나누고 분업
담당 기능을 구현하고 평가 또는 피드백 요청
프로젝트를 통해 얻은 지식 공유

프로그램 소개 설명 및 이슈

[인덱스]

[로그인]

[회원 가입]

1. Daum Postcode Service API :

사용자가 우편번호와 주소를 찾을 수 있도록 하여 주소 정보를 필수 입력값으로 요구하여 각 페이지의 필터 기능에 활용

2. 문자인증 API(COOLSMS) :

문자인증을 사용하여 본인인증을 함

2-1. API 키를 레포지토리에 노출된 상태로 업로드(타인이 도용할 우려)

해결 : 인증키를 .properties 파일로 분리하여 .gitignore에 추가

[주변 반려견 시설]

1. geolocation API :

사용자 위치를 얻어 사용자 위치 기반 지도를 제공

2. 주변 펫 관련 장소 마커 제공, 마커 클릭시 상세보기 제공

3. 카테고리 별 검색 가능

[유기동물 조회 및 동물보호센터 조회]

1. 유기동물 조회 :

농림축산식품부 농림축산검역본부: 동물보호관리시스템 유기동물 정보 조회 서비스 API

1-1. 공고 마감일에 따라 정렬 제공

2. 동물 보호소 정보 조회 :

농림축산식품부 농림축산검역본부: 동물보호센터 정보 조회 API

2-1. 운영시간, 전화번호 등 제공

3. 인메모리 캐시 활용 :

이유 : 전국 유기동물의 수가 많아 페이지 요청시 데이터를 불러 정보를 가공하는데에 시간이 오래 걸림

　　 해결 : 모든 데이터를 서버 시작시에 List 객체를 사용하여 서버 내에 보관하고 필요로 한 정보를 요청시에 보관된 데이터에서 가공하여 페이지 로딩 속도를 향상

4. 서버 side 스케줄링 로직으로 주기적으로 데이터를 설정해주어 업데이트

이유 : 지역 유기동물 호출 API를 서버 첫 구동 시에만 불러왔을 때에는 시간 흐름에 따른 데이터 갱신이 없기에, 스케줄링을 통해 해결

[반려견 카풀]

1. 카카오 맵 API :

API Document에서 제공하는 샘플을 참고, 변경하여 출발지 도착지 키워드 검색 후 마커 각각 제공

2. 카카오 길찾기 API :

표시된 출발지와 도착지 마커를 활용하여 경로 데이터에 선을 그어 경로를 표시

3. 채팅 :

웹소켓을 활용하여 작성자와 개별적인 채팅 제공

[산책아르바이트 및 게시판]

1. cos 라이브러리 :

cos 라이브러리를 통해 멀티파트 요청을 활용하여 파일(반려견 사진) 업로드 처리

2. 페이징 구현

[플로팅 배너]

1. paypal 결제 API 연결

2. 플로팅 배너 :

유기견 입양 플로팅 배너 클릭 시 국가 동물 보호 정보 시스템 홈페이지 입양안내 페이지로 이동

개선 하고 싶은 점

브라우저에서 제공하는 geolocation을 사용 하였지만 시연할때는 인증 문제로 사용하지 못했기에 IP 주소 기반 위치를 사용하여 개선하고 싶음
채팅 기록이 데이터베이스에 기록되지 않아 과거 기록을 볼 수 없어서 채팅을 데이터 베이스에 기록할 수 있도록 하여 과거 기록을 볼 수 있게 하고 싶음
산책 아르바이트와 반려견 카풀 메뉴에서 사용자들이 연락처나 채팅으로 매칭되기 때문에 미흡함이 있다고 생각을 하여 아르바이트 신청이나 채팅을 신청하게 되면 알림을 구현하고 싶음
각 페이지마다 필터가 콤보박스이거나 버튼으로 되어 있는데 통일되어 있지 않아 한가지의 방법으로 통일하고 싶음

Session

시원해지고 싶은 사람 — Sat, 20 Apr 2024 16:17:59 +0900

세션이란 ?

클라이언트로부터 오는 일련의 요청을 하나의 상태로 보고 그 상태를 일정하게 유지하는 기술
클라이언트가 웹 서버에 접속해있는 상태가 하나의 단위

세션은 웹서버에 웹 컨테이너의 상태를 유지하기 위한 정보를 저장합니다. 브라우저를 닫거나 서버에서 세션을 삭제하면 세션이 삭제됩니다. 세션은 각 클라이언트의 고유세션 ID를 부여하는데, 이것으로 클라이언트를 구분하여 각 클라이언트의 요구에 맞는 응답을 반환합니다.

세션 동작순서

1) 클라이언트 요청

2) Request-Header 필드의 Cookie 에서 세션ID를 보냈는지 확인

3) 세션ID가 없을 경우, 서버에서 생성하여 클라이언트에게 전송

4) 쿠키를 사용해 세션ID를 서버에 저장

5) 클라이언트 재접속 시, 쿠키를 이용하여 세션ID 값을 서버에 전달

쿠키와 세션 차이

쿠키는 브라우저 종료 시 삭제되는 세션과 달리 쿠키 저장시 만료시점을 저장하여 브라우저가 종료되더라도 자동 삭제되지 않습니다. 즉, 만료시점이 지나야 쿠키가 삭제되는 것 입니다. 세션은 서버에 저장되므로 안전한 반면, 쿠키는 로컬에 저장되어 탈취,변조 위험이 존재합니다. 이러한 세션은 보안에 취약한 쿠키를 보완해주는 역할을 하고 있습니다.

하지만 세션은 제공받은 세션Id를 이용해서 서버에서 다시 데이터를 참조해야 하므로 쿠키에 비해 느립니다.

Cookie

시원해지고 싶은 사람 — Sat, 20 Apr 2024 16:15:36 +0900

쿠키란 : 사용자가 방문한 웹페이지에서 이용된 환경설정 및 기타 정보를 사용자의 컴퓨터에 작은 파일로 저장한 것

(웹 서버가 생성하여 웹 브라우저로 전송하는 작은 정보 파일)

쿠키의 역할

브라우저에 저장되어서 접속자 장치를 인식하거나 일부 데이터를 저장하는 역할

Cookie는 웹사이트가 인터넷 사용자에 대한 정보를 기억하고, 인터넷 사용자가 웹사이트를 더욱 효율적으로 이용할 수 있도록 합니다. 크게는 아래 세가지로 나눌 수 있습니다

세션관리 : 서버에 저장해야 할 데이터 관리
개인 맞춤 데이터 : 테마 등과 같은 세팅값
트래킹 : 사용자의 행동을 기록 및 분석

예를 들어, 인터넷 사용자가 로그인한 상태를 유지하기 위해 Cookie를 사용할 수 있는데, 이는 세션관리에 해당됩니다.

쿠키의 문제점

인증에 사용하기에는 문제점이 많은 쿠키

Cookie는 노출이 되었을때, 민감 정보까지 다 노출되어 보안이 좋지 않습니다. 일부 웹사이트에서는 Cookie를 사용하여 사용자의 웹사이트 방문 이력을 추적하기도 하고 조작당해서 들어올 가능성도 존재합니다.

또한, 웹 브라우저 마다 쿠키에 대한 지원 형태가 달라 다른 브라우저간의 공유가 불가능합니다. 쿠키 사이즈가 4KB로 제한되어 있기때문에 충분한 데이터를 담을 수 없다는 점 역시 큰 문제점입니다.

쿠키 저장 방법

1. 쿠키 클래스 객체 생성

<% Cookie cookie = new Cooke("id", "smhrd"); %>

2. Response 내장 객체에 addCookie() 호출

<% response.addCookie(cooke); %>

쿠키 저장 조회

<%
	Cookie[] cookies = request.getCookies();
    for(int i = 0; i < cookies.length; i++) {
    	out.print("쿠키 이름 : " + URLDecoder.decode(cookies[i].getName() + "<br>"));
        out.print("쿠키 값 : " + URLDecoder.decode(cookies[i].getValue() + "<hr>"));
        }
%>

쿠키 삭제

<% cooke.setMaxAge(0); %>

Servlet 개념

시원해지고 싶은 사람 — Sat, 20 Apr 2024 16:09:03 +0900

서블릿(Servlet) ?

Server와 Applet의 합성어로, 자바를 사용하여 웹페이지를 동적으로 생성하는 서버측 프로그램이다. 클라이언트의 요청을 처리하고, 그 결과를 반환하는 Servlet 클래스의 구현 규칙을 지킨 자바 웹 프로그래밍 기술인데, 쉽게 말하면 웹을 만들기 위해 자바를 사용할 때 필요한 기술이라고 생각하면 된다.

우리가 흔히 로그인을 할 때, 아이디와 비밀번호를 입력하고 로그인 버튼을 누르는데, 이때 서버는 요청자의 아이디, 비밀번호를 확인 후 다음 페이지를 띄워준다. 띄워주는 것이 바로 서블릿(Servlet).

서블릿의 특징

1. HTML 변경시, 서블릿을 재컴파일 해야한다는 단점이 있음

2. MVC패턴에서 Controller로 이용됨

3. JAVA Thread를 이용하여 동작된다.

4. HTML을 사용하여 요청에 응답한다.

Servlet : Server 상에서 작동하는 Java기반의 Web Application Programming 기술.

Request/Response : Client로부터 데이터가 넘어오면 데이터를 받아서 처리하는 객체와 Client에게 응답을 할 수 있게 해주는 객체

Url Mapping : Web browser에서 Servlet을 동작시키기 위해 실제 Java 클래스의 이름 대신, Servlet 을 요청하기 위한 문자열을 Servlet 클래스와 Mapping(맵핑)시키는것

일반적으로 웹서버는 정적인 페이지만을 제공한다. 따라서 동적인 페이지를 제공하기 위해서 웹서버는 다른 곳에 도움을 요청하여 동적인 페이지를 작성해야 한다. 이 때, 웹 서버가 동적인 페이지를 제공할 수 있도록 도와주는 어플리케이션이 서블릿이다.

서블릿 또한 자바 프로그램의 다른 클래스들처럼 자바 가상머신인 JVM에서 동작해야 하므로, Class 파일이 생성되어야 한다. 그래서 Class 형태로 작성한다. JDK에서는 웹 어플리케이션을 제작할 수 있는 클래스가 제공되지 않고, 톰캣을 설치하고 나면 웹 어플리케이션을 제작할 수 있는 클래스가 제공되는데, 그 클래스가 바로 HttpServlet이다.

HttpServlet을 상속받은 클래스를 서블릿이라고 하는데, 이미 여러 기능이 만들어져 있기 때문에 개발자는 편리하게 웹 프로그램을 만들 수 있다.

get과 post?

Servlet 클래스에서 클라이언트는 서버에 get과post 두 가지 방식 중 하나로 요청을 한다. get 방식은 주소 창을 타고 넘어가기 때문에, 서버로 보내는 데이터를 사용자가 그대로 볼 수 있다. 그래서 보안에 취약하다는 단점이 존재한다. 255자 이하의 적은 양의 데이터를 전송한다. post 방식은 HTML header를 타고 넘어가기 때문에 보안에 강한 장점이 있고, 255자 이상의 대용량 데이터를 전송한다.

MVC

시원해지고 싶은 사람 — Sat, 20 Apr 2024 15:45:42 +0900

MVC패턴 ?

Model , View , Controller의 합성어로 소프트웨어 공학에서 사용되는 소프트웨어 디자인 패턴입니다.

Model : 백그라운드에서 동작하는 로직을 처리합니다.

View : 사용자가 보게 될 결과 화면을 출력합니다.

Controller : 사용자의 입력처리와 흐름 제어를 담당합니다.

MVC패턴에는 모델1방식과 모델 2방 식이 있는데 특히 모델 2 구조 기반의 MVC패턴 구현은 JSP 개발자라면 무조건 알고 있어야 할 개발 방식입니다. JSP 웹사이트 구조는 크게 모델 1 방식과 모델 2 방식으로 나뉩니다. 간단하게 분류하자면 JSP에서 출력과 로직을 전부 처리하느냐(모델 1) JSP에서 출력만 처리하느냐(모델 2)로 분류할 수 있습니다.

모델 1 구조는 사용자의 요청을 JSP가 전부 다 처리합니다. 웹브라우저 사용자의 요청을 받은 JSP는 자바 빈이나 서비스 클래스를 사용하여 웹브라우저가 요청한 작업을 처리하고 그 결과를 출력해줍니다.

Model2방식

모델 2 구조는 모델 1 구조와 달리 웹브라우저 사용자의 요청을 서블릿이 받습니다. 서블릿은 웹브라우저의 요청을 받아 View로 보여줄 것인지 Model로 보내줄 것인지 정하여 전송해줍니다. 여기서 View페이지는 사용자에게 보여주는 역할만 담당하고 실질적인 기능의 부분은 Model에서 담당합니다. 모델 2 방식의 경우 실질적으로 보이는 HTML과 JAVA 소스를 분리해놓았기 때문에 모델 1 방식에 비해 개발을 확장시키기도 쉽고 유지 보수하기도 쉽습니다.

웹에서 파일 업로드하기

시원해지고 싶은 사람 — Sat, 20 Apr 2024 15:44:15 +0900

cos.jar

0.05MB

cos.jar파일을

위와 같이 WEB-INF -> lib 폴더 안에 넣어줍니다.

웹에서 파일 업로드하기

<body>
<form action="fileUpload.jsp" method="post" enctype="multipart/form-data">
<table align="center" border="1">
<tr>
    <td colspan="2">파일 업로드 폼</td>
</tr>
<tr>
    <td>올린 사람:</td>
    <td><input type="text" name="name"></td>
</tr>
<tr>
    <td>제목:</td>
    <td><input type="text" name="subject"></td>
</tr>
<tr>
    <td>파일명1:</td>
    <td><input type="file" name="fileName1"></td>
</tr>
<tr>
    <td>파일명2:</td>
    <td><input type="file" name="fileName2"></td>
</tr>
<tr>
    <td colspan="2"><input type="submit" value="전송"></td>
</tr>
</table>
</body>

fileUpload.jsp

<%
String uploadPath=request.getRealPath("upload");
	
int size = 10*1024*1024;
String name="";
String subject="";
String filename1="";
String filename2="";
	
try{
    MultipartRequest multi=new MultipartRequest(request,uploadPath,size,"euc-kr",new DefaultFileRenamePolicy());
		
    name=multi.getParameter("name");
    subject=multi.getParameter("subject");
		
    Enumeration files = multi.getFileNames();
    String file1 = (String)files.nextElement();
    filename1 = multi.getFilesystemName(file1);
    String file2 = (String)files.nextElement();
    filename2=multi.getFilesystemName(file2);

}catch(Exception e){
    e.printStackTrace();
}
%>
<body>
<form name="filecheck" action="fileCheck.jsp" method="post">
    <input type="hidden" name="name" value="<%=name %>">
    <input type="hidden" name="subject" value="<%=subject %>">
    <input type="hidden" name="filename1" value="<%=filename1 %>">
    <input type="hidden" name="filename2" value="<%=filename2 %>">
</form>
<a href="#" onclick="javascript:filecheck.submit()">업로드 확인 및 다운로드 페이지이동 </a>
</body>

fileCheck.jsp

<%
request.setCharacterEncoding("euc-kr");
String name = request.getParameter("name");
String subject = request.getParameter("subject");
String filename1 = request.getParameter("filename1");
String filename2 = request.getParameter("filename2");
%>
<body>
올린사람 : <%=name %><br/>
제목 : <%=subject %><br/>
파일명1 : <a href="upload/<%=filename1%>"><%=filename1%></a><br/>
파일명2 : <a href="upload/<%=filename2%>"><%=filename2%></a><br/>
</body>

Session을 ArrayList로 받기/세션 배열

시원해지고 싶은 사람 — Sat, 20 Apr 2024 15:28:38 +0900

Session을 ArrayList로 사용하기

선언 부분

<%
ArrayList<String> list = (ArrayList)session.getAttribute("productlist");
String productname = request.getParameter("item");

if(list==null){
     list = new ArrayList<String>();
     session.setAttribute("productlist",list);
}
list.add(productname);
%>

출력 부분

//리스트를 새로 생성해줘도 이어서 추가하게된다.
<%
ArrayList<String> list = (ArrayList) session.getAttribute("productlist");
for(int i=0;i<list.size(); i++) {
    out.println(list.get(i) + "<br>");
}
%>

JSP 란?

시원해지고 싶은 사람 — Sat, 20 Apr 2024 15:26:31 +0900

JSP란 ?

JavaServer Pages의 약자를 뜻하며, HTML 코드에 JAVA 코드를 사용하여 동적 웹페이지(Dynamic Web Page)를 생성하는 웹 어플리케이션 도구(라이브러리)이다.

1. Web

웹이란, 인터넷 기반의 정보기술을 뜻하며, 우리가 흔히 접하는 "WWW"인 World Wide Web의 줄임말이다. 단어의 뜻처럼 전세계에 걸쳐 거대한 네트워크 망을 통해서 정보들을 공유하며, 정보는 양방향성의 특징을 가진다.

2. Web Application

웹 어플리케이션은 웹에서 실행되는 응용프로그램을 뜻하며, 인터넷을 통한 여러가지의 서비스를 일컫는다. 사용자는 필요한 데이터를 Request(요청)하고 서버에서는 사용자의 Request를 수행하며, 요청한 데이터를 Response(응답)하게 되는 형식이다.

web Application의 구성요소

웹 브라우저 (Web Browser) : 클라이언트에서 요청을 하고 전달받은 페이지를 볼수있는 환경

웹 서버 (Web Server) : 클라이언트로 부터 요청받아 서버에 저장된 리소스를 클라이언트 에게 전달한다. 주로 정적컨텐츠를 담당한다.

웹 어플리케이션 서버 (Web Application Server) : 줄여서 was 라고도 부르며 서버단에서 필요한 기능을 수행하고 그결과를 웹서버에게 전달한다.

데이터베이스 (DB) : 서비스에 필요한 데이터를 보관, 갱신 등 관리를 한다.

3. Java Servlet

Java Servlet이란, 웹페이지를 동적으로 생성하기 위해 사용하는 서버측의 프로그램을 말한다. Servlet은 Java언어를 기반으로 만들어지며, 웹 어플리케이션 서버(Web Application Server) 위에서 컴파일 되고 동작한다.

4. JSP와 Java Servlet

JSP와 Servlet의 차이점을 비교한다면

Servlet	JSP
- 자바 코드로 구현하고, 컴파일하고, 배포해야한다.	- 키워드가 태그화 되어 Servlet에 비해서 배우기 쉽다.
- HTML 태그로 문자열("")스크림으로 처리해야 한다.	- 자바코드를<% %>태그 안에 처리해주어야 한다.
- 코드가 수정되면 다시 컴파일하고 배포해야 한다.	- HTML처럼 태그를 사용하여 자바코드도 사용이 가능하다.

[HTML/CSS] 이미지 버튼(image button)

시원해지고 싶은 사람 — Sat, 20 Apr 2024 15:17:27 +0900

이미지 버튼(image button)

<button type="button">
  <img src="이미지 파일 경로" alt="대체 텍스트" onclick="" >
</button>

버튼 태그의 배경에 이미지를 포함

HTML

<input type="button" class="img-button" onclick="alert('클릭!')">

CSS

input.img-button {
  background: url("https://i.ibb.co/3493r17/cat.jpg") no-repeat;
  width: 180px;
  height: 180px;
}

background: url() : 버튼 배경 이미지의 경로
no-repeat; : 배경 이미지를 반복하지 않음
width: 배경 이미지의 너비
height: 배경 이미지의 높이

[HTML] 버튼 태그(input type = "button")

시원해지고 싶은 사람 — Sat, 20 Apr 2024 15:15:51 +0900

HTML 버튼

버튼의 종류(button type)

버튼 타입	설명
button	버튼 형태를 만들며 자체기능은 없습니다. onClick 메서드를 활용하여 특정 액션을 취하는 기능을 넣을 수 있습니다.
submit	폼(form)에서 입력받은 데이터들을 서버로 전송합니다.
reset	폼(form)에서 입력받은 데이터들을 초기화 시킵니다.

첫 번째 방법 (input type = "button")

type: 버튼의 유형을 지정합니다. submit, reset, button 중 하나의 값을 가질 수 있습니다.
value: 버튼의 텍스트 값을 지정합니다.
disabled: 버튼을 비활성화시킵니다.

<!--input type 사용-->
<input type="button" value="button">
<input type="button" value="disabled" disabled>
<input type="submit" value="submit">
<input type="reset" value="reset">

두 번째 방법 (<button> 태그 사용)

type: 버튼의 유형을 지정합니다. submit, reset, button 중 하나의 값을 가질 수 있습니다. (지정하지 않으면 button)
disabled: 버튼을 비활성화시킵니다.

<!--button type 사용-->
<button>button</button>
<button disabled>disabled</button>
<button type="submit">submit</button>
<button type="reset">reset</button>

버튼 onclick 메서드

<input type="button" value="button" onclick='alert("클릭!")'/>
<button onclick='alert("클릭!")'>button</button>