Back-End/Spring 2019. 6. 2. 22:15
I ntellij 다운 로드
( https://www.jetbrains.com/idea/ )
cmd 창 열고 자바 버전 확인 (java -version)
JDK 버전 : 1.8 (9랑 10은 안됨)
-컨테이너란?-
인스턴스의 생명주기를 관리하고, 추가적인 기능을 제공하는 것
개발자가 작성한 코드의 처리과정을 위임받은 독립적인 존재라고 생각하면 된다.
즉, 적절한 설정이 되어있으면 프로그래머가 작성한 코드를 스스로 참조한 뒤 알아서 객체의 생성과
소멸을 컨트롤 해준다.
-의존성 주입 (DI - Dependency Injection)-
소프트웨어에선 기능이 추가될때마다 코드의 변경이 이루어지는데 이러한 변경을 없애고자
외부에서 객체간의 의존성을 주입받는 방식,
스프링에서의 의존성 주입은 객체의 실체를 외부 환경설정 (spring config xml, Bean 객체 등)에서 컨트롤 할 수 있는 것이다.
결과적으로 묘듈간의 결합도를 낮춰서 유연한 변경을 가능하도록 하게 하기 위해서 사용
-스프링 컨테이너의 종류-
1. 빈팩토리 (BeanFactory)
DI의 기본사항을 제공하는 가장 단순한 컨테이너
Bean (이하 빈) 팩토리는 빈을 생성하고 분배하는 책임을 지는 클래스
빈의 정의는 즉시 로딩하지만, 빈 자체가 필요하게 되기 전까지는 인스턴스화를 하지 않는다. (게으른 호출 lazy loading)
2. 어플리케이션 컨텍스트 (ApplicationContext)
빈 팩토리와 유사한 기능을 제공하지만 좀 더 많은 기능을 제공
1. 국제화가 지원되는 텍스트 메시지 관리
2. 이미지 같은 파일 자원을 로드 할 수 있는 포괄적 방법 제공
3. 리스너로 등록된 빈에게 이벤트 발생을 알려준다.
3. 빈 팩토리와 어플리케이션 컨텍스트의 차이점
빈 팩토리 : 처음으로 getBean( ) 호출된 시점에서야 해당 빈을 생성 (lazy loading)
애플리케이션 컨텍스트 : 컨텍스트 초기화 시점에 모든 싱글톤 빈을 미리 로드한 후 애플리케이션 기동 후에는
빈을 지연 없이 얻을 수 있음 (미리 빈을 생성해 놓아 빈이 필요할 때 즉시 사용할 수 있도록 보장)
출처
https://blog.naver.com/swc2672/221421532855
-loC (Inversion of Control, 제어의 역전)-
loC란 제어의 역전 즉 외부에서 제어를 한다는 것이다.
즉, loC는 바로 컨테이너이다.
객체의 생성에서부터 생명주기의 관리까지 모든 객체에 대한 제어권이 바뀌었다는 것 (loC 컨테이너)을 의미한다.
-loC와 DI의 관계-
스프링 프레임워크의 가장 큰 장점으로 loC 컨테이너 기능이 부각되어 있으나, loC 기능은 스프링 프레임워크가
탄생하기 훨씬 이전부터 사용되던 개념이었다.
그러므로 "loC" 기능을 스프링 프레임워크의 장점이라고 이야기 하는 것은 적합하지 않다"고 반론을 제기하면서
경량 컨테이너의 이름을 DI 라고 정하기로 한다.
Intellij 프로젝트 내부에서 자바 버전 확인
file - project structure - project sdk 확인
메이븐 프로젝트 실행 방법
1. 우측메뉴에서 아까 다운받은 메이븐 프로젝트를 add하고 petclinic -> Plugins -> spring-boot 를 더블클릭
(원래는 wro4j를 실행해야되는데 spring-boot 애플리케이션을 실행하면 자동적으로 포함되서 같이 실행되게 된다)
플러그인이 하는일
css파일과 자바스크립트 작성하는 일을 한다.
플러그인을 실행하지 않으면 뷰가 깨질수 있기때문에 꼭 실행해주어야 한다.
2. IDE에서 아래 경로로 메인 애플리케이션 실행
PetClinicApplication 내부
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*
* Copyright 2012-2019 the original author or authors.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* https://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
package org.springframework.samples.petclinic;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
/**
* PetClinic Spring Boot Application.
*
* @author Dave Syer
*
*/
@SpringBootApplication //스프링 부트 애플리케이션
public class PetClinicApplication {
public static void main(String[] args) { //스프링부트 기반의 프로젝트에서 메인이 되는 애플리케이션
SpringApplication.run(PetClinicApplication.class , args);
}
}
cs
위의 main에서 실행하면 서버쪽 코드는 다 적용이 된다.
하지만 프론트엔드쪽 코드를 수정하면 메이븐이나 wro4j로 직접 실행한 다음 다시 메인 애플리케이션(PetClinicApplication)을 실행해야
변경된 view가 적용된다.
-프로젝트의 구조-
Jmeter
• 부하 테스트 및 성능 측정을 위해서 개발된 100% 순수 자바 애플리케이션 • HTTP를 사용하여 사이트의 부하를 테스트 할 수 있으므로 정적이거나 동적인 자원 (파일, 서블릿, 자바객체들, 데이터베이스 등)에 대해서 테스트하는데 사용
Back-End/네트워크 2019. 6. 2. 13:49
-OSI 7계층-
[Open System Interconnection 7 Layer ]
모든 네트워크 통신에서 생기는 여러가지 충돌 문제를 완화하기 위하여 , 국제 표준 기구 (ISO)에서 표준화된 네트워크 구조를 제시한
기본 모델로써 통신망을 통한 상호접속에 필요한 통신절차를 정의하고 이 가운데 비슷한 기능을 제공하는 모듈을 동일 계층으로
분할하여 모두 7계층 으로 분할한 것임.
이는 통신기능을 7개의 수직계층으로 분할하여 각 계층마다 다른 계층과는 무관하게 자신의 독립적인 기능을 지원 하도록 구성함.
그 이유는 한 모듈에서 변경이 일어나도 다른 모듈에 미치는 영향을 최소화 하기 위해서이다.
-기본 계층 구조-
계층순서
Data 단위
계층 정보
7계층
Data
응용계층 (Application Layer)
컴퓨터 네트워크 프로그래밍에서 IP 컴퓨터 네트워크를 통하는 프로세스 간 통신 접속을 위해 설계
응용 계층 프로토콜은 기반이 되는 전송 계층 프로토콜을 사용하여 호스트 간 연결을 확립.
응용 프로세스 간의 정보 교환, 전자 메일, 파일 전송 등의 서비스를 제공한다.
- 역할 : 사용자 애플리케이션 서비스
- 사용자 지원 계층
- 프로토콜 : DNS, NFS, BOOTP, SNMP, FTP, SMTP, HTTP, Telnet
- 범위 : 애플리케이션 데이터
6계층
Data
표현 계층 (Presentation Layer)
응용 계층으로부터 받은 데이터를 하위 계층인 세션 계층에 보내기 전 통신에 적당한 형태로 변환
세션 계층에서 받은 데이터는 응용 계층에 맞게 변환하는 역할을 수행
코드 변환, 구문 검색, 데이터 압축 및 암호화 등의 기능 수행
- 역할 : 데이터 번역, 압축, 암호화
- 사용자 지원 계층
- 프로토콜 : JPG, MPEG, AFP, PAP
- 범위 : 애플리케이션 데이터 표현
5계층
Data
세션 계층 (Session Layer)
양 끝단의 응용 프로세스가 통신을 관리하기 위한 방법을 제공
통신 세션을 구성하며 포트 번호를 기반으로 연결
- 역할 : 세션 수립, 유지, 종료
- 사용자 지원 계층
- 프로토콜 : NetBIOS, SSH, 소켓, 네임드 파이프 (Named Piped), RPC
- 범위 : 로컬 또는 원격 장비 간의 세션
4계층
TCP 일 때 Segment
UDP 일 때 Datagram
전송 계층 (Transport Layer)
헤더에 송수신지 포트번호를 포함하여 올바르게 전달 될 수 있게 하는 계층
전체 메시지를 종단 대 종단 간 제어와 에러를 관리
패킷의 전송이 유효한지 확인, 전송에 실패된 패킷을 재전송 하는 등 신뢰성 있는 통신을 보장
주소 설정, 오류 제어, 흐름 제어, 다중화 수행
- 역할 : 프로세스 수준 주소 지정, 다중화 / 역다중화, 연결, 분할과 재조합, 흐름 제어
- 데이터 전송 단위 : TCP 일 때 Segment / UDP 일 때 Datagram
- 프로토콜 : TCP, UDP
- 장비 : 게이트 웨이
- 범위 : 소프트웨어 프로세스 간의 통신
3계층
패킷 (Packet)
네트워크 계층 (Network Layer)
상위 레벨 데이터를 패킷 안으로 캡슐화하여 데이터 종류에 상관없이 한 호스트에서 다른 호스트로
그 패킷들을 라우팅
- 역할 : 논리적 주소 지정, 라우팅, 데이터그램 캡슐화, 단편화와 재조합
- 네트워크 지원 계층
- 프로토콜 : IP, IPV6, IP NAT, IPsec, ICMP와 같은 라우팅 프로토콜
- 장비 : 라우터
- 범위 : 로컬 또는 원격 장비 간의 메세지
2계층
프레임 (Frame)
데이터링크 계층 (Data Link Layer)
인접한 통신 장치 간의 신뢰성 있는 정보 전송을 보장
전송 프로토콜 지식 및 관리를 제공하고 물리 계층, 흐름 제어 및 프레임 동기화에서 오류를 처리
MAC (Media Acces Control) 계층과 LLC (Logical Link Control) 계층의 두 하위 계층으로 구분
MAC 하위 계층 : 네트워크의 컴퓨터에서 데이터에 대한 액세스 권한과 전송 권한을 제어
LLC 계층 : 프레임 동기화, 흐름 제어 및 오류 검사를 제어
- 역할 : 논리적 연결 제어, 매체 접근 제어, 주소 지정, 에러 탐지와 처리
- 네트워크 지원 계층
- IEEE 802.2 LLC, 이더넷 관련 프로토콜 : 토큰링, PPP
- 장비 : 브릿지, 스위치
- 범위 : 로컬 장비 간에 전송된 하위 수준 데이터 메시지
1계층
비트 (Bit)
물리 계층 (Physical Layer)
비트 스트림 (전기적 충격, 빛 또는 무선 신호)을 전기적 및 기계적 수준에서
네트워크를 통해 전달
케이블, 카드 및 물리적 측면 정의를 포함하여 캐리어에서 데이터를 송수신하는 하드웨어
수단을 제공한다.
- 역할 : 인코딩, 신호 처리, 물리적 데이터를 전송, 하드웨어 명세
- 네트워크 지원 계층
- 데이터 전송 단위 : 비트 (Bit)
- 프로토콜 : RS-232, RS-449 등 케이블
- 장비 : 허브. 리피터
- 범위 : 로컬 장비 간에 전송된 전기 또는 광 신호
출처
https://blog.naver.com/madlife505/221309085610
Front-End/javascript 2019. 6. 1. 12:08
배열
배열 (array)이란 연관된 데이터를 모아서 통으로 관리하기 위해 사용하는 데이터 타입이다.
변수가 연관된 데이터 하나를 저장한다면 , 배열은 연관덴 데이터 여러개를 저장하는 것이다.
toUpperCase( ) - 자바 스크립트가 기본적으로 제공해주는 함수
매개값으로 소문자를 주면 대문자로 리턴해주는 함수
배열의 원소 추가
다음은 배열의 끝에 원소를 추가하는 방법이다.
push는 인자로 전달된 값을 배열(li)에 추가하는 명령이다.
배열 li의 값은 a, b, c, d, e, f 가 됐다.
var li = ['a', 'b', 'c', 'd', 'e'];
li.push('f'); //배열 뒤쪽에 f를 추가한다.
alert(li); //["a","b","c","d","e" ] 를 출력한다.
cs
복수의 원소를 배열에 추가하는 방법이다.
concat는 인자로 전달된 값을 추가하는 명령이다.
var li = ['a', 'b', 'c', 'd', 'e'];
li = li.concat(['f','g']); //배열 뒤쪽에 f,g를 추가한다.
alert(li); // [" a","b","c","d","e","f","g"] 를 출력한다.
cs
배열의 시작점에 원소를 추가하는 방법
unshift는 인자로 전달한 값을 배열의 첫번째 원소로 추가하고 배열의 기존 값들의 색인을 1씩 증가시킨다.
var li = ['a', 'b', 'c', 'd', 'e'];
li.unshift('z'); //배열 앞쪽에 'z' 를 추가한다.
alert(li); // ["z","a","b","c","d","e","f","g" ] 를 출력한다.
cs
아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
Front-End/javascript 2019. 6. 1. 11:08
함수
하나의 로직을 재실행 할 수 있도록 하는 것으로 코드의 재사용성을 높여준다.
함수의 장점은 재사용성, 유지보수의 편리성, 가독성이 있다.
함수의 형식
function 함수명 ( [인자....[,인자] ] ) { 코드 return 반환값 }
함수 예제
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html >
<html >
<head >
<title ></title >
</head >
<body >
<script type "text/javascript"
function numbering() { //1~19까지 출력 하는 함수를 4번 호출 , <br/>은 줄바꿈
var i = 0 ;
while (i< 20 ){
document .write(i+ "<br/>" );
i + = 1 ;
}
}
numbering();
numbering();
numbering();
numbering();
</script >
</body >
</html >
cs
함수의 다른 정의 방법
출력값은 동일함.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html >
<html >
<head >
<title ></title >
</head >
<body >
<script type "text/javascript"
numbering = function () { // function nu mbering()과 동일한 방법
var i = 0 ;
while (i< 20 ){
document .write(i+ "<br/>" );
i + = 1 ;
}
}
numbering();
numbering();
numbering();
numbering();
</script >
</body >
</html >
cs
함수의 다른 정의 방법
출력값은 동일함.
익명함수 (함수의 이름이 없고, 생성하자마자 호출함)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html >
<html >
<head >
<title ></title >
</head >
<body >
<script type "text/javascript"
(function () {
var i = 0 ;
while (i< 20 ){
document .write(i+ "<br/>" );
i + = 1 ;
}
})(); //함수의 이름이 없고 생성하자마자 ();로 호출함.. 이름이 없어서 익명함수라 한다. 일회성으로 호출할때 사용
numbering();
numbering();
numbering();
numbering();
</script >
</body >
</html >
cs
아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
Back-End/Spring 2019. 5. 31. 18:21
-회원관리 전체적인 구조 (오라클과 mybatis 연동 할 예정)-
MVC 패턴이지만 Controller과 Model 사이에 Service를 추가해서 트랜잭션 처리를 원할하게 할 예정
Controller
ㄴMemberController.java
Service
ㄴMemberService.java 인터페이스
ㄴMemberServicelmpl.java 구현클래스
Model
ㄴMemberDAO.java 인터페이스
ㄴMemberDAOlmpl.java 구현 클래스
ㄴMemberDTO.java 회원 정보 저장 클래스
ㄴmemberMapper.xml sql매퍼
View
ㄴmember_list.jsp (회원 목록 출력)
ㄴwrite.jsp (회원 등록)
ㄴview.jsp (회원 정보 상세보기 보기)
Oracle SQL로 회원정보를 관리하는 member 테이블 생성
create table member(
userid varchar2(50) not null primary key, //유저 아이디를 속성 생성, null값 방지, 다른 속성을 식별할 수 있는 기본키로 설정
passwd varchar2(50) not null, //유저 비밀번호 속성 생성, null값 방지
name varchar2(50) not null, //이름 속성 생성, null값 방지
email varchar2(50), //이메일 속성 생성
join_date date default sysdate //날짜와 시간을 저장하는 date 타입에 sysdate로 기본값(현재의 날짜가 들어가게끔)을 부여한 join_date 속성을 생성
//join_date는 따로 값을 지정해서 넣지 않아도 다른 값들을 다 집어넣었을 시에 자동으로 값을 집어넣은 날짜가 들어간다.
);
cs
member 테이블에 회원정보 삽입
insert into member (userid,passwd,name,email) values
( 'kim' , '1234' , '김철수' , 'kim@gmail.com' );
select * from member;
cs
Insert로 4개의 값만 집어넣었지만 join_date가 자동적으로 오늘 날짜가 들어가 있는것을 확인할 수 있었다.
수정작업을 다 끝낸 후에는 commit; 을 입력해야 저장이 된다.
-Mybatis란?-
1. 자바의 관계형 데이터 베이스 프로그래밍을 좀 더 쉽게 할 수 있게 도와주는 개발 프레임 워크
2. 자바에선 데이터베이스 프로그래밍을 하기 위해 JDBC (자바에서 제공하는 데이터베이스 API)를 제공
3. JDBC는 관계형 데이터 베이스를 사용하기 위해 다양한 API를 제공
4. 다양한 관계형 데이터베이스를 지원하기 위해 JDBC는 세부적인 작업이 가능하게 작업별로 각각의 메소드를
호출하게 된다. 하지만 이러한 사항들은 다수의 메소드를 호출하고 관련된 객체를 해제해야 하는 단점이 존재한다.
--> Mybatis는 JDBC보다 좀 더 편하게 사용하기 위해 개발되었음
-MyBatis의 특징-
1. 간단하다 : 간단한 퍼시스턴스 프레임워크.
퍼스스턴스 프레임워크란?
직접 JDBC API를 호출하지 않고도 데이터베이스에 있는 데이터를 다룰수 있는 것.
애플리케이션을 종료하고 다시 실행하더라도 이전에 저장한 데이터를 다시 불러올 수 있는 기술.
2. 생산성 : JDBC보다 62%정도 코드가 줄어들고, 설정이 간단하다.
3. 성능 : 구조적 강점 (데이터 접근 속도를 높여주는 Join 매핑)
여러가지 방식의 데이터를 가져오기 전략 (가져오기 미루기, SQL 줄이기 기법)
4. 작업의 분배 : 팀을 세분화하는 것을 도움
5. SQL문이 애플리케이션 소스 코드로부터 완전히 분리
6. 이식성 : 어떤 프로그래밍 언어로도 구현 가능 (자바, C# 등)
7. 오픈소스이며 무료이다.
-Mybatis의 구성-
1. 환경 설정 파일
ㄱ. 매핑 설정이 어디 있는지?
ㄴ. DB에 어떻게 접속할 건지?
ㄷ. 사용할 모델클래스들에 대한 설명?
2. 매핑 설정 파일
ㄱ. 사용할 SQL문들에 대한 정의
3. Session 빌드 및 사용
ㄱ. 실제 SQL문 실행
ㄴ. 설정 파일을 먹여서 Sql Session Factory Builder를 객체 생성
ㄷ. Sql Session Factory Builder을 이용해서 Sql Session을 Open
ㄹ. Sql Session을 통해서 원하는 Sql 구문의 id를 호출해서 사용함
ㅁ. Sql Session을 close
* 용어 정리 *
- SqlSessionFactoryBuilder 클래스
- SqlSessionFactoryFactory 클래스
(Dao는 Factory를 멤버로 유지하면서 필요할 때 SqlSession을 open해서 사용하고 다 쓰면 SqlSession을 close)
- SqlSession 클래스
-SqlSession 객체 구현-
MemberDAOImpl.java 중 일부(MemberDAO.java 인터페이스 구현 클래스)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@Repos itor y //현재 클래스가 서버가 올라올때 이 클래스를 자동으로 메모리로 올려주게 하는 어노테이션
//원래 클래스는 개발자가 관리하지만 @Repository 어노테이션을 쓰면 스프링에서 알아서 관리하게끔 만들어준다.
//이렇게 하면 new로 객체를 생성하지 않아도 inject 어노테이션을 사용해서 이 클래스를
//사용 할 수 있다.
//@controller어노테이션과 마찬가지이다.
//MemberDAO 인터페이스 클래스를 구현할 클래스.
public class MemberDAOImpl implements MemberDAO {
//로깅 처리(정보를 기록하기 위한 처리) 를 위한 객체 선언
//로그 저장소의 getLogger()메소드를 호출해서 MemberDAOImpl.class에 대한 로그를 Logger에 넣어준다.
private static final Logger logger =
LoggerFactory.getLogger(MemberDAOImpl.class );
//sqlSession 객체를 개발자가 직접 생성하지 않고 스프링이 만든 객체를 연결시켜 준다.
@Inject //이런 방식을 의존관계를 주입한다고 한다.
SqlSession sqlSession;
//만약 mybatis쪽에서 코드를 변경했다면 이쪽에서도 변경해야한다.
//root-context.xml 파일에서 sqlSessionTemplate을 이용해서 sqlsession 객체를 만들고,
//스프링이 실행될때 이미 이 코드가 실행되 sqlsession 객체가 생성되어서 의존주입이 되었기 때문에
//궂이 여기서 다시 만들필요가 없다.
cs
root-context.xml
<!-- SqlSession 객체 주입 -->
< bean id = "sqlSession" class = "org.mybatis.spring.SqlSessionTemplate"
destroy-method ="clearCache" > //자동으로 남아있는 캐시를 청소해준다.
<constructor-arg name ="sqlSessionFactory" ref ="sqlSessionFactory" ></constructor-arg >
</bean >
cs
-SqlSessionFactory 객체 구현-
memberMapper.xml
<?xml version ="1.0" encoding ="UTF-8" ? >
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<!-- 다른 mapper와 중복되지 않도록 네임스페이스 기재 -->
<mapper namespace ="member" >
<select id = "memberList"
resultType = "memberDto " > //밑에서 줄여놓은 경로를 적는다.
<!-- 자료형 틀리지 않도록 주의 -->
select * from member
order by name <!-- 이 쿼리는 세미콜론 찍지 않도록 주의 한다. -->
</select >
</mapper >
cs
mybatis-config.xml
<?xml version ="1.0" encoding ="UTF-8" ? >
<!DOCTYPE configuration
PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-config.dtd" >
<configuration >
<typeAliases >
<!--typeAliases는 경로를 쓸때 경로가 너무 길어 쓰기 힘들때 줄여서 쓸수있는 줄임말을 정하는 태그이다. -->
<!-- type는 MemberDTO의 원래 경로이고, alias는 경로의 줄임말을 무엇으로 할건지 설정하는 것-->
<!-- 즉 경로가 너무 길어 일일이 쓰기 힘드니 줄임말을 쓰는것 -->
<typeAlias type = "com.example.spring01.medel.dto.MemberDTO " //원래 경로
alias ="memberDto " / > //원래 경로를 수정 (줄인 경로)
</typeAliases >
</configuration >
cs
root-context.xml
<!-- SqlSessionFactory 객체 주입 -->
< bean id = "sqlSessionFactory" class = "org.mybatis.spring.SqlSessionFactoryBean" >
<property name ="dataSource" ref ="dataSource" / >
<property name ="configLocation"
value ="classpath:/mybatis-config.xml" ></property >
<property name ="mapperLocations"
value = "classpath:mappers/**/*Mapper.xml" > </property >
<!-- *는 하위 디렉터리에 있는 파일들을 모두 포함한다는 뜻 . 즉 mappers 하위 파일들을 모두 포함-->
</bean >
cs
회원정보 수정
비밀번호 입력시 테이블에 있는 비밀번호와 내가 입력한 비밀번호가 맞으면 수정, 틀리면 되돌아간다.
view.jsp 중 일부
//수정 버튼#은 id이고 btnUpedate태그 (Update 버튼)를 누르면 update.do로 넘어감
$(function(){
$("#btnUpdate").click(function(){
document.form1.action="${path}/member/update.do "; //update.do로 이동
document.form1.submit();
});
cs
MemberController.java 중 일부
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@RequestMapping("member/update.do " )
public String update(@ModelAttribute MemberDTO dto,Model model){
boolean result= memberService.checkPw ( //내가 입력한 비밀번호와 DB에 입력된 비밀번호를 비교해서 참, 거짓으로 리턴
dto.getUserid() , dto.getPasswd());
logger.info("비밀번호 확인:" + result);
if (result) { //비밀번호가 맞으면
memberService.updateMember(dto); //레코드 수정
return "redirect:/member/list.do" ; //목록으로 이동
}else { //비밀번호가 틀리면
MemberDTO dto2= memberService.viewMember(dto.getUserid());
dto.setJoin_date(dto2.getJoin_date()); //날짜가 지워지지 않도록
model.addAttribute("dto" ,dto);
model.addAttribute("message" , "비밀번호가 일치하지 않습니다." );
return "member/view" ; //수정 페이지로 되돌아감
}
}
cs
MemberDAOImpl.java 중 일부
@Override
public boolean checkPw (String userid, String passwd) {
boolean result= false ;
//mapper에 넘길 값이 2개 이상인 경우 map으로 묶어서 전달
Map< String ,String > map= new HashMap< > ();
map.put("userid" , userid);
map.put("passwd" , passwd);
int count= sqlSession.selectOne("member.checkPw" , map);
//리턴값이 1이면 true, 0이면 false
if (count = = 1 ) result = true ;
return result;
}
cs
memberMapper.xml 중 일부
<select id="checkPw" resultType="int">
select count(*) from member
where userid=#{userid} and passwd=#{passwd}
//멤버 테이블에서 아이디와 비밀번호가 일치하는 유저의 개수(int값)를 확인 해서 맞으면 1(명), 틀리면 0(명)이 넘어간다.
</select>
]
cs
MemberController.java 중 일부
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@RequestMapping("member/update.do " )
public String update(@ModelAttribute MemberDTO dto,Model model){
boolean result= memberService.checkPw(
dto.getUserid(), dto.getPasswd());
logger.info("비밀번호 확인:" + result);
if (result) { //비밀번호가 맞으면
memberService.updateMember(dto); //레코드 수정
return "redirect:/member/list.do" ; //목록으로 이동
}else { //비밀번호가 틀리면
MemberDTO dto2= memberService.viewMember(dto.getUserid());
dto.setJoin_date(dto2.getJoin_date()); //날짜가 지워지지 않도록
model.addAttribute("dto" ,dto);
model.addAttribute("message" , "비밀번호가 일치하지 않습니다." );
return "member/view" ; //수정 페이지로 되돌아감
}
}
cs
src / test/java/MemberDAOTest.java
MemberDAO.java에서 우클릭한 후 테스트 케이스 생성
테스트하고자 하는 클래스에서 우클릭 - New - Other - JUnit Test Case New JUnit 4 test 선택
테스트케이스 클래스 이름 : 테스트할 클래스 이름 + Test
Class under test에 테스트할 클래스 선택
Test Case - 테스트할 클래스
Test Suite - Test Case가 여러개 모인것
지금 테스트해볼 클래스는 MemberDAO이고, 이 DAO 클래스는 MemberDAOImpl를 호출하기 때문에 아래 사진처럼
Class under test를 설정해준다.
서비스와 DAO를 거쳐서 updateMember( )를 호출
위에서 아래로 내려감
controller - service - dao - mapper - view 순
Back-End/Problems 2019. 5. 31. 10:49
HTTP Status 500 – Internal Server Error Type Exception Report
Message Handler dispatch failed; nested exception is java.lang.AbstractMethodError: Method oracle/jdbc/driver/T4CPreparedStatement.isClosed()Z is abstract
Description The server encountered an unexpected condition that prevented it from fulfilling the request.
Exception
org.springframework.web.util.NestedServletException: Handler dispatch failed; nested exception is java.lang.AbstractMethodError: Method oracle/jdbc/driver/T4CPreparedStatement.isClosed()Z is abstract
org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:1053)
org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:942)
org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:1005)
org.springframework.web.servlet.FrameworkServlet.doGet(FrameworkServlet.java:897)
javax.servlet.http.HttpServlet.service(HttpServlet.java:635)
org.springframework.web.servlet.FrameworkServlet.service(FrameworkServlet.java:882)
javax.servlet.http.HttpServlet.service(HttpServlet.java:742)
org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:52)
org.springframework.web.filter.CharacterEncodingFilter.doFilterInternal(CharacterEncodingFilter.java:200)
org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107)
Root Cause
java.lang.AbstractMethodError: Method oracle/jdbc/driver/T4CPreparedStatement.isClosed()Z is abstract
oracle.jdbc.driver.T4CPreparedStatement.isClosed(T4CPreparedStatement.java)
net.sf.log4jdbc.sql.jdbcapi.StatementSpy.isClosed(StatementSpy.java:860)
org.apache.ibatis.executor.BaseExecutor.closeStatement(BaseExecutor.java:285)
org.apache.ibatis.executor.SimpleExecutor.doQuery(SimpleExecutor.java:65)
org.apache.ibatis.executor.BaseExecutor.queryFromDatabase(BaseExecutor.java:326)
org.apache.ibatis.executor.BaseExecutor.query(BaseExecutor.java:156)
org.apache.ibatis.executor.CachingExecutor.query(CachingExecutor.java:109)
org.apache.ibatis.executor.CachingExecutor.query(CachingExecutor.java:83)
org.apache.ibatis.session.defaults.DefaultSqlSession.selectList(DefaultSqlSession.java:148)
org.apache.ibatis.session.defaults.DefaultSqlSession.selectList(DefaultSqlSession.java:141)
org.apache.ibatis.session.defaults.DefaultSqlSession.selectList(DefaultSqlSession.java:136)
sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
java.lang.reflect.Method.invoke(Method.java:498)
org.mybatis.spring.SqlSessionTemplate$SqlSessionInterceptor.invoke(SqlSessionTemplate.java:433)
com.sun.proxy.$Proxy8.selectList(Unknown Source)
org.mybatis.spring.SqlSessionTemplate.selectList(SqlSessionTemplate.java:222)
com.example.spring01.model.dao.MemberDAOImpl.memberList(MemberDAOImpl.java:29)
com.example.spring01.service.MemberServiceImpl.memberList(MemberServiceImpl.java:20)
com.example.spring01.controller.MemberController.memberList(MemberController.java:28)
sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
java.lang.reflect.Method.invoke(Method.java:498)
org.springframework.web.method.support.InvocableHandlerMethod.doInvoke(InvocableHandlerMethod.java:189)
org.springframework.web.method.support.InvocableHandlerMethod.invokeForRequest(InvocableHandlerMethod.java:138)
org.springframework.web.servlet.mvc.method.annotation.ServletInvocableHandlerMethod.invokeAndHandle(ServletInvocableHandlerMethod.java:102)
org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.invokeHandlerMethod(RequestMappingHandlerAdapter.java:895)
org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.handleInternal(RequestMappingHandlerAdapter.java:800)
org.springframework.web.servlet.mvc.method.AbstractHandlerMethodAdapter.handle(AbstractHandlerMethodAdapter.java:87)
org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:1038)
org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:942)
org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:1005)
org.springframework.web.servlet.FrameworkServlet.doGet(FrameworkServlet.java:897)
javax.servlet.http.HttpServlet.service(HttpServlet.java:635)
org.springframework.web.servlet.FrameworkServlet.service(FrameworkServlet.java:882)
javax.servlet.http.HttpServlet.service(HttpServlet.java:742)
org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:52)
org.springframework.web.filter.CharacterEncodingFilter.doFilterInternal(CharacterEncodingFilter.java:200)
org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107)
Note The full stack trace of the root cause is available in the server logs.
Apache Tomcat/8.5.41
5월 31, 2019 10:46:54 오전 org.apache.catalina.core.StandardWrapperValve invoke
심각: Servlet.service() for servlet [appServlet] in context with path [/spring01] threw exception [Handler dispatch failed; nested exception is java.lang.AbstractMethodError: Method oracle/jdbc/driver/T4CPreparedStatement.isClosed()Z is abstract] with root cause
java.lang.AbstractMethodError: Method oracle/jdbc/driver/T4CPreparedStatement.isClosed()Z is abstract
에러 해결
메이븐 프로젝트는 pom.xml에서 라이브러리를 기본적으로 다운받아 사용하는데
JRE 라이브러리 안에 JDBC 2개가 중복해서 존재하였고, 이 점때문에 서로 충돌해서 안되었던 것이었다.
JRE 라이브러리 안에 JDBC 2개를 삭제하였더니 정상적으로 출력되었음
Front-End/반응형 웹 2019. 5. 30. 22:19
-미디어 쿼리-
화면의 크기나 환경에 따라 웹 사이트를 변경하는 기술
-미디어 쿼리의 기본 문법-
@media [only 또는 not] [미디어 유형] [and 또는, 콤마] (조건문) {실행문}
미디어 쿼리 구문은 대, 소문자를 구별하지 않습니다.
@media 미디어 쿼리 문법의 시작을 알리는 부분입니다. [only 또는 not] only 키워드는 미디어 쿼리를 지원하는 브라우저에서만 미디어 쿼리를 해석하게 해주는 키워드 입니다. not 키워드는 not 다음에 따라오는 조건을 부정하는 키워드 입니다. 예를 들어 'not tv' 일 경우 tv를 제외한 모든 미디어 유형에만 적용합니다.
-미디어 유형-
미디어 쿼리는 미디어별로 적용할 CSS를 따로 작성하는 것이므로 @media 속성 다음에 미디어 유형을 알려줘야 합니다.
미디어 유형은 생량이 가능하며 생략 시에는 all 키워드처럼 작동합니다.
기기명 설명
all 모든 장치
print 인쇄 장치
screen 컴퓨터 화면 장치 또는 스마트 기기의 화면
tv 영상과 음성이 동시에 출력되는 장치
projection 프로젝터 장치
handheld 손에 들고 다니는 소형 장치
speech 음성 출력 장치
aural 음성 합성 장치 (화면을 읽어 소리로 출력해 주는 장치)
embossed 점자 인쇄 장치 (화면을 읽어 종이에 점자를 찍어내는 장치)
tty 디스플레이 기능이 제한된 장치
braille 점자 표시 장치
[and 또는,콤마] and는 앞뒤 조건이 모두 사실일 때 뒤에 따라오는 것을 해석하라는 의미입니다. ,콤마는 앞뒤 조건 중 하나만 사실이더라도 뒤에 따라오는 것을 해석하라는 의미입니다. and 또는 ,콤마 선언 역시 생략할 수 있습니다. @media A and B {실행문} @media A, B {실행문}
(조건문)
(조건문)은 조건문이 사실일 때 뒤에 따라오는 것을 해석하라는 의미입니다.
(조건문)은 and나 콤마 기호를 이용하여 두 가지 이상 작성할 수 있으며 생략할 수 있습니다.
(조건문)에 들어올 수 있는 조건문은 다음 표를 참고 하세요.
@media (min-width:320px) {실행문} -> 가로 너비가 320px 이상일 때 실행문을 실행합니다.
@media (min-width:320px) and (max-width:768px) {실행문} => 가로 너비가 320px 이상이고 768px 이하 일 때 실행문을 실행합니다.
조건문 설명 조건값 min/max 사용 여부
width 웹 페이지의 가로 너비값 width 속성에서 사용할 수 있는 모든 속성값 사용함
height 웹 페이지의 세로 높잇값
device-width 기기의 가로 너빗값
device-height 기기의 세로 높잇값
orientation 기기의 화면 방향 portrait (세로) landscape (가로) 사용 안 함
aspect-ratio 화면 비율 브라우저 화면 비율 (1), 브라우저 종횡비 (16/9), 브라우저 해상도 (1280/720) 사용함
device-aspect-ratio 단말기의 화면 비율 기기 화면 비율 (1), 기기 종횡비 (16/9), 기기 해상도 (640/320)
color 기기의 비트 수 8 (bit 단위)
color-index 기기의 색상 수 128 (색상 수 단위)
monochrome 기기가 흑백일 때 픽셀당 비트 수 1 (bit 단위)
resolution 기기의 해상력 300dpi / dpcm
scan TV의 스캔 방식 progressive / interlace 사용 안 함
grid 기기의 그리드 / 비트맵 0 (비트맵 방식) / 1 (그리드 방식)
{실행문} {실행문} 은 앞의 조건들이 모두 사실일 때 실행되는 실행문 입니다. {실행문} 에는 일반적으로 사용하는 CSS 코드를 작성합니다. @media {실행문}
미디어 쿼리 적용 - 링크 방식 -
미디어 쿼리를 적용하려면 CSS 파일 내에 미디어 쿼리를
작성해서 <link> </link> 태그로 CSS 파일을 연결하여 적용해야 합니다.
<link rel = "stylesheet" href = "mediaqueries.css">
이 방식은 HTML 파일과 CSS 파일을 별도로 관리하므로 불러오는 속도도 빠르고 관리 면에서도 효율적 입니다.
미디어 쿼리를 적용할 수 있는 기타 방식들
링크 방식 2
<link rel = "stylesheet" media = "all and (min-width:320px)" href = "style320px.css">
링크 방식 2sms <link> , </link> 태그에 직접 미디어의 종류와 조건문 등을 작성하고 적용할 CSS 파일을 연결하는 방식인데,
이 방식은 되도록 사용하지 않는 것이 좋다.
조건이 여러 개로 나눠지게 되면 그 만큼 CSS 파일의 개수도 늘어나게 되어 CSS 파일을 여러 번 불러와야 하므로 웹 사이트의 속도도 느려지기
때문입니다.
문서 내에 작성하는 방식
<head> <style> @media all and (min-width:320px) {실행문} </style> </head> <body> </body>
문서 내에 작성하는 방식은 HTML 문서 내에 미디어 쿼리를 작성하는 방식인데, 이 방식은 피하는게 좋다.
그 이유는 CSS 코드를 문서 내에 작성하게 될 경우 문서의 용량이 커지고, 이렇게 커진 용량 때문에 속도가 느려져 웹 사이트를 방문하는
사용자가 웹 사이트를 빨리 볼 수 없기 때문입니다.
-미디어 쿼리 사용시 주의 사항-
띄어 쓰기 주의하기
예를 들어 논리 연산자 중 하나인 and 구문을 사용할 때 and 구문 뒤에는 항상 공백을 한 칸 띄워줘야 합니다.
만약 공백을 한 칸 띄어주지 않고 미디어 쿼리를 작성하면 정상적으로 작동하지 않습니다.
접두사인 min/max 사용 시 작성 순서 주의하기
미디어 쿼리를 사용할 때는 min/max 와 크기 조건문 (width) 을 사용해서 해상도별로 웹사이트를 다양하게 보여줄 수 있습니다.
그런데 min을 사용할 때는 반드시 크기가 작은 순서대로 작성해야 하고, max를 사용할 때는 반드시 크기가 큰 순서대로
작성해야 합니다.
min을 사용할 때 크기 (width)가 작은 순서대로 작성해야 하는 이유는 min은 최소 또는 그 이상이라는 뜻 으로,
점차 커지는 것을 의미하기 때문에 반드시 작은 순서부터 큰 순서로 작성해야 합니다.
반대로 max는 최대 또는 그 이하라는 뜻 으로, 점차 작아지는 것을 의미하기 때문에 max를 사용할 때는 반드시 큰 순서부터 작은
순서로 작성해야 합니다.
@media all and (min-width:320px) {실행문} @media all and (min-width:768px) {실행문} @media all and (min-width:1024px) {실행문}
미디어 쿼리로 브라우저 크기 감지 시 주의하기
미디어 쿼리를 이용해서 크기를 감지할 때는 보이는 영역을 뜻하는 뷰포트 크기를 기준으로 감지한다.
Inline 속성 Inline 속성이란, 쉽게 말해서 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치하려는 성향 입니다. 대표적인 Inline 속성을 가진 태그로는 <a> 태그가 있습니다. 상, 하단 외부 여백 속성을 정의해도 적용되지 않습니다. 인라인 요소의 상, 하 여백은 magin이 아니라 line-height 속성에 의해 발생합니다. 아래 예문을 보면 <a> 태그들이 줄을 넘기지 않고 한 줄에 연속해서 붙는 결과를 볼 수 있습니다. Block 속성 Block 속성은 Inline 과 달리 한 줄에 나열되지 않고 그 자체로 한 줄을 완전히 차지합니다. 대표적인 블록 요소로 <p> 태그가 있습니다. Inline와 Block의 합친 속성 inline-block 라는 속성은 인라인과 같이 한줄에 표현하면서도 margin, width, height 속성을 정의하면 표현해 줍니다.
-미디어 쿼리 예제-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE HTML >
<html lang ="ko"
<head >
<meta charset ="UTF-8"
<meta name ="viewport" content ="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"
<!-- meta 태그를 이용해서 화면의크기나 배율을 조절 -->
<title >Document</title >
<style >
* {margin : 0 ; padding : 0 ;
#wrap {
width : 90% ; //아이디가 wrap인 <div> 태그에 가로 너빗값을 90%로 설정하고, 마진값과 선값도 설정한다.
margin : 0 auto ;
border : 4px solid #000 ;
#wrap div {
display : inline-block ;
height : 100px ;
#wrap div :first-child
background : #f45750 ; //자식 태그들인 <div> 태그에는 공통적으로 display 속성의 값을 inline-block으로 설정하고,
//높잇값을 100px로 설정합니다. 마지막으로 각각의 배경색을 설정합니다.
#wrap div :nth-child(2)
background : #40b0f9 ;
#wrap div :nth-child(3)
background : #00d2a5 ;
#wrap div :nth-child(4)
background : #ff884d ;
#wrap div :last-child
background : #464646 ;
@media all and ( min-width : 320px ) {
#wrap div {
width : 100% ; //브라우저의 크기가 320px 이상일 때 모든 박스의 가로 너빗값을 100%으로 설정합니다.
@media all and (min-width : 768px )
#wrap div {
width : 50% ; // 브라우저의 크기가 768px 이상일 때 첫 번째 박스부터 네 번째 박스까지는 너빗값을
// 50%로 설정합니다.
#wrap div :last-child
width : 100% ;
//마지막 박스만 너빗값을 100%로 설정합니다.
@media all and (min-width : 1024px )
#wrap div { //브라우저의 크기가 1024px 이상일 때는 첫 번째 박스부터 네 번째 박스까 지는
width : 20% ; //너빗값을 20%로 설정합니다.
#wrap div :last-child
width : 20% ; //마지막 박스의 너빗값을 20%로 설정합니다.
</style >
</head >
<body >
<div id ="wrap"
<div ></div ><div ></div ><div ></div ><div ></div ><div ></div >
</div >
</body >
</html >
cs
-뷰포트-
화면에서 실제 내용이 표시되는 영역으로, 데스크톱은 사용자가 설정한 해상도가 뷰포트 영역이 되고,
스마트 기기는 기본으로 설정되어 있는 값이 뷰포트 영역이 됩니다.
그런데 스마트 기기는 기본으로 설정되어 있는 뷰포트 영역으로 인해 미디어 쿼리가 정상적으로 작동하지 않는
문제가 발생할 수 있습니다.
이러한 문제를 방지하기 위해 뷰포트 메타 태그를 이용해서 화면의 크기나 배율을 조절해야 합니다.
반응형 웹을 제작할 때 사용하는 뷰포트의 기본 메타 태그
<meta name = "viewport" content = "width" = device - width, initial - scale = 1, minimum - scale =1, maximum - scale = 1, user - scalable = no ">
-뷰포트 속성-
속성명 속성값 속성 설명
width device - width, 양수 뷰포트의 너비를 지정합니다.
height device - height, 양수 뷰포트의 높이를 지정합니다.
initial - scale 양수 뷰포트의 초기 배율을 지정합니다. 기본값은 1입니다. 1보다 작은 값을 사용하면 축소된 페이지를 표시하고, 1보다 큰 값을 사용하면 확대된 페이지를 표시
user - scalable yes, no 뷰포트의 확대/축소 여부를 지정합니다. 기본값은 yes입니다. 반대로 no로 설정하면 사용자가 페이지를 확대 할 수 없습니다.
mininum - scale 양수 뷰포트의 최소 축소 비율을 지정합니다. 기본값은 0.25 입니다.
maximum - scale 양수 뷰포트의 최대 확대 비율을 지정합니다. 기본값은 5.0 입니다.
스마트 기기의 뷰포트 영역 확인하기
http://dnsdk300.dothome.co.kr/viewport
아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
개인 공부 2019. 5. 30. 18:17
HTTP ( H yper T ext T ransfer P rotocol, 문화어 : 초본문전송규약, 하이퍼본문전송규약)는 WWW 상에서 정보를 주고받을 수 있는 프로토콜 이다.
Stateless 란 http 와 같이 client의 이전 상태를 기록하지 않는 접속이란 의미입니다.
그에 비해 Stateful 은 client의 이전 상태를 기록하고 있는 것이죠.
Stateless는 웹서버가 사용자의 작업을 기억하고 있지 않다는 의미이고
Stateful은 사용자의 상태를 서버가 기억하고 있다가 유용한 정보로써 활용한다는 것입니다.
