우선순위

• and가 or보다 우선 순위가 높음. or에 우선순위를 주려면 or 부분을 ()로 감싸야 함.

• 홀수 : x % 2 = 1

• 짝수 : y % 2 = 0

• 어떤 값이 들어와도 특정수 넘기면 안될 때 ex) x % 5 = 0 ~ 4 사이의 값만 반환.

거듭제곱

const num = 2**3; console.log(num); // 8 출력

우선 순위

/ * > + -

덧셈과 뺄셈을 우선시 해야 할 경우엔 괄호()를 사용.

연산자 줄여 쓰기

let num = 10;
num = num + 5; 이를 아래 처럼 줄여 쓸 수 있음.
num += 5;
// -=, *=, /=, %= 도 마찬가지. 

증가 연산자, 감소 연산자

ex 1)
let num = 10;
num++; // 1만큼 증가.
num--; // 1만큼 감소.

ex 2)
let num = 10;
let result = num++; // 10 출력. 증가시키기전 값을 result 변수에 넣기 때문.

let result = ++num; // 11 출력. 증가된 값이 result에 저장됨.

동등연산자(==, ===)

1과 "1"을 같은 것으로 보고 true를 반환함. 타입까지 비교하기 위해서는 === 으로 작성함.

const a = 1;
const b = "1";
consol.log(a === b);
false를 반환함. ===를 일치 연산자라고 함.

alert() 알려줌. 메세지를 보여줌.

ex 1)
alert("안녕하세요");

• prompt() 입력 받음(사용자에게 입력값을 받을 때 사용).

  ex 1)
  const name = prompt("이름을 입력하세요");
  alert("환영합니다" + name + "님");

  

ex 2) 디폴트 값 받기 - "2020-10-" 부분이 디폴트 값이 됨.
const name = prompt("이름을 입력하세요", "2020-10-");
alert("환영합니다" + name + "님");

취소 버튼을 누를 경우에는 null 값이 반환됨.

• confirm() 확인 받음.

ex 1)
const test = confirm("당신은 성인 입니까?");
console.log(test)

취소 버튼을 클릭하면 false 반환.

주로 "결제 하시겠습니까?", "정말 삭제하시겠습니까?" 등 확인할 때 사용함.

대화형 상자 단점.

1. 스크립트 일시 정지
2. 스타일링 불가능 - 스타일링 하고 싶을 경우 모달을 이용함.

• const : 변하지 않는 값(상수) - 가급적 대문자로 작성.
• let : 변할 수 있는 값 - 변수 이름이 동일하면 에러 뜸.

<형변환>

1. 문자열 변환

• String() : 문자열로 변환

ex)
const test = 123;
String(test);
console.log(test)

-- 123 출력

2. 숫자로 변환

• Number() : 숫자로 변환

ex 1)
const test = "123";
Number(test);
console.log(test)

-- 123 출력

ex 2)
Number(true); -- 1 출력
Number(false); -- 0 출력

ex 3)
Number("가나다"); -- NaN 출력
Number(null); -- 0 출력
Number(Undefined) -- NaN 출력
Number(0) -- false 출력
Number('0') -- true 출력
Number('') -- false 출력
Number(' ') -- true 출력

3. Boolean 변환

• Boolean()

false가 되는 경우

1) 숫자 0 2) 빈문자열 '' 3) null 4) underfined 5) NaN

ex 3)

Boolean(0)
Boolean('')
Boolean(null)
Boolean(underfined)
Boolean(NaN)

-- 모두 false 출력

위 외를 제외한 나머지는 true가 됨.

1. http://www.mybatis.org에 접속한 후 Product 탭을 클릭함.

2. Mybatis 3 옆에 있는 download 링크를 클릭함.

3. mybatis-3.4.6.zip 파일을 클릭해 다운로드함.

4. 다운로드한 압축 파일의 압축을 해제함.

5. mybatis-3.4.6.jar를 복사해 새로 만든 프로젝트의 lib 폴더에 붙여 넣음.

마찬가지로 애플리케이션에서도 사용자의 요구 사항에 따라 클래스 기능을 변경하거나 다른 클래스 기능으로 대체해야 하는 경우가 자주 생김. 이러한 사황에서 좀 더 수월하게 대체할 수 있게 도입된 기능이 바로 의존성 주입(DI)과 제어 역행(IoC)임.

의존성 주입하기

지금까지 우리가 프로그래밍을 할 때는 어떤 한 클래스가 다른 클래스의 기능을 사용하려면 당연히 개발자가 직접 코드에서 사용할 클래스의 생성자를 호출해서 사용했음. 즉, 사용할 클래스와 사용될 클래스의 관계는 개발자에 의해 직접 코드에서 부여됨.

의존성 주입이란 이런 연관 관계를 개발자가 직접 코딩을 통해 컴포넌트(클래스)에 부여하는 것이 아니라 컨테이너가 연관 관계를 직접 규정하는 것. 그러면 코드에서 직접적인 연관 관계가 발생하지 않으므로 각 클래스들의 변경이 자유로워짐(loosely coupled, 약한 결합).

Note 강합 결합과 약한 결합 현실에서 우리는 자동차의 에어컨이 고장 나면 당연히 에어컨만 수리하거나 교체하면 됨. 하지만 만약 에어컨 기능이 자동차 엔진과 관련 있게 설계되었다면 어떨까. 에어컨은 작은 문제라도 생기면 자동차 엔진까지 손을 봐야 하는 상황이 됨. 즉 자동차의 부품은 같은 기능끼리는 강하게 결합하고, 큰 관련이 없는 기능과는 서로 영향을 주지 않게 만들어야 좋은 자동차라고 할 수 있음. 프로그램도 마찬가지임. 프로그램은 각각의 독립적인 기능들로 구성되어 있음. 쇼핑몰의 경우 크게 상품 관리, 주문 관리, 회원 관리, 게시판 관리 등으로 구성됨. 각 기능들은 또 세부 기능을 하는 여러 클래스들로 이루어 짐. 그런데 부품 기능을 하는 클래스에 변경 사항이 발생했을 때 그 클래스의 기능과 관련이 없는 다른 클래스까지 손봐야 한다면 자동차의 예처럼 여러 가지 문제가 발생할 수 있음. 따라서 서로 관련이 있는 기능들은 강하게 결합(tightly coupled)하고, 관련이 없는 기능들은 약하게 결합(loosely coupled)해야 좋은 프로그램인. 그 반대가 되면 안됨.

전체 애플리케이션은 각각의 기능을 담당하는 컴포넌트들로 이뤄짐. 그리고 각 컴포넌트들은 다시 세부 기능을 수행하는 클래스들로 이뤄짐.

다른 클래스의 기능을 사용하려면 어떻게 해야 할까. 소스 코드에서 다른 클래스의 생성자를 호출해서 사용할 경우 기능을 구현하는 과정에서 다른 변경 사항이 발생하면 빠르게 대처하기가 어려움. 또다시 관련이 있는 모든 클래스들의 소스 코드를 수정해 줘야 하기 때문임.

따라서 스프링 프레임워크에서는 각 클래스들의 연관 관계를 클래스들 사이에서 맺는 것이 아니라 스프링 프레임워크에서 설정을 통해 맺어줌으로써 클래스들이 연관 관계를 갖지 않게 구현했음.

의존성 주입을 사용하기 전 게시판 기능

• BoardController.java

각 클래스들의 기능을 보면 다른 클래스의 기능을 사용하기 위해 소스 코드에서 직접 다른 클래스 객체를 생성한 후 메서드를 호출하여 연동함.

@WebServlet("/board/*")
public class BoardController08 extends HttpServlet {

    BoardService boardService;
    ArticleVO articleVO;

    public void init(ServletConfig config) throws ServletException {

        //BoardService 객체를 코드에서 직접 생성해서 사용함.
        boardService = new BoardService();
        articleVO = new ArticleVO();
    }
    ...

• BoardService.java

public class BoardService {
    BoardDAO boardDAO;

    public BoardService() {

        // BoardDAO 객체를 코드에서 직접 생성해 데이터베이스와 연동함.
        boardDAO = new BoardDAO();
    }
    ...

• BoardDAO.java

public class BoardDAO {
    private DataSource dataFactory;
    Connection conn;
    PreparedStatement pstmt;

    public BoardDAO() {
        try {
            Context ctx = new InitialContext();
            Context envContext = (Context) ctx.lookup("java:/comp/env");
            dataFactory = (DataSource) envContext.lookup("jdbc/oracle");
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
    ...

현재 BoardDAO 클래스에서는 오라클과 연동해 게시판 기능을 구현하고 있음. 그런데 만약 중간에 오라클에서 Mysql로 데이터베이스를 변경한다고 가정해 보자. 지금과 같은 경우는 BoardDAO 클래스의 기능을 일일이 변경해 줘야 함. 그뿐만 아니라 경우에 따라서는 BoardDAO 클래스를 사용하는 BoardService 클래스의 기능도 변경해야 할 수도 있음.

이제까지는 클래스를 사용하려면 자바에서 배웠듯이 자바코드에서 클래스 생성자를 호출해 객체를 생성했음. 하지만 지금처럼 프로젝트 규모가 점점 커지는 상황에서 이렇게 자바 코드에서 직접 객체를 생성해서 사용하는 것은 복잡한 문제를 일으킬 수도 있음.

다른 클래스의 변경 사항이 연속적으로 다른 부분에 영향을 미친다면 이 방법(자바 코드에서 직접 객체를 생성해 사용하는 것)은 좋은 방법이 아님.

인터페이스를 적용한 게시판 기능

그럼 이번에는 앞에서 다룬 게시판 기능 구현 시의 문제점을 인터페이스를 사용해서 해결해 보겠음.

다음은 게시판 기능과 관련된 클래스들의 계층 구조를 나타낸 것임. 각각의 클래스가 인터페이스를 구현하는 구조를 이룸.

• 오라클과 연동하는 게시판 클래스 계층 구조

[BoardController] <--- [BoardControllerImpl]

[BoardService] <--- [BoardServiceImpl]

[BoardDAO] <--- [BoardOracleDAOImpl]

다음은 각 클래스들이 상위 인터페이스를 구현한 후 오라클 데이터베이스와 연동하는 기능을 구현하는 소스임.

• BoardServiceImpl.java

public class BoardServiceImpl implements BoardService {
    BoardDAO boardDAO;

    public BoardService(){
        // 인터페이스를 이용해 하위 클래스 객체를 생성한 후 오라클 데이터베이스와 연동함.
        boardDAO = new BoardOracleDAOImpl();
    }
}
...

• BoardOracleDAOImpl.java

public class BoardOracleDAOImpl implements BoardDAO {
    private DataSource dataFactory;
    Connection conn;
    PreparedStatement pstmt;

    public BoardDAO() {
        try {
            Context ctx = new InitialContext();
            Context envContext = (Context)ctx.lookup("java:/comp/env");
            dataFactory = (DataSource)envContext.lookup("jdbc/oracle");
        }catch(Exception e) {
            e.printStackTrace();
        }
    }
}
...

이번에는 개발 중에 MySQL과 연동하는 기능이 생겼다가 가정함. 지금처럼 인터페이스로 구현한 경우에는 기존의 BoardOracleDAOImpl 클래스를 변경할 필요가 없음.

이미지처럼 BoardDAO 인터페이스를 구현한 또 다른 BoardMySqlDAOImpl 클래스를 구현한 후 다음 코드처럼 BoardServiceImpl에서 사용하면 됨.

• BoardServiceImpl.java

public class BoardServiceImpl implements BoardService {
    BoardDAO boardDAO;

    public BoardService() {
    // boardDAO = new BoardOracleDAOImpl();
    // 인터페이스를 이용해 하위 클래스 객체를 생성한 후 Mysql 데이터베이스와 연동함.
    boardDAO = new BoardMySqlDAOImpl();
    }
}

인터페이스를 이용해 각 클래스를 구현한 후 각 클래스의 객체를 사용할 때는 인터페이스 타입으로 선언한 참조 변수로 접근해서 사용하면 됨. 그러면 완전하지는 않아도 앞의 경우보다 훨씬 클래스들 간 의존관계가 약해짐. 그러나 인터페이스를 사용해도 BoardServiceImpl 클래스 자체는 여전히 소스 코드에서 직접 수정해야 함.

의존성 주입을 적용한 게시판 기능

앞의 게시판 예제를 통해 클래스들의 의존 관계가 강하게 결합되어 있으면 여러 가지 문제가 발생 할 수 있음을 알았음. 이번에는 스프링의 의존성 주입 기능을 이용해 각 클래스들 사이의 의존 관계를 완전히 분리하는 작업을 실습해 보겠음.

• 의존성 주입을 적용했을 때 얻을 수 있는 장점들

1. 클래스들 간의 의존 관계를 최소화하여 코드를 단순화할 수 있음.

2. 애플리케이션을 더 쉽게 유지 및 관리할 수 있음.

3. 기존 구현 방법은 개발자가 직접 코드 안에서 객체의 생성과 소멸을 제어했음. 하지만 의존성 주입은 객체의 생성, 소멸과 객체 간의 의존 관계를 컨테이너가 제어함.

스프링에서 의존성 주입(이하 di)을 구현하려면 xml이나 애너테이션을 이용해 객체를 주입하여 객체들의 의존관계를 맺어주면 됨. 즉, di를 사용하여 각 객체들 간의 의존 관계를 최소화함으로써 코드를 단순화하고 유지보수를 쉽게 할 수 있음.

di는 객체의 생성, 소멸, 의존 관계를 개발자가 직접 설정하는 것이 아니라 xml이나 애너테이션 설정을 통해 경량 컨테이너에 해당하는 스프링 프레임워크가 제어함. 따라서 기존 코드에서는 개발자가 직접 객체를 제어했지만 스프링 프레임워크에서는 객체의 제어를 스프링이 직접 담당하므로 제어의 역전(이하 ioc)이라고 하는 것임.

ioc의 종류도 여러 가지이며, 일반적으로 스프링에서는 di로 ioc의 기능을 구현하므로 ioc보다는 di라는 용어를 더 많이 사용함.

다음 코드는 di를 적용해 게시판 기능을 구현한 것.

• BoardServiceImpl.java

public class BoardServiceImpl implements BoardService {
    private BoardDAO baordDAO;

    // DI 적용 예시.
    public BoardServiceImpl(BoardDAO boardDAO) {
        this.boardDAO = boardDAO;
    }
...

BoardServiceImpl 클래스는 의존하는 BoardDAOImpl 객체를 전달받기 위해 new 키워드를 사용해 객체를 생성하지 않고 생성자를 호출할 때 외부에서 객체를 주입 받아 사용했음. 이것이 바로 di를 적용한 예임.

소스 코드에서 new를 사용해 객체를 생성하는 것이 아니라 BoardServiceImpl 생성자를 호출할 때 컨테이너에 의해 주입되는 객체로 boardDAO 변수를 초기화한 것.

di를 사용하면 객체의 의존 관계를 외부에서 설정한다고 했음. 외부 설정에 의해 각 의존 객체가 어떻게 주입되는지 과정을 아래에 나타냈음.

이미지처럼 스프링에서는 의존하는 개체를 컨테이너 실행 시 주입하기 때문에 di라고 부름. 여기서 각 클래스 객체를 bean(이하 빈)이라고 부르는데, 이는 의존 관계를 설정하는 외부 xml 파일에서 각각의 객체를 bean 태그로 표시하기 때문임.

이번에는 스프링에서 의존 객체를 주입하는 방식을 알아보겠음. 스프링의 의존 객체 주입 방식은 생성자를 이용해서 주입하는 방식과 setter를 이용해서 주입하는 방식이 있음.

위에 코드는 생성자를 이용한 주입 방식이고 아래는 setter를 이용한 의존 객체 주입 방식임.

• BoardServiceImpl.java

  public class BoardServiceImpl implements BoardService {
    private BoardDAO boardDAO;
  
    // setter를 이용해 컨테이너에서 생성된 BoardDAOImpl 객체를 주입.
    public void setBoardDAO(BoardDAO boardDAO) {
        this.boardDAO = boardDAO;
    }
  ...

그러나 여기선 스프링 프레임워크의 기본 기능을 익히기 위해 자동 설정이 아닌 수동으로 이클립스 프로젝트에 스프링 프레임워크 3.0 버전을 설정해 보겠음.

스프링 개발 환경 설정은 간단함. 다음과 같이 새 프로젝트를 만들고 스프링 3.0 라이브러리 파일을 복사해 /WEB-INF/lib 폴더에 붙여 넣으면 애플리케이션에서 바로 사용할 수 있음.

일반적으로 어떤 일을 맡아 진행하게 되면 일단은 기존에 주로 사용했던 방법이나 방식을 따르게 마련임. 웹 애플리케이션을 개발할 때도 마찬가지임. 일일이 처음부터 새로 개발하는 것이 아니라 기존에 웹 애플리케이션 개발 방법이나 방식을 따름.

따라서 지금의 웹 애플리케이션 개발은 일반적으로 많이 사용하는 표준화 소스 구조를 만들어 개발을 진행함. 이러한 표준화된 소스 구조를 웹 애플리케이션 모델이라고 함. 웹 애플리케이션 모델의 종류에는 모델1과 모델2 방식이 있음.

모델1 방식

지금까지 jsp 실습 예제를 구현한 방식이 바로 모델1 방식임. 이는 데이터베이스 연동같은 비즈니스 로직 작업과 그 작업 결과를 나타내주는 작업을 동일한 jsp에서 수행함. 즉, 모든 클라이언트의 요청과 비즈니스 로직 처리를 jsp가 담당하는 구조임.

모델1 방식은 기능 구현이 쉽고 편리하다는 장점이 있는 반면에 요즘처럼 웹 사이트 화면 기능이 복잡해지면 화면 기능과 비즈니스 로직 기능이 섞이면서 유지보수에 문제가 생김.

예를 들어 의류 쇼핑몰을 모델1 방식으로 구현해 운영하고 있다고 하자. 계절이 가을에서 겨울로 바뀌면 화면에 나타낼 의류 상품이 이미지도 바꿔줘야 함.

디자이너가 이 작얼을 하려면 jsp에 개발자가 관계되는 비즈니스 로직 기능도 알아야 하므로 작업하기가 쉽지 않을 뿐 아니라 비즈니스 로직과 화면 기능이 섞여 코드 재사용성도 떨어짐. 이렇듯 모델1 방식으로 웹 애플리케이션을 구현할 경우 조금만 기능이 복잡해져도 유지보수가 어렵다는 단점이 있음. 모델1 방식의 이러한 단점을 보완한 것이 바로 모델2 방식임.

모델2 방식

모델2 방식의 핵심은 웹 애플리케이션의 각 기능(클라이언트의 요청 처리, 응답 처리, 비즈니스, 로직 처리)을 분리해서 구현하자는 것. 객체 지향 프로그래밍에서 각각의 기능을 모듈화해서 개발하자는 것과 같은 원리임.

웹 프로그램 개발 시 개발자가 전체 기능을 몰라도 각 기능이 모듈화되어 있으므로 자신이 맡은 부분만 개발하면 됨. 각 부분을 조립만 하면 나중에 전체를 사용할 수 있어 개발 효율성도 높음.

몰론 모델2 방식으로 개발하기 위해서는 필요한 기술이나 개념을 숙지해야 하는 번거로움은 있지만 초급자라면 우선 자신이 맡은 부분만 개발하면 되므로 훨씬 효율적인 개발 방식이라고 할 수 이음.

그리고 개발 후 서비스를 제공할 때도 유비조수가 편할 뿐만 아니라 개발한 모듈들은 비슷한 프로그램을 만들 때 사용할 수 있어 코드 재사용성도 높음. 현재 모든 웹 프로그램은 모델2 방식으로 개발한다고 보면 됨.

• 모델2 방식의 특징

1. 각 기능이 서로 분리되어 있어 개발 및 유지보수가 쉬움.

2. 각 기능(모듈)의 재사용성이 높음.

3. 디자이너와 개발자의 작업을 분업화해서 쉽게 개발할 수 있음.

4. 모델2 방식과 관련된 기능이나 개념의 학습이 필요함.

HTML5에 추가도니 웹 페이지 구조 관련 태그

html4에서는 웹 페이지 구조에 해당하는 머리말, 메뉴, 본문, 하단부를 만들 때 div 태그에 css를 적용하는 방식으로 작업을 했음. 그러다 보니 div 태그만 봐서는 의미를 잘 알 수 없다는 문제가 있었음.

따라서 html5에서는 이 문제를 보완하기 위해 의미 있는 구조를 나타낼 수 있는 태그들을 추가해 가독성을 높였음. html5에 추가된 태그를 추가했음.

• header : 머리말을 나타내는 태그.

• hgroup : 제목과 부제목을 묶는 태그.

• section : 제목별로 나눌 수 있는 태그.

• article : 개별 콘텐츠를 나타내는 태그.

• aside : 왼쪽 또는 오른쪽에 위치하는 사이드 바를 나타내는 태그.

• footer : 하단의 정보를 표시하는 태그.

html5 웹 페이지 구조 관련 태그 사용

먼저 section 태그를 이용해 제목을 표시하는 방법을 실습해 보겠음.

예 )

• section1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

    <!-- section 태그로 제목을 표시함. -->
    <section>
        <h1>기사 제목1</h1>
        <p>첫 번째 기사 내용입니다.</p>
    </section>

    <section>
        <h1>기사 제목2</h1>
        <p>두 번째 기사 내용입니다.</p>    
    </section>

</body>
</html>

• section2.html

section 태그 안에 article 태그를 사용해 본문을 표시함.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

    <section>
        <!-- section 태그 안의 article 태그를 이용해 콘텐츠를 나눔. -->
        <article>
            <h1>기사 제목1</h1>
            <p>첫 번째 기사의 내용</p>
        </article>

        <article>
            <h1>기사 제목2</h1>
            <p>두 번째 기사의 내용</p>
        </article>
    </section>

</body>
</html>

• section3.html

여러 가지 시맨틱 웹의 태그를 이용해 화면의 레이아웃을 구성하는 내용임.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

    <!-- header 태그를 이용해 로고나 메뉴를 표시함. -->
    <header>
        <h1>HTML5 강좌를 시작함.</h1>
    </header>

    <!-- nav 태그를 이용해 상단의 내비게이션 메뉴를 표시함. -->
    <nav>
        <ul>        
            <li>1. 개념익히기</li>
            <li>2. 문법익히기</li>
            <li>3. 실전응용하기</li>
        </ul>
    </nav>

    <!-- aside 태그를 이용해 사이드 메뉴를 표시함. -->
    <aside>
        사이드 메뉴
    </aside>

    <!-- section 태그를 이용해 본문을 표시함. -->
    <section>
        <article>
            <h1>첫 번째 강좌 제목</h1>
            <p>첫 번째 강좌 내용</p>
        </article>
        <article>
            <h1>두 번째 강좌 제목</h1>
            <p>두 번째 강좌 내용</p>
        </article>
        <article>
            <h1>세 번째 강좌 제목</h1>
            <p>세 번째 강좌 내용</p>
        </article>
    </section>

    <!-- aside 태그를 이용해 퀵 메뉴를 표시함. -->
    <aside>
        퀵메뉴
    </aside>

    <!-- footer 태그를 이용해 하단 정보를 표시함 -->
    <footer>
        프로그래밍 강의 Copyright All right reserved.
    </footer>

</body>
</html>

그런데 실행 결과를 보니 레이아웃이 제대로 적용되지 않았음. 레이아웃을 표시하려면 각 태그에 css를 적용해야 함. session4.html은 태그에 css를 적용한 코드 예임.

• section4.html

  <!DOCTYPE html>
  <html>
  <head>
  <meta charset="UTF-8">
  <title>Insert title here</title>
  <style type = "text/css">
    html, body{width : "100%"; height : "70%"}
    html{overflow-y : "scroll"}
    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, form, filedest, p, button{margin : 0; padding : 0}
    body, h1, h2, h3, h4, input, button{font-family : "NanumGothicWeb", "verdana", "dotum", "sans-serif;" font-size : 13px; color : #383d41}
  </style>
  </head>
  <body>
  
        <!-- header 태그를 이용해 로고나 메뉴를 표시함. -->
        <header>
            <h1>HTML5 강좌를 시작함.</h1>
        </header>
  
        <!-- nav 태그를 이용해 상단의 내비게이션 메뉴를 표시함. -->
        <nav>
            <ul>        
                <li>1. 개념익히기</li>
                <li>2. 문법익히기</li>
                <li>3. 실전응용하기</li>
            </ul>
        </nav>
  
        <!-- aside 태그를 이용해 사이드 메뉴를 표시함. -->
        <aside>
            사이드 메뉴
        </aside>
  
        <!-- section 태그를 이용해 본문을 표시함. -->
        <section>
            <article>
                <h1>첫 번째 강좌 제목</h1>
                <p>첫 번째 강좌 내용</p>
            </article>
            <article>
                <h1>두 번째 강좌 제목</h1>
                <p>두 번째 강좌 내용</p>
            </article>
            <article>
                <h1>세 번째 강좌 제목</h1>
                <p>세 번째 강좌 내용</p>
            </article>
        </section>
  
        <!-- aside 태그를 이용해 퀵 메뉴를 표시함. -->
        <aside>
            퀵메뉴
        </aside>
  
        <!-- footer 태그를 이용해 하단 정보를 표시함 -->
        <footer>
            프로그래밍 강의 Copyright All right reserved.
        </footer>
  

아래 나오지 않는 문자열 기능은 가자 String 클래스의 메서드 기능을 참고.

- JSTL에서 제공하는 여러 가지 문자열 함수

1. fn:contains(A, B) - boolean : 문자열 A에 문자열 B가 포함되어 있는지 확인함.

2. fn:endWith(A, B) - boolean : 문자열 A의 끝이 B로 끝나는지 확인함.

3. fn:indexOf(A, B) - int : 문자열 A에서 B가 처음으로 위치하는 인덱스(index)를 반환함.

4. fn:lenght(A) - int : 문자열 A의 전체 길이를 반환함.

5. fn:replace(A, B, C) - String : 문자열 A에서 B까지 해당되는 문자를 찾아 C로 변환함.

6. fn:toLowerCase(A) - String : A를 모두 소문자로 변환함.

7. fn:toUpperCase(A) - Sring : A를 모두 대문자로 변환함.

8. fn:substring(A, B, C) - String : A에서 인덱스 번호 B에서 C까지 해당하는 문자열을 반환함.

9. fn:split(A, B) - String[ ] : A에서 B에서 지정한 문자열로 나누어 배열로 반환함.

10. fn:trim(A) - String : 문자열 A에서 앞뒤 공백을 제거함.

예 )

• fnTest.jsp

문자열 함수를 사용하려면 먼저 taglib 디렉티브 태그를 선언해야 함. 문자열 관련 함수 기능은 자바의 String 클래스에서 제공하는 메서드 기능과 같음.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    isELIgnored="false"
    pageEncoding="UTF-8"%>
<!-- 함수를 사용하기 전에 반드시 선언함. -->
<%@ taglib prefix = "fn" uri = "http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>
<%
    request.setCharacterEncoding("utf-8");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

    <c:set var = "title1" value = "hello world!"/>
    <c:set var = "title2" value = "쇼핑몰 중심 jsp 입니다."/>
    <c:set var = "str1" value = "중심"/>

    <h2>여러 가지 문자열 함수 기능</h2>
    title1 = : "hello world"<br>
    title2 = : "쇼핑몰 중심 jsp 입니다."<br>
    str1 = "중심"<br><br>

    <!-- 문자열 길이를 반환함. -->
    fn : length(title1) = ${fn: length(title1) }<br>
    <!-- 문자열을 대문자로 반환함. -->
    fn : toUpperCase(title1) = ${fn: toUpperCase(title1) }<br>
    <!-- 문자열을 소문자로 반환함. -->
    fn : toLowerCase(title1) = ${fn: toLowerCase(title1) }<br><br>

    <!-- 문자열에서 4~5번째 문자열을 반환함. -->
    fn : substring(title1, 3, 6) = ${fn: substring(title1, 3, 6) }<br>    
    fn : trim(title) = ${fn: trim(title1) }<br>
    <!-- 문자열에서 공백을 /로 대체함. -->
    fn : replace(title1, " ", "/") = ${fn: replace(title1," ", "/") }<br><br>

    <!-- title2 문자열에서 str1의 위치를 구함. -->
    fn : indexOf(title2, str1) = ${fn: indexOf(title2, str1) }<br>
    <!-- title1 문자열에 str1 문자열이 있는 판별함. -->
    fn : contains(title1, str1) = ${fn: contains(title1, str1) }<br>
    <!-- 첫 번째 문자열이 두 번째 문자열을 포함하는지 판별함. -->
    fn : contains(title2, str1) = ${fn: contains(title2, str1) }<br>

</body>
</html>

Properties Editor 설치하기

1. 먼저 이클립스에 한글을 아스키코드로 변환하는 기능을 제공하는 Properties Editor 플러그인을 설치.

이클립스 상단 메뉴에서 Help > Install New Software 를 선택.

work with 칸 오른쪽 add 클릭. 창 뜨면 Name은 Properties Editor로, Location은 http://propedit.sourceforge.jp/eclipse/updates로 입력 후 Add 클릭.

체크 후 아래 next 클릭.

next 클릭.

라이센스 정책에 동의한 후 Finish를 클릭

한글 아스키 파일 만들기

이제 한글 아스키 코드를 저장하는 properties 파일을 만들어 보겠음. properties 파일을 만드는 과정은 다음과 같음.

jsp 페이지에 다국어 표시하기

로그인 예제

• login.jsp

로그인창에서 id와 비밀번호를 입력한 후 로그인을 클릭할 수 있도록 login.jsp를 작성함.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    request.setCharacterEncoding("utf-8");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

    <form action = "result.jsp" method = "post">
        아이디 : <input type = "text" name = "user_ID"><br>
        비밀번호 : <input type = "password" name = "userPw"><br>
        <input type = "submit" value = "로그인">
        <input type = "reset" value = "다시입력">
    </form>

</body>
</html>

• result.jsp

로그인창에서 id를 입력한 경우와 입력하지 않은 경우 <c:if> 태그를 이용해 각기 다른 화면을 출력하도록 설정함.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    isELIgnored="false"
    pageEncoding="UTF-8"%>
<%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>
<%
    request.setCharacterEncoding("utf-8");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

    <!-- empty 연산자를 이용해 id 값이 비었는지 체크함. -->
    <c:if test = "${empty param.userID }">
        아이디를 입력하세요<br>
        <a href = "login.jsp">로그인창</a>
    </c:if>

    <!-- id를 정상적으로 입력한 경우 로그인 메ㅔ시지를 출력함. -->
    <c:if test = "${not empty param.userID }">
        <h1>환영합니다. <c:out value = "${param.userID }"/>님.</h1>
    </c:if>

</body>
</html>

id와 비밀번호를 입력한 후 로그인을 클릭함.

id를 정상적으로 입력한 경우 로그인 메시지를 출력함.

id를 입력하지 않고 로그인한 경우 다시 로그인하라는 메시지를 출력함.

이번에는 <c:if>로 이중 조건문을 구현하도록 다음과 같이 result2.jsp를 작성함. 로그인 시 admin으로 로그인하면 관리자 화면을 출력함.

• reuslt2.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    isELIgnored="false"
    pageEncoding="UTF-8"%>
<%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>
<%
    request.setCharacterEncoding("utf-8");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

    <c:if test = "${empty param.userID }">
        아이디를 입력하세요.<br>
        <a href = "login.jsp">로그인창</a>
    </c:if>

    <!-- id가 null 아님을 체크함. -->
    <c:if test = "${not empty param.userID }">
        <!-- id가 admin이면 관리자 화면을 출력함. -->
        <c:if test = "${param.userID == 'admin' }">
            <h1>관리자로 로그인 했습니다.</h1>
            <form>
                <input type = "button" value = "회원정보 삭제하기"/>
                <input type = "button" value = "회원정보 수정하기"/>
            </form>
        </c:if>
        <!-- id가 admin이 아니면 로그인 메시지를 출력함. -->
        <c:if test = "${param.userID != 'admin' }">
            <h1>환영합니다. <c:out value = "${param.userID }"/> 님. </h1>
        </c:if>
    </c:if>

</body>
</html>

admin으로 로그인함.

관리자 화면으로 출력함.

다른 id로 로그인 시 로그인 메시지를 출력함.

학점 변환기 예제

시험 점수를 입력하면 해당하는 학점으로 변환해 주는 프로그램을 Core 태그 라이브러리를 사용해 만들어 보겠음. 앞엣 구현했던 방법과 어떻게 다른지 비교하면서 실습하는 것이 도움이 될것.

• scoreTest.jsp

학점으로 변환할 시험 점수를 입력한 후 scoreResult.jsp로 전송함.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

    <h1>시험 점수를 입력해 주세요</h1>
    <form method = "get" action = "scoreResult1.jsp">
        시험점수 : <input type = "text" name = "score"/><br>
        <input type = "submit" value = "학점변환"/>    
    </form>

</body>
</html>

• scoreResult1.jsp

조건이 여러 개이므로 이번에는 <c:choose> 태그의 <c:when> 태그에 설정해 학점을 변환함.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    isELIgnored="false"
    pageEncoding="UTF-8"%>
<%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>
<%
    request.setCharacterEncoding("utf-8");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <!-- param.score를 score 변수에 할댕해서 사용함. -->
    <c:set var = "score" value = "${param.score }"/>
    <h1>시험점수 <c:out value = "${score }"/></h1><br>

    <!-- 조건이 여러 개인 경우 c:choose안의 c:when 태그를 이용해 점수를 해당하는 학점으로 변환함. -->
    <c:choose>
        <c:when test = "${score >= 90 && score <= 100 }">
            <h1>A학점입니다.</h1>
        </c:when>
        <c:when test = "${score >= 80 && score <= 90 }">
            <h1>B학점입니다.</h1>
        </c:when>
        <c:when test = "${score >= 70 && score <=80 }">
            <h1>C학점입니다.</h1>
        </c:when>
        <c:when test = "${score >= 60 && score <= 70 }">
            <h1>D학점입니다.</h1>
        </c:when>
        <c:otherwise>
            <h1>F학점입니다.</h1>
        </c:otherwise>
    </c:choose>
</body>
</html>

시험 점수 입력 페이지에서 점수를 입력하고 학점변환을 클릭함.

변환된 학점을 출력함. 하지만 현재는 시험 점수가 0~100점 사이인지 유효성 검사를 하는 기능이 빠져 있으므로 학점 변화기 프로그램을 조금 수정해 보겠음.

• scoreResult2.jsp

학점 변환 시 <c:choose> 태그를 이용해 시험 점수가 0~100점 사이인지를 먼저 체크한 후 전송된 시험 점수가 유표 범위이면 그 다음에 학점을 변환하도록 다음과 같이 scoreResult2.jsp를 작성함. 만약 유효 범위를 벗어나면 새로 점수를 입력하라는 메시지를 출력함.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    isELIgnored="false"
    pageEncoding="UTF-8"%>
<%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>
<%
    request.setCharacterEncoding("utf-8");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <!-- param.score를 score 변수에 할댕해서 사용함. -->
    <c:set var = "score" value = "${param.score }"/>
    <h1>시험점수 <c:out value = "${score }"/></h1><br>

    <!-- c:choose 태그를 이용해 시험 점수의 유효성을 체크함. -->
    <c:choose>
        <c:when test = "${score >= 0 && score <= 100 }">
            <c:choose>
                <c:when test = "${score >= 90 && score <= 100 }">
                    <h1>A학점입니다.</h1>
                </c:when>
                <c:when test = "${score >= 80 && score <= 90 }">
                    <h1>B학점입니다.</h1>
                </c:when>
                <c:when test = "${score >= 70 && score <=80 }">
                    <h1>C학점입니다.</h1>
                </c:when>
                <c:when test = "${score >= 60 && score <= 70 }">
                    <h1>D학점입니다.</h1>
                </c:when>
                <c:otherwise>
                    <h1>F학점입니다.</h1>
                </c:otherwise>
            </c:choose>
        </c:when>
        <!-- 시험 점수가 범위를 벗어났으면 입력 창으로 다시 이동함. -->
        <c:otherwise>
            <h1>점수를 잘 못 입력했습니다. 다시 입력하세요.</h1>
            <a href = "socreTest.jsp">점수 입력 창으로 이동</a>
        </c:otherwise>
    </c:choose>
</body>
</html>

이번에는 시험 점수의 유효 범위인 0~100을 벗어나는 값을 일부러 입력함. 그러면 점수를 잘 못 입력했으니 다시 입력하라는 메시지를 출력함.

구구단 출력 예제

이번에는 Core 태그 라이브러리를 사용한 구구단 출력 예제를 실습해 보겠음.

• gugu.jsp

구구단 입력창에서 구구단 수를 입력한 후 입력한 단수를 guguResult.jsp로 전송함.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

    <h1>출력할 구구단의 수를 지정해 주세요.</h1>
    <form method = "get" action = "guguResult1.jsp">
        출력할 구구단 : <input type = "text" name = "dan"/>
        <input type = "submit" value = "구구단 출력"/>
    </form>

</body>
</html>

• guguResult.jsp

전송된 단수를 가져와 <c:forEach> 태그를 이용해서 tr 태그에 연속적으로 구구단을 출력하도록 작성함.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    isELIgnored="false"
    pageEncoding="UTF-8"%>
<%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>
<%
    request.setCharacterEncoding("utf-8");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

    <c:set var = "dan" value = "${param.dan }"/>
    <table border = "1" width = "800" align = "center">
        <tr align = "center" bgcolor = "lightgreen">
            <td colspan = "2"><c:out value = "dan"/>단 출력</td>
        </tr>

        <!-- c:Each태그를 이용해 구구단을 출력함. -->
        <c:forEach var = "i" begin = "1" end = "9" step = "1">
            <tr align = "center">
                <td width = "400">
                    <c:out value = "${dan }"/> *
                    <c:out value = "${i }"/>
                </td>
                <td width = "400">
                    <c:out value = "${i * dan }"/>
                </td>
            </tr>
        </c:forEach>
    </table>


</body>
</html>

구구단 입력창에서 단수를 입력한 후 구구단 출력을 클릭함.

전송된 단수를 이용해 구구단을 출력함.

이미지 리스트 출력 예제

이번에는 여러 가지 이미지와 체크박스를 연속적으로 출력하는 프로그램을 <c:forEach> 태그를 사용해 만들어 보겠음.

• imageList.jsp

<c:forEach> 태그를 이용해 ul태그 안에 li 태그를 연속해서 출력하여 이미지를 나타냄.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    isELIgnored="false"
    pageEncoding="UTF-8"%>
<%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>
<%
    request.setCharacterEncoding("utf-8");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

    <ul class = "list_type">
        <li>
            <span style = 'margin-left:50px'>이미지</span>
            <span>이미지 이름</span>
            <span>선택하기</span>
        </li>
        <!-- c:forEach 태그를 이용해 이미지와 체크박스를 연속해서 나타냄. -->
        <c:forEach var = "i" begin = "1" end = "9" step = "1">
            <li>
                <a href = '#' style = 'margin-left:50px'>
                    <img src = '../image/duke.png' width = "90" height = "90" alt = ''/></a>

                <a href = '#'><strong>이미지 이름 : 듀크${i }</strong></a>

                <a href = '#'><input name = "chk${i }" type = "checkbox"></a>
            </li>
        </c:forEach>
    </ul>

</body>
</html>

지금까지 Core 태그 라이브러리를 사용해 실습해 봤음. 현재 jsp 페이지는 jstl로 구현하므로 라이브러리를 사용하는 방법에 익숙해지면 실제로 개발하는 데 많은 도움이 될 것.

c:forEach 태그는 jsp 페이지에서 반복문을 수행하는 태그이며, 사용형식은 다음과 같음.

<c:forEach var = "변수이름" items = "반복할객체이름" begin = "시작값"
    end = "마지막값" step = "증가값" varStatsu = "반복상태변수이름">
...
</c:forEach>

여기서 var는 반복할 변수 이름을, items는 반복할 객체 이름을 지정함. begin과 end는 각각 반복 시작 및 종료 값을, step은 한 번 반복 변수를 증가시킬 값을, varStatus는 반복 상태 속성을 지정함.

• varStatus의 속성

1. index - int : items에서 정의한 항목을 가리키는 index 번호임. 0부터 시작함.

2. count - int : 몇 번째 반복인지 나타냄. 1부터 시작함.

3. first - boolean : 첫 번째 반복인지 나타냄.

4. last - boolean : 마지막 반복인지 나타냄.

• member6.jsp

먼저 자바 코드로 ArrayList 객체를 생성하여 문자열을 저장한 후 c:forEach 태그에서 사용할 수 있도록 c:set 태그로 변수 list에 재할당함. 그리고 varStatus의 loop 속성을 이용해 반복 횟수를 출력함. c:forEach 태그의 items에 ArrayList를 설정한 후 반복문 수행 시 ArrayList에 저장된 문자열을 반복 변수 data에 한 개씩 가져와 출력함.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    import = "java.util.*"
    isELIgnored="false"
    pageEncoding="UTF-8"%>
<%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core"%>
<%
    List dataList = new ArrayList();
    dataList.add("hello");
    dataList.add("world");
    dataList.add("안녕하세요");
%>

<!-- 표현언어에서 사용할 수 있도록 c:set 태그를 이용해 변수에 dataList를 할당함. -->
<c:set var = "list" value = "<%=dataList %>"/>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

    <!-- 반복 변수 i를 1부터 10까지 1씩 증가시키면서 반복문을 수행함. -->
    <c:forEach var = "i" begin = "1" end = "10" step = "1" varStatus = "loop">
        i = ${i } &nbsp;&nbsp;&nbsp; 반복횟수 : ${loop.count }<br>
    </c:forEach>
    <br>

    <!-- 반복 변수 i를 1부터 10까지 2씩 증가시키면서 반복문을 수행함. -->
    <c:forEach var = "i" begin = "1" end = "10" step = "2">
        5 * ${i } = ${5 * i }<br>
    </c:forEach>
    <br>

    <!-- ArrayList 같은 컬렉션 객체에 저장된 객체(데이터)를 반복해서 반복 변수 data에 하나씩 가져와 처리함. -->
    <c:forEach var = "data" items = "${list }">
        ${data }<br>
    </c:forEach>
    <br>

    <c:set var = "fruits" value = "사과, 파인애플, 바나나, 망고, 귤" />
    <!-- 구분자 ,(콤마)를 이용해 문자열을 분리해서 출력함. -->
    <c:forTokens var = "token" items = "${fruits }" delims=",">
        ${token }<br>
    </c:forTokens>

</body>
</html>

이번에는 c:forEach 태그를 이용해 ArrayList에 저장된 회원 정보를 출력해 보겠음. c:forEach 태그를 이용하면 ArrayList에 저장된 객체에 편리하게 접근할 수 있음.

다음과 같이 c:forEach 태그의 반복 변수 i를 ArrayList의 인덱스로 사용해서 저장된 회원 정보를 차례대로 출력하도록 작성함.

• member7.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    import = "java.util.*, sec01.ex01.*"
    isELIgnored="false"
    pageEncoding="UTF-8"%>
<%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>
<%
    request.setCharacterEncoding("utf-8");
    List membersList = new ArrayList();
    MemberBean m1 = new MemberBean("son", "1234", "손흥민", "son@test.com");
    MemberBean m2 = new MemberBean("ki", "4321", "기성용", "ki@test.com");
    MemberBean m3 = new MemberBean("park","1212", "박지성", "park@test.com");

    // 세 명의 회원 정보를 MemberBean에 저장한 후 다시 ArrayList에 저장함.
    membersList.add(m1);
    membersList.add(m2);
    membersList.add(m3);
%>
<c:set var = "membersList" value = "<%=membersList %>"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

    <table border = "1" align = "center">
        <tr align = "center" bgcolor = "lightgreen">
            <td width = "7%"><b>아이디</b></td>
            <td width = "7%"><b>비밀번호</b></td>
            <td width = "7%"><b>이름</b></td>
            <td width = "7%"><b>이메일</b></td>
        </tr>
        <!-- membersList에 저장된 회원 수만큼 반복 변수 i를 0부터 1씩 증가시키면서 forEach 문을 실행함. -->
        <c:forEach var = "i" begin = "0" end = "2" step = "1">
        <tr align = "center">
            <!-- 반복 변수 i를 ArrayList의 인덱스로 사용해 회원 정보를 차례대로 출력함. -->
            <td>${membersList[i].id }</td>
            <td>${membersList[i].pwd }</td>
            <td>${membersList[i].name }</td>
            <td>${membersList[i].email }</td>
        </tr>
        </c:forEach>
    </table>

</body>
</html>

• member8.jsp

이번에는 c:forEach문의 items 속성에 membersList를 할당한 후 실행해 자동으로 var의 member에 membersList의 MemberBean 객체가 차례대로 할당되도록 작성함.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    import = "java.util.*, sec01.ex01.*"
    isELIgnored="false"
    pageEncoding="UTF-8"%>
<%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core"%>
<%
    request.setCharacterEncoding("utf-8");
    List membersList = new ArrayList();
    MemberBean m1 = new MemberBean("son", "1234", "손흥민", "son@test.com");
    MemberBean m2 = new MemberBean("ki", "4321", "기성용", "ki@test.com");
    MemberBean m3 = new MemberBean("park","1212", "박지성", "park@test.com");

    membersList.add(m1);
    membersList.add(m2);
    membersList.add(m3);
%>
<c:set var = "membersList" value = "<%=membersList %>"/>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

    <table border = "1" align = "center">
        <tr align = "center" bgcolor = "lightgreen">
            <td width = "7%"><b>아이디</b></td>
            <td width = "7%"><b>비밀번호</b></td>
            <td width = "7%"><b>이름</b></td>
            <td width = "7%"><b>이메일</b></td>
        </tr>
        <!-- 반복문을 수행하면서 memberList에 저장된 MemberBean 객체가 차례대로 member에 할당됨. -->
        <c:forEach var = "member" items = "${membersList }">
        <tr align = "center">
            <!-- 반복 변수 i를 ArrayList의 인덱스로 사요애해 회원 정보를 차례대로 출력함. -->
            <td>${member.id }</td>
            <td>${member.pwd }</td>
            <td>${member.name }</td>
            <td>${member.email }</td>
        </tr>
        </c:forEach>
    </table>

</body>
</html>

<c:url> 태그를 이용한 실습

<c:url> 테그는 jsp 페이지에서 url 정보를 저장하는 역할을 하며, 사용 형식은 다음과 같음.

<c:url var = "변수이름" value = "url경로" [scope = "scope 속성 중 하나"]
    [<c:param name = "매개변수이름" value = "전달값" />]
...
</c:url>

여기서 var는 생성된 url이 저장된 변수를, value는 생성할 url을, scope는 scope 속성의 값을 지정함.

• urlTest.jsp

c:url 태그를 이용해 다른 페이지로 이동하면서 데이터를 전달함. 따라서 이동할 페이지로 전달할 데이터가 많을 경우에 사용하면 편리함.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    import = "java.util.*"
    isELIgnored="false"
    pageEncoding="UTF-8"%>
<%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>
<c:set var = "contextPath" value = "${pageContext.request.contextPath }"/>
<!-- c:url 태그로 이동할 페이지를 설정함. -->
<c:url var = "url1" value = "/test01/member1.jsp">
    <!-- 이동할 페이지로 전달할 데이터를 설정함. -->
    <c:param name = "id" value = "hong"/>
    <c:param name = "pwd" value = "1234"/>
    <c:param name = "name" value = "홍길동"/>
    <c:param name = "email" value = "hong@test.com"/>
</c:url>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

    <!-- <a href = '${contextPath }/test01/member1.jsp'>회원정보출력</a> -->

    <!-- c:url 태그의 변수 이름을 간단하게 설정함. -->
    <a href = '${url1 }'>회원정보출력</a>

</body>
</html>

회원정보출력을 클릭함.

매개변수로 전달된 회원 정보를 출력함(member1.jsp에서 ${속성}을 ${param.속성}으로 수정할 것).

<c:redirect> 태그를 이용한 실습

<c:redirect> 태그는 지정된 jsp 페이지로 리다이렉트할 때 사용함. response.sendRedirect() 기능과 동일하며 <c:redirect> 태그로 리다이렉트할 때 매개변수를 전달할 수 있음.

사용 형식은 다음과 같음.

<c:redirect url = "redirect할 URL">
    [<c:param name = "매개변수이름" value = "전달값"/>]
    ...
</c:redirect>

여기서 url은 리다이렉트 될 url이 저장될 변수를 지정함.

• redirectTest.jsp

<c:redirect> 태그를 이용해 회원 정보 출력창으로 리다이렉트함. 리다이렉트하면서 회원 정보를 매개변수로 전달함.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    isELIgnored="false"
    pageEncoding="UTF-8"%>
<%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <!-- 리다이렉트할 페이지를 설정함. -->
    <c:redirect url = "/test01/member1.jsp">
        <!-- 리다이렉트할 페이지로 전달할 매개변수를 설정함. -->
        <c:param name = "id" value = "${'hong' }"/>
        <c:param name = "pwd" value = "${'1234' }"/>
        <c:param name = "name" value = "${'홍길동' }"/>
        <c:param name = "email" value = "${'hong@test.com' }"/>
    </c:redirect>

</body>
</html>

http:localhost:8090/pro14/test3/redirectTest.jsp로 요청하면 test01/member1.jsp로 리다이렉트 됨. 그러면서 매개변수로 전달한 회원 정보를 출력함.

<c:out> 태그를 이용한 실습

<c:out> 태그는 화면에 지정한 값을 출력해 주는 태그임. 표현 언어와 기능은 거의 동일하지만 기본값 설정 기능 등을 제공하므로 더 편리하게 사용할 수 있음.

사용 형식은 다음과 같음.

<c:out value = "출력값" default = "기본값" [escapeXml = "boolean값"] />

여기서 value는 출력할 값을, default는 value 속성에 지정된 값이 없을 때 출력할 기본값을, escapeXml은 escape 문자를 변환하는 역할을 함(생략할 수 있으며 기본값은 true).

• memberForm.jsp

다음은 회원 가입창에서 입력한 회원 정보를 전달받아 <c:out> 태그를 이용해 화면에 출력하는 예제임. 다음과 같이 memberForm.jsp를 작성해 회원 가입창에서 회원 정보를 입력한 후 member9.jsp로 전달함.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    isELIgnored="false"
    pageEncoding="UTF-8"%>
<%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>
<%
    request.setCharacterEncoding("utf-8");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

    <table align = "center" border = "1">
        <tr align = "center" bgcolor = "lightgreen">
            <td width = "7%"><b>아이디</b></td>
            <td width = "7%"><b>비밀번호</b></td>
            <td width = "7%"><b>이름</b></td>
            <td width = "7%"><b>이메일</b></td>
        </tr>
        <c:choose>
            <c:when test = "${empty param.id }">
                <tr align = "center">
                    <td colspan = "5">아이디를 입력하세요</td>
                </tr>
            </c:when>
            <c:otherwise>
                <tr align = "center">
                    <td><c:out value = "${param.id }"/></td>
                    <td><c:out value = "${param.pwd }"/></td>
                    <td><c:out value = "${param.name }"/></td>
                    <td><c:out value = "${param.email }"/></td>
                </tr>
            </c:otherwise>
        </c:choose>
    </table>

</body>
</html>

<c:out> 태그를 이용해 전송된 회우너 정보를 출력함.

프로그래밍을 하다 보면 > 또는 < 그리고 작은따옴표(')나 큰따옴표(") 같은 특수 문자를 출력해야 하는 경우가 있음. 그런데 이런 특수 문자들은 html 태그에도 사용되므로 각각의 특수문자에 지정된 문자를 이용해서 브라우저에 출력해야 함.

• escapeXml이 false일 때 반환되는 문자

< : &lt;

> : &gt;

& : &amp;

' : &#039;

" : &#034;

... : ...

간단히 특수 문자 사용 예를 실습해 보겠음.

• escapeXml.jsp

<c:out> 태그의 escapeXml 속성을 이용해 변환된 문자를 특수 문자로 변환함.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

    <h2>escapeXml 변환하기</h2>
    <h2>
        <pre>
            <!-- escapeXml 속성이 true이므로 value의 &lt는 그대로 화면에 출력 됨. -->
            <c:out value = "&lt;" escapeXml = "true"/> 
            <!-- escapeXml 속성이 false이므로 value의 &lt는 해당하는 특수 문자로 변환되어 화면에 출력함. -->
            <c:out value = "&lt;" escapeXml = "false"/>

            <c:out value = "&gt;" escapeXml = "true"/>
            <c:out value = "&gt;" escapeXml = "false"/>

            <c:out value = "&amp;" escapeXml = "true"/>
            <c:out value = "&amp;" escapeXml = "false"/>

            <c:out value = "&#039;" escapeXml = "true"/>
            <c:out value = "&#039;" escapeXml = "false"/>

            <c:out value = "&#034;" escapeXml = "true"/>
            <c:out value = "&#034;" escapeXml = "false"/>
        </pre>        
    </h2>

</body>
</html>

지금까지 일반적으로 많이 사용하는 코어 라이브러리에 대해 알아봤음. 그 외 <c:import> 태그는 jsp:include와 같은 기능을 수행함.

** - jstl 태그 종류**

• 코어(C) : 변수 지원, 흐름 제어, 반복문 처리, URL 처리

• 국제화(fmt) : 지역, 메세지 형식, 숫자 및 날짜 형식

• XML(x) : xml 코어, 흐름제어, xml 변환

• 데이터베이스(sql) : SQL

• 함수(fn) : 컬렉션 처리 문자열 처리

*jstl은 2.0 규약부터 추가된 기능이므로 현재는 톰캣에서 기본으로 제공되지 않음. 따라서 다음 사이트에서 라이브러리를 다운로드해 설치해야 함. * http://tomcat.apache.org/download-taglibs.cgi

4개의 파일을 다운 받은 후 이클립스 프로젝트 lib 폴더에 붙여넣기.

이렇게 해서 jstl을 사용하는 데 필요한 라이브러리를 설정함.

디렉티브 태그의 종류

• 페이지 디렉티브 태그 : jsp 페이지의 전반적인 정보를 설정할 때 사용함.

• 인클루드 디렉티브 태그 : 공통으로 사용하는 jsp 페이지를 다른 jsp 페이지에 추가할 때 사용함.

• 태그라이브 디렉티브 태그 : 개발자나 프레임워크에서 제공하는 태그를 사용할 때 사용함.

페이지 디렉티브 태그 정의와 사용법

• 페이지 디렉티브 태그로 설정하는 여러 가지 jsp 속성

1. info - 없음 - 페이지를 설명해 주는 문자열을 지정함.

2. language - "java" - jsp 페이지에서 사용할 언어를 지정함.

3. contentTye - "text/html" - jsp 페이지 출력 형식을 지정함.

4. import - 없음 - jsp 페이지에서 다른 패키지의 클래스를 임포트할 때 지정함.

5. session - "true" - jsp 페이지에서 HttpSession 객체의 사용 여부를 지정함.

6. buffer - "8kb" - jsp 페이지 출력 시 사용할 버퍼 크기를 지정함.

7. autoFlush - "true" - jsp 페이지의 내용이 출력되기 전 버퍼가 다 채워질 경우 동작을 지정함.

8. errorPage - "false" - jsp 페이지 처리 도중 예외가 발생할 경우 예외 처리 담당 jsp 페이지를 지정함.

9. isErrorPage - "false" - jsp 페이지 처리 도중 예외가 발생할 경우 예외 처리 담당 jsp 페이지를 지정함.

10. pageEncoding - "ISO-8859-1" - jsp 페이지에서 사용하는 문자열 인코딩을 지정함.

11. isELIgnored - "true" - jsp 2.0 버전에서 추가된 기능으로 EL 사용 유무를 지정함.

페이지 디렉티브 형식은 다음과 같이 <%@page %> 안에 속성과 값을 나열하면 됨.

<%@ page 속성1 = "값1" 속성2 = "값2" 속성3 = "값3"...%>

그런데 이클립스에서 jsp 페이지를 만들면 자동으로 페이지 디렉티브 태그가 생성됨.

페이지 디렉티브 태그 사용 예제

<!-- import 속성을 제외한 다른 속성은 한 번만 선언해야 함. -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"
    import = "java.util.*"
    session = "true"
    buffer = "8kb"
    autoFlush = "true"
    isThreadSafe = "true"
    info = "(ShoppingMall...)"
    isErrorPage = "false"
    errorPage = "" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>페이지 디렉티브 연습</title>
</head>
<body>

    <h1>쇼핑몰 구현 중심 jsp 입니다.</h1>

</body>
</html>

서블릿에서는 필요한 클래스 파일을 import문을 이용해서 일일이 설정해 줬음. 하지만 이제는 jsp 페이지에서 페이지 디렉티브 태그를 이용해서 설정함. 그리고 페이지 디렉티브 태그는 import 속성을 제외한 다른 속성은 한 번만 선언해 줘야 함.

• ServletContext
• HttpSession
• HttpServletRequest

각 장은 앞 장에서 이미 사용해 봤음. 서블릿의 API의 setAttribute(String name, Object value)로 바인딩하고, 필요할 때 getAttrubute(String name)으로 바인딩된 속성을 가져오면 됨. 또한 removeAttribute(String name)을 이용해 속성을 서블릿 API에서 제거할 수도 있음.

서블릿의 스코프(scope) 는 서블릿 API에 바인딩된 속성에 대한 접근 범위를 의미함. 앞 장에서도 사용해 봤듯이 ServletContext에 바인딩된 속성은 애플리케이션 전체에서 접근할 수 있으므로 애플리케이션 스코프를 갖음.

HttpSession에 바인딩된 속성은 그 HttpSession에 해당하는 브라우저에게만 접근할 수 있으므로 세션 스코프를 갖음.

HttpServletRequest는 해당 요청/응답에 대해서만 접근하므로 리퀘스트 스코프를 갖음.

스코프의 기능은 다음과 같음.

• 로그인 상태 유지 기능.
• 장바구니 기능.
• MVC의 Model과 View의 데이터 전달 기능.

1. 애플리케이션 스코프 : ServletContext - 속성은 애플리케이션 전체에 대해 접근할 수 있음.

2. 세션 스코프 : HttpSession - 속성은 브라우저에서만 접근할 수 있음.

3. 리퀘스트 스코프 : HttpServletRequest - 속성은 해당 요청/응답 사이클에서만 접근할 수 있음.

예 ) 각 서블릿 API에 바인딩된 속성의 스코프를 알아보겠음.

• SetAttribute.java

ServletContext, HttpSession, HttpServletRequest 객체의 setAttribute() 메서드를 이용해 속성을 바인딩함.

package sec01.ex01;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

@WebServlet("/SetAttribute")
public class SetAttribute extends HttpServlet {

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html; charset = utf-8");
        PrintWriter out = response.getWriter();

        String ctxMesg = "context에 바인딩됩니다.";
        String sesMesg = "session에 바인딩됩니다.";
        String reqMesg = "request에 바인딩됩니다.";

        // HttpServletContext 객체, HttpSession 객체, HttpServletRequest 객체를 얻은 후 속성을 바인딩함.
        ServletContext ctx = getServletContext();
        HttpSession session = request.getSession();
        ctx.setAttribute("context", ctxMesg);
        session.setAttribute("session", sesMesg);
        request.setAttribute("request", "reqMesg");

        out.print("바인딩을 수행합니다.");
    }

}

• GetAttribute.java

각 서블릿 API들의 getAttribute 메서드를 이용해 속성 이름으로 바인딩한 값을 가져와 브라우저로 출력함.

package sec01.ex01;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

@WebServlet("/get")
public class GetAttribute extends HttpServlet {

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html; charset = utf-8");
        PrintWriter out = response.getWriter();

        ServletContext ctx = getServletContext();
        HttpSession session = request.getSession();

        // 각 서블릿 API에서 바인딩된 속성의 값을 가져옴.
        String ctxMesg = (String)ctx.getAttribute("context");
        String sesMesg = (String)session.getAttribute("session");
        String reqMesg = (String)request.getAttribute("request");

        out.print("context 값 : " + ctxMesg + "<br>");
        out.print("session 값 : " + sesMesg + "<br>");
        out.print("request 값 : " + reqMesg + "<br>");
    }


}

1. 브라우저에서 /set 으로 요청해 속성을 바인딩함.

2. Context와 Session 객체에 바인딩된 속성은 같은 브라우저에서 접근할 수 있으므로 값을 출력함. 그러나 기존에 바인딩된 request 객체는 /get으로 생성된 request 객체와 다르므로 null이 출력됨. request 값 -> 앞의 요청과 다르므로 바인딩된 속성이 유지되지 않음.

3. 인터넷 익스플로러에서 /get으로 요청. 익스플로러에서 요청했기 때문에 이번에 크롬의 세션 객체에는 접근할 수 없어 null을 출력함. 반면에 Context 객체에 바인딩된 데이터는 모든 브라우저에서 같은 결과를 출력함. session -> 다른 브라우저에서 요청한 것이라 세션이 다르므로 속성이 유지되지 않음.

이럴 때는 encodeURL() 메서드를 이용해 직접 서버에서 브라우저로 응답을 먼저 보낸 후 URL Rewriting 방법을 이용해 jsessionId를 서버로 전송해 세션 기능을 사용하면 됨.

encodeURL() 메서드를 이용한 세션 사용 실습

이번에는 세션 쿠키를 사용하지 않고 encodeURL() 메서드를 이용해 jessionId의 세션 id를 브라우저에 응답으로 전송한 후 세션을 사용해 보겠음.

• sessionTest5

다시 /login으로 요청해 jsessionId를 URL rewiting 방식으로 가져온 후 세션에 접근해 로그인 상태 유무를 판단하도록 구현함.

package sec04.ex01;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

@WebServlet("/login")
public class SessionTest5 extends HttpServlet {

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doHandle(request, response);
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doHandle(request, response);
    }

    private void doHandle(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utg-8");
        response.setContentType("text/html; charset = utf-8");
        PrintWriter out = response.getWriter();

        HttpSession session = request.getSession();

        String user_id = request.getParameter("user_id");
        String user_pw = request.getParameter("user_pw");

        if(session.isNew()) {
            if(user_id != null) {
                session.setAttribute("user_id", user_id);
                // 변수 url에 encodeURL()을 이용해 응답 시 미리 jsessionId를 서블릿으로 다시 전송함.
                String url = response.encodeURL("login");
                // 로그인 상태 확인 클릭 시 jsessionId를 서블릿으로 다시 전송함.
                out.println("<a href = " + url + "> 로그인 상태 확인 </a>");
            }else {
                out.print("<a href = 'login2.html'> 다시 로그인 하세요 </a>" );
                session.invalidate();
            }
        }else {
            user_id = (String)session.getAttribute("user_id");
            if(user_id != null && user_id.length() != 0) {
                out.print("안녕하세요 " + user_id + "님.");
            }else {
                out.print("<a href = 'login2.html'>다시 로그인하세요.</a>");
                session.invalidate();
            }
        }
    }
}

1. 로그인창에서 id와 비밀번호를 입력하고 로그인함.

2. 로그인 상태 확인을 클릭함.

이미지 넣을 것

3. 서블릿에 jessionId 쿠키 값을 전송해 로그인 상태를 유지함.

대부분의 브라우저는 쿠키 사용을 기본으로 설정하고 있지만 쿠키를 사용할 수 없을 경우에는 이렇게 encodeURL() 메서드를 이용해 세션 기능을 사용할 수 있음.

1. 크롬 브라우저를 실행하고 f12를 눌러 디버그창을 나타냄. 그리고 상단 메뉴 바에서 Application을 클릭함.

2. 왼쪽 메뉴에서 Cookies를 선택한 후 하위에 있는 http://localhost:8090을 클릭함. 현재 애플리케이션에서 사용하고 있는 쿠키 정보가 표시됨.