[JAVA 교육] jsp 수업 정리
참고 페이지 목록
- jsp-tomcat 공식 문서
JSP 2.3 API - Apache Tomcat 9.0.55
간단한 것을 하지 못하는데, 복잡한 것을 할 수는 없다.
2021.11.29
- jsp : 자바 서버 페이지
- servlet : 자바 웹 프로그래밍 클래스
서블릿 : 프론트 따로, 백엔드 따로라서 연동하기가 어려웠다.
- jsp : html 파일 내 java 작성 가능
- jsp 구동 원리
- 클라이언트가 jsp 요청하면
- html (그대로) 반환
- jsp 내 java 코드는 servlet (java) 파일로 변환된다.
- (결과만 html 에) 응답
- (java 코드는 웹 페이지에서 보이지 않는다.) 클라이언트는 java 파일 확인 불가능
- 태그 :
- <%! 선언문 %> : 1. 변수선언[전역변수] 2. 메소드선언 O
<%! String 문자열 = "jsp 선언문"; %>
<%! public String 메소드(){return "jsp 메소드선언";} %>
- <% 스크립트문 %> : 2. 변수선언[지역변수] 2. 메소드선언 X 3. 출력 가능
- <%= 표현식 %> : 1. html 에 java 변수, 메소드 호출
- <-- 주석 --> : 주석처리
- 선언문과 스크립트
- 선언문 : servlet 에서
필드
에 해당
- 스크립트 : _jspService 라는
메소드
JSP 2.3 API - Apache Tomcat 9.0.55
2021.11.29
- jsp : 자바 서버 페이지
- servlet : 자바 웹 프로그래밍 클래스
서블릿 : 프론트 따로, 백엔드 따로라서 연동하기가 어려웠다.
- jsp : html 파일 내 java 작성 가능
- jsp 구동 원리
- 클라이언트가 jsp 요청하면
- html (그대로) 반환
- jsp 내 java 코드는 servlet (java) 파일로 변환된다.
- (결과만 html 에) 응답
- (java 코드는 웹 페이지에서 보이지 않는다.) 클라이언트는 java 파일 확인 불가능
- 태그 :
- <%! 선언문 %> : 1. 변수선언[전역변수] 2. 메소드선언 O
<%! String 문자열 = "jsp 선언문"; %>
<%! public String 메소드(){return "jsp 메소드선언";} %>
- <% 스크립트문 %> : 2. 변수선언[지역변수] 2. 메소드선언 X 3. 출력 가능
- <%= 표현식 %> : 1. html 에 java 변수, 메소드 호출
- <-- 주석 --> : 주석처리
- 선언문과 스크립트
- 선언문 : servlet 에서
필드
에 해당
- 스크립트 : _jspService 라는
메소드
서블릿 : 프론트 따로, 백엔드 따로라서 연동하기가 어려웠다.
- 클라이언트가 jsp 요청하면
- html (그대로) 반환
- jsp 내 java 코드는 servlet (java) 파일로 변환된다.
- (결과만 html 에) 응답
- (java 코드는 웹 페이지에서 보이지 않는다.) 클라이언트는 java 파일 확인 불가능
- <%! 선언문 %> : 1. 변수선언[전역변수] 2. 메소드선언 O
<%! String 문자열 = "jsp 선언문"; %>
<%! public String 메소드(){return "jsp 메소드선언";} %>
- <% 스크립트문 %> : 2. 변수선언[지역변수] 2. 메소드선언 X 3. 출력 가능
- <%= 표현식 %> : 1. html 에 java 변수, 메소드 호출
- <-- 주석 --> : 주석처리
- 선언문 : servlet 에서
필드
에 해당 - 스크립트 : _jspService 라는
메소드
JSP 내에서는 JAVA 에 제약이 걸린다. <% %>
서블릿 내에서는 HTML 에 제약이 걸린다. out.write();
jsp 파일 주소
form 태그
<form action="jsp_08.jsp" method="post">
반복할 문자 : <input type="text" name="string"> <br>
반복할 횟수 : <input type="text" name="count"> <br>
전송 <input type="submit" value="전송"> <br>
</form>
post 방식과 get 방식
post : url 에 변수가 출력되지 않음 -> 로그인 할때 (보안이 중요할 때)
get : url 에 변수가 출력된다 -> get 요청은 cache 가 된다.
D:\jj_ansan_ezen.metadata.plugins\org.eclipse.wst.server.core\tmp0\work\Catalina\localhost\jsp_sample\org\apache\jsp\jsp_005fbasic
- 지시자
1. page 지시자
1. <%@ page info="페이지속성내용">
2. <%@ page language="java">
3. <%@ page contentType="text/html" charset="UTF-8">
4. <%@ import="java.util.*">
5. <%@ errorPage="페이지명">
2. action 태그
<h3>Action Tag</h3>
<form action="jsp_11_action_tag_2.jsp" method="post">
이름 : <input type="text" name="name"> <input type="submit">
</form>
<%
request.setCharacterEncoding("utf-8");
String name = request.getParameter("name");
out.print(name);
%>
<jsp:include page="jsp_11_action_tag_1.jsp"></jsp:include>
- <jsp:include page="{$페이지명}></jsp:include>
: 포함시킨다. - <jsp:forward page="{$페이지명}></jsp:forward>
: 이동시킨다.
번거롭게 loadpage 이런걸 만들필요가 없다. 이미 구현이 되어있다. 만들어진 api 가져다가 쓰면된다.
3. 태그 대체 액션태그
* <%! %> : <jsp:declaration> </delcartation> (서로 대체 가능)
* <% %> : <jsp:scriptlet> </scriptlet> (수업 때는 앞에 형식으로 사용한다.)
* <%= %> : <jsp:expression> </expression>
* 자바 빈즈 : [객체 통신 태그]
4. 내장 객체 [ 미리 만들어진 객체 ]
request
: 변수를 포함한 요청을 담고 있는 객체
<%
out.print("Protocol : " + request.getProtocol() + "<br>");
out.print("Server Name : " + request.getServerName() + "<br>");
out.print("Server Port : " + request.getServerPort() + "<br>");
out.print("Servlet Path :" + request.getServletPath() + "<br>");
out.print("Computer Address : " + request.getRemoteHost() + "<br>");
out.print("Computer Name : " + request.getRemoteAddr() +"<br>");
out.print("Method : " + request.getMethod() + "<br>");
out.print("Path : " + request.getRequestURI() + "<br>");
out.print("Current Browser : " + request.getHeader("User-Agent") + " <br>");
%>
Protocol : HTTP/1.1
Server Name : localhost
Server Port : 8081
Servlet Path :/jsp_basic/request_result.jsp
Computer Address : 0:0:0:0:0:0:0:1
Computer Name : 0:0:0:0:0:0:0:1
Method : POST
Path : /jsp_sample/jsp_basic/request_result.jsp
Current Browser : Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Safari/537.36
response
: 요청에 대한 응답을 담고 있는 객체out
: 출력 스트림 객체session
: 세션 정보를 담고 있는 객체page
: jsp 서블릿 객체 [서블릿 페이지 정보]exception
: 예외에 대한 정보를 담고 있는 객체
D:\jj_ansan_ezen.metadata.plugins\org.eclipse.wst.server.core\tmp0\work\Catalina\localhost\jsp_sample\org\apache\jsp\jsp_005fbasic
들어가서 메모장 열어보면 아래와 같이 선언이 되어있다.
필드 | 생성자 | 메소드 로 나뉘어져 있다.
2021.11.30
HTTP : HTTP(HyperText Transfer Protocol, 문화어: 초본문전송규약, 하이퍼본문전송규약)는 W3 상에서 정보를 주고받을 수 있는 프로토콜이다. 주로 HTML 문서를 주고받는 데에 쓰인다. 주로 TCP를 사용하고 HTTP/3 부터는 UDP를 사용하며, 80번 포트를 사용한다. 1996년 버전 1.0, 그리고 1999년 1.1이 각각 발표되었다.
HTTP는 클라이언트와 서버 사이에 이루어지는 요청/응답(request/response) 프로토콜이다. 예를 들면, 클라이언트인 웹 브라우저가 HTTP를 통하여 서버로부터 웹페이지(HTML)나 그림 정보를 요청하면, 서버는 이 요청에 응답하여 필요한 정보를 해당 사용자에게 전달하게 된다. 이 정보가 모니터와 같은 출력 장치를 통해 사용자에게 나타나는 것이다.
HTTP : HTTP(HyperText Transfer Protocol, 문화어: 초본문전송규약, 하이퍼본문전송규약)는 W3 상에서 정보를 주고받을 수 있는 프로토콜이다. 주로 HTML 문서를 주고받는 데에 쓰인다. 주로 TCP를 사용하고 HTTP/3 부터는 UDP를 사용하며, 80번 포트를 사용한다. 1996년 버전 1.0, 그리고 1999년 1.1이 각각 발표되었다.
HTTP는 클라이언트와 서버 사이에 이루어지는 요청/응답(request/response) 프로토콜이다. 예를 들면, 클라이언트인 웹 브라우저가 HTTP를 통하여 서버로부터 웹페이지(HTML)나 그림 정보를 요청하면, 서버는 이 요청에 응답하여 필요한 정보를 해당 사용자에게 전달하게 된다. 이 정보가 모니터와 같은 출력 장치를 통해 사용자에게 나타나는 것이다.
- 복습
선언문 : [(필드) 멤버 변수] 서블릿 파일에서 필드에 위치한다.
태그 : <%! %>
스크립트문 : _jspService 메소드 : 서블릿 파일에서 메소드에 위치한다. 그래서 메소드 안에서 메소드를 선언할 수 없기 때문에 스크립트 문 안에서는 메소드 선언 불가능하다.
태그 : <% %>
표현식 :
태그 : <%= %>
중요 개념
-
request / response
-
post / get
-
session / cookie
session : http 에서 제공하는 내장 객체 (httpSession)
- session.setAttribute("{$세션명}", 데이터) // 세션 할당
- session.getAttribute("{$세션명}") // 세션 호출
- session.invalidate() // (주의) 모든 섹션이 초기화된다.
- session.setMaxInactiveInterval(interval); // 세션 유지 시간 부여 (단위는 s)
세션
: 내장객체 (웹 페이지 전반적으로 사용되는 변수, static in java). 보안이 좋다.
서버 내 세션 저장소에 저장된다. 서버를 중지 시키기 전까지 계속 유지. 세션은 기본이 30분. 많은 세션 사용은 서버에 부화를 만든다. (서버 내 세션 저장소) 부여된 세션으로 홈페이지 활동
쿠키 : 사용자[클라이언트] pc 에 데이터 저장. 보안에 취약(장바구니, 로그인 정보 등)
what is session ?
how sessions work in web servers
post vs get
post
- url 요청된 변수 표시 X
- 보안 [로그인, 개인정보]
- cache 는 NO
- 길이에 제한 X
get
- url 에 변수 표시 O
- 굳이 가릴 필요가 없는 친구들
- cache 값을 남긴다.
- 길이 제한 존재
- 사용처
- form(action="이동페이지 경로" method="post or get")- url 에 변수를 추가하는 방법[get]
- 페이지명.jsp?변수=데이터
- 페이지명.jsp?변수1=데이터1&변수2=데이터2&변수3=데이터&...
- 페이지명.jsp?변수=데이터
- url 에 변수를 추가하는 방법[get]
갑자기 짚고 넘어가는 쓰레드 (Thread)
요약
- 쓰레드는 단순한 실행 흐름이 아님, 메모리를 소유하고 있음
- 메모리 할당은 상당히 비싼 작업임
- 자바는 Executor 인터페이스를 통해 기본적으로 쓰레드 라이프사이클을 관리 가능함
- 64비트 JVM은 기본적으로 쓰레드 스택 메모리를 1MB 예약 할당함
- 현대 메모리 할당은 물리메모리의 가상 매핑이기때문에, 최대 사용 시 1MB까지
- (스택 깊이에 따라 달라짐) 기본적으로 16KB의 '물리적 메모리'를 사용
- 이러한 쓰레드의 무분별한 생성을 막기위해 쓰레드 풀을 사용함
- 쓰레드 풀은 교착 상태와 무한 대기가 발생할 위험이 있음
- 쓰레드 풀이 어느정도부터 효율적일까는 어떤 쓰레드 풀을 어떻게 사용하느냐에 따라
cookies and session
쿠키와 세션에 대해 매우 잘 정리되어 있는 블로그 포스팅
간단 요약 :
http
는 커넥션이 끊기면 클라이언트, 서버 통신이 끝나고 정보가 사라짐 (비연결지향
)- 이를 보완하고나 쿠키와 세션을 도입
쿠키
: 하이퍼 텍스트 기록의 일종, 사이트가 사용하고 있는 서버를 통해 인터넷 사용자의 컴퓨터에 설치되는 작은 기록 정보 파일쿠키
는 HTTP 쿠키, 웹 쿠키, 브라우저 쿠키로 불림, 사용자가 같은 웹 사이트 방문할 때 마다 읽히고 수시로 새로운 정보로 바뀜쿠키
는 클라이언트에 저장되는 Key : Value pair 인 데이터이다.쿠키
가 담고있는 정보 : 이름, 값, 만료 날짜 / 시간(쿠키저장기간), 경로 정보 등
클라이언트의 상태 정보를 로컬에 저장했다가 요청할 때 참조한다.쿠키
는 서버 측에서 만료 날짜/시간을 지정하여 정해진 시간동안 데이터를 유지할 수 있다. 보통 로그인 상태 유지에 활용세션 쿠키
: 브라우저 메모리에 저장, 브라우저 종료 -> 쿠키 증발지속 쿠키
: 항상 유지
클라이언트
가서버
로자원
을요청
합니다.서버
에서쿠키
를생성
합니다.HTTP 헤더
에쿠키
를 포함시켜응답
합니다.- 브라우저가 종료되어도 쿠키 만료 기간이 있다면 클라이언트에서 보관하고 있습니다.
- 같은 요청을 할 경우 HTTP 헤더에 쿠키를 함께 보냅니다.
- 서버에서 쿠키를 읽어 이전 상태 정보를 변경 할 필요가 있을 때 쿠키를 업데이트 하여 변경된 쿠키를 HTTP 헤더에 포함시켜 응답합니다.
그럼 세션은 뭐야
- 서버에 클라이언트의 상태 정보를 저장하는 기술 : 논리적인 연결을 세션이라고 한다.
- 웹 서버에 클라이언트 정보를 저장하고, 클라이언트를 구분 지을 수 있는 ID 를 부여하는데 이를
Session ID
라고 한다. - 세션은 쿠키를 기반하고 있지만, 사용자 정보 파일을 브라우저에 저장하는 쿠키와 달리 세션은 서버 측에서 관리한다.
- 사용자에 대한 정보를 서버에 두기에 쿠키보다 보안에 좋지만, 사용자가 많아질 수록 서버 메모리를 많이 차지한다. 즉 동시 접속이 많은 웹사이트에서는 서버에 과부화 boom
쿠키
-
사용자[클라이언트] pc 에 데이터 저장 [ 웹페이지 전반적으로 사용되는 변수]
- 사용자로부터 저장하다보니 보얀에 취약하다
- 많은 쿠키 사용시 서버 상관 X
- 브라우저 닫아도 쿠키 유지
-
쿠키는 세션과 달리 객체를 만들어서 사용해야한다.
Cookie {$쿠키이름} = new Cookie("{$쿠키명}", 데이터);
-
Response.addCookie({$쿠키이름});
-
request.getCookie(); // 반환 타입은 Cookie[]
쿠키 확인해보기
- 쿠키는 직접 Cookie 객체를 생성해서 사용한다.
1.1 회원가입 등 유저 데이터의 입/출력이 있을 때, 반복문을 통해서 response.addCookie(쿠키) 클라이언트[브라우저]에게 쿠키를 저장시킨다.
1.2 다시 빼올때는
request.getCookies();
getCookies 의 리턴값은 Cookie[] 로 정해져있기 때문에 배열을 이용해야한다. 배열이 다른 인터페이스에 비해서 색인이 가장 빨라서 그런가? 여튼 배열로 받아야함
1.3 쿠키 이름을 뭘로 짓지? 아이디? 사람 이름? 제품 번호?
이쯤에서 Declaration 을 좀 살펴보자
Creates a cookie, a small amount of information sent by a servlet toa Web browser, saved by the browser, and later sent back to the server.A cookie's value can uniquelyidentify a client, so cookies are commonly used for session management.
A cookie has a name, a single value, and optional attributessuch as a comment, path and domain qualifiers, a maximum age, and aversion number. Some Web browsers have bugs in how they handle theoptional attributes, so use them sparingly to improve the interoperabilityof your servlets.
The servlet sends cookies to the browser by using the HttpServletResponse.addCookie(javax.servlet.http.Cookie) method, which addsfields to HTTP response headers to send cookies to thebrowser, one at a time. The browser is expected tosupport 20 cookies for each Web server, 300 cookies total, andmay limit cookie size to 4 KB each.
The browser returns cookies to the servlet by addingfields to HTTP request headers. Cookies can be retrievedfrom a request by using the HttpServletRequest.getCookies() method.Several cookies might have the same name but different path attributes.
Cookies affect the caching of the Web pages that use them.HTTP 1.0 does not cache pages that use cookies created withthis class. This class does not support the cache controldefined with HTTP 1.1.
This class supports both the Version 0 (by Netscape) and Version 1(by RFC 2109) cookie specifications. By default, cookies arecreated using Version 0 to ensure the best interoperability.
페이지 이동
상대경로
-
현재 페이지 기준 ~~!
-
/ : 최상 경로
-
../ : 상위 경로
3.1 ../../ : 2번 위로 이동 -
./ : 현재 경로
header.jsp 는 어떤 경로에서도 상단에서 작동해야하기 때문에
헤더는 절대경로를 사용
한다.
헤더를 상대경로를 사용하면, 이동했던 하위 폴더내에서 jsp 파일을 찾기 때문에 경로를 찾을 수 없다는 오류를 발생시킨다.
- 오류 났던 부분
if 문 안에서 response.sendRedirect("경로"); 를 사용하니 오류가 난다.
out.print("<script>location.href='../view/member/signup.jsp';</script>");
이렇게 바꾸니까 에러가 나지 않았다.
response 에 대해 좀 알아보자 왜 오류가 나는걸까?
jsp 에서 파일 업로드1
- cos.jar 라이브러리 이용 [파일 복사 라이브러리]
jsp 에서 파일 업로드2
- form 인코딩 :
enctype="multipart/form-data"
MultipartRequest
- 요청 방식 : request
- 업로드 할 폴더 경로
- 용량 : 바이트 단위
- 인코딩타입 : "UTF-8"
- 보안 : new DefaultFileRenamePolicy()
- DefaultFileRenamePolicy : 파일명이 동일할 경우, 자동으로 파일명뒤에 번호 매기기 [파일명 중복 제거 클래스]
- form 변수 요청 시 [form 의 인코딩 타입이 multipart 일 경우 request]
- 객체명.getParameter : 변수 값 요청
- 객체명.getFileSystemName() : 첨부 파일에 올라간 파일명 요청
<div class="d-grid gap-2 col-6 mx-auto">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button class="btn btn-primary me-md-2" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
String content = multi.getParameter("content");
// <br>, 프론트 < > 태그 제거해야함
content = content.replace("\r\n", "<br>");
content = content.replaceAll("<(/)?([a-zA-Z]*)(\\s[a-zA-Z]*=[^>]*)?(\\s)*(/)?", "");
db에 저장할 때 텍스트에 대한 예외처리를 해줘야한다.
html 특수문자
표현문자 | 숫자표현 | 문자표현 | 설명 |
---|---|---|---|
& | & | & | --- |
< | < | < | --- |
> | > | > | --- |
space |   | | Non-breaking space |
© | © | © | --- |
서버에서 이미지 파일 불러오기 1
RequestMapping("/userpic.do")
public String listAttach(HttpSession session,HttpServletResponse response ,EduVO eduVO ) throws Exception {
UserInfo userInfo = (UserInfo) UserInfo.getSessionInfo();
response.setContentType( "image/gif" );
ServletOutputStream bout = response.getOutputStream();
String imgpath = fileRepositoryPath + File.separator + fileUserPicPath + File.separator + "nophoto.jpg";
String[] exts = {".bmp", ".jpg", ".gif", ".png", ".jpeg"};
String idno=userInfo.getIdno();
if(eduVO.getIdno()!=null && ! "".equals(eduVO.getIdno()) )idno=eduVO.getIdno();
for(String ext : exts ){
File f = new File(fileRepositoryPath + File.separator + fileUserPicPath + File.separator + idno +ext);
if(f.exists()){
imgpath = fileRepositoryPath + File.separator + fileUserPicPath + File.separator + idno +ext;
break;
}
}
FileInputStream f = new FileInputStream(imgpath);
int length;
byte[] buffer = new byte[10];
while ( ( length = f.read( buffer ) ) != -1 )
bout.write( buffer, 0, length );
return null;
}
서버에서 이미지 파일 불러오기 2
@RequestMapping(value="/loadImage.do")
public String displayPhoto(@RequestParam(value="fileId") String fileId, HttpServletResponse response)throws Exception{
//DB에 저장된 파일 정보를 불러오기
Map<String, String> map = new Map<String, String>();
map.put("fileId", fileId);
Map<String, String> result = 첨부파일검색서비스.첨부파일검색(map);
response.setContentType("image/jpg");
ServletOutputStream bout = response.getOutputStream();
//파일의 경로
String imgpath = map.get("path")+File.separator+result.get("fileName");
FileInputStream f = new FileInputStream(imgpath);
int length;
byte[] buffer = new byte[10];
while((length=f.read(buffer)) != -1){
bout.write(buffer,0,length);
}
return null;
}
2021-12-13
no-gutters
: 마진, 패딩 없애기
// 정규표현식 예제
document.getElementById("total").innerHTML = totalPrice.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
// 총가격.toString() : 문자열 변환
// .replace(기존문자, 새로운 문자)
// 정규 표현식 : /\B(?=(\d{3})+(?!\d))/g
// 1. / : 시작
// 2. \b : 시작, 끝 문자 [ 예 : 1234 일 경우 1, 4 ]
// 3. d{3} : 문자 길이 [ 예 : {3} : 숫자 길이 123 ]
// 4. !\d : 뒤에 숫자가 없을 경우
// 5. /g : 전역 검색
css, javascript 파일이 안먹힐 때
jsp 파일을 작성하며 js, css 수정한 파일이 web server 에 적용되지 않았다. 처음엔 오타인 줄 알고 1시간 동안 삽질하다가 해결책을 찾았다.
- tomcat server - clean
- ctrl+shift+delete : 쿠키 삭제
문제해결 !
천단위 숫자 출력 :
DecimalFormat
("###,###")
여러가지 방법이 많으니 검색해서 추가해놓기
찜하기 기능
Product.java
public String get_decimal() { // 천 단위 쉼표
DecimalFormat decimalFormat = new DecimalFormat("###,###");
return decimalFormat.format(this.p_price);
}
좋아요 기능 구현(장바구니와 유사)
흐름 :
1.productView
에서 좋아요 버튼 클릭 (p_no, m_num) 인수로 전달
2.js
들어가서ajax
접근
3.productLikeController
연결
4.ProductDao
들어가서 제품 좋아요 메소드에 (p_no, m_num) 인수로 전달
5.plikeUpdate
에서 이미 누른채로 한번 더 누른다면 db 에서 좋아요 데이터를 삭제하고 '1' 리턴. 누르지 않은 상태라면 db 에 좋아요 데이터를 추가하고 '2' 리턴
6.productLikeController
에서는<% %>
안에 있는 단일값만 리턴시켜서 ajax 에 result 라는 인수값으로 넘겨준다. 자동으로 생성되는 html 태그들을 지우지 않으면 모든 값들이 전달된다. 전달받은parameter
에 따라서 빈하트, 꽉찬하트로 아이콘을 변경해준다.
productView.jsp
<button class="form-control" id="btnplike" onclick="plike(<%=product.getP_no()%>, <%=m_num%>)"> 찜하기 </button>
main.js
// jQuery 사용한 ajax 통신
// jsp 파일에서 버튼 클릭 후 js -> ajax 연결
function plike(p_no, m_num){
$(function(){
$.ajax({
url: "../../controller/productLikeController.jsp",
data: { p_no:p_no, m_num: m_num},
succeess: function(result){
if(result==1){
document.getElementById("btnplike").innerHTML = "찜하기 <i class='bi bi-heart'></i>";
} else if(result==2){
document.getElementById("btnplike").innerHTML = "찜하기 <i class='bi bi-heart-fill'></i>";
}
}
});
});
}
productLikeController.jsp
<%
int p_no = Integer.parseInt(request.getParameter("p_no"));
int m_num = Integer.parseInt(request.getParameter("m_num"));
out.print(ProductDao.getProductDao().plikeUpdate(p_no, m_num));
%>
ProductDao.jsp
// 7. 제품 좋아요 메소드
public int plikeUpdate(int p_no, int m_num) {
// 1. 좋아요 버튼 -> 좋아요 [제품번호, 회원번호]
// 2. 제품 번호, 회원번호가 일치한 좋아요 없으면 좋아요 생성
// 2. 제품 번호, 회원번호가 일치한 좋아요 있으면 좋아요 삭제
String sql = null;
sql = "select * from plike where p_no = " + p_no + " and m_num = " + m_num;
try {
psmt = conn.prepareStatement(sql);
res = psmt.executeQuery();
if (res.next()) {
sql = "delete from plike where p_no = " + p_no + " and m_num = " + m_num;
psmt = conn.prepareStatement(sql);
psmt.executeUpdate();
return 1; // 좋아요 제거
} else {
sql = "insert into plike(p_no, m_num) values(" + p_no + "," + m_num + ")";
psmt = conn.prepareStatement(sql);
psmt.executeUpdate();
return 2; // 좋아요 추가
}
} catch (Exception e) {
System.out.println("오류" + e);
e.printStackTrace();
}
return 0; // db 오류 시 '0' 리턴
}
2021-12-14
<a href="#{$아이디값}">
<a href="#{$아이디값}">
하면 페이지 전환이 아니라 id 값이 입력된 태그로 이동할 수 있다.
장바구니
장바구니 버튼 클릭 시 장바구니 컨트롤러로 이동, 제품의 번호, 옵션, 수량을 Session
값에 저장한다. 값이 3개기 때문에 Cart.java
클래스를 만든다 !
- Spring 에서는 Annotaion 이 있어서 깡통 생성자 안만든다. getter/setter 도 안만든다.
- 제품 상세 페이지에서
장바구니
버튼 클릭 - 버튼에 이벤트를 걸어서
onclick="cartAdd()"
함수 실행 - javascript 로 값을 넘겨줍니다. 어떻게 할까요?
- html 부분 : html 에서 value 를 어떤 식으로 넘겨줘야 좋을까요?
방법이 여러가지가 있습니다.
<input id="{$id}" name="{$name}" class="{$class}"
- js 부분
// javascript 안에 선언된 코드입니다.
// 1. JQuery 를 이용해서 값 가져오기
// 1.1 id 값 이용
var p_no = $("#p_no").val();
// 1.2 name 값 이용
var p_no = $("input[name=p_no]").val();
// 1.3 class 값 이용
var p_no = $(".p_no").val();
// 2. javascript 를 이용해서 값 가져오기
// 2.1 id 값 이용
var p_no = document.getElementById("p_no").value;
// 2.2 class 속성 이용
var p_no = document.getElementsByClassName("p_no")[0].value;
// 2.3 name 속성 이용
var p_no = document.getElementsByName("p_no")[0].value;
모두 같은 결과를 나타내지만, jquery 를 이용한 방법이 더 간결해보입니다. jquery 는 js에 밀려서 점점 밀려나는 경향이라서 js 로 통일해서 쓰는 것도 좋아보입니다.
-
장바구니 화면에서
전체 삭제
개별 삭제
어떻게 구현할 수 있을까요?
a. 전체 삭제 : all 개별 삭제 : in 처럼type
구별을 해줍니다.
b. js 에서 함수를 선언해서 인수로 type, p_no, p_size 를 넘겨줍니다.
c. p_no 안에서 size 가 여러가지 있으니 구별지어줘야 합니다.
d. ajax : url -> 컨트롤러로 연결시켜서 조건문으로 type 에 따라서 전체 삭제, 개별 삭제 코드를 작성합니다. -
장바구니가 이미 담겨있을 때 상품을 추가, 아니면 장바구니가 아예 비어있을 때 상품을 추가하는 건 다른 상황이므로 조건문을 통해서 구분지어줘야합니다.
a. 상단에 session.getAttribute 를 통해서 현재 장바구니에 상품이 있는지 없는지 검사합니다.
b. null 값이라면 조건문으로 들어가서 carts 리스트를 초기화 시키고, 선택한 제품을 비어있는 리스트에 추가시킵니다. 그리고 session 값에 집어 넣습니다.
c. null 값이 아니고 상품이 담겨진 상태라면 반복문을 돌면서 해당하는 상품의 갯수만을 증가시킵니다. p_no 와 p_size 조건을 통해서 상품을 특정 지을 수 있습니다. 여기서 스위치를 하나 생성합니다. (boolean
값) 스위치의 상태를 변화시켜서 빈 장바구니, 차있는 장바구니를 구분 짓습니다. 이렇게 하지 않는다면 if, else 문 안에 이어지는 동일한 코드를 2번 쳐야합니다. 만일 if, else if, ..., else 문으로 여러가지 상태가 존재할 수 있다면 boolean 이 아니라 int 값으로 상태 값을 선언해서 제어할 수 있을 것 입니다. 예를 들어 등록, 수정, 삭제, 관리자 문의 등 4가지 상태가 있다면 if - else if - else if - else 문을 걸어둡니다. 그리고 조건문 안에서 각각의 상태로 스위치 값을 초기화 시킨뒤 반복문 - 조건문 콤보를 빠져나오고 스위치 값을 검사해서 해당하는 메소드를 호출할 수 있습니다. 그냥 일렬로 쭉 적는것과 결과는 동일하지만 좀 더 가독성이 좋지 않을까 생각합니다.
if( ... ) { ... status = 1; }
else if ( ... ) { ... status = 2; }
else if ( ... ) { ... status = 3; }
else { ... status =4; }
if(status==1){ ... }
if(status==2){ ... }
if(status==3){ ... }
if(status==4){ ... }
페이지 이동으로 데이터를 넘기는 방법 1. form 2. javascript
- 페이지 이동
html
:<a href="페이지경로?변수명1=값1?변수명2=값2"> <a>
jsp
:response.sendRedirction("페이지경로?변수명1=값1?변수명2=값2")
js
:location.href="페이지경로?변수명1=값1?변수명2=값2"
$.ajax //페이지 전환이 없음. 해당 페이지와 통신해서 결과 받아옴
url: "#"
data: {변수명=값, 변수명=값, ... }
success : function(result){ // 통신 결과
}
경로에 변수를 넣을 때 " " 구분 잘 해줘야한다.
파일명.jsp?p_no=" + p_no
- confirm
if(confirm("장바구니에 상품을 담았습니다. 장바구니로 이동하시겠습니까? ") == true){
location.href="productCart.jsp";
}
- return
if (p_size == 0) {
alert("사이즈 옵션을 선택하지 않으셨습니다."); return;
}
- String 호출
session.setAttribute("login", login); // 1.2 세션명, 세션데이터
Login_Id login_Id = (Login_Id) session.getAttribute("login");
// 메소드안에 String 인수를 "login"
String sname = "cart" + login_Id.getM_id();
ArrayList<Cart> carts = (ArrayList<Cart>)session.getAttribute(sname);
// 여기서는
- 수직 정렬
div 는 못 해!
text, img 정렬 가능
2021-12-15
-
프론트 관련 에러는 오류 메시지를 콘솔창에서 확인할 수 없으니 F12
키를 눌러서 확인해야한다. 오류 로그 체크 !
-
서로 다른 pc 에서 세션, 쿠키 요청하면 호환 가능합니까? 결론 : 다른 데이터이고, 다른 세션이나 쿠키의 값을 읽을 수는 있다.
데이터를 저장
- JVM : 자바 가상 머신 (코드, 클래스, 변수 등)
- File: 현 pc 내 하드디스크
- DB처리 : DB 서버 내 하드디스크
- Server[Tomcat] : 세션 저장소[server], 쿠키[client]
- 서버 : 정보를 가지고 있는 PC
- 서로 다른 PC 에서 세션, 쿠키명 요청 가능합니까? [기본적으로는 X]
a. pc1 -> 로그인 -> "qwe" -> 로그인 세션명[login]
b. pc2 -> 로그인 -> "asd" -> 로그인 세션명[login]
c. pc1 : login 세션과 pc2 : login 세션이 동일합니까?
ㄱ. 서로 다른 어플리케이션에서 동일한 세션 사용시 서로 다른 세션 호출
ㄴ. 호환 되도록 가능합니다. 세션(혹은 쿠키)이 생성되면 사용자마다 다릅니다. 접근하도록 만들수는 있는데 실질적으로 그럴 이유가 있을까요?
장바구니 제어
- 장바구니 담을 때, 각각의 이벤트에 식별키를 부여해서 구분짓는다.
i
값을 넘겨줘서 구분했다.
- ajax 를 이용해서 js 함수에
i
값을 넘겨준다. 그리고 컨트롤러에도 i
값을 넘겨준다.
- 버튼 type 을 지정해서 컨트롤러에 제어문을 걸어두면 한번에 처리할 수 있다. 예를 들어 해당 프로젝트에서는
전체 삭제 : 'all'
, 개별 삭제 : 'in'
, 수량 증가 : 'p'
, 수량 감소 : 'm'
값을 <input>
혹은 <button>
태그안에 onclick="function()"
, onchange="function()"
등의 함수의 인수로 건네주었다.
db
에 접근해서 정보를 많이 건네줘야하는 경우에는 <input type="hidden" id="아이디" value="<%= 건네줄 값이 저장된 변수 %>" >
으로 건네주었다.
체크박스 사용
프론트 관련 에러는 오류 메시지를 콘솔창에서 확인할 수 없으니 F12
키를 눌러서 확인해야한다. 오류 로그 체크 !
서로 다른 pc 에서 세션, 쿠키 요청하면 호환 가능합니까? 결론 : 다른 데이터이고, 다른 세션이나 쿠키의 값을 읽을 수는 있다.
a. pc1 -> 로그인 -> "qwe" -> 로그인 세션명[login]
b. pc2 -> 로그인 -> "asd" -> 로그인 세션명[login]
c. pc1 : login 세션과 pc2 : login 세션이 동일합니까?
ㄱ. 서로 다른 어플리케이션에서 동일한 세션 사용시 서로 다른 세션 호출
ㄴ. 호환 되도록 가능합니다. 세션(혹은 쿠키)이 생성되면 사용자마다 다릅니다. 접근하도록 만들수는 있는데 실질적으로 그럴 이유가 있을까요?
i
값을 넘겨줘서 구분했다. i
값을 넘겨준다. 그리고 컨트롤러에도 i
값을 넘겨준다. 전체 삭제 : 'all'
, 개별 삭제 : 'in'
, 수량 증가 : 'p'
, 수량 감소 : 'm'
값을 <input>
혹은 <button>
태그안에 onclick="function()"
, onchange="function()"
등의 함수의 인수로 건네주었다. db
에 접근해서 정보를 많이 건네줘야하는 경우에는 <input type="hidden" id="아이디" value="<%= 건네줄 값이 저장된 변수 %>" >
으로 건네주었다. jQuery 사용해서 체크박스 선택 / 비선택일 때 상태에 따른 제어
// 체크 유무 [jQuery]
$(document).ready(function() {
$("#pay_check").change(function() {
if($("#pay_check").is(":checked")){ // jQuery
// 체크박스가 체크 되었는지 확인 = true
// is : 해당 태그 속성 찾기 [ 여기서는 checked ]
$("#name").val("테스트");
} else {
$("#name").val();
}
});
}); // ready 는 항상 대기
- jquery 사용할 시 유의점 :
$
쓰면;
하나 들어간다.
2021-12-16
- 장바구니 -> 실제 결제 프로세스 구현
주문 내역 , 주문 상세 내역 TABLE 을 DB 에서 구분해서 만들었다.
코드 흐름
1. productPayment.jsp -> main.js -> function payment() productPaymentController.jsp 로 인수 전달
장바구니에서 결제 버튼 클릭 -> ajax 통신 -> 컨트롤러에 장바구니에 담겨있던 정보 전달
2. POrderDao.java -> addPOrder(POrder porder, ArrayList<Cart> carts) 메소드 실행
장바구니에서 전달한 정보를 이용해서 POrder 객체를 생성하고 db 연동 위해서 dao 호출
3. addPOrder에서 하는 역할은 2가지. 첫번째로는 ```porder``` 테이블에 유저 정보를 전달해서 ```INSERT``` 한다. 그 후 장바구니에 담긴 개별 아이템 정보를 ```porderdetail``` 에 ```INSERT``` 시킨다.
코드 흐름
1. productPayment.jsp -> main.js -> function payment() productPaymentController.jsp 로 인수 전달
장바구니에서 결제 버튼 클릭 -> ajax 통신 -> 컨트롤러에 장바구니에 담겨있던 정보 전달
2. POrderDao.java -> addPOrder(POrder porder, ArrayList<Cart> carts) 메소드 실행
장바구니에서 전달한 정보를 이용해서 POrder 객체를 생성하고 db 연동 위해서 dao 호출
3. addPOrder에서 하는 역할은 2가지. 첫번째로는 ```porder``` 테이블에 유저 정보를 전달해서 ```INSERT``` 한다. 그 후 장바구니에 담긴 개별 아이템 정보를 ```porderdetail``` 에 ```INSERT``` 시킨다.
메모사항 : p_no 자체는 porder 에 들어가지 않는다. porder 테이블에는 유저 정보, 총 금액만이 들어간다.
2021-12-17
div 안에서 p 정렬 : d-flex align-content-center flex-wrap
div 안에서 이미지 정렬 : d-flex align-items-center
무한 스크롤
<section>
// 출력할 내용, dao 통해 db 에서 정보 가져온다.
//
</section>
$(window).scroll(function(){
if($(window).scrollTop() == $(document).height() - $(window).height())
{
$.ajax({
url: "컨트롤러 상대 주소",
data : {item : item},
success: function(result){
// section 이라는 태그에 결과값을 이어붙인다.
$("section").append(result);
}
});
}
});
2021-12-20
웹 개발
라이브러리 - 미리 만들어진 개발 툴
1. server pc : Tomcat
2. DB pc : mysql
3. 개발자 pc : eclipse
파일 구조
- header.jsp :
- 모든 페이지에 사용되는 css, js, jquery, bootstrap, 각종 API
- 로그인 세션 [로그인 성공 시 세션 메모리 할당]
- signUP.jsp :
- 정규표현식 검사 : [js] {정규표현식}.test({변수명})
- 아이디 중복체크 : [ajax]
- memberInfo.jsp :
- ajax 이용한 무한 스크롤
- boardList.jsp :
- 페이징 처리 (더 효율적인 페이징 처리가 있습니까? 수업에서는 bootstrap 활용한 pagination)
- 검색 처리 (key, keyword 어떻게 처리 했습니까?)
- 조회수 처리
- 파일 처리 [upload, download]
- product :
- 수량 변경 [js]
- 클릭 시 데이터 이동 [js]
-
main :
-
footer :
상업적인 사이트에는 꼭 들어가야한다.DB 구조
INSERT INTO 테이블명(필드1, 필드2, 필드3, ...) VALUES(값1, 값2, 값3, ... )
UPDATE 테이블명 SET 필드명1=값1, 필드명2=값2, 필드명3=값3, ...
DELETE FROM 테이블명
SELECT 필드명 FROM 테이블명
- where 필드명 = 값 : 필드에 값이 정확히 일치하면
필드명 like %값% : 필드에 값이 포함된 [일부] - order by 필드명 asc / desc : 정렬
- limit 시작 번호, 제한 갯수 : 검색 갯수 제한
- 함수, 연산자
- MAX()
- MIN()
- COUNT
- SUM()
- AVG()
-
AND / OR
디자인 패턴 MVC1
데이터 입력
-
HTML 에서 입력받기
-
데이터 이동 < 1. ajax 2.
3. link] > -
전달받은 데이터를 controller 에서 처리
-
db 처리
데이터 반환
-
db 검색
-
db 데이터를 객체화 -> controller 에서 반환
-
controller 에서 html 이동 [1. ajax 2. 3. link]
HTML -> JS
-
id
-
name
-
class
JSP -> JS
ArrayList -> JS [불가능]
자바 객체를 js 로 옮길 수 없음
JSON 을 이용해야한다.
반대로도 불가능함 js 의 리스트를 jsp 로 못 옮긴다. json 활용면접 때
Question. 인스타그램 해시태그, 태그 어떻게 구현했는지 말로 간략하게 설명 해보세요
답변 :
JSON
- json 에서 변수 저장 방법
-
var 변수명 = 값 : 하나의 값 저장
-
var 배열명 = [ ] : 여러 값 저장
-
var json = { } : 여러 엔트리 ( 키 : 값 ) 저장
키 : 값 => pair [엔트리]
JSON 활용 :
키 : 배열이 가능하다 -> 중첩 가능하다
key2 : { key1 : [ ] }JS 에서 DB 를 써야한다???? NODE.JS 배워오세요 ^^
DB에 있는 걸 JS 로 옮긴다 : JSON 이용 !
DAO 에서 controller 로 보내고 여기서 JSON 형태로 JS 로 넘긴다.
CSS GRID 완전 정복
2021-12-21
chartjs 사용
-
json 으로 데이터 넘기기 ($.getJSON -> controller 한번 찍고온다
$.getJSON('../../controller/productChart.jsp?type=1', function(jsonObject) {
// 컨트롤러 한번 찍고 온 jsonObject 데이터를 변수에 할당
var keys = Object.keys(jsonObject);
var keyList = []; // key 값을 저장할 배열
var valueList = []; // value 값을 저장할 배열
}
- controller 에서 하는 일
<%
String type = request.getParameter("type");
JSONObject jsonObject = new JSONObject(); //json.simple.jar 에서 지원해준다.
// Collection Frameworks 의 'Map' 과 동일하다고 보면 된다.
/* jsonObject.put("id", "qwerqwer");
jsonObject.put("password", "12341234"); */
if (type.equals("1")) {
jsonObject = POrderDao.getPOrderDao().getOrderByDate();
} else if (type.equals("2")) {
jsonObject = POrderDao.getPOrderDao().getPCount();
} else if (type.equals("3")) {
int p_no = Integer.parseInt(request.getParameter("p_no"));
jsonObject = POrderDao.getPOrderDao().getEachCount(p_no);
}
%>
<%=jsonObject%>
- POrderDao 에서 하는 일
public ArrayList<POrderDetail> getPOrderDetailList(int order_no) {
ArrayList<POrderDetail> porderdetails = new ArrayList<>();
String sql = "select * from porderdetail where order_no = " + order_no;
try {
psmt = conn.prepareStatement(sql);
res = psmt.executeQuery();
while (res.next()) {
POrderDetail poderdetail = new POrderDetail(
res.getInt(1), res.getInt(2), res.getInt(3), res.getInt(4), res.getInt(5)
);
porderdetails.add(poderdetail);
}
return porderdetails;
} catch (Exception e) {
System.out.println(e);
e.printStackTrace();
}
return null;
}
- js -> 컨트롤러 -> dao -> 다시 js 에서 db 에서 불러온 데이터로 그래프 그리기
public ArrayList<POrderDetail> getPOrderDetailList(int order_no) {
ArrayList<POrderDetail> porderdetails = new ArrayList<>();
String sql = "select * from porderdetail where order_no = " + order_no;
try {
psmt = conn.prepareStatement(sql);
res = psmt.executeQuery();
while (res.next()) {
POrderDetail poderdetail = new POrderDetail(
res.getInt(1), res.getInt(2), res.getInt(3), res.getInt(4), res.getInt(5)
);
porderdetails.add(poderdetail);
}
return porderdetails;
} catch (Exception e) {
System.out.println(e);
e.printStackTrace();
}
return null;
}
-
결과 화면
select 선택한 옵션만 가져오기
옵션 태그안에
value
값 부여api 활용
url -> json 으로 parsing
-
StreamBuffer : [조사해서 작성]
-
URL : [조사해서 작성]
JSONArray jsonArray = (JSONArray) jsonObject.get("data");
2021-12-22
overflow : auto;
박스권안에 요소가 넘치게되면 자동으로 스크롤을 생성해준다.
overflow 문서websocket
<script type="text/javascript">
// 1. 입력창에 입력된 데이터를 가져온다.
var msginput = document.getElementById('msginput').value;
// 2. 현재 회원 아이디 가져오기
var loginid = document.getElementById('loginid').value; // value 속성이 있는 태그만 가능
// 3. 채팅창 가져오기
var msgbox = document.getElementById('msgbox');
// 4. 웹 소켓 { ws://http port번호/프로젝트명/경로 }
var webSocket = new WebSocket('ws://localhost:8081/jsp_web/chatting'); // 접속 객체 생성
// 5. 웹소켓 메소드
webSocket.onopen = function(event) {
onOpen(event)
};
webSocket.onclose = function(event) {
onClose(event)
};
webSocket.onmessage = function(event) {
onMessage(event)
};
webSocket.onerror = function(event) {
onError(event)
};
// 6. 이벤트 메소드 정의
function onOpen(event) {
alert('접속 되었습니다.');
}
function onClose(event) {
alert('퇴장 했습니다.');
}
function onError(event) {
alert(event.data);
}
// 7. 보내는 메소드
function btnsend() {
// 엔터를 눌렀을 때
var msginput = document.getElementById('msginput').value;
if (msginput == "") { // 공백 전송을 막는다.
return;
}
// 누가 보냈는지 도 같이 보낸다.
let today = new Date();
var time = today.toLocaleTimeString();
var msg = loginid + ',' + msginput + ',' + time;
// 입력된 문자와 날짜를 포함시킨다.
msgbox.innerHTML += "<div class='d-flex justify-content-end mx-2 my-2'> <span class='msg-time d-flex align-items-end'> "
+ time
+ " </span> <span class='from mx-1'> "
+ msginput
+ "</span> </div> "; // 서버로부터 메시지 전송
webSocket.send(msg); // *** 서버로부터 메시지 전송
document.getElementById('msginput').value = "";
// 스크롤이 있을 경우 스크롤 위치를 가장 아래로 이동한다.
msgbox.scrollTop = masbox.scrollHeight;
// 현 스크롤 위치 = 스크롤 전체높이 [바닥]
}
function entersend() {
// 엔터를 눌렀을 때
// window 에서 'enter' 라는 이벤트가 없다.
if (window.event.keyCode == 13) {
// 윈도우 키보드 이벤트에 할당된 키코드 enter = 13;
var msginput = document.getElementById('msginput').value;
if (msginput == "") { // 공백 전송을 막는다.
return;
}
// 누가 보냈는지 도 같이 보낸다.
let today = new Date();
var time = today.toLocaleTimeString();
var msg = loginid + ',' + msginput + ',' + time;
// 입력된 문자와 날짜를 포함시킨다.
msgbox.innerHTML += "<div class='d-flex justify-content-end mx-2 my-2'> <span class='msg-time d-flex align-items-end'> "
+ time
+ " </span> <span class='from mx-1'> "
+ msginput + "</span> </div> "; // 서버로부터 메시지 전송
webSocket.send(msg); // *** 서버로부터 메시지 전송
document.getElementById('msginput').value = "";
// 스크롤이 있을 경우 스크롤 위치를 가장 아래로 이동한다.
msgbox.scrollTop = masbox.scrollHeight;
// 현 스크롤 위치 = 스크롤 전체높이 [바닥]
}
}
// 8. 받는 메소드
function onMessage(event) {
var from = event.data.split(',')[0];
var msg = event.data.split(',')[1];
var time = event.data.split(',')[2];
msgbox.innerHTML += "<div class='profile'>" + from + "</div>"
msgbox.innerHTML += "<div class='d-flex justify-content-start mx-2 my-2'> <span class='to d-flex align-items-end'>"
+ msg
+ "</span> <span class='msgtime d-lfex align-items-end'> "
+ time + " </span> </div>";
msgbox.scrollTop = msgbox.scrollHeight;
// 현 스크롤 위치 = 스크롤 전체높이[바닥]
};
</script>
package dto;
import java.io.IOException;
import java.util.Vector;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
@ServerEndpoint("/chatting") // 서버 소켓 [종착점] (경로생성)
public class Chatting {
private static Vector<Session> clients = new Vector<Session>();
@OnOpen // 소켓에 접속하는 어노테이션
// 클라이언트가 서버로부터 접속 요청
public void onOpen(Session session) {
clients.add(session);
}
@OnClose // 소켓으로부터 접속 해지하는 어노테이션
// 클라이언트가 서버로부터 접속 해지
public void onClose(Session session) {
clients.remove(session);
}
// 서버가 클라이언트로부터 메시지 받는 메소드
@OnMessage // 메시지를 받는 어노테이션
public void onMessage(String msg, Session session) {
// @Param : 메시지, 세션
for (Session client : clients) {
if (!client.equals(session)) {
// 본인을 제외한 모든 사람에게
try {
client.getBasicRemote().sendText(msg);
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
/*
* @OnError // 알아서 오류생기면 소켓이 끊기기 때문에 굳이 쓸 필요는 없어요 그냥 있으니까 적어봤네요 public void
* onError(Session session) {
*
* }
*/
}
실행 결과
요약
1. localhost:8081 에서 실행하기 때문에 chrome, edge, ie 로 테스트했다.
2. 메시지를 file 처리 (혹은 db처리) 하지 않았기 때문에 변수로 전달한다.
3. msgbox.scrollTop = msgbox.scrollHeight;
로 스크롤 이벤트
2021-12-24 jsp 마무리
jsp 는 여기서 종료. 지금까지 배운 것들은 스스로 정리해야한다.
jsp 는 여기서 종료. 지금까지 배운 것들은 스스로 정리해야한다.
현재까지 jsp 수업 때 배웠던 것을 총 정리 해보는 시간을 가진다.
- 정의
-
JSP 가 무엇인가
- java server page
- 서버 사이드 스크립트 언어
javax.servlet.http.HttpServlet
클래스를 상속받은Java
소스 코드로 변환한 다음 컴파일되어 실행된다.- jsp 파일을 Servlet 클래스로 변환하고 실행하는 역할을
서블릿 컨테이너
라고 부른다. - 하나의 jsp 파일 : 하나의 java 클래스 [모든 java 라이브러리 사용 가능]
- 대규모 기업용 서버 환경에 사용된다.
- 하나의 jsp 파일 안에서 html, css, javascript, java 를 모두 사용할 수 있다.
- client 가 jsp 를 요청, html 은 그대로 가고 java 코드는 servlet(java) 로 변환
- 서버가 응답하는데 html 에 응답한다. servlet 으로 변환된 자바 파일은 클라이언트가 확인할 수 없다.
-
Server[Tomcat] 이 무엇인가
-
Client 가 무엇인가
-
Servlet 이 무엇인가
- DB 란?
- DML :
- DDL :
- DCL :
- 제약 조건 :
- MVC1, MVC2 가 무엇인가 ?
- MVC :
- HTML -> Controller -> DTO -> DAO -> DB
- C 흐름 정리
- DB -> DAO -> Controller -> HTML
- R 흐름 정리
- CRUD 란 무엇인가?
- JSP 기능
- JSP 태그 정리
- JSP 내장 객체 [request, sessionm, cookie, response]
- 통신 정리
- 클라이언트가 서버에서 데이터를 요청[통신]하는 방법
- 서버가 클라이언트에게 데이터를 응답[통신]하는 방법
- 기능 정리
- 장바구니 기능
- 결제기능
- 업로드 / 다운로드
- API [ 공공데이터 포털 / 카카오 지도 / 다음 주소 ]
- JS 정리
- 아이디 중복체크 [ajax]
- 유효성 검사 [정규표현식]
- 주문목록[ajax -> 무한 스크롤]
- HTML 정리 [게시판 작성에 필요한 것들만]
- CSS 정리 [게시판 작성에 필요한 것들만]
- BOOTSTRAP 정리 [게시판 작성에 필요한 것들만]
- 언어 간 데이터 이동 방법 [html, css, javascript, java]
- JSON 정리
- Chartjs 이용한 차트 그리기
Author And Source
이 문제에 관하여([JAVA 교육] jsp 수업 정리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@boricat/jsp-수업-정리저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)