let el = document.querySelector('.test');
el.addEventListener('click',(e)=>{
console.log('clicked');
},{
capture:false,
once:true,
passive:false,
});
addEventListener의 3번째 옵션에는 bool값이 들어가거나 옵션 객체가 들어간다. bool값이 들어갈 경우에는 옵션 객체의 capture 옵션만 지정하는것이 된다.
기본값은 false이고,
false일 경우 이벤트 버블링(이벤트 발생후, 상위 태그의 이벤트 호출) 일어나고
true일 경우엔 이벤트 캡쳐링(이벤트 발생후, 하위 태그의 이벤트 호출)이 발생한다.
참고 : https://www.w3schools.com/js/tryit.asp?filename=tryjs_addeventlistener_usecapture
Java Server Page
<%@ %> 지시자=> JSP 설정 부분이라고 이해하면 될것 같다.
JSP에서 List같은 자바 객체를 사용해야한다면
이 지시자를 통해서 객체를 가져와야한다.
<%@ page import ="java.util.ArrayList"%>
<% %> 스크립트릿=> 자바코드를 기술하는 부분, html에 출력은 되지 않는다.
<%= %> 표현식=> 변수가 html에 반영되는 부분
<%! %> 선언문 => JSP 바깥에 메소드나 멤버변수를 선언하는 부분
ejs와 비슷
<!-- --> HTML 주석
<%-- --%> JSP 주석. HTML에 표시되지 않음. 또한 Servlet으로 변형되지도 않음
JSP는 기본적으로 서블릿 기술을 사용함.
init -> service -> destroy 라이프 사이클을 따름.
개발자가 선언하지 않았어도 자동으로 JSP가 생성한 객체를 내장객체라고 부른다.
request ( HttpServletRequest )
response ( HttpServletResponse )
application ( application scope layer ) 중요
session ( session scope layer ) 중요
out ( response printWriter out );
참고 : https://www.edwith.org/boostcourse-web/lecture/19882/
Http 프로토콜 규칙
서버가 클라이언트에 보낼 response에 redirect 요청을 보내면 클라이언트는 해당 URL로 이동하게 된다.
이때 상태코드는 302, Location Header에 이동할 URL 정보를 넣어 요청해야한다.
클라이언트는 302코드와 Location Header 정보를 바탕으로 redirect 하게 된다.
response.sendRedirect(url);
으로 리다이렉트 요청을 보낸다.
Client에서 요청을 Servlet1에게 보내면
Servlet1에서 서비스 로직을 실행하구
이후 Servlet2에게 다시 일을 위임함
Servlet2에서 로직을 실행후 Client에게 리스폰스를 보내는 방법
이 방법의 장점은, 클라이언트가 보낸 처음의 request객체를 servlet들이 나눠서 사용하는것이 가능하다.
또한 redirect와 다르게 1번의 요청으로 2번의 작업을 하는것이 가능하다.
/// in the servlet
//request객체의 setAttribute(String,Object) 함수로
//값을 설정하여 넘기는것이 가능하다.
request.setAttribute("keys","value");
//RequestDispatcher 객체는 request의 getRequestDispatcher 함수를 통해서 얻는다.이때 인자로 넘길 URL을 지정한다.
RequestDispatcher requestDispatcher = request.getRequestDispatcher("/next");
//forward 시킨다.
requestDispatcher.forward(request,response);
Servlet에 로직을 수행하고
forward로 JSP로 보내
JSP에서 동적으로 결과를 출력하는 방법을
servlet & jsp 라고 부르고. 주로 사용된다.
jsp 로 forward 하면 jsp 내장객체인 request를 통해서 데이터를 가져오는것이 가능하다.
사용자 데이터, 변수가 유지되는 구간
1. Application 2. Session 3. Request 4. Page
1->4 순으로 구간이 작아진다.
페이지 내에서만 변수가 존재함
forward시 유지되지 못함
pageContext JSP 내장객체를 사용.
Request의 한에서 존재함.
forward , 에도 변수가 유지됨
JSP에서는 request 내장객체 사용
Session에 의해서 존재하는 변수, Client 세션정보가 저장된다.
HttpSession 인터페이스를 구현한 객체를 사용한다.
JSP에서는 Session 내장 변수를 사용한다.
어플리케이션이 생성되고, 사라질때 까지 유지되는 스코프
ServletContext 인터페이스를 구현한 객체를 사용한다.
Servlet에는 getServletContext() 메서드가 구현되어 있는데 이를 통해서 ServletContext 객체를 얻는것이 가능하다.
jsp에서는 application 내장 객체를 사용한다.
https://www.edwith.org/boostcourse-web/lecture/16714/
Expression Language
서블릿 2.4부터 기본으로 사용이 가능하다.
JSP에 Java가 섞이게 되면 가독성이 안좋아지기 떄문에 만들어짐.
${expr} 식으로 사용.
문법
${<expr1>.<expr2>}
<EL이 제공하는 기능>
1.Scope 속성 사용
2.객체 접근 방법 제공,
3.수치 연산,관계 연산, 논리 연산 제공
empty <값> => null 빈배열,빈 MAP,길이가 0인 배열일 경우 false true를 리턴한다.
4.자바 클래스 메소드 호출 기능
5.EL 기본객체 제공
Scope 객체 : pageScope,requestScope,sessionScope,applicationScope
파라미터 param 객체 ( servlet에서 들어오는 요청파라미터는
request.getParameter(이름) 으로 받는다.
EL태그에서 지원하는 param(MAP)객체로 받을 수 있다.)
사용법 ${param.code}
paramValues
header 객체 (MAP)
{header.code}
headerValues (MAP)
{headerValues.code}
cookie (MAP)
initParam (MAP) : application.getInitParameter(이름)와 동일
참고 : https://www.edwith.org/boostcourse-web/lecture/16713/
JSP Standard Tag Library
JSP 내에서 조건문 , 반복문을 처리해주는 라이브러리
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="varName" scope="session" value="varValue"/>
or
<c:set var="varName" scope="session">varValue</c:set>
varName : 지정할 변수의 이름
scope : 저장할 스코프 지정
value : 변수에 저장할 값
<c:set target="${SomeObject}" property="propertyName" value="value"/>
target : 변수가 들어갈 객체 지정
property : 실제 변수 값이 들어갈 멤버변수명 (setter 지정되어 있어야)
value : 멤버 변수에 들어갈 값
빈 객체에만 사용 가능
빈 객체는 getPropertyName,setPropertyName이 지정된 객체를 bean 객체라고 부른다.
<c:if test="${조건}">
</c:if>
조건이 성립이 되면 태그 내부의 코드가 실행이된다.
<c:choose>
<c:when test="${조건}">
</c:when>
...
<c:otherwise>
</c:otherwise>
</c:choose>
choose 태그 내부의 c:when 태그중 조건이 참인 태그를 실행한다.
없다면 c:otherwise가 실행된다!
<c:forEach var="변수" items="아이템" [begin="시작번호"] [end="끝번호"]>
${변수}
</c:forEach>
var : items에서 빼온 변수명
items : 배열 , List , Map , Iterator 등의 Collection 객체
begin (옵션) : 탐색을 시작할 items 인덱스 값
end (옵션) : 탐색을 끝낼 items에서 인덱스 값
Map 같은 경우 변수는 Map의 key값이 들어오게된다.
지정한 URL에 연결하여, 결과를 지정한 변수에 저장한다.
<c:import url="URL" charEncoding="utf-8" var="VAR" scope="session">
<c:param name="parameterName" value="parameterValue"/>
</c:import>
url : 결과를 불러올 url
charEncoding : 결과를 저장할때 사용할 인코딩
var : 결과를 저장할 변수명
c:param : <c:import> 가 url에 접속할때 파라미터를 지정한다
<c:redirect url="redirect URL">
<c:param name="parameterName" value="parameterValue"/>
</c:redirect>
response.sendRedirect로 자바 객체로 리다이렉트 하는것도 가능하지만 jstl에서는 태그로 기능을 지원한다.
JspWriter을 이용해서 데이터를 출력하는 태그
<c:out value="value" escapeXml="{true|false}" default="defaultValue"/>
value : JspWriter에 출력할 값
하지만 문자열이 아닌 java.io.Reader일 경우엔 해당 io객체에서 데이터를 읽어와 출력한다.
escapeXml : true일 경우, < > 문자열을 < , > 형식으로 변환한다. 기본값은 true이다.
default : value값이 없을 경우 default에 지정된 값이 출력이된다.
mysql -uroot -p
해당 명령어를 치면, mysql의 root로 접속한다는 의미. -p 옵션은 패스워드 옵션이다.
2. db생성
create database DBname
create database 명령어는 database를 만드는 명령어이다.
grant all privileges on db이름.*to 계정이름@'%' identified by '암호';
grant all privileges on db이름.*to 계정이름@'localhost' identified '암호';
flush privileges;
db이름뒤 * 는 , 모든 권한을 의미한다.
@'%'는 어떤 클라이언트에서도 접근 가능하다는 의미이고
@'localhost'는 해당 컴퓨터에서만 접근 가능하다는 의미이다.
grant all privileges on db이름.*to 계정이름@'%' identified '암호' 는
db이름에 해당하는 db의 모든 권한을 계정이름에게 부여하고, 이 계정 이름은 다른 어떠한 클라이언트에서도 접근 가능한 계정이라는 의미이며
grant all privileges on db이름.*to 계정이름@'localhost' identified '암호'; 는
db이름에 해당하는 db의 모든 권한을 계정이름의 계정에게 부여하고 이 계저은 localhost 컴퓨터에서만 접근 가능하다는 의미이다.
이후 flush privileges를 통해서 명령어를 적용시켜줘야한다.
mysql -h호스트명(로컬이라면 127.0.0.1으로 접속) -u(DB계정명) -p (DB이름)
ex)
mysql –h127.0.0.1 –uconnectuser –p connectdb [enter]
show databases;
use databaseName;
() : 필수는 아님
SELECT(DISTICNT) Column(ALIAS) FROM TABLE :
ex)
SELECT * FROM CONNECTUSER;
SELECT BABO,NAME FROM CONNECTUSER;
SELECT BABO 바보 , NAME 이름 FROM CONNECTUSER;
SELECT concat(BABO,'-',NAME) AS '바보-이름' from connectuser;
# concat 함수를 붙이면 babo-name 열이 붙어서 출력된다.
# 예를들어 테이블이 다음과 같다면
# babo user
# melong chil
# mung twoface
# chung gildong
# 바보-이름
# melong-chil
# mung-twoface
# chung-gildong
select distnct babo from connectuser;
# distnct는 열의 중복된 데이터를 제거하여 출력해준다.
# babo
# 10
# 10
# 20
# 20
# babo
# 10
# 20
select name, deptno from employee where deptno in (10,30);
# deptno가 10,30인 경우에만 출력을 하라
# Like 키워드 , % => 0이상의 문자열을 의미, _하나의 문자를 ㅢ미
이외 Select 함수의 함수들도 존재한다.
https://www.edwith.org/boostcourse-web/lecture/16721/
단일 함수 => 칼럼 하나당 하나의 칼럼이 나오게 된다.
그룹 함수 => 그룹의로 묶이기 때문에 여러개당 하나, 하나당 하나씩 나오는경우가 나올 수 있다.
group by column 키워드를 넣으면, 해당 컬럼을 그룹으로 나눈후, 테이블을 실행하게된다. 예를들어
# table
# babo salary
# 10 10
# 10 20
# 20 10
# 20 30
select babo,sum(salary) as salary from table group by babo
# babo salary
# 10 30
# 20 40
insert into tableName(field1,field2,field3...) Values(field1's value,field2's value,field3's value,...);
Upate tableName SET field=1,field2=2,field4=4 where 조건식
DELETE FROM 테이블명 from 조건식
create table tableName(
filed1 type [NULL|not null][default][AUTO_INCREMENT],
PRIMARY KEY(field1)
);
alter : 테이블을 수정하는 명령어
alter table 테이블명
add 필드명 타입 [NULL|NOT NULL][DEFAULT][AUTO_INCREMENT];
alter table tableName ad filedName type;
alter table 테이블명 drop 드랍할 필드명
alter table 테이블명
change 필드명 새필드명 타입 [NULL|NOT_NULL][DEFAULT][AUTO_INCREMENT];
foreign key 추가하는 방법
alter table [추가할테이블명] add constraint [제약조건명] foreign key(컬럼명) references [부모테이블명] (PK컬럼명) [ON DELETE CASCADE / ON UPDATE CASECADE];
참고 : https://allg.tistory.com/37
NPM 처럼 패키지를 다운받고 관리를 해줌.
pom : project obejct model
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>kr.or.connect</groupId>
<artifactId>examples</artifactId>
<packaging>jar</packaging>
<version>1.0-SNAPSHOT</version>
<name>mysample</name>
<url>http://maven.apache.org</url>
<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>3.8.1</version>
<scope>test</scope>
</dependency>
</dependencies>
</project>
project : xml 파일이 메이븐임을 알리는 루트 엘리먼트
modelVersion : pom model 명시
groupId : 프로젝트 그룹의 고유 아이디.
artifactId : 아티팩트 아이디 (무엇인지 모르겠다. 보통 프로젝트 이름을 적는다.)
packaging : 패키징할 파일 , jar war등이 있다.
version : 현재 프로젝트의 버전
name : 프로젝트 이름
url : 프로젝트 사이트의 url
dependencies : 프로젝트의 의존성 프로그램 ( jstl, spring)
scope : 라이브러리 사용 범위를 지정한다. test일경우, test 스코프에서만 라이브러리가 적용된다.
https://www.edwith.org/boostcourse-web/lecture/16724/
참고
Java Database Connectivity
mysql-connector-java DB 커넥터 필요함.
https://mvnrepository.com/artifact/mysql/mysql-connector-java/5.1.45
-db에 맞는 connector가 다운 받아져 있다는 것을 전제로 -
import java.sql.*; : 자바가 제공하는 sql 패키지 import
드라이버 로드 : 다운 받은 db connector 드라이버를 로드한다
Connection 객체 생성 : DB와 연결한다.
Statement 객체, 질의 수행 : Statement 객체를 통해서 쿼리를 보낸다.
ResultSet 객체 생성 : SQL 결과물을 ResultSet객체를 통해서 받는다.
연결한, 생성한 모든 객체를 닫는다.
JDBC는
DriverManager -> Connection -> Statement -> ResultSet 순으로 객체에서 객체를 통해서 인스턴스를 획득하는것이 가능하다.
닫는것도 거꾸로 순으로 닫아주어야한다.
사용 예
package jdbcexam.dao;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import dto.Role;
public class RoleDao {
private static String dbUrl = "jdbc:mysql://localhost:3306/connectdb";
private static String dbUser = "connectuser";
private static String dbPassword = "connect123!@#";
// 1. dbDriver를 로드한다 [Class.forName]
// 2. 로드한 DriverManager을 통해서 connection 객체를 얻는다.
// 3. connection 객체를 통해서 Statement객체를 얻고 쿼리를 날린다.
// 4. Statement 객체를 통해서 날린 쿼리는 ResultSet 객체를 통해서접근할 수 있다.
// 5. DTO 객체에 데이터를 넣은후, 리턴한다.
public Role getRole(Integer roleId) {
Role role = new Role();
//1.Driver에 로드한다.
Connection conn = null;
//Statement로 쿼리를 날린다.
PreparedStatement ps = null;
//ResultSetd으로 쿼리를 잡는다.
ResultSet rs = null;
try {
//Class for Name으로 드라이버를 객체를 로드한다.
Class.forName("com.mysql.jdbc.Driver");
//DriverManager 객체를 이용해서 db와 접속하고 Connection 객체를 얻어온다.
conn=DriverManager.getConnection(dbUrl,dbUser,dbPassword);
String sql = "SELECT role_id,description FROM role WHERE role_id = ?";
ps=conn.prepareStatement(sql); //prepareStatement , ? 인수로 활용할 수 있음.
ps.setInt(1, roleId); //setInt을 이용해서 ? 인수에 변수를 바인딩 하는것이 가능하다.
rs = ps.executeQuery(); //executeQuery를 통해서 쿼리를 실행시킨다.
//rs.next는 결과값이 있다면 true를 리턴한다. 그후 다음 레코드로 이동한다.
if(rs.next()) {
role.setRoleId(rs.getInt("roleId"));
role.setDescription(rs.getString("description"));
}
}catch(Exception e) {
e.printStackTrace();
}finally {
if(rs!=null) {
try {
rs.close();
}catch(SQLException e) {
e.printStackTrace();
}
}
if(ps!=null) {
try {
rs.close();
}catch(SQLException e) {
e.printStackTrace();
}
}
if(conn!=null) {
try {
rs.close();
}catch(SQLException e) {
e.printStackTrace();
}
}
}
return role;
}
}
JDBC Update시에는 , ps.executeUpdate() 메소드를 사용한다. executeQuery()가 아닌,
REST : Representational State Transfer
URI는 명사만 와야한다. ( 동사는 HTTP Method로 표현한다.)
DELETE /members/1
URI 경로는 소문자만 사용한다.
200 series ( 성공)
200 : 정상적으로 잘 수행
201 : 리소스를 성공적으로 생성함
400 series (클라이언트로 인한 오류)
400 : 클라이언트의 요청이 부적절
401 : 클라이언트가 인증되지 않은 상태에서 리소스 요청
403 : 없는 리소스를 클라이언트가 요청했을때
405 : 클라이언트가 리소스를 요청했지만, 사용 불가능한 Method일경우
500 series ( 서버로 인한 오류 )
500 : 서버에 문제가 발생한 경우
Jackson 라이브러리를 사용해서 JSON을 다룸
new ObjectMapper();
ObjectMapper을 이용해서 Bean객체를 JSON으로 변환하거나.
JSON을 객체로 변환하는것이 가능하다.
// 객체 to json
ObjectMapper obj=new ObjectMapper();
String json = obj.writeValueAsString(list);
//json to 객체
Person jsonPerson = obj.readValue(JSONSTRING,Person.class);
LocalDateTime을 , java.sql.Type에 맞는 형태로 맞추고 jdbc preparedStatement에 넣어서 보내면 된다.
JDBC는 기본적으로 Date 타입으로 리턴함.
localDateTime으로 받고 싶다면 받은 Date 타입을 localDateTime으로 변환해서 사용해야함.