Re_Go's Dev

[React] 기초 | 리액트에서의 버블링과 캡쳐링 방지법

Sat, 05 Oct 2024 08:18:13 GMT

1. 버블링과 캡처링의 정의

우선 버블링부터 설명해 보자면, 버블링은 DOM 트리에서 이벤트가 발생했을 때, 그 이벤트가 발생한 특정 요소에서부터 상위 부모 요소로 전파되는 방식입니다. 즉, 가장 구체적인 요소(이벤트가 발생한 요소)에서부터 시작하여 점점 더 넓은 범위(부모, 조상 요소 등)로 이벤트가 전파되는 현상인데요

예를 들어, 클릭 이벤트가 특정 버튼 요소에서 발생하면, 그 이벤트는 버튼의 부모 요소, 그 부모의 부모 요소로 차례대로 전파되는데, 이때 부모 요소 중 이벤트 리스너를 등록 하고 있는 부모 요소는 해당 이벤트 리스너가 실행되는 현상인거죠.

자료 출처 : https://velog.io/@falling_star3/JS-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%B2%84%EB%B8%94%EB%A7%81bubbling%EA%B3%BC-%EC%BA%A1%EC%B2%98%EB%A7%81capturing-event.TargetcurrentTarget

반대로 캡처링은 버블링과 반대로 부모 요소의 이벤트 발생이 하위 요소까지 전달되는 현상을 의미하는데요. 이러한 이벤트 전파 방식은 리액트뿐만 아니라, DOM의 기본적인 이벤트 전파 메커니즘으로, 모든 브라우저에서 동작하는 자연스러운 현상입니다.

이러한 이벤트 전파는 크게

① 부모에서 타겟으로 내려가면서 등록된 이벤트가 발생되는 캡처 페이즈, ② 타겟 자체에서 등록된 이벤트가 발생되는 타겟 페이즈, ③ 다시 타겟에서 부모로 올라가면서 등록된 이벤트가 발생되는 버블링 페이즈

로 구성됩니다.

자료 출처 : https://velog.io/@falling_star3/JS-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%B2%84%EB%B8%94%EB%A7%81bubbling%EA%B3%BC-%EC%BA%A1%EC%B2%98%EB%A7%81capturing-event.TargetcurrentTarget

그럼 카운터 앱 코드를 예시로 버블링과 캡쳐링이 어떻게 일어나는지를 아래의 코드를 잠깐 살펴볼까요?

import { useState } from "react";
>
function CounterApp() {
  const [count, setCount] = useState(0);
>
  // 캡처링 단계에서 실행될 함수
  const handleParentClickCapture = () => {
    console.log("부모 캡처링 단계 발생 (count: " + count + ")");
  };
>
  // 버블링 단계에서 실행될 함수
  const handleParentClick = () => {
    console.log("부모 버블링 단계 발생 (count: " + count + ")");
  };
>
  // 증가 버튼 클릭 핸들러
  const handleIncrement = () => {
    setCount((prevCount) => prevCount + 1);
    console.log("증가 버튼 클릭: " + count);
  };
>
  // 감소 버튼 클릭 핸들러
  const handleDecrement = () => {
    setCount((prevCount) => prevCount - 1);
    console.log("감소 버튼 클릭: " + count);
  };
>
  return (
    
      Counter: {count}
      
        
        
      
    
  );
}
>
export default CounterApp;

- 버블링과 캡처링 발생 과정 (캡처링 -> 버블링)

increment 버튼을 누르면 최상위 부모 요소인
태그에 등록된 onClickCapture 속성(태그의 고유 제공 속성)에 등록된 함수인 handleParentClickCapture 가 발동
바로 하위 요소(눌려진 요소)에서 등록된 이벤트인 handleIncrement 실행
하위 요소에서 이벤트가 발생되었으므로 다시 상위로부터 버블링이 전달되어 부모 요소인
태그에 등록된 onClick 속성(버블링 현상이 일어날 때 발동되는 속성이기도 함)에 등록된 함수인 handleParentClick 가 발동

2. 버블링과 캡처링을 방지하기 위한 방법

이렇듯 버블링과 캡처링으로 인해 발생되는 전파 현상, 그러니까 개발자의 컨트롤에서 벗어나는 이벤트의 발생 현상을 막기 위해서는 타겟이 되는 요소에 stopPropagation 함수를 걸어주면 되는데요. 아래의 코드 예시를 살펴볼까요?

import { useState } from "react";
>
function CounterApp() {
  const [count, setCount] = useState(0);
>
  // 캡처링 단계에서 실행될 함수
  const handleParentClickCapture = () => {
    console.log("부모 캡처링 단계 발생 (count: " + count + ")");
  };
>
  // 버블링 단계에서 실행될 함수
  const handleParentClick = () => {
    console.log("부모 버블링 단계 발생 (count: " + count + ")");
  };
>
  // 증가 버튼 클릭 핸들러 (이벤트 전파 중단)
  const handleIncrement = (event) => {
    event.stopPropagation(); // 이벤트 전파 중단 (버블링 차단)
    setCount((prevCount) => prevCount + 1);
    console.log("증가 버튼 클릭: " + count);
  };
>
  // 감소 버튼 클릭 핸들러 (이벤트 전파 중단)
  const handleDecrement = (event) => {
    event.stopPropagation(); // 이벤트 전파 중단 (버블링 차단)
    setCount((prevCount) => prevCount - 1);
    console.log("감소 버튼 클릭: " + count);
  };
>
  return (
    
      Counter: {count}
      
        
        
      
    
  );
}
>
export default CounterApp;

위 코드에서는 이벤트가 최초로 발생 되는 타겟 (DOM)의 이벤트에 stopPropagation 함수가 먼저 호출이 되는 것을 확인할 수 있습니다. 이렇게 되면 최초 이벤트 발생 타겟을 중심으로 버블링이 차단되기 때문에 부모로부터 자식에게 전파되는 캡처링과 타겟에서만 발생된 이벤트만 발생할 수 있습니다.

그러나 방금 말씀드린대로 위 코드에서 캡처링 속성은 설정이 되어있기 때문에(onClickCapture) 캡처링 전파는 발생이 되는데요. 현업에서는 굳이 onClickCapture 속성을 정의하지 않기 때문에 자주 사용되는 onClick 버튼에 등록된 이벤트 전파 발생 (버블링)에 대한 방지 방법만 알고 계셔도 충분합니다.

[React] 기초 | 특정 조건에서의 컴포넌트 렌더링 방법

Fri, 04 Oct 2024 14:58:48 GMT

1. 조건부 렌더링

리액트에서는 기본적으로 페이지의 특정 요소에 변화가 일어날 때 해당 부분만 렌더링이 되어 사용자에게 보여지는데요.

이때 특정 상태나 상황에 따라 렌더링을 시켜 사용자에게 보여지게 하거나, 그 반대로 보여지지 않게 할 수 있습니다. 이는 조건문과 같은 조건부 연산자를 활용하는 방법인데요. 아래에서 한번 그 방법들을 소개해 드리겠습니다.

- if-else 문

가장 기본적인 방법으로, 조건에 따라 다른 컴포넌트를 렌더링하는 방법인데요. 코드의 길이가 길어지기 때문에 잘 사용되지 않는 방법이기도 합니다.

>
function App() {
  const [count, setCount] = useState(0);
  const [input, setInput] = useState("");
>
  const onClickButton = (value) => {
    setCount(count + value);
  };
>
  // useState의 count 변수를 이용해 조건문을 이용해 반환할 DOM 요소를 결정 짓는 함수를 정의
  const renderMessage = () => {
    if (count > 0) {
      return 카운터가 증가했습니다! 현재 값: {count};
    } else if (count < 0) {
      return 카운터가 감소했습니다! 현재 값: {count};
    } else {
      return 카운터가 0입니다.;
    }
  };
>
  return (
    
      Simple Counter
      
         setInput(e.target.value)} 
        />
      
      
        
      
      {/* 
      페이지가 렌더링 될 때마다 count 변수의 변화에 따라  
      보여지는 DOM 요소도 함수 안에 정의된 각각의 DOM요소들과 
      같아질것임.
      */}
      {renderMessage()}
    
  );
}
>
export default App;

- 논리 연산자

자바스크립트의 논리 연산자를 활용하여 조건에 따라 컴포넌트를 렌더링할 수 있습니다. 예를 들어, && 연산자의 단락 평가의 특성을 사용하면 조건이 true일 때만 컴포넌트를 렌더링할 수 있는데요.

주로 특정 상태를 조건의 전면 코드로, 해당 특정 상태가 변화될 때마다 렌더링 될 DOM의 요소를 후면 코드로 배치하여 사용되며, 주로 모달창, 온오프와 같은 기능에 많이 활용됩니다. (리액트에서 가장 많이 활용되는 방법이기도 합니다.)

function App() {
  const [count, setCount] = useState(0);
>
  const onClickButton = (value) => {
    setCount(count + value);
  };
>
  return (
    
      Simple Counter
      
        
      
      {/* count가 0보다 클 때만 메시지를 표시 */}
      {count > 0 && 카운터가 증가했습니다! 현재 값: {count}}
    
  );
}

- 삼항 연산자

삼항 연산자를 이용하여 특정 상태가 참의 결과, 또는 거짓의 결과를 보일 때 그에 준하는 DOM 요소를 반환하도록 하는 방법으로, 렌더링 될 요소가 두 개 일 때 주로 활용됩니다.

그래서 논리 연산자가 주로 온오프를 담당했다면, 삼항 연산자의 경우 두 개 중 하나의 컴포넌트를 상황에 따라 렌더링 할 때 주로 사용합니다.

function App() {
  const [count, setCount] = useState(0);
>
  const onClickButton = (value) => {
    setCount(count + value);
  };
>
  return (
    
      Simple Counter
      
        
      
      {/* 삼항 연산자를 사용하여 카운터 값에 따른 메시지 표시 */}
      {count > 0 ? `카운터가 증가했습니다! 현재 값: ${count}` : `카운터가 ${count}입니다.`}
    
  );
}
>
export default App;

- switch 문

2개 이상의 여러 조건이 필요한 경우 switch 문을 사용할 수 있습니다. if-else문과 사용법은 비슷하며, 리액트에서는 그리 많이 사용되지 않는 방법입니다.

function App() {
  const [count, setCount] = useState(0);
>
  const onClickButton = (value) => {
    setCount(count + value);
  };
>
  const renderMessage = () => {
    switch (true) {
      case count > 0:
        return 카운터가 증가했습니다! 현재 값: {count};
      case count < 0:
        return 카운터가 감소했습니다! 현재 값: {count};
      default:
        return 카운터가 0입니다.;
    }
  };
>
  return (
    
      Simple Counter
      
        
      
      {/* switch 문을 사용하여 메시지 렌더링 */}
      {renderMessage()}
    
  );
}

2. 목록 렌더링

또한 리액트에서는 배열과 같은 반복적인 요소, 그러니까 반복자(iterator) 의 특성을 가진 요소를 활용해 요소가 가진 아이템들을 반복적으로 렌더링 하는 방법을 제공하고 있는데요.

이는 주로 서버에서 데이터를 제공 받아 화면에 뿌려줄 때 개발자가 일일이 컴포넌트를 짜야만 하는 불편함을 많이 덜어줄 수 있는, 리액트의 핵심 스킬이라고도 할 수 있습니다.

이러한 방법을 사용하기 위해서는 대상이 되는 앞서 말씀드린대로 iteraotr 특성을 가져야 하기에, 주로 배열 안에 하나 이상의 객체 정보를 뿌려줄 때 사용됩니다.

- map

리액트에서 요소의 반복 렌더링에 가장 많이 쓰이는 함수입니다. 특히 map은 매 사이클마다 반환값이 있다는 점에서 반환값이 없는 foreach보다 더 많이 사용되기에, return 키워드를 이용한 리액트 렌더링 방식 특성상 map이 리액트에서 가장 많이 활용되는 목록 렌더링 함수라고 할 수 있습니다.

물론 for문을 돌릴수도 있겠으나, 코드의 간결함과 가독성을 고려했을 때 for문은 거의 쓰이지 않는 방식이기도 하죠.

주의할 점은 map을 이용할때 생성되는, 최종적으로 정보가 표시(렌더링)되는 DOM 요소에는 key 속성을 필수로 지정해 주어야 하며, 이때의 key 속성에는 각 아이템에 대한 고유한 id 값과 같은 변수들이 지정됩니다.

function UserList() {
  // 하드코딩된 사용자 데이터
  const users = [
    { id: 1, name: 'Alice', email: 'alice@example.com' },
    { id: 2, name: 'Bob', email: 'bob@example.com' },
    { id: 3, name: 'Charlie', email: 'charlie@example.com' },
    { id: 4, name: 'David', email: 'david@example.com' },
    { id: 5, name: 'Eve', email: 'eve@example.com' },
  ];
>
  return (
    
      User List
      
        {/* users 배열을 반복하여 렌더링 */}
        {users.map((user) => (
          
            {user.name} - {user.email}
          
        ))}
      
>
      {/* 
      map을 사용하지 않을 경우 
      User List
      
        {users[0].name} - {users[0].email} {/* Alice */}
        {users[1].name} - {users[1].email} {/* Bob */}
        {users[2].name} - {users[2].email} {/* Charlie */}
        {users[3].name} - {users[3].email} {/* David */}
        {users[4].name} - {users[4].email} {/* Eve */}
      
      */}
    
  );
}
>

- filter

주로 주어진 조건에 따라 배열의 요소를 필터링하여 새로운 배열을 생성하는 데 사용됩니다. 리액트에서 filter를 사용하여 특정 조건에 맞는 요소만 렌더링할 수 있습니다.

특히 filter는 검색 정보와 같이 특정 키워드로 검색했을때 해당 키워드에 맞는 컴포넌트를 DOM 요소로 렌더링 하여 사용자에게 보여주거나, 삭제할 특정 컴포넌트 정보를 제외한 나머지 컴포넌트의 정보를 저장하는 방식으로 특정 컴포넌트를 삭제하는 효과를 주고자 할 때 사용됩니다.

// 1. 검색 기능을 구현할 때 사용되는 filter 함수 예시
import React, { useState } from 'react';
>>
const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
  { id: 4, name: 'David' },
  { id: 5, name: 'Eve' },
];
>>
const UserList = () => {
  const [searchTerm, setSearchTerm] = useState('');
>>
  // 사용자가 입력한 키워드로 필터링을 한 뒤 그 결과를 filteredUseres에 저장
  const filteredUsers = users.filter(user =>
    user.name.toLowerCase().includes(searchTerm.toLowerCase())
  );
>>
  return (
    
      User List
       setSearchTerm(e.target.value)}
      />
      
        {/*
        렌더링 될 때마다 searchTerm의 상태(사용자가 입력한 값)에 맞는 
        값들이 filteredUsers에 저장된 후 map 함수를 이용해 사용자에게 표시
        */}
        {filteredUsers.map(user => (
          {user.name}
        ))}
      
    
  );
};

// 2. 특정 컴포넌트를 삭제하는 예시
const usersData = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
];
>>
const UserList = () => {
  const [users, setUsers] = useState(usersData);
>>
  const deleteUser = (id) => {
    // 클릭한 사용자 id를 제외한 나머지 사용자만 필터링하여 상태 업데이트
    const updatedUsers = users.filter(user => user.id !== id);
    setUsers(updatedUsers);
  };
>>
  return (
    
      User List
      
        {/*
        요소를 클릭하면 해당 요소에 저장되어 있는 함수가 발동
        그 해당 요소의 id값을 제외한 나머지 값만 updatedUsers에 저장된 후
        setUsers 함수를 이용해 users에 다시 저장한 뒤 users.map을 이용해 제 렌더링
        */}
        {users.map(user => (
          
            {user.name} 
          
        ))}
      
    
  );
};

- Fragment

Fragment는 조건부 렌더링 중 map을 이용한 함수 사용에서 반환하고자 하는 DOM의 요소가 두 개 이상일 때 해당 요소들을 그룹화 하는 용도로 사용됩니다.

물론 Fragment를 사용하지 않고

태그로도 묶어서 렌더링 할수도 있지만,

태그가 여러 개일 때에는 코드의 가독성이 떨어질 수 있기에, 앞서 말씀드린 경우에는 Fragment를 사용합니다. (경우에 따라 축약형인 <> 태그도 사용할 수 있습니다.)

import React, { Fragment, useState } from 'react';
>
const users = [
  { id: 1, name: 'Alice', email: 'alice@example.com' },
  { id: 2, name: 'Bob', email: 'bob@example.com' },
  { id: 3, name: 'Charlie', email: 'charlie@example.com' },
  { id: 4, name: 'David', email: 'david@example.com' },
  { id: 5, name: 'Eve', email: 'eve@example.com' },
];
>
const UserList = () => {
  const [searchTerm, setSearchTerm] = useState('');
>
  // 사용자가 입력한 키워드로 필터링
  const filteredUsers = users.filter(user =>
    user.name.toLowerCase().includes(searchTerm.toLowerCase())
  );
>
  return (
    <>
      User List
       setSearchTerm(e.target.value)}
      />
      
        {filteredUsers.length > 0 ? (
          // 필터링된 결과가 있을 때
          filteredUsers.map(user => (
            {/* 추가 정보를 표시하기 위해 Fragment를 사용 */}
            
              {user.name}
              {/* 
              user.id가 1이 아닌 경우만 정보가 표시되는데, 
              그 중에서도 user.email이 있는 경우는 그 경우를,
              없는 경우 'No email available'을 렌더링 하게 표시
              */}
              {user.id !== 1 && Email: {user.email ? user.email : 'No email available'}}
            
          ))
        ) : (
          // 필터링된 결과가 없을 때
          No users found
        )}
      
    
  );
};

[JAVA] DTO와 Record

Wed, 02 Oct 2024 19:12:49 GMT

1. DTO란?

자바에서는 데이터 전송을 위해 DTO(Data Transfer Object)라는 개념을 가지고 있는데요. 이는 다양한 계층 간 데이터 전달의 효율성을 목적으로 극대화 하기 위해 사용되는 클래스 틀을 의미하는데요.

물론 자바에는 DTO만 있는건 아니고, VO(Value Object), DAO(Data Access Object), Entity와 같이 특정 목표를 위해만들어진 그릇? 같은 객체가 존재하는데요.

지금 당장은 이러한 DTO가 와닿지 않지만, 후에 MVC 모델을 이용한 웹 어플리케이션을 개발할 때 DTO 개념을 사용하기 때문에 지금은 개념 정도로만 알아두시는 것을 추천합니다.

보안 및 매핑 목적으로 자주 사용되기도 하는 이 DTO의 골자는 다음 코드와 같습니다.

public class MemberDTO {
    // 상수 필드 선언
    private final String name;
    private final int age;
>    
    // 생성자 생성
    public MemberDTO(String name, int age) {
        this.name = name;
        this.age = age;
    }
>
    //getter 메서드 설정 (setter는 보안 목적으로 사용 x)
    public String getName() {
        return name;
    }
>
    public int getAge() {
        return age;
    }
>
    // 상속받은 Object 클래스의 toString 메서드 재정의
    @Override
    public String toString() {
        return "MemberDTO{name='" + name + "', age=" + age + "}";
    }
>
    // 상속받은 Object 클래스의 hashCode 메서드 재정의
    @Override
    public int hashCode() {
        return Objects.hash(name, age);
    }
>
    // 상속받은 Object 클래스의 equals 메서드 재정의
    @Override
    public boolean equals(Object obj) {
        if (this == obj) return true;
        if (obj == null || getClass() != obj.getClass()) return false;
        MemberDTO memberDTO = (MemberDTO) obj;
        return age == memberDTO.age && Objects.equals(name, memberDTO.name);
    }
>
    public static void main(String[] args) {
        MemberDTO member1 = new MemberDTO("Re_Go", 30);
        MemberDTO member2 = new MemberDTO("Re-Go", 29);
>
        // getter 메서드 호출
        System.out.println(member1.getName());
        System.out.println(member1.getAge());
        // toString 메서드 호출
        System.out.println(member1.toString());
        // hashCode 메서드 호출
        System.out.println(member1.hashCode());
        // equals 메서드 호출
        System.out.println(member1.equals(member2));
    }
}

2. Record 키워드

특히 이러한 코드를 반복적으로 작성하는것은 비효율적이라는 것인데, 이를 지원하기 위해 Java 14부터 record 객체가 추가되었는데(물론 잘 사용은 안됨),

위에서 살펴본 DTO를 자동으로 추가해준다는 장점을 가지고 있어 매우 유용하게 사용되는 객체중 하나입니다.

// Member 레코드 생성
public record Member(String name, int age) {
> 
    public static void main(String[] args) {
        Member member1 = new Member("Re_Go", 30);
        Member member2 = new Member("Re-Go", 29);
>        
        // getter 메서드 호출 (접두사를 get으로 쓰지 않고 멤버 이름과 같게 자동 생성됩니다.)
        System.out.println(member1.name); 
        System.out.println(member1.age);
        // toString 메서드 호출
        System.out.println(member1.toString());
        // hashCode 메서드 호출
        System.out.println(member1.hashCode());
        // equals 메서드 호출
        System.out.println(member1.equals(member2));
    }
}

참고로 이 record 객체와 비슷한 지원을 해주는 롬복(Lombok) 이라는 커스텀 라이브러리가 있는데요. 해당 내용은 이곳을 참조하시기 바립니다.

[JSP/Servlet] JSP Model2 (MVC) 방식을 활용한 회사 사원 조회 홈페이지 제작기 | With Mybatis

Fri, 16 Aug 2024 04:48:19 GMT

1. 서론

이번에 학원에서 마이바티스를 활용한 MVC 패턴을 한 번 짜봤는데요. 이전에 스프링 부트로 간이 프로젝트를 할 때는 몰랐는데, 막상 해당 시간을 가지다보니 "이래서 근본을 아는게 중요하구나" 라는 생각이 막 꽂혀서 되게 의미있는 시간이었다고 생각합니다.

물론 해당 시간에 제가 급하게 병원에 입원을 하는 바람에 코드의 나머지를 병원에서 작성해야만 했지만, 그래도 해당 패턴을 하나 하나 뜯어보고나니 "아... 되게 심오하면서 재밌다 ㅋㅋ" 라는 생각을 지울 수는 없더군요.

아무튼 이번 프로젝트에 사용된 프로젝트 구조인 MVC패턴을 잠깐 소개해 드리자면

(자료 출처 : https://developer.mozilla.org/ko/docs/Glossary/MVC)

사용자의 요청을 VIEW가 받아서 Controller에 전송
Controller는 요청을 정제화 해서 Model에 전송
Model은 전송 받은 요청을 이용해 DB를 업데이트 한 뒤 그 결과를 VIEW에 전달
VIEW는 최종적으로 전달 받은 정보를 화면에 업데이트

그리고 위 로직을 좀 더 자세히 설명드리자면 아래의 그림, 설명과 같습니다.

(자료 출처 : https://hyuntaekhong.github.io/til/TIL-200824/)

클라이언트의 요청이 Controller로 제출됨 (submit)
Controller는 요청에 해당하는 Service 객체에 요청
Service 객체는 DAO를 호출하여 DB 데이터를 전달 받도록 요청
DAO객체는 Mybatis를 이용하는 Mapper.xml을 이용해 작업을 수행한 뒤 결과를 반환
데이터는 DAO - Service - Controller로 역순으로 전달
Controller는 요청에 맞는 JSP로 응답
JSP 페이지는 응답 정보를 사용자에게 보여줌

여기서 의문이 들었던건 왜 Service를 거쳐 DAO로 가는지? 그냥 Service에서 다 해도 되지 않는지에 대한 의문이었는데요.

도달한 결론만 좀 간추려 정리하자면 DAO는 DB와의 상호작용에 집중하고, Service는 데이터 가공과 같이 특정 비즈니스 로직에 좀 더 집중을 하는 역할을 수행하기 위해 모듈화 했다고 생각이 됩니다. (물론 첫 시간이라 DAO 쪽에서 데이터를 정제하고 있긴 하지만 ㅎ...)

2. 프로젝트 파일 구성

우선 JSP 페이지는 다섯 페이지로 구성이 되어있으며, 라이브러리는 ojdbc와 마이바티스, taglib(아파치 태그 lib을 사용하기 위함. c만 임포트 해도 됨)를 폴더와 빌드 패스에 추가해 줬습니다.

그 다음 자바 파일의 각 패키지에 Controller, VO, Service, DAO 및 마이바티스 환경 설정을 위한 xml 파일과 매퍼 xml 파일, 커넥션 풀 관리 파일을 다음과 같이 만들어 줬습니다.

3. 추가 개념글

이번 섹션에서는 마이바티스를 활용했는데요. 여기서 마이바티스란 자바 앱에서 DB와의 상호작용을 효율적으로 처리하게 해주는 프레임워크로, 그냥 편하게 JPA와 같은 역할을 하는 친구라고 생각하시면 되는데요.

마이바티스에 대한 개념글 정리를 굉장히 잘한 블로그가 있어서 아래의 블로그를 먼저 한 번 훑어보시고 난 뒤 해당 프로젝트의 설명을 참고하시면 좀 더 이해가 되시지 않을까 하여 소개를 드리고자 합니다.

(https://khj93.tistory.com/entry/MyBatis-MyBatis%EB%9E%80-%EA%B0%9C%EB%85%90-%EB%B0%8F-%ED%95%B5%EC%8B%AC-%EC%A0%95%EB%A6%AC)

4. 오라클 DB 테이블 구성

오라클 DB의 경우 오라클에서 기본적으로 제공 해주는 HR 계정의 employees 테이블을 사용했는데요. 해당 테이블 사용을 위해서는 다음 명령어와 같이 언락을 해주어야 사용이 가능합니다.

ALTER USER hr IDENTIFIED BY 1234 ACCOUNT UNLOCK;

해당 계정을 언락 해주고 접속 계정을 다음과 같이 만들어 줬습니다.

그리고 해당 계정으로 접속하여 employees 테이블을 조회하면 다음과 같이 구조를 확인할 수 있죠.

select * from employees;
desc employees;

5. 전체 로직 설명

그럼 다음 파일들의 로직에 대해서 설명해 드리고자 하는데요. 제가 현재 병원에 있는 상태로 (마취가 덜 풀렸 ㅇ...) 주석으로 설명을 대체하고자 합니다.

그래도 최소한 주석을 달려고 노력을 했으니 가엾게 봐주시면 감사하겠습니다 ㅜㅜ

JSP 영역

index

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>




Insert title here




    
        원하는 검색 버튼 클릭
        
            
                
                    검색 버튼을 클릭하세요.

inputDept

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>




Insert title here



    
        부서를 선택하고 검색 버튼을 누르세요.
        
            
                
                    부서 검색

inputDynamic

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>




Insert title here




    
        무엇을 검색 하시겠습니까?
        
            
                
                    검색 옵션
                
                
                    
                        선택 검색 :
                        
                    
                
                
                    
                        입력 검색 :

검색 옵션
선택 검색 :
입력 검색 :

allList

<%@page import="org.joonzis.vo.EmployeeVO"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
>




Insert title here



    
        전체 직원 목록
        
                    
                        
                            
                        
            
                
                    직원ID
                    직원이름
                    직원연락처
                    직원연봉
                    부서ID
                    고용일
                
            
            
            
                
                                ${vo.job_id}
                                ${vo.first_name} ${vo.last_name}
                                ${vo.phone_number}
                                ${vo.salary}
                                ${vo.department_id} 
                                ${vo.hire_date}
                            
                        
                    
                    
                            데이터가 존재하지 않습니다. 올바른 값을 입력해 주세요.

직원ID	직원이름	직원연락처	직원연봉	부서ID	고용일
${vo.job_id}	${vo.first_name} ${vo.last_name}	${vo.phone_number}	${vo.salary}	${vo.department_id}	${vo.hire_date}
데이터가 존재하지 않습니다. 올바른 값을 입력해 주세요.

searchOne

<%@page import="org.joonzis.vo.EmployeeVO"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
>




Employee List



    
        
        ${person.first_name} ${person.last_name} 직원 목록
>
        
                    
                        
                        
            
                
                    직원ID
                    직원이름
                    직원연락처
                    직원연봉
                    부서ID
                    고용일
                
            
            
            
            
                
                            ${person.employee_id}
                            ${person.first_name} ${person.last_name}
                            ${person.phone_number}
                            ${person.salary}
                            ${person.department_id}
                            ${person.hire_date}
                        
                    
                    
                            데이터가 존재하지 않습니다. 올바른 값을 입력해 주세요.

직원ID	직원이름	직원연락처	직원연봉	부서ID	고용일
${person.employee_id}	${person.first_name} ${person.last_name}	${person.phone_number}	${person.salary}	${person.department_id}	${person.hire_date}
데이터가 존재하지 않습니다. 올바른 값을 입력해 주세요.

Controller (Controller.java)

package org.joonzis.controller;
>
import java.io.IOException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
>
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 org.joonzis.service.EmployeeService;
import org.joonzis.service.EmployeeServiceImpl;
import org.joonzis.vo.EmployeeVO;
>
@WebServlet("/Controller")
public class Controller extends HttpServlet {
    private static final long serialVersionUID = 1L;
>      
    public Controller() {
        super();
    }
>
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            request.setCharacterEncoding("utf-8");
            response.setContentType("text/html; charset=utf-8");
>            
            // 어떤 경로로 이동할건지가 담긴 cmd 형태의 요청 파라미터를 추출하여 cmd 변수에 할당  
            // 이 변수는 switch문의 분기점으로 활용될 예정
            String cmd = request.getParameter("cmd");
>            
            //단순 화면 이동인지 데이터를 전달하는 이동인지 구분해야함
            // 그래서 forward 방식일 경우 isForward를 true로 지정한 뒤 
            // 조건값으로 forward문을 태울거고, false일 경우 sendRedirect문을 태울거임
            // 일종의 플래그와도 같음
            boolean isForward = false;
>            
            // forward와 sendRedirect의 경로가 할당될 변수 
            String path = "";
>    
            // 서비스 인스턴스 생성
            EmployeeService service = new EmployeeServiceImpl();
>            
            // request에 세팅할 다중 속성(EmployeeVO 타입의 List)을 받을 list 변수와
            // 단일 속성(EmployeeVO person 변수를 미리 선엉ㄴ
            List list = null;
            EmployeeVO person = null;
>            
            // cmd 값에 따라 switch문 실행
            switch (cmd) {
            // allList (모든 사용자 조회) 의 경우 service 인스턴스의 getAll 메서드 실행 후 반환값을 list에 할당
            // 할당받은 속성을 request의 속성에 설정 후 isForward(실어나를 값이 있는지)을 true(값이 있음)로 변경
            // path(사용자가 이동할 경로)를 allList.jsp로 지정 후 break(switch문 종료)
            case "allList":
                list = service.getAll();
                request.setAttribute("list", list);
                isForward = true;
                path = "allList.jsp";
              break;
            // 따로 실어나를(request에 할당할 속성, 즉 전달할 값이 없는 상태) 값이 없는 경우
            // isForward는 놔두고 path(경로)만 지정한 뒤 break
            case "inputDept":
                path = "inputDept.jsp";
                break;
            case "inputDynamic":
                path = "inputDynamic.jsp";
                break;
            // deptList의 설명은 allList와 동일
            // 단 전달하는 값은 정수형 부서 번호 (오라클에서 department_id가 Number로 되어있기 때문에 맞춰줌)
            // 값을 보낼때에도 service의 getOne 메서드에 지정한 매개변수의 타입대로 int로 변환해 전달
            case "deptList":
                list = service.getOne(Integer.parseInt(request.getParameter("department_id")));
                request.setAttribute("list", list);
                isForward = true;
                path = "allList.jsp";
                break;
>                
            // ★ 동적 생성을 위한 페이지. 여기서 설명이 조금 복잡해지기 때문에 주석을 세세히 나눌 예정 ★
            case "dynamicList":
                //searching은 사용자의 옵션(option에서 선택한 값)과 searching_content(입력한 값)
                //을 담기 위해 Map을 하나 만들어줌. 그냥 객체 하나 생성했다고 보면 됨
                Map searching = new HashMap<>();
                String type = request.getParameter("type");
                String searchingContent = request.getParameter("searching_content");
                // 위에서 꺼낸 두 파라미터 값을 Map으로 선언한 searching 변수의 put 메서드를 이용해
                // 아래와 같이 문자열 타입의 속성 이름과 문자열 타입의 값(getParameter 한 값들)으로 할당함
                // 사용자가 만약 입력창에서 employee_id 옵션을 선택한 뒤 searching_content의 값으로
                // 135를 입력했다면 첫번째 put메서드에는 "type" : "employee_id"가
                // 두번째 put 메서드에는 "searching_content" : "135"가 입력됨
                searching.put("type", type);
                searching.put("searching_content", searchingContent);
                // hire_date, job_id, full_name의 경우 반환값이 한 명이 아닐수도 있음. 
                // 입사 일자 이후의 값을 조회하기 때문이고, job_id(직급)이 같은 경우가 있고
                // 풀 네임이 같은 사람이 있을 수도 있기 때문임. 그래서 사용자가 입력한 type(옵션)이 이들 값이 아닌 경우,
                // 즉 단일 쿼리 반환값인 person(EmployeeVO)만 반환하는 상황인 경우
                if(!type.equals("hire_date") && !type.equals("job_id") && !type.equals("full_name")) {
                    // EmployeeVO 타입의 Person에 service 인스턴스의 getDynamicResult(단일 VO 반환 함수)
                    // 를 호출하고 매개변수로 put 메서드로 세팅한 searching을 전달함
                    person = service.getDynamicResult(searching);
                    // 그 뒤 반환 받은 person의 값(VO)을 request에 아래의 명칭과 같이 싣고
                    request.setAttribute("person", person);
                    // 경로(path)를 단일 VO를 출력하는 페이지로 지정
                    path = "searchOne.jsp";
                // if조건에 걸리지 않은 타입들, 즉 다중 리스트(List)를 반환 받는 상황인 경우
                }else {
                    // service 인스턴스의 다중 리스트를 반환해주는 메서드를 호출하여 마찬가지로 searching 전달 후
                    // 반환 받은 다중 리스트를 미리 선언해 놓은 list(List)에 할당한 뒤 옵션에 세팅
                    list = service.getDynamicResultList(searching);
                    request.setAttribute("list", list);
                    // allList 페이지를 활용해줌 (어차피 다 보여주는 페이지는 동일하되 반환되는 쿼리 값들만 다르므로)
                    path = "allList.jsp";
                }
                // 
                isForward = true;
                break;
            }
            // 포워드 값이 true(전달할 request 속성이 있는 경우라면)라면 디스패쳐 포워드로 패스와 함께 요청 처리를 날림
            if(isForward) {
>                request.getRequestDispatcher(path).forward(request, response);
            // 전달할 값(request에 세팅이 되어있지 않은 상태)이 없는 경우 그냥 경로(path)로 응답 페이지를 제공
            }else {
                response.sendRedirect(path);
            }
    }
>
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
>
}

VO (EmployeeVO.java)

package org.joonzis.vo;
>
import java.util.Date;
>
public class EmployeeVO {
    private String first_name, last_name, email, phone_number, job_id; 
    private int employee_id, salary, commision_pct, manager_id, department_id;
    private Date hire_date;
>    
    public EmployeeVO() {}
>
    public EmployeeVO(String first_name, String last_name, String email, String phone_number, String job_id,
            int employee_id, int salary, int commision_pct, int manager_id, int department_id, Date hire_date) {
        super();
        this.first_name = first_name;
        this.last_name = last_name;
        this.email = email;
        this.phone_number = phone_number;
        this.job_id = job_id;
        this.employee_id = employee_id;
        this.salary = salary;
        this.commision_pct = commision_pct;
        this.manager_id = manager_id;
        this.department_id = department_id;
        this.hire_date = hire_date;
    }
    public String getFirst_name() {
        return first_name;
    }
    public void setFirst_name(String first_name) {
        this.first_name = first_name;
    }
    public String getLast_name() {
        return last_name;
    }
    public void setLast_name(String last_name) {
        this.last_name = last_name;
    }
    public String getEmail() {
        return email;
    }
    public void setEmail(String email) {
        this.email = email;
    }
    public String getPhone_number() {
        return phone_number;
    }
    public void setPhone_number(String phone_number) {
        this.phone_number = phone_number;
    }
    public String getJob_id() {
        return job_id;
    }
    public void setJob_id(String job_id) {
        this.job_id = job_id;
    }
    public int getEmployee_id() {
        return employee_id;
    }
    public void setEmployee_id(int employee_id) {
        this.employee_id = employee_id;
    }
    public int getSalary() {
        return salary;
    }
    public void setSalary(int salary) {
        this.salary = salary;
    }
    public int getCommision_pct() {
        return commision_pct;
    }
    public void setCommision_pct(int commision_pct) {
        this.commision_pct = commision_pct;
    }
    public int getManager_id() {
        return manager_id;
    }
    public void setManager_id(int manager_id) {
        this.manager_id = manager_id;
    }
    public int getDepartment_id() {
        return department_id;
    }
    public void setDepartment_id(int department_id) {
        this.department_id = department_id;
    }
    public Date getHire_date() {
        return hire_date;
    }
    public void setHire_date(Date hire_date) {
        this.hire_date = hire_date;
    } 
}

Service

EmployeeService.java (인터페이스)

package org.joonzis.service;
>
import java.util.List;
import java.util.Map;
>
import org.joonzis.vo.EmployeeVO;
>
public interface EmployeeService {
    public List getAll();
    public List getOne(int department_id);
    public EmployeeVO getDynamicResult(Map searching);
    public List getDynamicResultList(Map searching);
}

EmployeeServiceImpl.java (구현 클래스)

package org.joonzis.service;
>
import java.util.List;
import java.util.Map;
>
import org.joonzis.dao.EmployeeDao;
import org.joonzis.dao.EmployeeDaoImpl;
import org.joonzis.vo.EmployeeVO;
>
public class EmployeeServiceImpl implements EmployeeService{
>    
    private EmployeeDao dao = EmployeeDaoImpl.getInstance();
>
    @Override
    public List getAll() {
        return dao.getAllEmployees();
    }
>    
    @Override
    public List getOne(int department_id) {
        return dao.getOneEmployees(department_id);
    }
>    
    @Override
    public EmployeeVO getDynamicResult(Map searching) {
        return dao.getDynamicSearching(searching);
    }
>    
    @Override
    public List getDynamicResultList(Map searching) {
        return dao.getDynamicSearchingList(searching);
    }
}

DAO

EmployeeDao.java (인터페이스)

package org.joonzis.dao;
>
import java.util.List;
import java.util.Map;
>
import org.joonzis.vo.EmployeeVO;
>
public interface EmployeeDao {
    public List getAllEmployees();
    public List getOneEmployees(int department_id);
    public EmployeeVO getDynamicSearching(Map searching);
    public List getDynamicSearchingList(Map searching);
}

EmployeeDaoImpl.java (구현 클래스)

package org.joonzis.dao;
>
import java.util.HashMap;
import java.util.List;
import java.util.Map;
>
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.joonzis.mybatis.config.DBService;
import org.joonzis.vo.EmployeeVO;
>
public class EmployeeDaoImpl implements EmployeeDao{
>
    // DAO 객체 생성
    private static EmployeeDaoImpl instance = null;
    public EmployeeDaoImpl() {}
    // DAO 획득하는 함수
    public static EmployeeDaoImpl getInstance() {
        if(instance == null) {
            instance = new EmployeeDaoImpl();
        }
        return instance;
    }
>        
    // 필드
    private static SqlSession sqlsession = null;
>
    // 팩토리 얻어오는 함수, 단 동기화를 시켜 여러 접속으로부터의 팩토리 획득을 방지하도록 함
    // 왜냐하면 팩토리는 공유 자원(static)인건 맞으나, 팩토리 세션을 생성하는 작업은 1회만 발생(static 구역)
    // 즉 단 한 번 생성된 팩토리 자원을 안정적으로 다수의 호출자로부터의 호출 충돌을 방지하기 위한 작업이라고 보면 됨
    private synchronized static SqlSession getSqlSession() {
        if(sqlsession == null) {
            sqlsession = DBService.getFactory().openSession(false);
        }
        return sqlsession;
    }
>
    // 테이블의 모든 사원들의 정보를 획득하여 전달하는 역할 
    @Override
    public List getAllEmployees() {
        return getSqlSession().selectList("select_all");
    }
>
    // 테이블의 특정 부서 사원들의 정보를 획득하여 전달하는 역할
    @Override
    public List getOneEmployees(int department_id) {
        return getSqlSession().selectList("select_one", department_id);
    }
>
    // 동적 검색을 할 때 테이블의 특정 사원의 정보를 획득하여 전달하는 역할 
    @Override
    public EmployeeVO getDynamicSearching(Map searching) {
        String type = searching.get("type");
        String searching_content = searching.get("searching_content");
        //id 전달 전용 변수
        int number_content = 0;
>
        // type의 분기점에 따라 마이바티스에 전달할 searching_content의 값을 number_content(사원 id는 Number이므로)
        // 로 변환하거나, 그대로 냅둬서 selectOne 메서드에 전달함
        if(type.equals("employee_id")) {
            number_content = Integer.parseInt(searching.get("searching_content"));
            System.out.println(number_content);
            return getSqlSession().selectOne("dynamic_searching_byid", number_content);
        }else if(type.equals("email")){
            return getSqlSession().selectOne("dynamic_searching_byemail", searching_content);
        }else{
            return getSqlSession().selectOne("dynamic_searching_bynumber", searching_content);
        }
    }
>
    // 동적 검색을 할 때 테이블의 특정 사원들의 정보를 획득하여 전달하는 역할
    public List getDynamicSearchingList(Map searching) {
        String type = searching.get("type");
        String searching_content = searching.get("searching_content");
        // 이름 전달 전용 변수
        Map names = new HashMap<>();
>
        // 위 단일 VO를 반환하는 동적 검색 함수와의 차이점은 selectList를 반환, 즉 다수의 VO를 반환한다는
        // 차이점이 존재함, (매개변수는 같기 때문에 오버로딩이 안됨, 어차피 반환 타입도 다름) 
        // 그래서 List를 반환하는 메서드를 하나 더 만들어줌 (설명은 단일 동적 검색 함수 주석과 동일)
        if(type.equals("job_id")) {
            return getSqlSession().selectList("dynamic_searching_byjob", searching_content);
        }else if(type.equals("hire_date")) {
            return getSqlSession().selectList("dynamic_searching_byhiredate", searching_content);
        }else {
            // else문에는 type이 full_name인 경우가 되는데, 이때 searching(사용자가 전달한 map)을
            // 공백을 기준으로 나눠 nameArr 배열에 할당함
            // 이럴 경우 공백을 기준으로 앞의 값은 names 맵에 first_name 이름으로 할당하고, 
            // 뒤의 값은 last_name 이름으로 할당한 뒤 마이바티스에 names를 전달
            String[] nameArr = searching.get("searching_content").split(" ");
            names.put("first_name", nameArr[0]);
            names.put("last_name", nameArr[1]);
            return getSqlSession().selectList("dynamic_searching_byname", names);
        }
    }
>    
}

Mybatis 환경 설정

DBService.java (커넥션 풀 구성 클래스)

package org.joonzis.mybatis.config;
>
import java.io.InputStream;
>
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;
>
public class DBService {    // factory를 만드는게 목적
>
    // 필드
    private static SqlSessionFactory factory = null;
>
    // 정적 초기화 변수 (클래스가 로드될때 자동으로 실행되는 코드라고 보면 됨)
    // 아래의 메서드들은 마이바티스를 사용하기 위한 주요 메서드들이라서
    // 마이바티스 사용을 위한 하나의 그림으로 외워둘 필요가 있음.
    static {
        try {
            // 클래스 패스에서 위치한 sqlmap (마이바티스 설정 관련 xml)을 읽어오기 위한 경로를 설정
            String resource = "org/joonzis/mybatis/config/sqlmap.xml";
            // 설정된 경로의 파일을 읽어들어와 is 스트림에 저장
            InputStream is = Resources.getResourceAsStream(resource);
            // 마이바티스의 세션 팩토리를 생성(빌더의 builder메서드)한 뒤 factory 필드에 할당
            factory = new SqlSessionFactoryBuilder().build(is);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
>    
    // 사용자가 getFactory 메서드를 호출하면 정적으로 
    public static SqlSessionFactory getFactory() {
        return factory;
    }
}

sqlmap.xml (Mybatis 환경 설정 xml)

마이바티스 매퍼 (employees.xml)

6. 느낀 점

예외 처리를 따로 해주진 않았는데 (안해준게 아니라 그것까지 신경 쓸 겨를이...) 그래도 입력 할 때 정규식으로 검사를 하고 있어서 크게 무리는 없을 것 같습니다. 그래도 할 수 있다면 예외 처리를 또 따로 해줘야 하지 않을까 하는 아쉬움이 드네요.
DAO에서 데이터를 정제하는 부분을 Service로 보내줬어야 하는데 병상에서 코드를 짜는지라 그것까지 미처 생각을 하지 못했습니다. 그래도 이정도면 나름 만족을 하지 않을까 싶고, 다음에는 Service 부분에서 데이터를 정제해 DAO에 보내줘야 겠구나 하는 교훈을 얻었지 않았나 싶습니다.
학원에서 수업 내용을 배우면서 빠르게 전개 되느라 따라가기 좀 벅차긴한데, 그래도 복습을 하면서 정리를 하니까 왜 빠르게 전개가 되는지 알겠더라고요. (요즘은 SPA가 대세라서 이렇게 복잡하게 페이징을 하진 않으니까... 그래도 모듈화 개념은 꼭 익혀야 나중에 컴포넌트나 기능 만들 때 잘 익혀둘 수 있기에 빠르게 훑되 중요한 개념만 공부한 것 같았습니다.)
게시글이나 파일 업로드 부분은 따로 처리하지 하지 않았는데, 나중에 하게 된다면 여지껏 배운 내용으로 스프링을 쓰지 않고 간이 사내 사이트를 하나 만들어보고 싶다는 생각이 들었던 시간이기도 했습니다.

[JSP/Servlet] JSP Model1 방식을 활용한 회원 가입 CRUD 홈페이지 제작기 | With JavaBeans, 커스텀 태그 라이브러리, 커넥션 풀

Tue, 13 Aug 2024 10:14:30 GMT

1. 서론

이번에도 마찬가지로 서블릿을 이용해 이전에 제작했던 홈페이지를 개선해 보았는데요. 때문에 이번 섹션을 먼저 보시기 전에 먼저 이전 제작 홈페이지의 로직을 한 번 보시고 오시는 것을 추천 드립니다.

아무튼 이번에는 저번에 사용하지 않았던 자바빈즈(특정 역할을 대체하는 자바 객체 혹은 클래스)와 표현하기 힘들었던 스크립틀릿을 좀 더 편하게 사용할 수 있게 해주는 커스텀 태그 라이브러리, DB를 좀 더 편하게 접촉하게 할 수 있는 커넥션 풀을 사용해 보았습니다.

이번 홈페이지 로직에 사용된 JSP 모델 1 그림과 설명 > ![](https://velog.velcdn.com/images/re_go/post/4cbb0eab-3081-42fd-a3e7-fd183c5d9a86/image.jpg) > 1. 사용자가 JSP 페이지에 요청을 보냄 2. JSP에서 DB를 중계하는 자바빈즈(DAO)에 사용자의 요청 정보를 전달하면 해당 자바빈즈는 이를 토대로 DB에서 해당 정보를 커넥션 풀을 이용하여 쿼리문을 실행 3. 쿼리 실행(사용자의 정보 저장, 혹은 조회) 후에 결과를 받아온 뒤 서버 측에 해당 사용자의 정보들을 자바 객체로 임시 저장하기 위한 자바빈즈(VO)에 임시 저장하거나 반대로 DB에 업데이트 된 경우 해당 반환 값 (정상 반영 값인 정수값을 반환 받음)을 받은 뒤 VO 객체, 혹은 정수 반환 값을 JSP 페이지에 전달 4. 결과값을 전달 받은 JSP는 해당 결과값을 토대로 JSP 페이지에 사용자의 요청을 화면에 출력(VIEW)으로 응답(response)함.

2. 프로젝트 파일 구성

우선 라이브러리 파일들은 다음과 같이 구성되어 있으며, DB 연동을 위한 ojdbc, 커넥션 풀 사용을 위한 아파치 커넥션풀 라이브러리들, 외부 커스텀 태그 라이브러리와 해당 태그에 EL 표현식을 쓰기 위한 taglibs 라이브러리들을 다운받은 뒤 빌드 패스에 추가해 주었습니다.

그 다음 JSP 페이지 입니다. 이전에 사용했던 프로젝트의 페이지들을 활용해 주었습니다.

마지막으로 자바빈즈 파일입니다. 이곳에는 이전 프로젝트에서 사용자가 JSP 페이지마다 DB를 일일이 연결해서 쿼리를 던져주어야만 했던 수고를 덜하기 위해 커넥션 풀을 자체적으로 연동한 뒤 사용자의 호출이 있을 때마다 정의한 각 DML문을 실행하는 메서드를 호출하여 그 결과값을 반환해 주는 DAO(Data Access Object) 객체 하나와

해당 DB의 테이블과 똑같은 데이터 타입과 이름으로 칼럼들이 정의되어 있어 서버 영역에서 DB의 결과값, 혹은 전달값으로 편하게 받고 전달해줄 VO(Value Object) 객체를 하나 만들어 줍니다.

3. 추가 개념글

특히 이번 섹션에서는 제 블로그에 소개를 드리지 않은 자바빈즈와 커스텀 태그 라이브러리, 커넥션 풀을 간단히 알아볼 수 있는 블로그 글들을 좀 소개해 드리고자 하는데요.

우선 자바빈즈의 경우 ORM이나 스프링으로 자동 연결 및 관리가 가능하기 때문에 그냥 어떻게 만드는지에 대한 개념이나 방법 정도를 아래의 블로그에서 파악하시는 것으로도 충분합니다.

(https://ccomccomhan.tistory.com/37)

또한 커스텀 태그 라이브러리의 경우 클래스 기반 커스텀 태그는 거의 사장되다시피 한 반면 태그 기반 커스텀 태그는 유지 보수 측면에서 종종 사용되는 상황 (그마저도 요즘 웹페이지 동작은 SPA가 대세라 MPA는 외면 받는 상태라 리액트가 JSP를 대체하긴 하지만...)인지라 이것도 마찬가지로 아래의 아래의 블로그에서 그냥 이런게 있구나 하는 정도로만 파악하시는 것으로도 충분합니다.

(https://blog.naver.com/yunwoosup/222045402611)

마지막으로 커넥션 풀 또한 사용자가 일일이 연결하지 않아도 된다는 장점이 있으나, 이는 JPA는 물론 마이바티스에서도 훨씬 편하게 가능하기 때문에 이마저도 아래의 블로그에서 참고하시면 좋을듯 합니다.

(https://velog.io/@jaemin05/%EC%BB%A4%EB%84%A5%EC%85%98-%ED%92%80%EC%9D%84-%EC%99%9C-%EC%95%8C%EC%95%84%EC%95%BC%ED%95%A0%EA%B9%8C)

4. 오라클 DB 테이블 구성

오라클 DB의 경우 green 테이블을 다음과 같은 구조로 생성했습니다.

CREATE TABLE users (
    idx        NUMBER PRIMARY KEY,               
    id         VARCHAR2(20) NOT NULL,            
    pw         VARCHAR2(20) NOT NULL,            
    name       VARCHAR2(20) NOT NULL,            
    age        NUMBER NOT NULL,                  
    addr       VARCHAR2(50),                     
    reg_date   DATE                              
);
>
create sequence green_seq start with 1 increment by 1;

5. 전체 로직 설명

index.js

가장 기본적인 메인 페이지이며, 이전의 프로젝트와 달라진점이 없는 페이지 입니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>




Insert title here
// 스타일



> HTML 코드

    
        
            
                
                    회원 정보 관리
                
            
            
                
                    아이디
                    
                
                
                    비밀번호
                    
                
                
                    이름
                    
                
                
                    나이
                    
                
                
                    주소

전체 출력 영역(view_all.jsp, getAllList)

DB의 모든 사용자를 조회하여 페이지를 출력하는 코드 부분입니다. 특히 이번 JSP 페이지들은 에서 DB 처리는 DAO에서 직접 처리를 해줄것이기 때문에 해당 DAO 객체의 메서드를 호출하고 전달할 값으로 VO 객체에 세팅해 두었던 인스턴스를 전달해 주었으며,

페이징 처리의 경우 이전에 사용하던 스크립틀릿 방식에서 벗어나 자바 코드의 로직 동작이 가능하도록 아파치 측에서 제공하고 있는 커스텀 태그 라이브러리와 EL 조합으로 페이지를 처리해 주었습니다.

view_all.jsp

<%@page import="org.joonzis.ex.GreenVO"%>
<%@page import="java.util.List"%>
<%@page import="org.joonzis.ex.GreenDao"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
 
<%
  GreenDao dao = GreenDao.getInstance();
  List list = dao.getAllList();
  pageContext.setAttribute("list", list);
%>




Insert title here


 
>
 
 
 

>    
 member 테이블의 전체 데이터
 
             
                 
                     
                         <%-- 필드처럼 쓰려면 필드명대로 써야함 (private 이지만 필드를 쓰면 컴파일러는 getter로 자동 인식) --%>
                         
                 
     
         
             회원번호 
             아이디 
             비밀번호 
             이름 
             나이 
             주소 
             가입일 
         
     
     
     
         
 
                         ${vo.getIdx()} 
                         ${vo.getId()} ${vo.pw} 
                         ${vo.getName()} 
                         ${vo.getAge()} 
                         ${vo.getAddr()} 
                         ${vo.getReg_date()} 
                     
                 
             
              
                     회원이 존재하지 않습니다.

회원번호	아이디	비밀번호	이름	나이	주소	가입일
${vo.getIdx()}	${vo.getId()}	${vo.pw}	${vo.getName()}	${vo.getAge()}	${vo.getAddr()}	${vo.getReg_date()}
회원이 존재하지 않습니다.

getAllList 메서드

public class GreenDao {
 // DB 연결 을 위한 커넥션 API
 private Connection conn = null;
 // 쿼리 실행 준비를 위한 API
 private PreparedStatement ps = null;
 // 쿼리 실행 결과 순회하며 순차적으로 가져오는 대표적인 API
 private ResultSet rs = null;
 //실행할 쿼리문을 담을 변수
 private String sql = "";
>
 public GreenDao() {}
 // 무분별한 GreenDao 인스턴스 생성 방지를 위해 공유 가능한 하나의 인스턴스만을 미리 생성
 private static GreenDao dao = new GreenDao();
>
 // 생성한 인스턴스를 반환해주는 메서드
 public static GreenDao getInstance() {
     return dao;
 }
>
 // 커넥션 풀을 관리하는 객체(DataSource)
 private static DataSource ds;
 static {
     try {
         // JNDI (Java Naming and Directory Interface) 환경을 초기화하고, 데이터베이스 연결과 같은 리소스를 검색하거나 바인딩 할 수 있는 기본적인 설정을 완료 (그냥 해당 어플리케이션의 DB를 찾기 위한 준비단계라고 생각하시면 편합니다.)
         Context context = new InitialContext();
         // JNDI 환경에서 DataSource 객체를 검색하여 데이터베이스 연결을 관리하기 위한 참조를 얻는 과정
         ds = (DataSource)context.lookup("java:comp/env/jdbc/oracle");
     } catch (NamingException e) {
         e.printStackTrace();
     }    
 }
>
 // 조회해서 받아올 값들은 하나 하나의 GreenVO(사용자의 전체 정보 한 줄) 그룹이기 때문에
// List 배열로 받아 사용
 public List getAllList() {
     List list = new ArrayList<>();
>
     try {
         // dataSource를 사용하여 DB에 연결을 요청
         conn = ds.getConnection();
         // 쿼리문 작성
         String sql = "select * from green order by idx";
         //쿼리문 실행 준비
         ps = conn.prepareStatement(sql);
         // 실행 된 쿼리의 결과값을 반환 받음
         rs = ps.executeQuery();
         // resultSet의 next 메서드를 이용해 결과 집합을 순차적으로 접근
         while(rs.next()) {
             // vo 객체를 만들고 해당 객체에 컬럼의 순서대로 순차적으로 값을 세팅(setter)한 뒤
             // List(GreenVO 타입)에 저장
             GreenVO vo = new GreenVO();
             vo.setIdx(rs.getInt(1));
             vo.setId(rs.getString(2));
             vo.setPw(rs.getString(3));
             vo.setName(rs.getString(4));
             vo.setAge(rs.getInt(5));
             vo.setAddr(rs.getString(6));
             vo.setReg_date(rs.getDate(7));
             list.add(vo);
         }
     }catch(Exception e) {
         e.printStackTrace();
     }finally {
         try {
             if(rs != null) {rs.close();}
             if(ps != null) {ps.close();}
             if(conn != null) {ps.close();}
         }catch(Exception e2) {
             e2.printStackTrace();
         }
     }
     // 작업이 rs.next 작업이 끝나면 list를 반환
     return list;
 }
ㆍ
ㆍ
ㆍ
(중략)

회원 가입(삽입) 영역 (insert_one.jsp, getInsert 메서드)

위의 view_all.jsp 페이지와 마찬가지로 이전 프로젝트에서 insert_one.jsp에서 요청을 받은 뒤 VO 객체에 세팅한 후 DAO의 getInsert에 전달하고 난 결과값을 토대로 다음과 같이 페이징 처리를 해줄 것입니다.

insert_one.jsp

<%@page import="org.joonzis.ex.GreenVO"%>
<%@page import="org.joonzis.ex.GreenDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%
request.setCharacterEncoding("utf-8");
String id = request.getParameter("id");
String pw = request.getParameter("pw");
String name = request.getParameter("name");
String age = request.getParameter("age");
String addr = request.getParameter("addr");
>
GreenVO vo = new GreenVO();
>
vo.setId(id);
vo.setPw(pw);
vo.setName(name);
vo.setAge(Integer.parseInt(age));
vo.setAddr(addr);
>

GreenDao dao = GreenDao.getInstance();
int result = dao.getInsert(vo);
pageContext.setAttribute("result", result);
>
// 이전 사용 방법
//response.sendRedirect("view_all.jsp");
%>
>

getInsert 메서드 (이전 프로젝트의 getInsert와 크게 다르지 않습니다.)

public int getInsert(GreenVO vo) {
     int result = 0;
>
     try {
         conn = ds.getConnection();
>
         sql = "insert into green(idx, id, pw, name, age, addr, reg_date)" + 
                      "values(green_seq.nextval, ?, ?, ?, ?, ?, sysdate)";
>
         ps = conn.prepareStatement(sql);
         conn.setAutoCommit(true);
         ps.setString(1, vo.getId());
         ps.setString(2, vo.getPw());
         ps.setString(3, vo.getName());
         ps.setInt(4, vo.getAge());
         ps.setString(5, vo.getAddr());
         result = ps.executeUpdate();
         if(result > 0) {
             System.err.println("데이터 추가 완료");
         }else {
             System.out.println("데이터 추가 실패");
         }
     } catch (Exception e) {
         e.printStackTrace();    
     }finally {
         try {
             if(ps != null) {ps.close();}
             if(conn != null) {conn.close();}
         } catch (Exception e2) {
             e2.printStackTrace();
         }
     }
>
     return result;
 }

회원 삭제 영역 (delete_one.jsp, getRemove 메서드)

설명은 위 영역의 삽입 영역과 거의 동일하기 때문에 생략하도록 하겠습니다.

delete_one.jsp

<%@page import="org.joonzis.ex.GreenDao"%>
<%@page import="org.joonzis.ex.GreenVO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("utf-8");
String id = request.getParameter("id");
String pw = request.getParameter("pw"); 
>
GreenVO vo = new GreenVO();
>
vo.setId(id);
vo.setPw(pw);
>
GreenDao dao = GreenDao.getInstance();
int result = dao.getRemove(vo);
pageContext.setAttribute("result", result);
>
//response.sendRedirect("view_all.jsp");
%>
>

getRemove 메서드

public int getRemove(GreenVO vo) {
     int result = 0;
>
     try {
         conn = ds.getConnection();
>            
         sql = "delete from green where id = ? and pw = ?"; 
>            
         ps = conn.prepareStatement(sql);
         conn.setAutoCommit(true);
         ps.setString(1, vo.getId());
         ps.setString(2, vo.getPw());
         result = ps.executeUpdate();
         if(result > 0) {
             System.err.println("데이터 삭제 완료");
         }else {
             System.out.println("데이터 삭제 실패");
         }
     } catch (Exception e) {
         e.printStackTrace();    
     }finally {
         try {
             if(ps != null) {ps.close();}
             if(conn != null) {conn.close();}
         } catch (Exception e2) {
             e2.printStackTrace();
         }
     }
>
     return result;
 }

회원 업데이트 영역 1-1 (update_one.jsp, getUpdateView 메서드)

로직은 이전에 다루었던 프로젝트의 로직을 따르고 있기 때문에 설명이 필요하다고 판단되는 부분은 간단한 주석 정도로만 코드를 설명하겠습니다.

update_one.jsp

<%@page import="org.joonzis.ex.GreenVO"%>
<%@page import="org.joonzis.ex.GreenDao"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>




Insert title here



 
>
 
 
 

>    
 <%
 request.setCharacterEncoding("utf-8");
 response.setContentType("text/html; charset=UTF-8");
 String id = request.getParameter("id");
 String pw = request.getParameter("pw");
>
 GreenDao dao = GreenDao.getInstance();
 GreenVO vo = dao.getUpdateView(id, pw);
 pageContext.setAttribute("vo", vo);    
 %>
>
 ${vo.getId()} 회원의 데이터
 
     
                     
                      
                          
                          
         
             
                 회원번호 
                 아이디 
                 비밀번호 
                 이름 
                 나이 
                 주소 
                 가입일 
             
         
         
                  
                              member 데이터가 없습니다.
                              
                      
                      
                              
                                  ${vo.getIdx()}
                                    
                                          
                              
                                  ${vo.getId()}

getUpdateView 메서드

public GreenVO getUpdateView(String id, String pw){
     GreenVO vo = new GreenVO(); 
>
     try {
         conn = ds.getConnection();
         String sql = "select * from green where id = ? and pw = ?";
         ps = conn.prepareStatement(sql);
         ps.setString(1, id);
         ps.setString(2, pw);
         rs = ps.executeQuery();
         if(rs.next()) {
             vo.setIdx(rs.getInt(1));
             vo.setId(rs.getString(2));
             vo.setPw(rs.getString(3));
             vo.setName(rs.getString(4));
             vo.setAge(rs.getInt(5));
             vo.setAddr(rs.getString(6));
             vo.setReg_date(rs.getDate(7));
         }
     }catch(Exception e) {
         e.printStackTrace();
     }finally {
         try {
             if(rs != null) {rs.close();}
             if(ps != null) {ps.close();}
             if(conn != null) {ps.close();}
         }catch(Exception e2) {
             e2.printStackTrace();
         }
     }
>
     return vo;
 }

회원 업데이트 영역 1-2 (update.jsp, getUpdate 메서드)

로직은 이전에 다루었던 프로젝트의 로직을 따르고 있기 때문에 설명이 필요하다고 판단되는 부분은 간단한 주석 정도로만 코드를 설명하겠습니다.

update.jsp

<%@page import="org.joonzis.ex.GreenDao"%>
<%@page import="org.joonzis.ex.GreenVO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
 request.setCharacterEncoding("UTF-8");
 response.setContentType("text/html; charset=UTF-8");
>
 String pw = request.getParameter("pw");
 String name = request.getParameter("name");
 int age = Integer.parseInt(request.getParameter("age"));
 String addr = request.getParameter("addr");
 int idx = Integer.parseInt(request.getParameter("idx"));
>
 GreenVO vo = new GreenVO();
 vo.setPw(pw);
 vo.setName(name);
 vo.setAge(age);
 vo.setAddr(addr);
 vo.setIdx(idx);
>
 GreenDao dao =GreenDao.getInstance();
 int result = dao.getUpdate(vo);
 pageContext.setAttribute("result", result);
%>




Insert title here

getUpdate 메서드

public int getUpdate(GreenVO vo) {
     int result = 0;
>        
     try {
         conn = ds.getConnection();
>                
         sql = "update green set pw = ?, name = ?, age = ?, addr = ? where idx = ?"; 
         ps = conn.prepareStatement(sql);
         conn.setAutoCommit(true);
         ps.setString(1, vo.getPw());
         ps.setString(2, vo.getName());
         ps.setInt(3, vo.getAge());
         ps.setString(4, vo.getAddr());
         ps.setInt(5, vo.getIdx());
         result = ps.executeUpdate();
         if(result > 0) {
             System.err.println("데이터 수정 완료");
         }else {
             System.out.println("데이터 수정 실패");
         }
     } catch (Exception e) {
         e.printStackTrace();    
     }finally {
         try {
             if(ps != null) {ps.close();}
             if(conn != null) {conn.close();}
         } catch (Exception e2) {
             e2.printStackTrace();
         }
     }
>    
     return result;
 }

특정 사용자 조회 영역 (view_one.jsp, getUserInfoById 메서드)

로직은 이전에 다루었던 프로젝트의 로직을 따르고 있기 때문에 설명이 필요하다고 판단되는 부분은 간단한 주석 정도로만 코드를 설명하겠습니다.

view_one.jsp

<%@page import="org.joonzis.ex.GreenDao"%>
<%@page import="org.joonzis.ex.GreenVO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("utf-8");
String id = request.getParameter("id");
> 
GreenDao dao = GreenDao.getInstance();
GreenVO result = dao.getUserInfoById(id);
pageContext.setAttribute("vo", result);
>
// 이전에 사용했던 방법
//response.sendRedirect("view_all.jsp");
%>
>

 
>    
 
 
 

>
 green 테이블의 전체 데이터
 
             
                     
                 
     
        
            번호
            아이디
            비밀번호
            이름
            나이
            주소
            가입일
        
     
     
         
                         ${vo.getIdx()}
                         ${vo.getId()}
                         ${vo.getPw()}
                         ${vo.getName()}
                         ${vo.getAge()}
                         ${vo.getAddr()}
                         ${vo.getReg_date()}
                     
             
             
                     정보 조회에 실패했습니다

번호	아이디	비밀번호	이름	나이	주소	가입일
${vo.getIdx()}	${vo.getId()}	${vo.getPw()}	${vo.getName()}	${vo.getAge()}	${vo.getAddr()}	${vo.getReg_date()}
정보 조회에 실패했습니다

getUserInfoById 메서드

public GreenVO getUserInfoById(String id) {
>
     GreenVO vo = new GreenVO(); 
>        
     try {
         conn = ds.getConnection();
         String sql = "select * from green where id = ?";
         ps = conn.prepareStatement(sql);
         ps.setString(1, id);
         rs = ps.executeQuery();
         if(rs.next()) {
             vo.setIdx(rs.getInt(1));
             vo.setId(rs.getString(2));
             vo.setPw(rs.getString(3));
             vo.setName(rs.getString(4));
             vo.setAge(rs.getInt(5));
             vo.setAddr(rs.getString(6));
             vo.setReg_date(rs.getDate(7));
         }
     }catch(Exception e) {
         e.printStackTrace();
     }finally {
         try {
             if(rs != null) {rs.close();}
             if(ps != null) {ps.close();}
             if(conn != null) {ps.close();}
         }catch(Exception e2) {
             e2.printStackTrace();
         }
     }
>
     return vo;
 }

6. 느낀 점

이번에 여러가지 태그를 쓰면서 확실하게 느꼈던 점은 추가된 기술들을 사용하면서 자바빈즈, 특히 자바의 클래스 객체에 대해서 좀 더 면밀히 와닿을 수 있었던 계기가 되었던 것 같습니다. 물론 이전에도 학원에서 객체를 배우면서 예시를 직접 만들어보며 클래스를 이용한 인스턴스 생성 및 메서드 정의, 사용 방법들을 익힐 수 있었지만, DB를 연동하는 과정에서 사용되는 DAO나 요청 정보를 전달할 때 사용하는 VO 객체를 직접 만들어보고 사용해보며 더욱 확실히 와닿을 수 있어서 해당 프로젝트를 하는 내내 되게 흥미로웠다고 생각됩니다.

[JSP/Servlet] JSP Model1 방식을 활용한 회원 가입 CRUD 홈페이지 제작기 | with 스크립틀릿

Tue, 13 Aug 2024 08:21:45 GMT

1. 서론

학원을 다닌 지 한 달 반이 다 되어갈 무렵 JSP와 서블릿을 거의 마치게 되면서 여태껏 배운 내용을 토대로 간단한 웹 홈페이지를 제작하게 되었습니다. 제작을 해보면서 느낀 점은 "근본이 중요하구나." 라는 점이었는데, 신기술을 배우기에 앞서 그 기술들의 시작점의 원리를 안다는 것은 앞으로 배워나갈 웹페이지 제작 신기술을 보다 더 잘 이해할 수 있다고 생각되기에 해당 결론에 도달하지 않았나 생각됩니다.

아무튼 해당 홈페이지는 Model1 방식 (JSP에서 프론트, 백, DB를 한꺼번에 처리하는 방식) 으로 제작되었으며 다음과 같은 서블릿 기술들이 사용되었습니다.

이번 홈페이지 로직에 사용된 JSP 모델 1 그림과 설명 > ![](https://velog.velcdn.com/images/re_go/post/cbd8d9e0-e235-434f-bd2b-59baa8060e71/image.png) > (자료 출처 : https://johnmarc.tistory.com/6) > 1. 사용자가 JSP 페이지에 요청을 보냄 2. JSP에서 받은 요청 정보를 세팅한 뒤 직접 DB에 쿼리문을 전달하고 결과값을 반환 받음 3. 반환 받은 결과값을 토대로 스크립틀릿으로 직접 출력하거나, 따로 출력만 담당하는 페이지를 리다이렉트, 혹은 인클루드(액션 태그)를 이용해 페이징 처리

2. 프로젝트 파일 구성

우선 프로젝트는 다음과 같이 구성되어 있으며, 라이브러리리는 DB 연동을 위한 OJDBC6 버전을 사용했습니다.

3. 오라클 DB 테이블 구성

오라클 DB의 경우 멤버 테이블과 시퀀스 하나씩 만들어 줬습니다.

create table member(
    no number primary key,
    id varchar2(20) not null,
    pw varchar2(20) not null,
    name varchar2(20) not null,
    age number not null,
    addr varchar2(50),
    reg_date Date
);
>
create sequence member_seq start with 1 increment by 1;

4. 전체 로직 설명

index.js

가장 기본적인 메인 페이지이며, 스타일은 table을 중심으로 제작되었습니다. 각 버튼을 클릭하면 예외 처리 함수들이 실행된 뒤 각 JSP 페이지로 이동 처리를 하였습니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>




Insert title here
// 스타일



> HTML 코드

    
        
            
                
                    회원 정보 관리
                
            
            
                
                    아이디
                    
                
                
                    비밀번호
                    
                
                
                    이름
                    
                
                
                    나이
                    
                
                
                    주소

view_all.jsp

DB에 등록된 모든 사용자의 정보를 볼 수 있는 곳으로 전체보기 버튼을 눌러서 확인할 수 있을 뿐만 아니라 사용자가 삽입 및 삭제 행위를 할 때에도 해당 페이지로 리다이렉트 되게 되어있는데요.

이때 해당 페이지는 index.js를 include 액션 태그로 포함시켜 등록을 마친 사용자 정보를 바로 한 번에 확인할 수 있도록 구성했으며, 그래서 사용자는 실제로 index.js (정보 입력창)이 포함된 결과 창을 같이 확인할 수 있게 됩니다.

<%@page import="org.joonzis.db.DBConnect"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>




Insert title here


    // index.jsp 페이지 포함
    
>    
    
 
 

>    
    <%
    // DB 사용 준비
    Connection conn = null;
    PreparedStatement ps = null;
    ResultSet rs = null;
    try {
        conn = DBConnect.getConnection();
>
        String sql = "select * from member";
>        
        ps = conn.prepareStatement(sql);
        rs = ps.executeQuery();
>
    %>
    // HTML 화면 처리
    member 테이블의 전체 데이터
    
                // 조건문으로 처리할 데이터가 없다면 없음을, 있으면 데이터를 가져와 출력
                 <%if(!rs.next()){ %>
                     
                 <%}else{
                     do{%>
                         
                     <%}while(rs.next());%>
                 <%}%>
             
        
            
                회원번호 
                아이디 
                비밀번호 
                이름 
                나이 
                주소 
                가입일 
            
        
        
             member 데이터가 없습니다.

                             <%= rs.getInt(1) %>             
                             <%= rs.getString(2) %>             
                             <%= rs.getString(3) %>             
                             <%= rs.getString(4) %>             
                             <%= rs.getInt(5) %>             
                             <%= rs.getString(6) %>             
                             <%= rs.getDate(7) %>             
                         
        
    
    <%        
// 예외 처리
    } catch (Exception e) {
        e.printStackTrace();    
        try {
            conn.rollback();
        } catch (Exception e2) {
            e2.printStackTrace();
        }
    }finally {
        try {
            if(ps != null) {ps.close();}
            if(conn != null) {conn.close();}
        } catch (Exception e2) {
            e2.printStackTrace();
        }
    }
    %>

회원번호	아이디	비밀번호	이름	나이	주소	가입일
member 데이터가 없습니다.
<%= rs.getInt(1) %>	<%= rs.getString(2) %>	<%= rs.getString(3) %>	<%= rs.getString(4) %>	<%= rs.getInt(5) %>	<%= rs.getString(6) %>	<%= rs.getDate(7) %>

insert_one.jsp

해당 페이지의 경우 '회원가입' 으로 보시는 것도 맞으며, 해당 예외처리를 마치고 submit 되어 넘어온 정보를 토대로 파라미터를 저장한 뒤 오라클 DB와 연결하는 작업을 거쳐 해당 쿼리에 저장문을 작성함으로 DB 등록을 마치도록 했는데요.

리다이렉트로는 view_all 페이지로 이동시켜 그 결과값을 확인할 수 있도록 하였습니다.

<%@page import="org.joonzis.db.DBConnect"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    // 정보 전달 값 획득
    request.setCharacterEncoding("UTF-8");
    String id = request.getParameter("id");
    String pw = request.getParameter("pw");
    String name = request.getParameter("name");
    int age = Integer.parseInt(request.getParameter("age"));
    String addr = request.getParameter("addr");
>
    // DB 사용 준비
    Connection conn = null;
    PreparedStatement ps = null;
>    
    try {
        conn = DBConnect.getConnection();
        // 쿼리값 설정
        String sql = "insert into member(no, id, pw, name, age, addr, reg_date)" + 
                     "values(member_seq.nextval, ?, ?, ?, ?, ?, sysdate)";
        > 오라클 DB의 해당 쿼리(테이블의 행)에 전달 받은 파라미터들을 등록
        ps = conn.prepareStatement(sql);
        ps.setString(1, id);
        ps.setString(2, pw);
        ps.setString(3, name);
        ps.setInt(4, age);
        ps.setString(5, addr);
        // 쿼리 실행
        int result = ps.executeUpdate();
        // 콘솔로 결과 출력 후 view_all 페이지 리다이렉트
        if(result > 0) {
            System.err.println("데이터 추가 완료");
        }else {
            System.out.println("데이터 추가 실패");
        }
        response.sendRedirect("view_all.jsp");
    } catch (Exception e) {
        e.printStackTrace();    
        try {
            conn.rollback();
        } catch (Exception e2) {
            e2.printStackTrace();
        }
        response.sendRedirect("view_all.jsp");
    }finally {
        try {
            if(ps != null) {ps.close();}
            if(conn != null) {conn.close();}
        } catch (Exception e2) {
            e2.printStackTrace();
        }
    }
%>

remove_one.jsp

해당 설명은 받아오는 파라미터의 개수와 쿼리 부분만 다르고 나머지는 insert.jsp와 동일합니다.

<%@page import="org.joonzis.db.DBConnect"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
>
request.setCharacterEncoding("UTF-8");
String id = request.getParameter("id");
String pw = request.getParameter("pw");
>
Connection conn = null;
PreparedStatement ps = null;
>
try {
>        
    conn = DBConnect.getConnection();
    String sql = "delete from member where id = ? AND pw = ?"; 
>
    ps = conn.prepareStatement(sql);
    ps.setString(1, id);
    ps.setString(2, pw);
    int result = ps.executeUpdate();
    if(result > 0) {
        System.err.println("데이터 삭제 완료");
    }else {
        System.out.println("데이터 추가 실패");
    }
    response.sendRedirect("view_all.jsp");
} catch (Exception e) {
    e.printStackTrace();    
    try {
        conn.rollback();
    } catch (Exception e2) {
        e2.printStackTrace();
    }
    response.sendRedirect("view_all.jsp");
}finally {
    try {
        if(ps != null) {ps.close();}
        if(conn != null) {conn.close();}
    } catch (Exception e2) {
        e2.printStackTrace();
    }
}
%>

update_one.jsp, update.jsp

이 부분은 설명할 부분이 좀 긴데요. 일단 사용자한테 전달 받는 값은 아이디와 비밀번호로 동일한데, 해당 값을 받아 DB에 등록되어 있는 해당 사용자의 정보(로우, 행)를 받아옵니다. (select 부분)
그리고 받아온 정보를 토대로 사용자에게 HTML 부분에서 입력을 할 수 있게끔 해당 정보들(rs의 값들)을 스크립틀릿 형태로 input에 뿌려 놓는데요. 변경을 불가능하게 만들 값은 hidden 속성을 주거나, 아니면 그냥 input만 빼거나, readOnly 속성을 주는 방법으로 사용자가 수정할 값을 변경 못하게끔 막아놓습니다.
그 나머지 변경 가능한 정보는 사용자가 인풋 창에 입력하게끔 해놓고 버튼을 누르면 update 함수가 실행되며, 해당 정보들이 모두 존재해 있는 상태인지 아닌지를 예외처리 한 뒤 정보들이 빠짐 없이 입력된 상태라면 (누락이 되지 않은 상태라면) update.jsp를 실행시켜서 insert, remove_one.jsp 와 동일하게 해당 행을 업데이트 시켜주도록 정보를 넘겨줍니다. (action으로 경로를 지정하고 submit으로 정보를 넘겨줌)

이 부분은 주석으로 이해하기에는 순서가 좀 섞여있어서 제가 위에서 설명 드린 내용들을 번호로 지정해서 순서 순으로 보시도록 해놓겠습니다.

<%@page import="org.joonzis.db.DBConnect"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>




Insert title here

// ★ 3번 순서 ★


    
>    
    
 
 

>    
    <%
    // ★ 1번 순서 ★
    request.setCharacterEncoding("utf-8");
    response.setContentType("text/html; charset=UTF-8");
    String id = request.getParameter("id");
    String pw = request.getParameter("pw");
    Connection conn = null;
    PreparedStatement ps = null;
    ResultSet rs = null;
>    
    try {
        conn = DBConnect.getConnection();
>        
        String sql = "select * from member where id = ? and pw = ?";
>        
        ps = conn.prepareStatement(sql);
        ps.setString(1, id);
        ps.setString(2, pw);
        rs = ps.executeQuery();
>    
    %>
    // ★ 2-1번 순서 ★
    <%=id %> 회원의 데이터
    
        
                    // ★ 2-2번 순서 ★
                     <%if(!rs.next()){ %>
                         
                     <%}else{%>
                             
                     <%}%>
                 
            
                
                    회원번호 
                    아이디 
                    비밀번호 
                    이름 
                    나이 
                    주소 
                    가입일 
                
            
            
                 member 데이터가 없습니다.

                                 
                                     <%= rs.getInt(1) %>
                                       
                                             
                                 
                                     <%= rs.getString(2) %>
                                             
                                 
                                      
                                             
                                 
                                     
                                             
                                 
                                      
                                             
                                 
                                     
                                             
                                 
                                      
                                             
                             
            
            
                
                    
                        
                    
                
            
        
    
    <%        
>
    } catch (Exception e) {
        e.printStackTrace();    
        try {
            conn.rollback();
        } catch (Exception e2) {
            e2.printStackTrace();
        }
    }finally {
        try {
            if(ps != null) {ps.close();}
            if(conn != null) {conn.close();}
        } catch (Exception e2) {
            e2.printStackTrace();
        }
    }
    %>

view_one.jsp

특정 사용자를 검색합니다. 설명은 ResertSet 부분(쿼리 셀렉트를 위한 객체)과 executeQuery 부분을 제외한 insert_one.jsp 등과 같은 페이지 설명과 동일합니다.

<%@page import="org.joonzis.db.DBConnect"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>




Insert title here


    
>    
    
 
 

>
    <%
    String id = request.getParameter("id");
    Connection conn = null;
    PreparedStatement ps = null;
    ResultSet rs = null;
>
    try {
        conn = DBConnect.getConnection();
>
        String sql = "select * from member where id = ?";
>
        ps = conn.prepareStatement(sql);
        ps.setString(1, id);
        rs = ps.executeQuery();
>
    %>
    member 테이블의 전체 데이터
    
                 <%if(!rs.next()){ %>
                     
                 <%}else{%>
                         
                 <%}%>
             
        
            
                회원번호 
                아이디 
                비밀번호 
                이름 
                나이 
                주소 
                가입일 
            
        
        
             member 데이터가 없습니다.

                             <%= rs.getInt(1) %>             
                             <%= rs.getString(2) %>             
                             <%= rs.getString(3) %>             
                             <%= rs.getString(4) %>             
                             <%= rs.getInt(5) %>             
                             <%= rs.getString(6) %>             
                             <%= rs.getDate(7) %>             
                         
        
    
    <%        
>
    } catch (Exception e) {
        e.printStackTrace();    
        try {
            conn.rollback();
        } catch (Exception e2) {
            e2.printStackTrace();
        }
    }finally {
        try {
            if(ps != null) {ps.close();}
            if(conn != null) {conn.close();}
        } catch (Exception e2) {
            e2.printStackTrace();
        }
    }
    %>

회원번호	아이디	비밀번호	이름	나이	주소	가입일
member 데이터가 없습니다.
<%= rs.getInt(1) %>	<%= rs.getString(2) %>	<%= rs.getString(3) %>	<%= rs.getString(4) %>	<%= rs.getInt(5) %>	<%= rs.getString(6) %>	<%= rs.getDate(7) %>

5. 느낀 점

프로젝트를 진행하면서 참... MVC1 패턴이 저에게는 되게 힘들다는 생각이 많이 들었습니다. (특히 스크립틀릿 언어를 사용하면서....) 무엇보다도 모듈화가 되어있지 않고 단순히 JSP to JSP 형식으로 페이지 이동이 되다보니 프로젝트를 하기 전에는 "깔끔해서 괜찮네?" 라고 생각했는데 막상 하고보니 코드가 막 뒤섞여 있어서 차라리 모듈화를 하는 MVC2 패턴이 훨씬 낫다는 생각이 들었습니다.
예전에 공부 했던 내용들 중에 리다이렉트나 스크립틀릿의 사용에 대해서 예제만 풀어서 정리하다보니 이해가 아쉬웠는데, 이번에 간단한 프로젝트를 해보면서 보다 더 와닿게 알 수 있었습니다. 물론 JSP의 근본을 배우고 있다보니 이것보다 더 훨씬 쉬운 기술들이 깔려있어서 얼른 배워보고 싶다는 느낌도 들었습니다.

[JSP&Servlet] JSTL 설치 및 표준 태그 라이브러리 종류와 사용법 알아보기

Wed, 07 Aug 2024 09:19:34 GMT

1. JSTL 이란?

JSTL (JavaServer Pages Standard Tag Library)이란 JSP에서 사용할 수 있는 표준 태그 라이브러리입니다. 좀 더 구체적으로 말해보자면 JSTL은 JSP 페이지에서 자주 사용되는 스크립틀릿 과 같은 작업을 단순화해서, 더 읽기 쉽고 유지보수하기 쉬운 JSP 페이지를 작성할 수 있도록 도와주는 태그 라이브러리인데요. 여러 라이브러리가 있지만 대표적으로 쓰이는 태그 라이브러리는 코어 라이브러리와 포맷팅 라이브러리가 있습니다.

(자료 출처 : https://medium.com/@wjdcjf1229/%EC%BD%94%EC%8A%A4%ED%83%8043%EC%9D%BC%EC%B0%A819-01-03-%EC%BF%A0%ED%82%A4%EC%99%80-%EC%84%B8%EC%85%98-%EC%9D%B5%EC%8A%A4%ED%94%84%EB%A0%88%EC%85%98-%EC%96%B8%EC%96%B4-jstl-%ED%95%84%ED%84%B0-719b8981a466)

2. JSTL의 사용을 위한 설정 단계

JSTL을 설정하기 위해서는 해당 라이브러리를 다음 사이트에서 다운 받아 적용하고자 하는 프로젝트의 빌드 패스에 추가를 해주면 됩니다.

그 다음 사용하고자 하는 태그의 라이브러리리의 경로를 JSP 페이지 최상단에 지시어로 지정해주면 됩니다. 이때 prefix는 해당 태그의 접두어가 되고, uri는 해당 태그 라이브러리의 주소를 의미합니다.

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

만약 여기까지 진행을 하셨다면 이제는 태그들의 종류를 알아볼 차례인데요. 태그는 대략 네 가지 태그가 있으나, 주로 쓰이는 태그는 코어 태그와 포맷팅 태그로서 이번 섹션에서는 코어 태그와 포맷팅 태그를 소개해 드리는 시간을 가져보도록 하겠습니다.

3. 코어 태그 종류

코어 태그는 크게 변수를 생성하거나 삭제하는 태그와 제어문을 지원하는 태그로 나뉘는데요. 이들 태그는 특히 EL과 및 스크립틀릿과 같이 사용되어 상황에 따라 유연한 코드 작성이 가능합니다.

이러한 코어 태그는 접두어로 c: 가 붙으며, 그 뒤에 각 기능과 속성을 작성하여 사용합니다. 특히 속성에 대한 값을 작성할 때에는 문자열로 필히 감싸서 작성을 하여야 하며, 사용할 때에도 EL 처럼 그냥 변수명을 작성해주면 됩니다.

이러한 코어 태그를 사용하기 위해선 다음과 같은 taglib을 JSP 페이지 상단에 임포트 해주어야 합니다.

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

JSP에서 사용할 변수를 만들 때 사용합니다. var은 변수의 이름이고, value는 사용할 값을 의미하는데요. 이때 value의 값에 들어가는 값들은 타입에 따라 자동으로 타입이 적절하게 변환되기 때문에 사용에 크게 신경을 쓰지 않아도 됩니다. 마지막으로 scope는 해당 변수의 유효 범위로 pageContext -> request, session, application 값 중 사용할 수 있는 범위를 작성해 주면 됩니다.

그리고 EL 표기법을 사용할 경우 그 안에 연산까지 가능하며, 특히 변수 명이 중복된 상태에서 값만 다르게 설정한 경우 마지막에 적용 된 c:set 태그의 값이 적용됩니다. (덮어쓰기)

JSP에서 변수를 화면에 출력할 때 사용합니다. value에는 c:set에서 생성한 변수 이름이나 속성(setAttribute)를 적어주어 화면에 출력하면 됩니다.)

 +   
 =

c:out과 사용법은 동일하며, 삭제할 jstl 변수의 이름을 value 속성의 값으로 작성해주면 됩니다.




>



 +   
 =

프로그래밍 언어에서의 if문과 동일하며, 단일 조건을 비교할 때 사용되는 jstl 태그입니다. 물론 단일 조건을 비교할 때 사용 가능하므로 else if와 같은 다른 조건문을 붙이지는 못합니다.

이때 사용되는 관계 연산자는 엔티티 연산자와 혼용하여 사용 가능합니다.

(자료 출처 : https://yunamom.tistory.com/179#google_vignette)


   첫번째 수 :  
   두번째 수 :


    ${param.num1}


    ${param.num2}

, ,

choose 안에 작성하는 태그들로 choose가 조건문의 모태가 되는 태그이며, when에 조건값을 c:if와 똑같이 넣어줍니다. 이때 when은 if문과 else-if문의 역할을 중복으로 수행햐며, otherwise는 else문의 역할을 수행합니다.

입력 페이지


  국어 점수 :  
  영어 점수 :  
  수학 점수 :

처리 페이지

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
>




Insert title here


    
>
    
           
                       
           
           
                       
           
           
                       
           
           
                       
           
           
               
           
       
>
       
     
         
     
     
         
     
 
>
       국어 : 점
       영어 : 점
       수학 : 점
       평균 : 
       학점 : 
       합격 여부 :

forEach는 JS에서의 forEach와 같이 기본적인 for문을 지원해주는 태그인데요. 이때 쓰이는 속성은 임의 속성과 배열 속성에 따라 두 가지 버전으로 나뉩니다.

배열을 전달 받을 경우로, paramValues나 배열 변수의 값이 들어왔을 때 해당 item의 값들을 순차적으로 나열하게 해주는 속성 순서입니다.


    <% 
      String[] names = {"김", "이", "박", "최", "정"};
      pageContext.setAttribute("NAMES", names);
      %>
>
    // 조건문을 배열의 길이만큼 돌면서 이름이 '이' 와 같은 경우만 출력
      
          
            ${name}

가장 기본적인 형태의 for문으로 var(변수 선언), begin,end(범위), step(증가 값)으로 구성된 foreach문입니다.

 
 // -2부터 10까지 1씩 증가하되 3의 배수인 경우만 출력
      
          
              ${i}

특정 구분자(, 또는 ^ 또는 공백이나 ; 등)를 기준으로 문자열이나 배열의 각 단어들을 분리한 뒤 개별 이름으로 꺼내서 출력하거나 사용할 때 사용됩니다. 마치 JS의 split 메서드와도 같은 원리죠.


    
>
    
        ${animal }

4. 포매팅 태그 종류

특정 변수를 수학적으로 포맷팅 할 때 사용하는 태그로 대표적인 태그는 fmt:formatNumber, fmt:formatDate 태그가 있습니다. 이 태그를 사용하고자 할경우 다음 taglib을 JSP 페이지 위에 임포트 한 뒤 사용해주면 됩니다.

<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

fmt:formatNumber

숫자를 특정 형식으로 포맷합니다. 주로 통화, 퍼센트, 소수점 자리수 조정 등을 위해 사용된다고 하네요.

value : 입력 값의 이름을 의미합니다.
groupingUsed : 1000 단위 기준으로 구분 기호를 넣을지 말지를 정할 때 사용하는 속성으로 YES를 입력하면 , 기호로 숫자가 묶이고, NO를 입력하면 구분자가 적용되지 않습니다.
pattern : 선택적 자리 표시와 필수적 자리 표시를 표현할 때 사용합니다. 가령 #,##0,000,00 이라고 한다면 만 단위까지는 선택적으로 넣어도 되나, 그 밑으로는 필수적으로 값이 있어야 함을 의미합니다.
type : 숫자 형식의 타입을 지정할 때 사용하며, number(기본 양식), currency(통화), percent(퍼센트) 등의 숫자 타입을 지정할 수 있습니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>




Insert title here


    
>    
    formatNumber의 groupingUsed
    천 단위 구분 기호 + 소수 3자리 :  

    천 단위 구분 기호 없이 소수 3자리 : 
         

>
    
>
    formatNumber의 pattern
    천 단위 구분 기호 + 소수 2자리 : 
         

    천 단위 구분 기호 + 정수 : 
         

>
    
>    
    formatNumber의 type
    퍼센트 : 

    원화 표기 : 

    달러 표기 : 
>

fmt:formatDate

날짜 형식의 변수를 포매팅 할 때 사용하는 태그 라이브러리로 type 속성과 dateStyle(날짜의 표현 길이 정도), timeStyle(시간의 표현 길이 정도), pattern(사용자가 패턴 지정 가능) 속성으로 구성됩니다.

<%@page import="java.util.Date"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>




Insert title here


    
>    
    formatDate의 타입
    date 타입 :  

    time 타입 :  

    both 타입 :  

>    
    
>
    formatDate의 스타일
    default :  

    short :  

    medium :  

    long :  

    full :  

>                
    
>                
    formatDate의 패턴
    사용자 패턴 :     
>

5. 그 외 함수들

그 외 함수는 함수 태그와 sql 태그는 사용 빈도가 상대적으로 떨어져 "아~ 그냥 이런게 있군요?" 정도만 알아두시면 될 것 같습니다. (궁금하신 분들은 해당 페이지를 서칭하시면 되겠습니다.)

[JSP&Servlet] 자바빈의 정의와 실제 사용을 위한 표준 액션 태그들

Tue, 06 Aug 2024 10:57:44 GMT

1. 자바빈이란?

자바빈(Java Bean) 이란 서버측에서 특정 형식으로 정보를 저장하고자 개발자가 작성한 클래스를 의미하는데요. 대표적으로 DTO와 VO가 있습니다. 그리고 DTO와 VO 둘 다 서버측에서 객체를 생성하기 위해 정의된 클래스라는 공통점이 있지만, 차이점을 살펴보자면 DTO는 주로 데이터 전송을 목적으로 하고, VO는 값 자체를 표현하고자 할 때 사용한다고 하네요. (뭐... 둘 중 아무거나 상관 없다고 스프링 창시자도 말씀은 하셨다면 이걸로 항상 갑론을박이라고 합니다.)

(자료 출처 : https://maenco.tistory.com/entry/Java-DTO%EC%99%80-VO%EC%9D%98-%EC%B0%A8%EC%9D%B4)

2. 자바빈의 필수 구성 요소

이러한 자바 빈도 결국은 클래스라는 점에서 필수 구성 요소는 다음과 같은데요.

반드시 디폴트 패키지를 제외한 특정 패키지에 작성 및 저장해야 한다.
필드 + 생성자 + getter/setter 로 구성되어야 한다.
필드의 프로퍼티는 반드시 private 접근자로 작성한다.
생성자는 jsp:useBean에서 사용을 하기 위해 반드시 디폴트 생성자를 직접 작성해야 한다.
getter/setter는 반드시 public 으로 작성한다.

그리고 다음의 규약을 지켜 작성한 자바빈의 예시는 다음과 같습니다. (그냥 단축키 모음에서 우클릭 후 getter와 setter, field를 편하게 생성하면 됩니다.)

package com.practice.test
>
// 필드 (private)
public class MemberDTO {
    private String id;
    private String pw;
    private String name;
    private int age;
    private String addr;
    private String gender;
    private String[] hobbies;
    private String[] likeFoods;
    private String[] dislikeFoods;
>
    // 기본 생성자
    public MemberDTO() {}
>    // 풀 생성자
    public MemberDTO(String id, String pw, String name, int age, String addr, String gender, String[] hobbies,
            String[] likeFoods, String[] dislikeFoods) {
        super();
        this.id = id;
        this.pw = pw;
        this.name = name;
        this.age = age;
        this.addr = addr;
        this.gender = gender;
        this.hobbies = hobbies;
        this.likeFoods = likeFoods;
        this.dislikeFoods = dislikeFoods;
    }
>    // 게터와 세터(public)
    public String getId() {
        return id;
    }
>
    public void setId(String id) {
        this.id = id;
    }
>
    public String getPw() {
        return pw;
    }
>
    public void setPw(String pw) {
        this.pw = pw;
    }
>
    public String getName() {
        return name;
    }
>
    public void setName(String name) {
        this.name = name;
    }
>
    public int getAge() {
        return age;
    }
>
    public void setAge(int age) {
        this.age = age;
    }
>
    public String getAddr() {
        return addr;
    }
>
    public void setAddr(String addr) {
        this.addr = addr;
    }
>
    public String getGender() {
        return gender;
    }
>
    public void setGender(String gender) {
        this.gender = gender;
    }
>
    public String[] getHobbies() {
        return hobbies;
    }
>
    public void setHobbies(String[] hobbies) {
        this.hobbies = hobbies;
    }
>
    public String[] getLikeFoods() {
        return likeFoods;
    }
>
    public void setLikeFoods(String[] likeFoods) {
        this.likeFoods = likeFoods;
    }
>
    public String[] getDislikeFoods() {
        return dislikeFoods;
    }
>
    public void setDislikeFoods(String[] dislikeFoods) {
        this.dislikeFoods = dislikeFoods;
    }
}

3. 표준 액션 태그

앞서 살펴본 자바빈즈(JavaBeans)를 보다 쉽게 사용하기 위해서 JSP에는 표준 액션 태그는 JSP(JavaServer Pages)라는 태그가 존재하는데요. 그래서 JSP 페이지와 같은 웹 애플리케이션의 구성 요소를 다루기 위해 자주 사용되는 자바빈즈를 쉽게 생성, 수정, 읽기 및 관리를 하기 위해 우리는 표준 액션 태그를 사용하게 되는 거죠. 그럼 JSP에서 사용되는 대표적인 액션 태그들을 하나씩 살펴보도록 하겠습니다.

그럼 그 전에 다음과 같은 자바빈과 JSP 페이지가 있다고 하겠습니다.

JSP 페이지

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>




Insert title here


 
     이름  
     나이  
     키  
     몸무게  
     성별  
     주소

자바빈즈

package com.practice.test;
>
public class PersonVO {
 private String name;
 private int age;
 private double height;
 private double weight;
 private String gender;
 private String addr;
>    
 public PersonVO() {}
>
 public PersonVO(String name, int age, double height, double weight, String gender, String addr) {
     super();
     this.name = name;
     this.age = age;
     this.height = height;
     this.addr = addr;
     this.gender = gender;
 }
>
 public double getWeight() {
     return weight;
 }
>
 public void setWeight(double weight) {
     this.weight = weight;
 }
>
 public String getGender() {
     return gender;
 }
>
 public void setGender(String gender) {
     this.gender = gender;
 }
>
 public String getName() {
     return name;
 }
>
 public void setName(String name) {
     this.name = name;
 }
>
 public int getAge() {
     return age;
 }
>
 public void setAge(int age) {
     this.age = age;
 }
>
 public double getHeight() {
     return height;
 }
>
 public void setHeight(double height) {
     this.height = height;
 }
>
 public String getAddr() {
     return addr;
 }
>
 public void setAddr(String addr) {
     this.addr = addr;
 }    
}

jsp:useBean

JSP 페이지에서 자바빈즈를 사용하기 위해 필요한 인스턴스를 생성하거나, 이미 생성된 인스턴스를 찾아서 사용할 수 있게 합니다. 설정하는 속성으로는 세 가지가 존재하는데, 첫번째(id)는 JSP 페이지에서 해당 자바빈즈를 식별하기 위한 별명이고, 두번째(class)는 해당 빈즈의 패키지 경로, 세번째(scope) 는 해당 빈즈가 어느 영역까지(pageContext부터 Application까지) 유효한지를 설정할 수 있습니다.

jsp:setProperty

사용자가 입력한 값의 속성(name) 중 특정 속성을 특정 자바빈즈 객체의 속성(필드의 값)으로 지정할 때 사용하는 액션 태그로, 이때 자바빈즈에 정의되어 있는 필드의 각 멤버 이름과 사용자가 요청할 때의 파라미터들의 name 속성의 이름은 꼭 일치해야 하며, 개수 또한 일치해야 합니다.

JSP 페이지에서 사용자가 요청할 값들


 이름  
 나이  
 키  
 몸무게  
 성별  
 주소

자바빈즈에 설정 된 멤버 필드들

private String name;
private int age;
private double height;
private double weight;
private String gender;
private String addr;

이러한 setProperty 액션 태그의 첫번째 속성은 전달할 값을 의미하며(왠만해선 *를 넣어주자), 두번째 속성은 지정된 자바빈즈의 별명, 즉 useBean에 설정된 해당 자바빈즈의 별명(id)를 넣어주면 됩니다.

// property에  파라미터를 자바빈즈의 특정 멤버에 명시적으로 넣고자 할 경우 다음과 같이 작성
// 단 이럴 경우 나머지 사용자가 전달한 값들은 무시됨.


>
// 그래서 보통은 사용자의 입력 값들(name)과 자바빈즈의 멤버 필드의 이름을 꼭 일치시킨 뒤
// 다음과 같이 아스터리스크를 붙여 한꺼번에 자동으로 입력되게 하는 편임.

jsp:getProperty

특정 별명으로 지정된 자바빈즈 객체의 특정 속성 값을 읽어와서 JSP 페이지에 출력합니다.


    이름 : 
    나이 : 
    키 : 
    몸무게 : 
    성별 : 
    주소 :

jsp:include

현재 페이지에서 다른 페이지를 포함하면서 포함 된 페이지에 파라미터를 전달할 수 있는 액션 태그입니다. 주로 jsp:param과 자주 쓰이며 해당 include로 지정되어 파라미터를 전달 받은 페이지 에서는 해당 파라미터를 활용하여 사용하거나 출력할 수 있습니다.

특히 이 액션 태그는 include 지시어와 동일하다는 특징과, 데이터를 전달할 수 있고 없고의 차이점 또한 존재합니다.

JSP 페이지 1

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>




Insert title here


 페이지 1 입니다.
>
 

>   
 
>
 
 <%@ include file="page2.jsp" %>
>    
 
 
     
     
     
 
>

JSP 페이지 2

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<%
 <%-- params 액션 태그에 의해 전달 받은 파라미터들을 활용 가능 --%>
 request.setCharacterEncoding("utf-8");
 String name = request.getParameter("name");
 String age = request.getParameter("age");
 String addr = request.getParameter("addr");
%>




Insert title here


 include2.jsp 페이지
 
     이름 : <%=name %>
     나이 : <%=age %>
     주소 : <%=addr %>

jsp:forward

JSP 페이지에서 다른 JSP 페이지 또는 서블릿으로 요청을 포워딩하는 데 사용됩니다. 요청을 포워딩하면, 현재 페이지의 처리가 종료되고 요청이 다른 페이지로 전달됩니다. 사용법은 include 태그와 동일하며,

단일 태그로 사용할 경우 기존에 요청 받은 정보들을 타겟 페이지로 전달하고 종료하지만, 이중 태그로 사용하여 param 태그와 같이 사용할 경우 기존의 요청 정보 + 새로운 파라미터 값을 추가하여 타겟 페이지에 전달할 수 있습니다.

JSP 페이지 1

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% 
request.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=UTF-8");
%>




Insert title here


    페이지 1 입니다.

JSP 페이지2

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    request.setCharacterEncoding("utf-8");
    String name = request.getParameter("name");
    String age = request.getParameter("age");
    String addr = request.getParameter("addr");
%>




Insert title here


    페이지 2 입니다.
    
        이름 : <%=name %>
        나이 : <%=age %>
        주소 : <%=addr %>

jsp:param

include나 forward 액션 태그에 속성과 값으로써 문자열 형식으로 전달하는 액션 태그로, 타겟 페이지에 추가적인 정보를 제공하고자 할 때 사용됩니다. (include 및 forward 액션 태그 설명 참조)

[JSP&Servlet] 스크립틀릿의 새로운 대체제, EL 표기법

Tue, 06 Aug 2024 09:08:59 GMT

1. 기존 스크립틀릿과의 작성 차이점

EL(Expression Language)는 JSP에서 사용하는 새로운 스크립트 언어로서 기존의 복잡했던 자바 코드 표현 체계인 스크립틀릿을 대체하기 위해 만들어졌는데요. 이러한 EL은 쉽게 사용자의 입력 데이터를 가져오고, 연산하여 출력하는 역할을 스크립틀릿보다 더 쉽게 할 수 있는데요.

왜 그런지를 이 둘의 차이점을 알아봅시다. 다음과 같은 코드가 있다고 칩시다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%
 int total = 0;
 for(int i = 1 ; i <= 100 ; i++){
     total += i;
 }
 pageContext.setAttribute("TOTAL", total);
 %>




Insert title here


>

위 코드에는 1부터 100까지를 더해서 body에 출력하려는 코드인데요. 기존의 스크립틀릿 언어로 작성한다면 어떻게 해야할까요?

<%=total%>
<%=pageContext.getAttribute("TOTAL")%>

그리고 그럼 위의 코드를 대신해 EL 표기법으로 코드를 작성해 보면 다음과 같이 작성할 수 있답니다.

${TOTAL}

흠... 이렇게 봐서는 차이점을 느끼지 못하시겠다고요? 좋습니다. 그럼 다음 코드를 한 번 살펴보도록 하죠.

2. 코드의 간결화

다음과 같이 사용자의 주문을 받는 특정 화면이 있다고 생각해 봅시다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>




Insert title here


    
        배다른 민족
         주문자  
        하와이안피자
        불고기피자
        허니콤보치즈피자
        이태리안핫소스피자
        쉬림프바질피자

그럼 개발자는 사용자의 주문(요청)을 받아서 처리를 해줘야겠죠?

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
>
<% 
    String name = request.getParameter("name");
    String[] orders = request.getParameterValues("order");
>
    pageContext.setAttribute("orders", orders);
%>    




Insert title here


    주문자 : <%= name %> 

    주문하신 음식 : <%= String.join(" ", (String[]) pageContext.getAttribute("orders")) %>

음... 꽤 복잡해 보이죠? 그래서 이 코드를 EL 표기법으로 한 번 바꿔보면 다음과 같이 작성할 수 있답니다!

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
>
<% 
    String name = request.getParameter("name");
    String[] orders = request.getParameterValues("order");
>
    request.setAttribute("name", name);
    request.setAttribute("orders", orders);
%>    




Insert title here


    주문자 : ${name} 

    주문하신 음식 : 
    
        ${order}

3. EL 작성의 조건

이처럼 기존의 스크립틀릿을 대체하여 코드를 보다 간결하게 작성할 수 있도록 해주는 EL 표기법에는 그 조건이 따르는데요. 그 조건은 바로 정보 저장 객체들(pageContext, request, session, application) 중에 하나의 속성으로서 저장되어야 사용이 가능하다는 것입니다. 바로 위의 코드를 살펴보면

request.setAttribute("name1", value1);
request.setAttribute("name2", value2);

이렇게 되어있는 코드가 보이시죠? 이것이 바로 request 객체에 속성들로 name라는 속성과 그 값(name)을, orders라는 속성과 그 값(orders)을 넣어준게 바로 이 코드였던거죠.

참고로 정보 저장 객체의 저장 및 유효 범위는 해당 링크를 참조해 주시기 바랍니다!

아무튼 이렇게 속성으로서 그 값이 저장이 되어 있어야 사용이 가능한 EL이지만, 물론 사용자가 전달한 파라미터 값, 즉 전달한 값이 있다면 EL로 표기가 가능한데요. 바로 직전에 주문 페이지에서 사용자가 요청한 정보가 request, 즉 파라미터 값으로 들어온다는 특성을 이용해 param과 paramvalues 객체를 다음과 같이 이용하면 되죠!

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
>




Insert title here


    주문자 : ${param.name}

    주문하신 음식 : ${paramValues.order[0]} ${paramValues.order[1]} ${paramValues.order[2]}

물론 앞전에서 출력 홈페이지에 pageContext로 속성을 설정해 준거라 해당 페이지에서 스크립틀릿을 쓰긴 했지만, 이전 페이지에서 request나 session로 속성을 설정해 줬다면 위의 코드와 같이 굳이 스크립틀릿 태그로 속성을 설정해줄 이유도 없겠지요.

이처럼 EL로 변수들에 접근할 때에는 파라미터의 경우 param(단수)와 paramValues(복수), 혹은 속성으로 설정한 경우 그냥 속성명을 적어주면 되는데요. 물론 속성의 경우 각 정보 저장 객체가 동일한 속성의 이름으로 저장을 했다면 그건 또 문제가 될 수 있겠죠? 그래서 다음 예제를 한 번 살펴보도록 하겠습니다.

4. 속성 중복 이름의 방지, Scope

스코프는 말 그대로 어떠한 정보 저장 객체에 해당 속성이 있는지를 구별할 때 사용하는 객체로, 정보 저장 객체인 pageContext, request, session, application에게 각각 부여되어 있으며, 사용법은 접미사로 Scope 라는 단어를 작성하면 됩니다.

좀 더 쉬운 이해를 위해 다음 예시 코드를 한 번 살펴볼까요?

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
>
<% 
    // 요청 파라미터에서 값 가져오기
    String name = request.getParameter("name");
    String order = request.getParameter("order");
>
    // 세션과 요청에 속성 설정
    session.setAttribute("name", name);
    session.setAttribute("orders", order);
>   
    request.setAttribute("name", "진상 손님");
    request.setAttribute("orders", "경찰을 불러서 퇴치를 했다!");
%>

위 코드에서는 request와 session의 속성으로 각각 같은 이름에 다른 값을 부여했는데요. 그래서 일반적인 접근 방법(그냥 속성의 이름을 쓰는 것)으로 접근한다면 다음과 같이 출력될 것입니다.

주문자 : ${name} 

주문하신 음식 : ${orders}

분명 주문자 명으로 하와이안피자를 불렀는데 나타난 정보는 다음과 같이 전혀 딴판인 정보가 나왔죠? 그 이유는 그냥 속성명만 지정할 경우 페이지에서부터 가장 가까운 정보 저장 객체의 속성을 접근하기 때문에 나타난 현상인데요. 이 페이지의 경우 pageContext는 설정되어 있지 않기 때문에 request에 설정된 각 속성들이 출력이 된 것이죠.

그래서 이런 상황을 대비하기 위해 스코프를 사용하면 다음과 같이 정상적으로 코드가 출력되는 모습을 확인하실 수 있으실 겁니다.





Insert title here


    
    Session Scope
    주문자 : ${sessionScope.name} 

    주문하신 음식 : ${sessionScope.orders}

[JSP&Servlet] 서블릿 실행 전 정보 처리를 지원하는 필터(Filter) 기능간단 개요

Mon, 05 Aug 2024 12:12:37 GMT

1. Filter란?

Filter란 클라이언트(Client)에서 서버(Server)로 요청이 들어오기 전 특정 서블릿을 데이터를 정제하거나 분기를 정하는 등의 목적으로 만들고자 할 때 사용하는 추상 인터페이스로, 클라이언트의 요청을 서버가 받아 메인 서블릿(컨테이너)에 넘기기 전 단계라고 보시면 됩니다.

(자료 출처 : https://wch18735.github.io/jsp/JSP_Servlet_Filter/)

이러한 필터는 주로 인터넷 뱅킹 사이트 같은 곳에서 민감한 개인 정보를 다루기 위해 사용자에게 추가적인 인증을 별도로 요구하는 용도로, 혹은 사용자가 입력한 로그인 값이 올바른지를 대조하는대에 사용되는 용도로 사용됩니다.

2. Filter의 용도 : 초기값 사용

앞서 살펴본 리다이렉션 섹션에서 혹시 눈치 채신 분들이 계실수도 있으실텐데요. 저는 그 섹션에서 session을 이용한 정보 전달과 리다이렉션 조합 부분에서 인코딩 세팅 작업을 하지 않고도 sub2 페이지에서 올바른 정보들을 출력할 수 있었습니다.

sub1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
 String name = request.getParameter("name");
 String age = request.getParameter("age");
>   
 session = request.getSession();
>    
 session.setAttribute("name", name);
 session.setAttribute("age", age);
>
 response.sendRedirect("sub2.jsp");  
%>

sub2.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
>




Insert title here


 사용자 정보
 name : ${name} 
 age : ${age}

어떻게 가능했던 걸까요? 네. 그렇습니다. filter를 구현하고 그 구현 정보를 web.xml에 등록했기에 가능한 일이였죠.

우선 web.xml에 해당 filter의 정보를 등록하기 위해 다음과 같은 태그 목록들을 web.xml에 삽입해 줍니다.



  
  EncodingFilter
  
  com.practice.test.EncodingFilter
  
  
    
    encoding
    utf-8
  
  
    
    contentType
    text/html; charset=UTF=8
  

>


  EncodingFilter
  /*

그 다음 작업으로는 web.xml에 등록했던 filter의 정보를 토대로 다음과 같이 filter를 구현하는 클래스를 아래와 같이 작성해야 하는데요.

package com.practice.test;
>
import java.io.IOException;
>
import javax.servlet.Filter;
>
public class EncodingFilter implements Filter{
>    
}

filter는 추상 인터페이스이기 때문에 인터페이스를 구현하는 쪽에서 해당 추상 메서드들을 구현해 주어야 하는데요. 보통은 init, doFilter, destroy 메서드를 구현합니다.

public class EncodingFilter implements Filter{
>
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
>
    }
>
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
>
    }
    @Override
    public void destroy() {}
}

그 다음 web.xml에서 정의한 filter 초기 객체의 값들을 사용하기 위해 필드로 다음 코드를 선언한 뒤 생성된 필드들에 init 메서드에 해당 파라미터 값들을 할당해 줍니다.

private String encoding;
private String contentType;
>
@Override
    public void init(FilterConfig filterConfig) throws ServletException {
        // encoding 파라미터의 값은 utf-8 이었음
        encoding = filterConfig.getInitParameter("encoding");
        // contentType 파라미터의 값은 text/html; charset=UTF=8 이었음
        contentType = filterConfig.getInitParameter("contentType");
    }

그 다음 doFilter 메서드에 각 객체로부터 문자 인코딩 방식과 컨텐츠 타입 인코딩 방식을 가져와 null일 경우, 그러니까 set 메서드로 설정을 해주지 않은 경우 파라미터 값들을 할당 받은 encoding과 contentType 변수의 값으로 각각 set 메서드를 호출한 뒤 할당해 줍니다.

if(request.getCharacterEncoding() == null) request.setCharacterEncoding(encoding);
if(response.getContentType() == null) response.setContentType(contentType);
// doFilter가 실행 되었다는 것을 확인하기 위한 콘솔 출력문
System.out.println("필터 초기화 완료");
// doFilter 작업이 끝난 뒤 request와 response 정보를 그제야 서블릿이나 JSP 페이지로 제어 전달
chain.doFilter(request, response);

그럼 다음과 같이 페이지를 이동할 때마다 filter가 발동 되어 다음과 같은 문구가 콘솔에 출력되는걸 확인할 수 있습니다.

3. Filter의 용도 : 로그인 유무 확인

앞서 살펴본 리다이렉션 색션에서 활용한 세션과 리다이렉션의 예제를 활용하여 사용자가 입력한 값 중 하나가 없을 경우 자연스럽게 로그인 창으로 리다이렉션 하는 코드를 만들어 볼겁니다.

우선 사용자에게 보여질 메인 화면을 다음과 같이 만듭니다. 이때 경로는 서버에 요청을 보낼 것이고, 해당 서블릿들은 @WebServlet 어노테이션으로 각자 매핑이 되어있기 때문에 절대경로로 해당 어노테이션 경로를 지정해 줍니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>




Insert title here


    
        유저 정보 확인    
        로그인 화면

이제 서블릿을 만들어줄 차례인데요. 서블릿은 경로대로 showUserInfo 하나와 moveLoginPage 서블릿을 각각 만들어 줍니다. 이 서블릿들은 말 그대로 서버에서 다른 페이지로 리다이렉트 시켜주려는 목적의 페이지들이죠.

1.showUserInfo 페이지

package com.practice.test;
>
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
>
@WebServlet("/showUserInfo")
public class showUserInfo extends HttpServlet {
    private static final long serialVersionUID = 1L;
>
    public showUserInfo() {
        super();
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.sendRedirect("/project/showUserInfo.jsp");
    }
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
>
}

moveLoginPage

package com.practice.test;
>
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
>
@WebServlet("/moveLoginPage")
public class moveLoginPage extends HttpServlet {
 private static final long serialVersionUID = 1L;
>
 public moveLoginPage() {
     super();
 }
 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
     response.sendRedirect("/project/loginForm.jsp");
 }
 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
     doGet(request, response);
 }
>
}

서블릿들도 만들어 줬으니 이제 해당 서블릿들이 보내고자 하는 페이지도 만들어 줘야겠죠? showUserInfo와 loginform jsp를 만들어 줍니다.

showUserInfo

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>




Insert title here


 id : ${id}
 password : ${pw}

loginForm

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>




Insert title here


 
      아이디 :   
      비밀번호 :

이제 loginForm을 만들어 줬으니 form 정보를 보내줄 서블릿을 또 하나 만들어 보도록 하겠습니다.

package com.practice.test;
>
import java.io.IOException;
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 login extends HttpServlet {
 private static final long serialVersionUID = 1L;
>   
 public login() {
     super();
 }
 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
>        
     response.setContentType("text/html; charset=utf-8");
     String id = request.getParameter("id");
     String pw = request.getParameter("pw");
     System.out.println(id);
     System.out.println(pw);
     HttpSession session = request.getSession();
>        
     session.setAttribute("id", id);
     session.setAttribute("pw", pw);
>        
     response.sendRedirect("/project/showUserInfo.jsp");
>
 }
 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
     doGet(request, response);
 }
}

겉으로 보기에는 완성되어 보이는 듯 하군요. 근데 문제가 있습니다. 로그인 폼이라고 한다면 둘 중 하나의 값이 입력된 경우와, 아무것도 입력을 안한 경우 로그인을 하도록 해야하는데, 그 처리를 안해줬습니다.

그래서 우리는 이 처리를 filter를 이용해서 진행을 해볼겁니다.

우선 filter를 하나 만들어 보도록 하겠습니다.

package com.practice.filter;
>
import java.io.IOException;
>
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
>
@WebFilter("")
public class LoginFilter implements Filter{
    @Override
    public void init(FilterConfig filterConfig) 
            throws ServletException {}
>    
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
>
    }
    @Override
    public void destroy() {}
}

우리가 해야할 작업은 우선 사용자가 넣은 값, 즉 입력한 값이 잘 들어왔는지를 확인하는 법입니다. 그럴려면 login에서 사용자가 입력한 값을 세션에 저장한 값을 사용해야겠죠?

HttpSession session = request.getSession();

앗! 근데 문제가 있습니다. filter의 doFilter 부분을 잘 보시면 request 부분은 ServletRequest 클래스 타입인걸 확인할 수 있는데요. getSession 메서드는 HTTPServletRequest 클래스 타입에게 있는 전용 메서드로, 부모인 ServletRequest 클래스에는 해당 메서드가 없어서 사용을 못합니다.

그래서 우리는 doFilter의 request를 다음과 같이 다운그레이드 시켜줄겁니다. 그럼 무사히 다운 그레이드 된 인스턴스로부터 getSession 메서드를 호출해 사용자가 입력한 값을 가져올 수 있겠죠.

HttpServletRequest req = (HttpServletRequest)request;
HttpSession session = req.getSession();

이제 우리가 해야할건 사용자가 값을 하나라도 안 넣은 경우 로그인 창을 다시 이동하도록 하는 작업입니다. 그럴려면 다음과 같은 조건이 필요하겠죠?

// 모든 속성을 가져올때는 타입이 오브젝트 이므로 적절한 형변환이 필요함
String id = (String)session.getAttribute("id");
String pw = (String)session.getAttribute("pw");
>
if( (id == null || pw == null) || (id == "" || pw == "") ){
    //request와 마찬가지로 response도 다운그레이드
    HttpServletResponse rep = (HttpServletResponse)response;
    // 현재 웹 어플리케이션의 컨텍스트패스인 project를 반환 받고, 그 바로 밑의 loginForm으로 돌아가 올바르게 입력하도록 함
    String cPath = req.getContextPath();
    rep.sendRedirect(cPath + "/loginForm.jsp");
}else{
    // 올바르게 입력한 경우라면 그대로 서블릿을 진행 
    chain.doFilter(request, response);
}

자, 이제 가장 중요한 WebFilter가 남았습니다. WebFilter는 해당 서블릿이 실행하기 전에 거쳐가도록 하는 경로를 지정하는데요. 우린 이 필터를 showUserInfo 서블릿에 걸어줄 겁니다. 그래야 사용자가 값을 입력한 뒤에 서블릿에 의해 showUserInfo에 진입하기 전에 filter를 걸어줘 만약 둘 중 하나의 값이라도 없는 경우 다시 로그인을 하게끔 만들고,

두 값을 다 입력했다면 그대로 서블릿을 다시 재개하게끔 만들어야 하니까요. 그래서 showUserInfo의 어노테이션에 다음과 같은 매핑 주소를 추가해 줍니다.

@WebServlet("/private/showUserInfo")

어차피 각각의 고유의 절대 경로를 가질 수 있기 때문에 가능한 작업이죠. 그리고 WebFilter의 주소도 다음과 같이 작성을 해줍니다.

@WebFilter("/private/*")

이 의미는, 절대 경로로 private이 붙은 다음의 모든 경로에 있는 파일들에 이 filter를 적용하겠다는 의미입니다. 그래서 showUserInfo 또한 해당 filter를 거치게 되는거죠. 자 이제 그럼 진짜 시연을 해볼까요?

시연을 하고 보니 약간 아쉬운건 있지만 그래도 의도 대로 작동되는군요...?

[JSP&Servlet] 서블릿&JSP의 리다이렉션과 정보 전달 기술 (sendRedirect, Forword, Session)

Mon, 05 Aug 2024 09:19:18 GMT

1. 리다이렉션 기술의 중요성

데이터 처리를 클라이언트 측에서 요청받은 후 서버 측에서 처리하고, 클라이언트에게 다시 페이지를 로드하거나 새로운 페이지로 리다이렉트하는 것입니다. 이는 서버측에서 데이터를 처리한 후 처리 결과를 클라이언트에게 다른 페이지로 보여주는 역할이나, 혹은 사용자가 새로고침을 눌렀을 때 동일한 정보가 서버로 요청되는 불필요한 작업을 방지하고자 하는 역할에 주로 사용되는데요.

이러한 리다이렉션은 크게 리다이렉션을 실행할 때 정보가 유지되느냐, 유지되지 않느냐의 차이를 두면서 두 가지 메서도르 나뉘는데요. 그것이 바로 RequestDispatcher 객체의 forward 메서드와, HttpServletRequest 객체의 sendRedirect 메서드입니다.

2. 동작 원리 간단 요약

request의 정보는 클라이언트의 요청과 그 요청을 받은 JSP 페이지 혹은 서블릿 서버에서만 유효합니다. 그래서 해당 페이지나 서버에서 사용자의 정보를 처리한 뒤 그 결과를 사용자에게 응답으로 보내게 되죠. 물론 편법으로 URL에 GET 방식 처럼 사용자의 요청 값들을 묶어 보내는 방법도 있지만 좀 비효율적일 수 밖에 없겠죠.

(자료 출처 : https://mangkyu.tistory.com/51)

하지만 forward의 경우 reuqest 객체에 사용자의 요청 값들을 저장한 뒤 dispatcher에 forward 메서드로 보내고자 하는 페이지에 request와 response를 보내는 방식으로 처리가 가능하기 때문에 정리하자면 정보를 별도의 인코딩 과정 없이 원형으로 보내는 것이 가능합니다.

3. sendRedirect로 request 정보 전송하기

해당 메서드를 사용하기에 앞서, 다음과 같은 JSP 구조가 있다고 생각해 봅시다.

main.jsp에서는 사용자가 입력을 하여 요청을 하게 되는 구조이고요.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>




Insert title here


    Request 정보 전달 해보기
    
        이름 : 
        나이 :

이 정보를 sub1.jsp가 받아서 sub2.jsp로 리다이렉트 하는 코드로 작성되었습니다. 이때 sendRedirect로 전달할 때는 페이지의 URL을 전송해야 하기 때문에 get 방식으로 조합을 해 sub2.jsp 페이지와 정보를 함께 묶은 url을 전송해야 하는데요.

거기에 한자나 한글과 같은 비아스키 코드 언어는 전달 받는 쪽에서 제대로 식별을 하지 못하기 때문에 URLEncoder 객체의 메서드로 인코딩 처리를 해주어야 하는 불편함도 존재하죠.

<%@page import="java.net.URLEncoder"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    String name = request.getParameter("name");
    String age = request.getParameter("age");
>
    /*
        db에 저장하거나, 섹션에 저장하는 용도로 작업 수행
    */
>   
    // 조합을 해보면 url은 "sub2.jsp?name=Re_Go&age=30" 이 됩니다.
    String redirectURL = "sub2.jsp?name=" + URLEncoder.encode(name, "UTF-8") + "&age=" + age;
    response.sendRedirect(redirectURL);
%>




Insert title here

그렇게 어찌어찌 전달 받은 sub2.jsp는 해당 정보를 이용해 사용자의 정보를 다음 코드를 통해 출력하게 됩니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    String name = request.getParameter("name");
    int age = Integer.parseInt(request.getParameter("age"));
%>




Insert title here


    정보가 정상적으로 저장되었습니다.
    사용자님의 아이디는 <%=name%> 입니다.
    사용자님의 나이는 <%=age%> 입니다.

이러한 데이터 전송 방식은 정보를 클라이언트와 단순히 페이지를 보여주는 서버가 직접적으로 주고 받는 1:1 방식에는 유용하나, 서버가 페이지를 보여주는 것이 아닌, 서버 본연의 역할 (db나 다른 객체를 만드는 작업)을 수행하는 경우 매우 비효율적이기 때문에, 이럴 경우 사용할 수 있는 옵션이 바로 RequestDispatcher 객체의 메서드인 forward 것이죠.

4. forward로 request 정보 전송하기

RequestDispatcher 객체의 메서드인 forward로 정보를 전송하게 되면 POST 방식에서도 효과적으로 정보를 전송할 수 있는데요. 사용자에게 입력 받는 http 요청 양식을 post 방식으로 지정했다고 하고 다음과 같이 sub1.jsp의 코드를 다음과 같이 작성해 보겠습니다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
    request.setCharacterEncoding("UTF-8");
    String name = (String) pageContext.getAttribute("name");
    int age = Integer.parseInt((String) pageContext.getAttribute("age"));
>
    // RequestDispatcher를 사용하여 sub2.jsp로 요청을 포워딩
    RequestDispatcher dispatcher = request.getRequestDispatcher("sub2.jsp");
    request.setAttribute("name", name);
    request.setAttribute("age", age);
    dispatcher.forward(request, response);
%>




Insert title here

어떻습니까? request의 sendRedirect 메서드보다 간결하고 더 깔끔하게 데이터를 보낼 수 있지 않습니까? 하지만 이러한 데이터 전송도 결국 request의 정보 범위 (하나의 요청에만 유효)의 한계 때문에 사용자로부터 받은 중요한 데이터들은 결국 session에 보관을 하여 sendRedirect와 함꼐 사용하는 편이 좀 더 나은 선택지이며, 기본 검색과 같은 역할에는 request(pageContext)를 주로 사용하게 됩니다.

참고로 위의 코드처럼 전송할 때 포워딩을 이용하는 방법도 존재하는데, 이때 request 객체에 속성과 값을 설정했다면, 전달 받은 쪽에서는 굳이 getAttribute 메서드를 쓰지 않고도 EL 표기법으로 아래와 같이 접근이 가능합니다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
>




Insert title here


    사용자 정보
    name : ${name} 
    age : ${age}

5. 추가 : session과 redirection 조합

session은 앞서 소개한 session 섹션에서도 말씀 드렸듯이, 고객의 주요 정보를 유효 기간 내에 저장하는 용도로 사용한다고 했는데요. 그래서 주요 정보는 보통 session으로 저장을 하는 작업이 대부분인 만큼 사용자의 정보를 받은 뒤 session에 저장한 후 filter 작업을 거쳐 제공 세션과 입력 값이 같을 경우와 다를 경우를 각각 처리하는 용도로 사용이 가능합니다.

특히 session을 사용하면 get이든 post 방식이든 get 방식의 쿼리 스트림을 사용하여 정보를 전송하는대에 국한 되어있던 sendRedirection 방법을 좀 더 유연하게 사용할 수 있게 되기에, session과 sendRedirection 조합은 궁합이 잘 맞는 페이지 정보 전달 기술이라고 할 수 있겠습니다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
    String name = request.getParameter("name");
    String age = request.getParameter("age");
>    
    session = request.getSession();
>   
    session.setAttribute("name", name);
    session.setAttribute("age", age);
>    
    response.sendRedirect("sub2.jsp");
>
%>




Insert title here

특히 request의 범위는 클라이언트의 1회 요청에만 유효한 반면, session은 정해진 유효기간 내라면 어플리케이션 내에서 어느 페이지든 유효하기에 그 쓰임새가 더 넓다고 할 수 있겠죠.

참고로 EL (${})로 접근할때에 각 객체의 속성 이름이 중복되는 경우 접근 우선 순위는 페이지 컨텍스트 => request => session => application 순이라고 합니다.

(자료 출처 : https://velog.io/@ggg4155/22.03.03-%EC%84%B8%EC%85%98-%EC%A0%95%EB%B3%B4-%EA%B0%80%EC%A0%B8%EC%98%A4%EA%B8%B0)

[JSP&Servlet] 서블릿의 상태 저장 및 유지 객체들 : Session

Thu, 01 Aug 2024 14:58:21 GMT

1. 인터넷에서의 세션의 역할

서블릿에서 세션(Session)은 클라이언트와 서버 간의 상태 정보를 유지하기 위한 중요한 개념이라고 하는데요.

그 이유는 웹 애플리케이션에서 클라이언트와 서버 간의 상호작용은 보통 HTTP 프로토콜을 통해 이루어지는데, HTTP는 기본적으로 상태가 없는(stateless) 프로토콜입니다. 이는 각 요청이 독립적이며 이전 요청과의 연결이 없다는 것을 의미합니다. 이를 두고 무상태성, 비상태성이라고도 하는데요.

프로토콜의 무상태성을 잘 설명한 예시 > ![](https://velog.velcdn.com/images/re_go/post/6372396e-d110-48e2-a34f-69286e9bf4b2/image.png) > (자료 출처 : https://velog.io/@beneficial/Session%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80)

세션은 이러한 상태 비유지의 문제를 해결하기 위해 사용되는데요. 서버는 클라이언트가 처음 요청을 보낼 때 새로운 세션을 생성하고, 이를 식별하기 위한 고유한 세션 ID를 부여합니다. 이 세션 ID는 클라이언트에게 쿠키를 통해 전달됩니다. 이후 클라이언트는 서버에 요청을 보낼 때마다 이 쿠키에 세션 ID를 포함하여 보냅니다.

그럼 서버는 해당 쿠키에서 세션 ID를 대조해 세션 별로 할당 된 메모리 적재 공간에 사용자의 정보를 저장하여 정제 및 활용한 뒤 사용자에게 응답을 하게 되는 방식으로 활용되는 것이죠.

쿠키와 세션의 연결성을 잘 보여준 예시 > ![](https://velog.velcdn.com/images/re_go/post/a97f06f1-8a8a-4771-88d3-82d52c4dd3cb/image.png) > ![](https://velog.velcdn.com/images/re_go/post/52c4d4aa-c27c-4732-b098-a65d3bb264db/image.png) > (자료 출처 : https://velog.io/@hyun6ik/%EC%84%B8%EC%85%98-%EB%8F%99%EC%9E%91-%EB%B0%A9%EC%8B%9D)

2. 서블릿에서의 세션과 메서드들

물론 서블릿에서도 쿠키를 사용 가능하기에 당연히 세션도 사용 가능한데요. 이러한 세션은 HttpSession 객체에 의해 관리되며, HttpServletRequest 인스턴스를 이용해 세션의 정보를 획득할 수 있게 됩니다.

HttpSession session = request.getSession();

그럼 해당 세션 객체가 제공하는 대표적인 메서드들을 한 번 볼까요?

getSession()

현재 요청과 연관된 세션을 반환합니다. 세션이 없다면 세션을 새로 생성하는데요. 이때 매개변수로 true, false를 넣게 되면 그 의미는 좀 달라지는데,

true를 전달하게 되면 기존 세션이 있다면 기존 세션을 반환하고, 없으면 새로운 세션을 생성하는 반면

false를 전달하게 되면 기존 세션이 있다면 기존 세션을 반환하고, 없으면 null을 반환하게 됩니다.

// 세션을 확인해 null(없는 상태) 일 경우 새로운 세션을 생성
HttpSession session = request.getSession(false);
if (session == null) {
    session = setSession("newSession", "SessionValue")
    session.setAttribute(name, value);
}

isNew()

세션이 새로 생성된 것인지 기존에 존재하던 것인지 확인합니다.

String checked = session.isNew() ? "새로 생성" : "기존의 것"

getCreationTime(), getLastAccessedTime()

세션이 처음 생성된 시간과 마지막으로 엑세스된 시간을 반환합니다. 이때 반환되는 시간은 타임스탬프 형식이므로 적당한 포맷 작업이 필요합니다.

// 각각의 세션 시간들을 Date 객체로 포맷
long creationTime = new Date(session.getCreationTime());
long lastAccessedTime = new Date(session.getLastAccessedTime());

invalidate()

현재 세션을 무효화하여 모든 세션 데이터를 삭제합니다.

session.invalidate();

setAttribute(String name, Object value)

세션에 이름-값 쌍으로 속성을 저장합니다. 이때 세션의 속성 중 이름은 반드시 문자열이여야 하나, 값의 경우 다양한 데이터 타입을 허용합니다.

또한 이미 있는 속성의 이름을 지정하여 값을 변경한 상태로 넣을 경우, 해당 속성의 값만 바뀐채 재정의 됩니다.

// session에 해당 속성의 이름과 값을 지정하여 생성
session.setAttribute("attributeName", 500);
// 이미 있는 속성에 값을 변경하여 재정의
session.setAttribute("attributeName", 1500);

getAttribute(String name)

세션에 저장된 특정 속성의 값을 가져옵니다.

// attributeName 속성의 값을 가져옴
session.getAttribute("attributeName");

getAttributeNames()

세션에 저장된 모든 속성의 이름을 Enumeration 객체로 반환합니다. 이때 Enumeration은 열거형 타입이므로 hasMoreElements 메서드와 연계하여 사용할 수 있으며, 한 번 사용된 경우 해당 타입의 변수로 재사용이 불가능합니다.

// 해당 메서드를 이용해 이름과 속성의 이름과 값을 얻어옴
Enumeration attributeNames = session.getAttributeNames();
while (attributeNames.hasMoreElements()) {
    String name = attributeNames.nextElement();
    Object value = session.getAttribute(name);
    // 속성 이름과 값을 사용
}

removeAttribute(String name)

세션에 저장된 특정 속성을 제거합니다.

// attributeName 속성을 session에서 제거
session.removeAttribute("attributeName");

3. 실습 예제 - 세션을 이용한 모의 CRUD

위에서 소개해드린 세션 메서드들을 이용해 세션을 이용해서 CRUD 프로그램을 한 번 만들어 봤는데요. 다소 짧은 시간에 만든 예제라 엉성하긴 하지만, 그래도 세션을 이렇게도 활영할 수 있다는 것을 보여드리고자 간단하게 설명을 드려보도록 하겠습니다.

각각의 폼들은 세션 생성, 삭제, 속성 생성, 삭제, 속성 조회 다섯가지 폼으로 구성했으며, 각 영역 당 input의 hidden 속성을 이용해 고유의 선택값들을 넣어줬습니다. 이 값들을 서블릿의 switch문의 분기로 활용할 거고요.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>



    
    
    Request Form
    


    세션 명령을 입력해 주세요
    1.세션 생성 2.세션 삭제
>
    
    
        명령어 선택:
        
        
    
>
    

>
    
    속성 추가
    
        
        속성 이름:
        
        속성 값:
        
        
    
>
    

>
    
    속성 제거
    
        
        제거할 속성 이름:
        
        
    
>
    

>
    
    속성 조회
    
        
        조회할 속성 이름:

다음은 인코딩 설정과 choice 파라미터를 가져오고, 세션 객체 하나와 데이터 포맷 양식 제공을 위한 simpleDateFormat 타입의 인스턴스를 하나 생성해 줍니다.

res.setContentType("text/html;charset=UTF-8");
req.setCharacterEncoding("UTF-8");
PrintWriter out = res.getWriter();
int choice = Integer.parseInt(req.getParameter("choice"));
HttpSession session = null;
SimpleDateFormat formatTime = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");

switch문의 첫번째 구간입니다. getsession과 isNew 조합을 이용해 있을 경우 해당 세션을 생성 (값이 비었을 경우 true가 default 값이므로)하고, 기존 세션 반환된다면 아래 문구를 출력후 각각의 생성 시간과 마지막 섹션 엑세스 시간을 출력합니다.

case 1:
    // 세션을 생성하거나 기존 세션을 가져옵니다.
    session = req.getSession();
    if (session.isNew()) {
        out.print("세션이 새로 생성되었습니다.");
    } else {
        out.print("기존 세션이 존재합니다.");
    }
    out.print("생성 시간 : " + formatTime.format(new Date(session.getCreationTime())) + "");
    out.print("마지막 접속 시간 : " + formatTime.format(new Date(session.getLastAccessedTime())) + "");
    break;

두번째 구간입니다. 기존의 세션을 가져오되 false 값을 전달해 만약 null을 반환 받지 않을 경우, 즉 기존의 세션을 가져올 경우 해당 세션의 생성 시간과 마지막 접속 시간을 보여준 뒤 삭제하고, null, 즉 이미 없는 상태라면 섹션이 없다고 출력합니다.

case 2:
    // 기존 세션을 가져옵니다 (존재하지 않으면 null).
    session = req.getSession(false);
    if (session != null) {
        out.print("생성 시간 : " + formatTime.format(new Date(session.getCreationTime())) + "");
        out.print("마지막 접속 시간 : " + formatTime.format(new Date(session.getLastAccessedTime())) + "");
        session.invalidate(); // 세션을 무효화합니다.
        out.print("세션이 삭제되었습니다.");
    } else {
        out.print("삭제할 세션이 존재하지 않습니다.");
    }
    break;

세번째 구간입니다. 사용자가 폼에 세션의 속성 이름과 값을 입력하면 각각 그 값들이 넘어올텐데요. 두 값이 모두 입력된 경우에 setAttribute로 아이템을 추가하고, 두 값 중 하나가 빠진 경우라면 주의 문구를 출력합니다.

그리고 attributeNames 메서드를 이용해 속성의 이름과, 이름을 이용해 getAttribute 메서드로 값을 함께 보여줍니다.

case 3:
    // 속성 값을 추가합니다.
    session = req.getSession();
    String itemName = req.getParameter("name");
    String itemValue = req.getParameter("value");
>
    if (itemName != null && itemValue != null) {
        session.setAttribute(itemName, itemValue);
        out.print("속성이 추가되었습니다.");
    } else {
        out.print("속성 이름과 값을 제공해야 합니다.");
    }
>
    // 추가된 속성 출력
    out.print("속성 목록 : ");
    Enumeration attributeNames1 = session.getAttributeNames();
    while (attributeNames1.hasMoreElements()) {
        String name = attributeNames1.nextElement();
        out.print("
" + name + ": " + session.getAttribute(name) + "");
    }
    out.print("");
    break;

네번째 구간입니다. 세번째 구간에서의 설명과 동일합니다. 메서드 이름만 다르고 원리는 거의 비슷하기 때문이죠.

case 4:
    // 속성 값을 제거합니다.
    session = req.getSession();
    String attributeName = req.getParameter("name");
>
    if (attributeName != null) {
        session.removeAttribute(attributeName);
        out.print("속성이 제거되었습니다.");
    } else {
        out.print("제거할 속성 이름을 제공해야 합니다.");
    }
>
    out.print("속성 목록 : ");
    Enumeration attributeNames2 = session.getAttributeNames();
    while (attributeNames2.hasMoreElements()) {
        String name = attributeNames2.nextElement();
        out.print("
" + name + ": " + session.getAttribute(name) + "");
    }
    out.print("");
    break;

다섯 번째 구간입니다. 세션을 가져온 후 사용자로부터 찾을 속성의 값을 받아온 뒤 그 값을 이용해 속성을 받아옵니다. 이때 전달되는 타입은 오브젝트 이므로 string으로 변환한 뒤 해당 속성의 값을 보여줍니다.

만약 존재하지 않는 속성의 이름일 경우 else문과 같이 출력해 주고 열거형으로 속성 목록을 보여줍니다.

case 5:
    // 속성 값을 조회합니다.
    session = req.getSession();
    String queryName = req.getParameter("name");
>
    if (queryName != null) {
        Object value = session.getAttribute(queryName);
        if (value != null) {
            out.print("속성 이름 '" + queryName + "'의 값: " + value.toString() + "");
        } else {
            out.print("속성 이름 '" + queryName + "'은 존재하지 않습니다.");
        }
    } else {
        out.print("조회할 속성 이름을 제공해야 합니다.");
    }
    out.print("속성 목록 : ");
    Enumeration attributeNames3 = session.getAttributeNames();
    while (attributeNames3.hasMoreElements()) {
        String name = attributeNames3.nextElement();
        out.print("
" + name + ": " + session.getAttribute(name) + "");
    }
    out.print("");
    break;

시연 영상

만들고보니 삭제 예외 처리를 안해줬네요 ㅎ...

[JSP&Servlet] JSP 페이지와 스크립트 기반 태그들

Thu, 01 Aug 2024 09:43:31 GMT

JSP란?

JSP(JavaServer Pages)는 웹 개발에서 서버 측에서 동적으로 컨텐츠를 생성하기 위해 사용되는 기술입니다. JSP는 HTML에 Java 코드를 포함시켜 웹 페이지를 작성할 수 있게 되는데요. 쉽게 얘기하면 페이지에 자바 코드를 사용할 수 있는 페이지가 JSP인 셈이죠.

<%--1. JAVA 코드 영역--%>
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.util.Date"%>
<%@page import="java.util.Calendar"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
>

이 부분은 HTML 주석입니다.
>
<%-- 이 부분은 JSP 주석입니다. 클라이언트에게 전달되지 않습니다. --%>
이 부분은 JSP 주석입니다.

[JSP&Servlet] 서블릿의 상태 저장 및 유지 객체들 : Cookie

Wed, 31 Jul 2024 14:02:24 GMT

서블릿에서도 쿠키를 추출하는 것이 가능한데요. 그 전에 쿠키에 대해서 모르시는 분들이 계시다면 다음의 링크에서 한 번 확인하시고 와보시는것을 추천드립니다. 아무튼 이러한 쿠키는 특히 사용자를 인증하는 정보로 주로 사용하고 있는 만큼 없어서는 안될 중요한 개념인데요. 이러한 쿠키는 서버가 사용자한테 지급을 해주어야 하는 만큼 세팅하는 메서드에 대해서도 알 필요가 있습니다. 이번 섹션에서는 그 사용법을 한 번 익혀보도록 하겠습니다.

Cookie 클래스는 클라이언트와 서버 간의 상태 정보를 저장하기 위해 사용됩니다. 클라이언트으ㅢ HTTP 응답에서 서버는 클라이언트에게 쿠키를 보내고, 클라이언트는 이후 요청에서 해당 쿠키를 서버로 다시 전송합니다. 그러면 서버는 클라이언트로부터 받은 요청에서 쿠키를 읽고, 이를 통해 클라이언트의 상태를 관리하거나 맞춤형 응답을 생성하는 용도로서 쿠키를 사용하게 되죠.

이러한 쿠키는 기본적으로 인스턴스를 생성하듯이 new 키워드와 함께 기입하면 되는데, 이때 첫번째 매개변수는 쿠키의 이름으로 오직 문자열 타입만 가능하고, 두번째는 쿠키의 값도 마찬가지로 문자열 타입만 저장할 수 있습니다.

또한 이때 쿠키의 이름은 처음 세팅할 때에만 지정 가능하고 수정은 불가능 하다는 점도 기억해야 합니다.

Cookie cookie1 = new Cookie("onlyStringCookieName", "onlyStringCookieValue");

이클립스에서 확인해보는 쿠키 클래스의 내부 구조 > ![](https://velog.velcdn.com/images/re_go/post/1bbc1849-39a9-4b59-9a35-db119a74139a/image.png)

setMaxAge(int expiry)

쿠키가 해당 앱 어플리케이션에 남아있는 유효 기간을 설정합니다. 이때 설정하는 매개변수는 정수형이며, 초 단위로 설정이 가능합니다. 그래서 0을 전달하면 즉시 쿠키가 없어지고, 60을 전달하면 60초 동안 해당 쿠키가 유효한데요.

다만 음수를 설정하면 브라우저가 종료될 때 해당 쿠키를 삭제하게 됩니다.

// cookie1의 유효 시간을 60초 * 60초, 즉 60분인 1시간 동안으로 설정함.
cookie1.setMaxAge(60*60)

setPath(String uri)

쿠키가 해당 어플리케이션의 특정 url에서 유효한지를 지정할 때 사용하는 메서드로, / 기호를 단독으로 사용할 경우 해당 어플리케이션 내에서는 어느 url이든 해당 쿠키가 유효하다는 의미입니다.

// cookie1의 유효 경로는 해당 어플리케이션의 모든 곳에서 유효함
cookie1.setPath("/")

setDomain(String pattern)

해당 쿠키가 다른 어플리케이션, 즉 다른 서버에서도 유효한 경우로 사용하고자 할 때 지정하는 메서드입니다. 예를 들어 ("www.naver.com") 으로 지정했다면 해당 쿠키는 생성된 어플리케이션 뿐만 아니라 네이버, 즉 다른 서버에서도 유효한 쿠키가 됩니다. 물론 ("ver.com") 으로 지정하면 도메인 중 ver.com 단어가 포함된 도메인에서도 해당 쿠키는 유효하게 됩니다.

그러나 이러한 행위는 쿠키 탈취, 혹은 노출과 같이 보안 상에 큰 타격을 줄 수 있기에 계열사 홈페이지와 같이 연관된 홈페이지가 아니라면 사용을 하지 않는 것을 권장합니다.

// cookie1는 네이버 서버에서도 유효한 쿠키로 지정
cookie1.setDomaion("www.naver.com")

특정 시점에서 사용자에게 응답을 보낼 때 세팅 된 쿠키를 전송하는 용도로 사용합니다.

// 응답을 보낼 때 cookie1을 보냄
res.addCookie(cookie1);

HttpServletRequest.getCookies()

클라이언트가 전송한 모든 쿠키를 배열로 반환받습니다. 이때 쿠키의 유효기간이 지나 쿠키가 만료된 상태에서 해당 메서드로 요청을 할 때 반환된 배열이 null일 수도 있으므로, null 체크를 넣어줍시다.

// 쿠키를 배열로 얻어옴
Cookie[] cookieList = req.getCookies();
// 쿠키를 임시로 만들어 넣을 용도
Cookie cookie1; 
    // 만약 얻어온 쿠키가 없는 상태라면 새로운 쿠키를 만들어 사용자에게 전송
    if (cookieList == null) {
         cookie1 = new Cookie("CookieName", "CookieValue");
          res.addCookie(cookie1);
    }else {
        // 쿠키가 있다면 배열을 돌리며 쿠키를 출력
         for (Cookie cookie : cookieList) {
           out.print("Cookie Name: " + cookie.getName() + "");
           out.print("Cookie Value: " + cookie.getValue() + "");
       }
   }

getName()

얻어온 쿠키 배열 중에서 특정 쿠키의 이름을 반환받습니다.

getValue()

얻어온 쿠키 배열 중에서 특정 쿠키의 값을 반환받습니다.

2. 페이지에 쿠키 출력 해보기

파일 생성

그럼 지금까지 알아본 내용으로 페이지를 이동할 때마다 쿠키를 생성하고 출력해보는 예제를 만들어 보겠습니다.

우선 서블릿을 총 네 개를 만들어 줍니다.

쿠키 생성

메인 페이지에는 쿠키를 생성하지 않을거고, 다른 페이지를 이동할 때마다 쿠키를 생성해서 사용자에게 주도록 할것이므로 한 번 해당 코드를 만들어보도록 하겠습니다.

subServlet1의 쿠키

Cookie user1 = new Cookie("user1", "guest");
user1.setPath("/"); // 쿠키가 웹 애플리케이션 전체에서 유효하도록 설정
user1.setMaxAge(60); // 60초 동안 유효
res.addCookie(user1);

subServlet2의 쿠키

Cookie user2 = new Cookie("user2", "worker");
user2.setPath("/"); // 쿠키가 웹 애플리케이션 전체에서 유효하도록 설정
user2.setMaxAge(60 * 60); // 1시간 동안 유효
res.addCookie(user2);

subServlet3의 쿠키

Cookie user3 = new Cookie("user3", "operator");
user3.setPath("/"); // 쿠키가 웹 애플리케이션 전체에서 유효하도록 설정
user3.setMaxAge(60 * 60 * 24); // 1일 동안 유효
res.addCookie(user3);

쿠키 얻어오기

자, 이제 사용자는 페이지를 방문할 때마다 쿠키를 받게 될텐데요. 받았으니 사용자로부터 한 번 받아봐야겠죠? 해당 코드도 만들어 줍시다.

>
// 쿠키 받아오기
Cookie[] cookieList = req.getCookies();
>
// 만약 쿠키가 남아있으면 다음과 같이 html 요소를 만들고 getName과 getValue로 화면에 표시하기
if (cookieList != null) {
      out.print("쿠키 목록:");
      out.print("");
      for (Cookie cookie : cookieList) {
          out.print("");
          out.print("쿠키 이름: " + cookie.getName() + ", ");
          out.print("쿠키 값: " + cookie.getValue());
          out.print("");
      }
      out.print("");
    // 쿠키가 없을 경우 없다고 표시하기
} else {
      out.print("쿠키가 존재하지 않습니다.");
}

링크 경로 설정

이제 사용자가 버튼을 누를 때마다 해당 서블릿 페이지로 이동하도록 a 태그를 활용해 경로를 지정해 줄건데요. 이때 본인이 사용하고 있는 프로젝트부터 web.xml에 매핑한 루트(또는 @WebServlet으로 매핑한 경로)를 올바르게 적어야 하기 때문에 주의가 필요합니다.

제 프로젝트 이름은 project이므로 다음과 같이 적어주도록 하겠습니다.

mainServlet 페이지 버튼

@WebServlet("/mainServlet")
>
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
    res.setContentType("text/html;charset=UTF-8");
    PrintWriter out = res.getWriter();
    out.print("여기는 메인 서블릿 입니다.");
    out.print("경로를 이동해 보세요.");
    out.print("서브 서블릿1");
    out.print("
");
    out.print("서브 서블릿2");
    out.print("
");
    out.print("서브 서블릿3");
}

SubServlet1 페이지 버튼

@WebServlet("/subServlet1")
>
out.print("경로를 이동해 보세요.");
out.print("메인 서블릿");
out.print("
");
out.print("서브 서블릿2");
out.print("
");
out.print("서브 서블릿3");

SubServlet2 페이지 버튼

@WebServlet("/subServlet2")
>
out.print("경로를 이동해 보세요.");
out.print("메인 서블릿");
out.print("
");
out.print("서브 서블릿1");
out.print("
");
out.print("서브 서블릿3");

SubServlet3 페이지 버튼

@WebServlet("/subServlet3")
>
out.print("경로를 이동해 보세요.");
out.print("메인 서블릿");
out.print("
");
out.print("서브 서블릿1");
out.print("
");
out.print("서브 서블릿2");

자, 이제 페이지 작성을 모두 완료했으니 한 번 작동을 시켜보겠습니다.

페이지 동작 과정 (그림 설명)

최초 방문입니다. 해당 메인 페이지는 쿠키를 설정하지 않았습니다. > ![](https://velog.velcdn.com/images/re_go/post/98863baa-20c4-472a-bec8-549e4dec5ad1/image.png) > 서브 서블릿1 페이지로 이동해 보겠습니다. 개발자 도구에는 쿠키가 생성되었군요? 하지만 서브 서블릿1에는 생성된 쿠키가 표시되지 않습니다. 정상입니다. 사용자가 최초로 서브 서블릿1에 진입하는 시점에는 쿠키가 없는 상태이니까요. > ![](https://velog.velcdn.com/images/re_go/post/3e7b8fc1-5797-4654-84f5-5747fd734982/image.png) > 서블릿 페이지의 두번째로 이동했습니다. 이 시점에는 사용자가 서브 서블릿 페이지1에서 받은 쿠키가 있으므로 해당 쿠키가 정상적으로 노출되는 모습을 확인할 수 있습니다. > ![](https://velog.velcdn.com/images/re_go/post/eef05cc1-c89b-4148-8c24-84e7417beec4/image.png) > 서브 서블릿 페이지 3도 마찬가지죠. > ![](https://velog.velcdn.com/images/re_go/post/91dd6c44-4db1-4c98-a990-529c0fedc2d1/image.png) > 다시 다른 페이지로 이동하면 이제 세 개의 서브 서블릿 페이지에서 사용자에게 전달한 쿠키를 사용자로부터 받아 출력할 수 있게 되는거죠! > ![](https://velog.velcdn.com/images/re_go/post/47ce08f5-68a9-4bcc-a493-699e6268dce5/image.png) > 물론 서브 서블릿 페이지 1의 쿠키 유효 기간은 60초 이므로 시간이 지나면 삭제되는 모습도 보실 수 있고요! > ![](https://velog.velcdn.com/images/re_go/post/6b27f6a4-5f94-4d33-b84d-1c9e110c841d/image.png)

3. 방문 횟수 세어보기

쿠키를 이용하면 해당 어플리케이션의 방문을 몇 번 했는지도 알 수 있는데요. 기본적으로 사용자가 방문할 때 해당 방문자의 고유 쿠키를 갖고 있을 것이고, 이 사용자가 매번 어플리케이션, 즉 홈페이지에 접속할 때마다 해당 쿠키의 이름을 대조하여 사용자가 맞을 경우 값(방문 횟수)을 증가시키는 방식으로 활용할 수 있기 때문이죠.

그래서 아래 코드를 살펴보시면 얻어온 쿠키가 널이 아니고 배열의 길이보다 작을 때까지 for문을 돌리면서 특정 사용자일 경우 방문 횟수(값)을 증가시켜주는 코드임을 알 수 있습니다.

물론 doGet 메서드는 사용자의 요청마다 호출되고 종료되므로 cnt 변수도 매번 초기화 되겠으나 매번 사용자로부터 쿠키 값을 가져와 cnt에 담고(물론 문자열을 정수로 변환) 그 값을 증가시켜 다시 사용자의 쿠키로 담아주면 결국 사용자의 쿠키 값은 매번 증가할 수 있는 겁니다.

package com.practice.test;
>
import javax.servlet.ServletConfig;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
>
@WebServlet("/mainServlet")
public class MainServlet extends HttpServlet {
>
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
>
        resp.setContentType("text/html;charset=UTF-8");
        PrintWriter out = resp.getWriter();
>        
        // cnt 선언
        int cnt = 0;
        // 쿠키 가져오기
        Cookie[] list = req.getCookies();
>
        // 가져온 쿠키가 비어있지 않고 i가 배열의 길이보다 작을 떄까지 반복
        // 하는 동안 만약 사용자의 쿠키 이름이 특정 이름과 같으면
        // 쿠키의 값을 가져와 정수 변환 후 cnt에 저장
        for(int i = 0 ;list!=null&& i < list.length;i++) {
            if(list[i].getName().equals("cookieName")) {
                cnt = Integer.parseInt(list[i].getValue());
            }
        }
        // cnt를 증가시킨 후 쿠키 이름과 함께 값으로 새로운 쿠키 생성
        cnt++;
        Cookie cookie = new Cookie("cookieName", cnt+"");
        // 유효 기간 재세팅
        cookie.setMaxAge(60*60);
        // 사용자에게 전달
        resp.addCookie(cookie);
>
        out.print(" 고객님의 " + cnt + "번째 방문을 환영합니다!");
>
    }
>   
}

[JSP&Servlet] 서블릿의 상태 저장 및 유지 객체들 : ServletConetxt

Wed, 31 Jul 2024 10:42:59 GMT

1. 상태 저장의 중요성

네트워크의 연결은 어느 한 쪽의 일방적인 행위에 의해서 발생되지 않습니다. 이를 좀 더 풀어서 설명해 보자면 클라이언트의 요청이라는 행위와, 서버의 응답이라는 행위가 일어나는 일련의 과정을 거친 상태가 네트워크가 연결된 상태라고 할 수 있는데요.

이때 네트워크의 연결은 매번 일어나는 상황이라고 가정 할 때 클라이언트의 제공 정보와 서버측의 제공 정보를 매번 새로 생성하는 것은 매우 비효율적이라고 할 수 있겠는데요. 그래서 클라이언트에서는 서버에 제공했던 정보를 쿠키(cookie) 형식으로 저장을 하게되고, 서버측은 서버 언어의 각 기술에 따라 서버의 상태 정보를 저장하는데요.

웹 페이지의 특정 요소를 클릭 시 서버측에 전달하는 정보를 클라이언트 측에서 쿠키 형태로 저장하고 재전송시 활용하게 되는데, 이때 개발자 도구의 cookies 항목을 보면 해당 정보들의 이름과 값, 데이터 타입, 용량 및 유효기간 등을 확인할 수 있습니다. > ![](https://velog.velcdn.com/images/re_go/post/5daac957-c8f7-4592-95dd-b340a6c3a191/image.png)

특히 서블릿에서는 쿠키 외에도 ServletContext(웹 어플리케이션의 전반적인 정보를 저장), HttpSession(사용자의 개별 세션 보관 및 관리), HttpServletRequest(사용자의 HTTP 요청 정보 저장) 이렇게 세 가지 객체로 전반적인 서버의 정보들을 저장하고 관리하게 됩니다.

각 객체 별 상태 유지 기간 > ![](https://velog.velcdn.com/images/re_go/post/fa22928e-75ca-4a3f-8eb9-3e3b4f5ec637/image.png) > (자료 출처 : https://velog.io/@yeppi/%ED%99%94%EB%A9%B4-%EC%9D%B4%EB%8F%99-%EB%B0%A9%EC%8B%9D-Redirect-VS-Forwarding-VS-Session-VS-Context)

2. ServletConetxt 개요

ServletContext 객체는 위에서 언급했다시피 웹 어플리케이션의 전반적인 정보를 담고 있는 객체인데요. 그와 동시에 서블릿 간에 통신할 수 있는 기능도 제공합니다.

(자료 출처 : https://nesoy.github.io/articles/2019-02/Servlet)

ServletConetxt 추출 방법

이러한 서블릿을 추출하는 방법은 ServletConfig 객체를 사용할 수 있는 init() 메서드에서 해당 객체를 이용한 메서드로 추출을 하거나, GenericServlet으로부터 상속 받은 서블릿 추출 메서드로 추출을 하면 됩니다.

// 서블릿 컨텍스트의 정보값을 보관하기 위한 변수
ServletContext scContent;
>
@Override
// 개별 서블릿의 초기화 작업 시 활용되는 servletConfig로도 getServletContext 메서드를 호출할 수 있습니다.
public void init(ServletConfig config) throws ServletException {
    scContent = config.getServletContext();
}
>
>
@Override
    protected void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
    res.setContentType("text/html;charset=UTF-8");
    PrintWriter out = res.getWriter();
    // this는 제네릭서블릿의 메서드를 상속 받은 http서블릿을 상속 받은 현재 서블릿, 즉 현재 서블릿에서 상속 받은 getServletContext 메서드를 호출하겠다는 의미.
    scContent = this.getServletContext();
    out.print(" 컨텍스트 추출값 ");
    out.print("" + scContent + "");    
}

ServletConetxt 전역 파라미터 할당 방법

이러한 서블릿 컨텍스트에는 주로 특정 파라미터, 그러니까 모든 서블릿과 JSP들이 공유가 가능한 전역 파라미터가 저장되는데요. 이 값들은 주로 해당 어플리케이션 전역에 걸쳐 설정해야할 공통적인 값을 지정할 때라든지, 서블릿이 초기화 될 때 사용될 초기값으로서 사용된다든지 하는 경우로서 사용될 수 있습니다.

그리고 이러한 web.xml 파일에 안에서 똑같이 과 에 이름과 값을 지정한 뒤 특정 시점에서 해당 이름의 컨텍스트 값을 추출하여 사용할 수 있죠.

XML 페이지

project
ㆍ
ㆍ
ㆍ


firstContextParam
hello 


secondContextParam
world

JAVA 페이지

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
>
// 서블릿 컨텍스트 정보 획득
ServletContext sc = this.getServletContext();
// 특정 이름의 컨텍스트 파라미터 값을 각각 변수에 할당
String var1 = sc.getInitParameter("firstContextParam");
String var2 = sc.getInitParameter("secondContextParam");
res.setContentType("text/html;charset=UTF-8");
PrintWriter out = res.getWriter();
// 변수들을 화면에 출력
out.print(" 첫번째 컨텍스트 변수의 값 ");
out.print("" + var1 + "
");
>
out.print("
 두번째 컨텍스트 변수의 값 ");
out.print("" + var2 + "");
 }

물론 서블릿 컨텍스트의 전역 파라미터를 web.xml 에서만 만들 수 있는건 아니고, 서블릿 컨텍스트 인스턴스의 setAttribute 메서드를 이용해 만들 수도, getAttribute 메서드를 이용해 받을 수도 있습니다. (단 getAttribute로 해당 파라미터를 받을 시 전달한 값의 타입에 상관 없이 오브젝트로 반환 받으므로 받고자 하는 변수의 타입으로 적절하게 형변환을 해줘야 합니다.)

// setAttribute로 컨텍스트의 특정 파라미터의 이름과 값을 전달합니다.
sc.setAttribute("thirdContextParam", "this is made by Set Method!");
// getAttribute 메서드로 특정 파라미터의 이름을 전달해주고 값을 받아오는데, 이때 문자열로 받을 거니까 String으로 형변환을 해줍니다.
String var3 = (String) sc.getAttribute("thirdContextParam");

물론 값은 문자열 뿐만 아니라 여러 데이터 타입의 값도 할당 가능합니다. 단 주의할 점은 파라미터의 값은 여러 타입이 가능해도, 이름 부분은 문자열만 가능하다는 사실!

Person 객체

package com.practice.test;
>
public class Person {
 private String name;
 private int age;
>
 // 기본 생성자
 public Person() {
     this.name = "Unknown";
     this.age = 0;
 }
>
 // 생성자
 public Person(String name, int age) {
     this.name = name;
     this.age = age;
 }
>
 @Override
 public String toString() {
     return "Name: " + name + ", Age: " + age;
 }
}

Person 타입의 인스턴스를 하나 생성해 컨텍스트의 특정 전역 변수의 값으로 전달한 뒤 가져와 출력하기

ServletContext sc = this.getServletContext();
// 인스턴스 선언
Person people1 = new Person("Re_Go", 30);
// 값 전달
sc.setAttribute("myInfo", people1);
// 가지고 와서 적절하게 형변환 한 뒤 변수에 저장
Person var3 = (Person) sc.getAttribute("myInfo");
res.setContentType("text/html;charset=UTF-8");
PrintWriter out = res.getWriter();
// 출력
out.print(" 주인장 인적사항 ");
out.print("" + var3 + "");

[JSP&Servlet] 서블릿의 web.xml의 환경 설정 살펴보기

Tue, 30 Jul 2024 09:52:59 GMT

1. web.xml 설정

web.xml은 웹 애플리케이션의 구조와 동작을 정의하는 역할을 하는데요. 서블릿, JSP 페이지, 필터, 리스너 등 웹 애플리케이션의 구성 요소를 정의하고, 이들이 어떻게 매핑되는지를 설정하거나 인증, 권한 부여, 보안 제약 조건 등을 설정하는 코드들이 작성되기도 하는 곳이죠. 이러한 xml 파일은 기본적으로 이클립스에서 Dynamic Web Project를 생성시 존재하지 않을 경우 아래의 사진과 같은 경로로 xml 파일을 생성해주면 됩니다.

xml 파일 기본 구조 살펴보기

이때 web.xml 파일을 텍스트 파일 형식으로 열게 되면 다음과 같은 기본적인 구조의 코드를 확인할 수 있는데요.

첫번째 줄(?xml)은 해당 문서의 버전과 인코딩 방식을 의미하고, 두번째 줄(web-app)은 해당 문서의 요소(xmlns)와 속성(xmlns:xsi)에 대한 고유의 이름을 지정하고, 문서의 스키마(정의 규칙, xsi:schemaLocation 부분)을 정의하는 코드를 의미하게 됩니다.

display-name은 배포되는 웹 에플리케이션의 이름을, welcome-file은 사용자가 해당 웹 애플리케이션에 접근할 때 보여질 루트 페이지를 의미하게 되죠. 이때 다중으로 지정된 경우 첫번째로 나열 된 태그의 파일이 사용자에게 보여지게 됩니다. (아래의 경우 index.html)



  project
  
    index.html
    index.htm
    index.jsp
    default.html
    default.htm
    default.jsp

이 중 우리는 서블릿에 대한 정보를 의미하는 서블릿 태그 작성을 위해 welcome-file 태그를 삭제한 뒤 다음과 같이 작성해 줄겁니다. 새로 생긴 태그를



>
  project
>
  
    myServlet
    com.practice.test.MyServlet
    
      id
      Re_Go
    
    
      password
      200,000 subscribers!
    
     
    1
  
>
  
    myServlet
    /servletroute
  
>

servlet : 서블릿의 정보를 등록하는 태그들이 담긴 상위 태그입니다.
servlet-name : 서블릿의 이름을 의미합니다.
servlet-class : 서블릿의 위치가 작성되는 곳입니다.
servlet-mapping : 서블릿과 url 패턴을 매핑할 때의 태그들이 담긴 상위 태그입니다.
url-pattern : 서블릿에 매핑할 url 이름을 지정합니다.
init-param : xml에서 서블릿의 초기화 변수를 전달할 때 사용합니다. 좀 더 구체적으로 말하자면 서블릿이 초기화될 때 서블릿 인스턴스에 전달되며, 서블릿의 초기 설정이나 구성에 사용되는 태그입니다.
param-name : 전달되는 매개변수의 이름을 지정합니다.
param-value : 전달되는 해당 매개변수의 값을 지정합니다.
load-on-startup : 하나의 xml 파일에 서블릿 태그가 여러개로 지정된 경우 초기화 되는 순서를 지정합니다. 숫자가 작을수록 우선 순위가 높아집니다.

param 값을 init 메서드에 활용해보기

위에서 언급한 param 관련 태그는 서블릿이 초기화 될 때 사용되는 인스턴스라고 했는데요. 그 말인 즉 서블릿의 init 메서드에서 해당 인스턴스를 전달 받아 초기화 작업에 필요한 값을 안정적으로 전달 받을 수 있다는 것을 의미하기도 합니다. 그렇다면 이러한 매개변수를 어떻게 전달 받을까요?

우선 해당 서블릿 컨테이너에서 init 메서드를 작성한 뒤 매개변수로 ServletConfig 인터페이스를 받도록 작성해 줍니다. 이때 이 ServletConfig 객체는 서블릿이 최초로 실행되는 시점에 자동적으로 생성되므로, 만약 xml 파일 내에 param 태그로 매개변수를 지정해 주었다면 이에 대한 처리를 init 메서드에서 해주어야 한다는 것이죠.

String id, password; 
@Override
public void init(ServletConfig config) throws ServletException {
    id = config.getInitParameter("id");
    password = config.getInitParameter("password");
}

[Javascript] jQuery 간단 정리 | DOM 조작을 쉽고 빠르게 도와주는 라이브러리, jQuery 간단 개요

Tue, 30 Jul 2024 08:36:42 GMT

1. jQuery란?

jQuery란 자바스크립트 라이브러리 중 하나로, HTML 문서를 탐색하고 조작하기 쉬운 API를 제공하여 웹 개발을 단순화 하는데 사용되는 라이브러리인데요. 제이쿼리를 이용하면 HTML 문서의 탐색 및 조작, 이벤트 처리, 애니메이션, Ajax와 같은 기능을 쉽게 사용할 수 있기 때문에 리액트의 등장 전까지 근 10년 동안 사용되어온 자바스크립트 라이브러리라고 합니다. (물론 지금도 사용은 되고 있으나 리액트, 앵귤러, 넥스트js 등의 등장으로 약간 주춤하고 있긴 합니다.)

2. jQuery 임포트 방법

기본적으로 jQuery는 jQuery 라이브러리 파일 자체를 임포트 하는 방법과, 온라인 CDN(Content Delivery Network)을 사용하면 됩니다.

// 프로젝트 내 자체 파일의 경로를 지정

// 브라우저에서 지원하는 CDN 경로를 지정

3. 기본 작성 방법

제이쿼리의 작성 형식은 크게 세가지라 구분이 되는데요. $ 기호, 선택자, action()으로 구분이 되며, 각 대상들의 의미는 다음과 같습니다.

$ : jQuery를 정의하고, jQuery를 호출하여 사용할 수 있음
선택자() : 자바스크립트의 쿼리 셀렉터 선택자와 마찬가지로 괄호 안에 찾고자 하는 HTML 요소를 선택
action() : 선택된 요소가 행동할 동작(메서드)를 정의하고 실행

아이디 p 태그
클래스 p 태그

// id가 idBtn1인 요소를 클릭하면 id가 pa인 요소를 숨김
$("#idBtn1").click(() => {
  $('#pa').hide();
});
// 클래스가 classBtn1인 요소를 클릭하면 클래스가 pa인 요소를 숨김
$(".classBtn1").click(() => {
  $('.pa').hide();
})
// 클래스가 tagBtn1인 요소를 클릭하면 태그가 p인 요소를 숨김
$(".tagBtn1").click(() => {
  $('p').hide();
})
// id가 idBtn2인 요소를 클릭하면 아이디가 pa인 요소를 선택한 뒤 다시 나타냄
$("#idBtn2").click(() => {
  $('#pa').show();
});
// 위 설명과 동일
$(".classBtn2").click(() => {
  $('.pa').show();
});
// 위 설명과 동일
$(".tagBtn2").click(() => {
  $('p').show();
})

만약 jquery 코드를 순수한 자바스크립트 돔 형태로 작성한다면 어떻게 작성할 수 있을까요?

document.getElementById('idBtn1').addEventListener('click', () => {
  document.getElementById('pa').style.display = 'none';
});
>
document.querySelectorAll('.classBtn1').forEach(element => {
  element.addEventListener('click', () => {
    document.querySelectorAll('.pa').forEach(paElement => {
      paElement.style.display = 'none';
    });
  });
});
>
document.querySelectorAll('.tagBtn1').forEach(element => {
  element.addEventListener('click', () => {
    document.querySelectorAll('p').forEach(pElement => {
      pElement.style.display = 'none';
    });
  });
});
>
document.getElementById('idBtn2').addEventListener('click', () => {
  document.getElementById('pa').style.display = 'block';
});
>
document.querySelectorAll('.classBtn2').forEach(element => {
  element.addEventListener('click', () => {
    document.querySelectorAll('.pa').forEach(paElement => {
      paElement.style.display = 'block';
    });
  });
});
>
document.querySelectorAll('.tagBtn2').forEach(element => {
  element.addEventListener('click', () => {
    document.querySelectorAll('p').forEach(pElement => {
      pElement.style.display = 'block';
    });
  });
});

네... 이것이 바로 제이쿼리를 사용하는 이유가 되겠습니다 ... 다중 선택된 요소에 이벤트를 주기 위해 forEach를 쓰느니, 스타일 속성을 주느니 할 필요 없이 이벤트 함수인 hide와 show를 사용하면 되니까요!

4. 스타일 지정 방법

제이쿼리를 이용해 스타일을 지정할 때는 선택자 뒤쪽에 .css 메서드로 단일, 다중 속성을 지정하면 되는데요. 이때 다중 속성의 경우 객체 형식으로 전달해주면 되기 때문에, 객체를 직접 넣어주거나 객체를 할당 받은 변수를 할당해주면 됩니다.


  html
  css
  javascript
  jquery
  ajax

// 단일 css 속성을 선택할 때는 속성, 값 순서대로 작성합니다.
$(".html").css('color','red');
$(".css").css('color','yellow');
>
// 다중 속성의 경우 객체 형식으로 전달해주면 됩니다.
let css = {
  'font-size' : '30px',
  'background-color' : 'orange'
}
$('ul li').css(css);

5. 이벤트 지정 방법

이벤트의 경우 자바스크립트의 이벤트들과 크게 다르지 않는데요. 다만 인라인 스타일(접두어로 on을 사용)을 사용하지 않는다는 점만 알아두시면 될텐데, 제이쿼리의 이벤트 종류들은 해당 블로그에서 깔끔하고 자세하게 알려주고 있기 때문에, 여기서는 간단한 예시를 들어 동작 원리 몇 가지만 소개해 드리겠습니다.

마우스 이벤트(mouseover, mouseout)

MouseOver / MouseOut

// 해당 요소에 마우스를 올리면 css 속성을 변경
$('#header').mouseover(() => {
$('#header').css('background-color', 'yellow')
})
// 해당 요소에 마우스를 떼면 css 속성을 변경
$('#header').mouseout(() => {
$('#header').css('background-color', 'pink')
})

입력할 때마다 HTML 요소를 변화(keydown, text)

타이핑을 해보세요 : 

count : 0

let content = $('p>span').text()
$('#inputName').keydown(() => {
$('span').text(++content);
})

6. 배열 메서드 사용 방법

제이쿼리에서는 다중 태그 요소들을 가져오고, 이를 가공하는 작업을 사용할 때 주로 each, map, grep를 사용하는데요. 해당 메서드들에 대한 설명을 짧게 말씀드려보자면 다음과 같습니다.

$.each() : 배열이나 객체를 순회하면서 각 항목에 대해 지정된 작업을 수행합니다.
$.map() : 배열 또는 객체를 순회하면서 각 항목을 변환하고, 변환된 결과로 새 배열을 생성합니다.
$.grep() : 배열에서 조건을 만족하는 항목만 필터링하여 새로운 배열을 생성합니다.

Q. 중복되는 값을 가진 태그를 제거한 뒤 새로운 값으로 대체하는 코드


  사과
  바나나
  포도
  딸기
  귤
  배
  참외
  복숭아
  사과
  딸기

선택한 li 태그들 중 text 값만 골라서 새로운 배열로 반환 받는 작업(map)

$(document).ready(function() {
// 모든  요소의 텍스트를 배열로 추출
var items = $('#fruit-list li').map(function() {
  // this는 해당 각각의 태그들, 즉 li 요소들을 의미함.
  return $(this).text();
}).get();
console.log(items)

가져온 값들 중 중복을 제거하는 작업(grep)

// 중복 제거를 위한 임시 객체
var seen = {};
>
// $.grep()을 사용하여 중복 제거, 이때 grep 메서드의 첫번째 매개변수는 그룹(배열)이, 두번째 매개변수는 자동으로 각 값들과 인덱스를 제공 받는 콜백 함수를 지정하여 작업을 수행함) 
var uniqueItems = $.grep(items, function(value, index) {
// 
if (!seen[value]) {
 seen[value] = true;
 return true;  // 항목이 중복되지 않았으므로 반환
}
return false;  // 항목이 중복되었으므로 반환하지 않음
});

기존의 ul을 제거한 뒤 중복 제거된 배열 정보로 태그를 재생성

//  요소를 싹 다 비운 후 each를 이용해 중복 제거된 값  요소 추가
$('#fruit-list').empty();
// each 메서드의 콜백 함수의 첫번째 매개변수는 인덱스, 두번째는 값을 나타내므로 요소를 순환하면서 ul 태그에 li에 item을 혼합해 달아주면 됨.
$.each(uniqueItems, function(index, item) {
$('#fruit-list').append('
' + item + '');
});

7. 클래스 추가 및 제거 방법

자바스크립트에서는 클래스를 추가하거나 제거할 때 classList(클래스이름).add, 혹은 remove를 사용하여 해당 요소의 클래스를 변경했는데요. 제이쿼리에서는 크게 세 가지 메서드로 나뉘어져 있답니다.

add-class : 클래스를 추가
remove-class : 클래스를 제거
toggle-class : 두 개 이상의 클래스를 가지고 있을 경우 클래스를 토글

버튼을 누를 때마다 해당 요소에 클래스를 주어 스타일을 변화시키는 코드

jQuery css 변경 방법
jquery CSS

$("#add-class").click(() => {
  $("#set-css").addClass('red');
})
$("#remove-class").click(() => {
  $("#set-css").removeClass('red');
})
$("#toggle-class").click(() => {
  $("#set-css").toggleClass('red');
})

[JSP&Servlet] 메소드 방식에 따라 클라이언트의 정보 추출 메서드

Mon, 29 Jul 2024 15:19:35 GMT

1. 기본 코드 구조

GET, POST 방식에 따른 클라이언트의 제공 정보를 추출하기에 앞서 JSP 구조를 다음과 같이 짜보도록 하겠습니다.

JSP 페이지

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>





Insert title here


 회원 가입
 
     
         개인 정보
         
             
                 아이디 : 
                 
             
             
                 패스워드 : 
                 
                     
             
                 이름 : 
                 
             
             
                    취미 : 
                 등산
                 운동
                 독서
                 여행
                 없음
             
             
                 성별 : 
                 남자
                 여자
             
             
                 종교 : 
                 
             
             
                 자기 소개

CSS 파일

h1{
 text-align: center;
}
body{
 width: 100vw;
 height: 100vh;
}
fieldset{
 width: 300px;
 height: 500px;
 margin: auto;
}
legend{
 text-align: center;
}
ul {
padding: 0;
list-style-type: none;
}
ul li {
margin-bottom: 15px;
}
label.title{
 text-align: left;
}
input.input{
 width: 300px;
 float: right;
}
textarea {
 display: block;
 margin: 10px 0; 
}
.button-group{
 text-align: center;
}

서블릿 파일

package com.practice.test;
>
import java.io.*;
import java.util.Arrays;
>
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.WebServlet;
>
@WebServlet("/page")
public class ServletContainer extends HttpServlet {
>
 @Override
 public void init() throws ServletException {
     // DB 연결이나 파일 로딩, 기타 작업을 초기화 하는 구역입니다.
     System.out.println("초기화 완료");
 }
>
 @Override
 protected void service(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
     String method = req.getMethod();
>        
     // GET 요청 처리
     if ("GET".equalsIgnoreCase(method)) {
         doGet(req, res);
     }
     // POST 요청 처리
     else if ("POST".equalsIgnoreCase(method)) {
         doPost(req, res);
     }
     // 다른 HTTP 메서드에 대한 처리 추가
     else {
>            res.setStatus(HttpServletResponse.SC_METHOD_NOT_ALLOWED);
         res.getWriter().println("HTTP method not supported.");
     }
 }
>
 @Override
 protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
     // 요청 인코딩 설정
     req.setCharacterEncoding("UTF-8");
>
     // 보여질 컨텐츠의 인코딩 세팅
     resp.setContentType("text/html;charset=UTF-8");
     // 응답 인코딩 세팅
     resp.setCharacterEncoding("UTF-8");
>
     // 서블릿에서 사용자에게 데이터 출력을 위해 관례적으로 사용하는 출력 변수를 사용해 코드의 가독성을 높임
     PrintWriter out = resp.getWriter();
>        
     // 요청 파라미터 추출
     String id = req.getParameter("id");
     String pw = req.getParameter("pwd");
     String name = req.getParameter("name");
     String[] hobbies = req.getParameterValues("hobby");
     String gender = req.getParameter("gender");
     String religion = req.getParameter("religion");
     String introduce = req.getParameter("introduce");
>
     // 사용자에게 보여질 화면 출력
     out.print("요청 결과");
     out.print("");
     out.print("요청 결과");
     out.print("ID : " + id + "");
     out.print("PASSWORD : " + pw + "");
     out.print("이름 : " + name + "");
     out.print("취미 : " + Arrays.toString(hobbies) + "");
     out.print("성별 : " + gender + "");
     out.print("종교 : " + religion + "");
     out.print("소감 : " + introduce + "");
     out.print("");
     out.print("");
     out.print("");
     out.print("");
 }
>   
 @Override
 protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
     // 요청 인코딩 설정
     req.setCharacterEncoding("UTF-8");
>        
     // 보여질 컨텐츠의 인코딩 세팅
     resp.setContentType("text/html;charset=UTF-8");
     // 응답 인코딩 세팅
     resp.setCharacterEncoding("UTF-8");
>
     // 서블릿에서 사용자에게 데이터 출력을 위해 관례적으로 사용하는 출력 변수를 사용해 코드의 가독성을 높임
     PrintWriter out = resp.getWriter();  
>
     String id = req.getParameter("id");
     String pw = req.getParameter("pwd");
     String name = req.getParameter("name");
     String[] hobbies = req.getParameterValues("hobby");
     String gender = req.getParameter("gender");
     String religion = req.getParameter("religion");
     String introduce = req.getParameter("introduce");
     String queryInfo = req.getQueryString();
>
     out.print("요청 결과");
     out.print("");
     out.print("" + "total : " + queryInfo + "");
     out.print("요청 결과");
     out.print("" + "ID : " + id + "");
     out.print("" + "PASSWORD : " + pw + "");
     out.print("" + "이름 : " + name + "");
     out.print("" + "취미 : " + Arrays.toString(hobbies) + "");
     out.print("" + "취미 : " + String.join(", ", hobbies) + "");
     out.print("" + "성별 : " + gender + "");
     out.print("" + "종교 : " + religion + "");
     out.print("" + "소감 : " + introduce + "");
     out.print("");
     out.print("");
     out.print("");
 }
}

2. getParameter

getParameter는 사용자가 입력한 단일 정보를 추출하는대 사용되는데요. 서블릿과 연결된 JSP 페이지에서 제출 된 사용자의 정보들 중 단일 정보를 가져오며, 이때 가져오는 정보의 형태는 속성은 name이라는 이름과 value라는 이름의 값으로 구성이 됩니다.

HTML에서 name은 id이고 value는 사용자의 입력값이므로

request 객체의 getParameter 메서드로 input의 name이 id인 요소의 값(value)를 추출해 id 변수에 담아 출력하면

String id = req.getParameter("id");
System.out.println(id);

다음과 같이 콘솔창과 웹페이지 창에서 해당 정보를 확인할 수 있습니다.

3. getParameterValues

getParameterValues는 사용자가 입력한 다중 정보를 추출하는대 사용되는데요. 이 방식은 name이 같은 이름인 요소들의 값을 배열 형태로 전달 받아 활용할 수 있습니다.

checkbox 형태의 input은 다중 선택이 가능하기 때문에 name이 hobby인 것을 기준으로 배열 형태로 받을 수 있습니다.

취미 : 
등산
운동
독서
여행
없음

다음과 같이 배열에 값들을 전달한 뒤 배열 형태와 문자열 형태로 반환하면 다음과 같이 확인할 수 있습니다.

String[] hobbies = req.getParameterValues("hobby");
out.print("" + "취미 : " + Arrays.toString(hobbies) + "");
out.print("" + "취미 : " + String.join(", ", hobbies) + "
");

4. getQueryString

getQueryString 메서드는 사용자의 입력값을 주소 형태로 받아오는 메서드인데요. get 방식에는 주소값에 사용자의 입력값이 포함되어 있기 때문에 POST 방식에는 사용이 불가능하고, GET 방식에서만 활용 가능한 메서드입니다.

서블릿에 다음과 같이 쿼리를 구해와 출력을 할 경우

String queryInfo = req.getQueryString();
out.print("" + "total : " + queryInfo + "
");

다음과 같이 쿼리값 자체를 출력할 수 있습니다.

5. getInputStream

getInputStream 메서드는 클라이언트의 요청 정보가 담긴 몸체와 연결된 입력스트림을 생성한 뒤 반환하는 메서드로, 요청정보 몸체에 있는 데이터들을 읽어오고 싶을 때 사용하는데요. 즉 이 메서드는 POST 방식을 위한 메서드라는 말이기도 합니다.

getInputStream 인스턴스를 하나 생성한 후 컨텐츠 길이 만큼을 len 변수에 저장을 해줍니다. (getContentLength 메서드 이용)

그 다음 byte 타입의 배열을 해당 len의 길이만큼 생성하는데, 여기서 byte 배열을 사용하는 이유는 HTTP 요청 본문은 텍스트 뿐만 아니라 바이너리 데이터도 포함될 수 있기에 텍스트와 이진 데이터를 모두 저장 가능한 byte 배열을 사용한 것입니다. 물론 String으로 변환하기 위한 목적도 가지고 있고요.

아무튼 위 작업을 수행한 뒤 read 메서드를 이용해 각각 저장소(b)와 저장 시작 위치(0), 저장할 문자열의 길이(len)을 지정해 읽어줍니다.

그 다음 마지막으로 저장소 b를 문자열로 변환 후 출력을 해줍니다.

ServletInputStream input = req.getInputStream();
int len = req.getContentLength();
byte[] b = new byte[len];
input.read(b, 0, len);
String str = new String(b)
out.print("전체 문자열 : " + str);

그럼 다음과 같이 데이터가 잘 출력되는데요. 여기서 의외인건 POST 방식에서 getParameter 메서드를 사용하면 null, 즉 값이 없음을 의미한다는 겁니다.

그 이유는 getInputStream으로 요청 본문을 직접 읽으면, getParameter 메서드는 더 이상 폼 데이터에 접근할 수 없는데, getInputStream과 getParameter는 서로 다른 데이터 읽기 방식을 사용하기 때문에, 하나의 요청 본문에서 둘 다 사용하려고 하면 충돌이 발생하여 getParameter에서 제대로 값을 읽어오지 못했기 때문이죠.

하지만 그 말인 즉 getInputStream을 사용하지 않으면 getParameter도 정상적으로 사용할 수 있다는 의미이므로 왠만해서는 getParameter로 사용하면 됩니다.

getInputStream 부분을 지우고 나니 잘 되는군요!

[Javascript] 비동기 함수 총정리 | fetch 메서드와 네트워크 통신 활용

Mon, 29 Jul 2024 13:11:38 GMT

1. fetch 메서드란?

fetch 메서드는 앞서 살펴본 비동기 함수들을 이용해 서버와 비동기로 데이터를 주고 받도록 도와주는 브라우저 지원 API로, window 전역 객체의 프로퍼티로서 여러 데이터 형식을 지원하나, 주로 JSON(JavaScript Object Notation) 데이터 통신에 활용되는 메서드입니다.

여기서 JSON이란 JS에서 키와 값으로 이루어진 프로퍼티들의 집합으로, 그냥 객체라고 생각하시면 되는데요. 다만 JS에서 해당 객체의 타입은 Object인 반면, 데이터를 받아올 때에는 우리가 알아볼 수 있도록 JSON 형식이기 때문에 json 메서드를 사용하여 데이터를 JSON 형식으로 변환하는 작업을 해주어야 합니다.

(자료 출처 : https://commons.wikimedia.org/wiki/File:JSON_vs._XML.png)

2. JSON 정보 가져오기 (then, catch)

fetch는 다음과 같이 특정 정보를 담고 있는 웹페이지의 url을 매개변수로 전달 받으면 해당 url로 정보를 요청하게 되는데요.

fetch('https://jsonplaceholder.typicode.com/posts/1')

위와 같이 fetch 메서드는 해당 url로 데이터 요청을 보내게 됩니다. 이때 해당 메서드에 마우스를 올리면 다음과 같은 정보를 확인할 수 있습니다.

해당 메서드를 설명하는 부분에 익숙한 키워드가 보이시죠? 네 그렇습니다. 해당 메서드는 바로 프로미스를 반환하는 메서드, 즉 비동기 함수인 것이죠. 그 말인 즉 url 요청에 의한 결과값을 then(성공), 혹은 catch(실패)로 처리할 수 있다는 말입니다. 아래 코드와 같이 말이죠!

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    console.log('data received');
      console.log(response);
  })
  .catch(err => {
    console.log("can\n't acceptid")
  })

위의 사진을 보시다시피 해당 데이터를 잘 받아온 모습을 확인하실 수 있는데요. 하지만 해당 데이터를 직접 콘솔에 출력하면 내용이 아니라 바디와 헤더의 특정 정보만 나와있을 뿐이죠. 그래서 우리는 이 정보를 알아보기 쉽게 앞서 언급한 json 메서드로 비동기 작업을 진행해 줄겁니다.

물론 json 메서드도 promise를 반환하는 메서드이니 뭘 사용할 수 있다? then과 catch를 사용할 수 있다~!

 fetch("https://jsonplaceholder.typicode.com/posts/1")
   .then((response) => {
   console.log("data received");
   // json 메서드를 호출하여 해당 데이터에 대한 변환 작업을 수행한 뒤 반환 받은 결과값에 따라 then, 혹은 catch문의 코드가 실행됨
   return response.json();
   })
   .then((formattedData) => {
   console.log(formattedData);
   })
   .catch((err) => {
   console.log(err);
   });

이처럼 위의 사진 처럼 우리가 알아보기 쉽게 데이터가 JSON 형태로 정제 된 모습을 확인할 수 있는데요. 다만 첫번째 then 문에서 예외 처리(catch)를 추가하지 못했기 때문에 마저 예외 처리를 추가해 보도록 하겠습니다.

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then((response) => {
    console.log("data received");
    // json 메서드를 호출하여 해당 데이터에 대한 변환 작업을 수행한 뒤 반환 받은 결과값에 따라 then, 혹은 catch문의 코드가 실행됨
    return response.json();
  })
  .then((formattedData) => {
    console.log(formattedData);
  })
  .catch((err) => {
    console.log("파싱 에러:", err);
  })
  .catch((err) => {
    console.log("패치 에러:", err);
  });

다만 catch문에 육안을 알아보기 힘들기 때문에, 첫번째 then 문에 결과값의 ok 속성(성공하면 true이고, 실패하면 false)의 값을 이용해 에러를 아래 코드와 같이 개별적으로 처리하는 코드도 작성이 가능합니다.

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then((response) => {
    // 응답이 성공적이지 않은 경우(response.ok가 false인 경우) status(400 에러 코드 등)을 표시하며 에러를 표시합니다.
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    console.log("data received");
    return response.json();
  })
  .then((formattedData) => {
    console.log(formattedData);
  })
  .catch((err) => {
    console.log("파싱 에러:", err);
  });

3. JSON 정보 가져오기 (async, await)

앞서 소개했듯이, 비동기 함수는 then, catch 뿐만 아니라 async, await 키워드로도 활용이 가능하다고 했죠? 이번에는 해당 API의 정보를 async와 await을 이용한 fetch 메서드로 처리하는 예제를 보여드리겠습니다.

async function fetchData() {
>
  // async, await을 사용할 경우 try로 감싸준 후 catch문을 처리해야함
  try {
    // fetch 호출 및 응답 대기
    const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
> 
    // 응답이 성공적이지 않은 경우 오류를 발생
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
>
    console.log("async, await을 이용했습니다!");
>
    // JSON 데이터로 변환
    const formattedData = await response.json();
>
    // 변환된 데이터 출력
    console.log(formattedData);
>    // catch문에서 오류 처리
  } catch (err) {
    console.log("파싱 에러:", err);
  }
}
>
// 함수 호출
fetchData();

4. JSON 정보 보내기

[Javascript] 비동기 함수 총정리 | async-await 키워드

Mon, 29 Jul 2024 09:34:32 GMT

1. then-catch를 이용한 비동기 함수 처리

앞전에 배운 비동기 함수를 Promise 객체로 선언한 코드가 있다고 쳐보겠습니다.

function myProm(){
  return new Promise(resolve => {
    resolve('완료');
  })
}

이때 반환 받은 Promise의 상태가 정상 상태(resolve)일 경우에 대한 코드로는 다음과 같이 then-catch를 이용해 작성할 수 있는데요.

myProm().then(result => console.log(result))

JS에서는 이러한 비동기 함수인 Promise의 결과값에 대한 처리를 then,catch문으로 작성하는데요. 이러한 방법 보다도 좀 더 직관적으로 코드를 작성할 수 있게 처리를 해주는 비동기 키워드도 존재합니다. 바로 async와 await 키워드죠.

2. async와 await을 활용한 비동기 함수 실행

async와 await은 비동기적인 코드의 흐름을 동기적인 방식으로 흐를 수 있도록 해주는 키워드로, 한마디로 비동기 API나 메서드를 동기적인 흐름을 갖도록 만드는 키워드입니다. 특히 API를 가져올 때 정보의 일관성을 유지하기 위해 사용되죠.

이때 함수의 앞쪽에는 async 키워드를, 비동기 함수의 결과값을 반환 받는 쪽(비동기 함수를 호출한 쪽)에서는 해당 함수의 반환값을 받는 역할을 하는 await 키워드를 아래의 코드와 같이 작성하게 됩니다.

async function print(){
  try{
  const result = await myProm();
  console.log(result);
  }catch(err){
      console.log(err)
  }
}
print();

위와 같이 코드를 작성할 경우 myProm 비동기 함수의 결과값을 result에서 받게 되어 처리를 할 수 있는데요. 즉 then,catch를 사용할 때보다 코드를 좀 더 직관적으로 사용할 수 있습니다.

하지만 단점 또한 존재하는데요. async나 await을 사용할 때에는 함수 안에서 정의를 해주어야 된다는 점, catch문 처리를 위해 try-catch문으로 감싸서 처리를 해주어야 된다는 점이 존재합니다.

then-catch와 async-await 간의 동기 작업 비교

다음 코드는 then-catch와 async-await을 이용해 첫번째 작업부터 세 번째 작업까지의 비동기 작업을 동기화 하는 코드인데요.

확실히 async와 await 키워드를 이용한 코드가 좀 더 코드를 이해하는데 쉬운, 직관적인 코드임을 확인할 수 있습니다.

then-catch

function myProm2() {
 return new Promise(resolve => {
     setTimeout(() => {
         resolve('실행 2번');
     }, 5000);
 });
}
>
function run() {
 // 첫 번째 비동기 작업
 new Promise(resolve => {
     setTimeout(() => {
         resolve('실행 1번');
     }, 500);
 })
 .then(result1 => {
     console.log(result1); // '실행 1번' 출력
>
     // 두 번째 비동기 작업
     return myProm2();
 })
 .then(result2 => {
     console.log(result2); // '실행 2번' 출력
     console.log('실행 3번'); // 마지막으로 실행됨
 })
 .catch(error => {
     console.error('에러 발생:', error);
 });
}
>
run();

async-await

function myProm2() {
 return new Promise(resolve => {
     setTimeout(() => {
         resolve('실행 2번');
     }, 5000);
 });
}
>
async function run() {
 try {
     // 첫 번째 비동기 작업
     const result1 = await new Promise(resolve => {
         setTimeout(() => {
             resolve('실행 1번');
         }, 500);
     });
>       
     console.log(result1); // '실행 1번' 출력
>
     // 두 번째 비동기 작업
     const result2 = await myProm2();
     console.log(result2); // '실행 2번' 출력
>
     console.log('실행 3번'); // 마지막으로 실행됨
 } catch (error) {
     console.error('에러 발생:', error);
 }
}
>
run();