Spring[Spring boot] Bank App - 회원가입(화면구현)

👨‍💻 지난 포스팅에서 회원 가입 로직을 설계하고 구현한 것에 이어, 이번에는 회원 가입 화면을 구현하고 H2 데이터베이스를 설정하여 초기 데이터를 셋팅하는 과정을 다뤄보겠습니다. 🚀

---

✅ H2 의존성 추가 (build.gradle)

dependencies {
    runtimeOnly 'com.h2database:h2'
}

 

📌 의존성 확인: H2가 정상적으로 추가되었는지 확인 후 Gradle refresh 실행

---

✅ application.yml 설정

spring:
  datasource:
    url: jdbc:h2:mem:bankdb;MODE=MySQL  # 인메모리 DB 사용
    driver-class-name: org.h2.Driver
    username: sa
    password: ''
  sql:
    init:
      schema-locations: classpath:db/table.sql
      data-locations: classpath:db/data.sql

📌 설정 확인:

• jdbc:h2:mem:bankdb;MODE=MySQL → H2를 MySQL 모드로 실행
• schema-locations, data-locations → 테이블 및 초기 데이터 로드
• http://localhost:8080/h2-console 접속 후 데이터 확인

---

비밀번호 설정을 빈 문자열로 했기 때문에 Connect 눌러서 바로 접근 가능 합니다. 접속하면 우리가 사용할 스키마 및 초기 데이터가 전혀 없는 상태 입니다. 이번 예제에서 설정 할 수 있도록 연습해 봅시다.

 

📌 h2 스키마 및 초기 데이터 작업 순서

1. yml 파일에 서버가 매번 실행 될 때 마다 테이블을 생성하고 초기 데이터를 insert 할 수 있도록 설정
2. resourcese/db 패키지 생성 및 table.sql 파일 생성 data.sql 파일 생성
3. sql 쿼리문 입력 (복사 붙여넣기)
4. H2 인 메모리 접근 및 데이터 확인

---

1. yml … 설정 (인메모리H2설정)

spring:
  mvc:
    view:
      prefix: /WEB-INF/view/ # JSP 파일이 위치한 디렉토리의 접두사를 설정합니다.
      suffix: .jsp # 뷰 이름에 자동으로 추가될 파일 확장자를 설정합니다.
      
  datasource:
    url: jdbc:h2:mem:bankdb;MODE=MySQL  # 데이터베이스 연결을 위한 URL을 설정합니다.
    driver-class-name: org.h2.Driver  # JDBC 드라이버 클래스를 설정합니다.
    username: sa  # 데이터베이스 연결을 위한 사용자 이름을 설정합니다.
    password: ''  # 데이터베이스 연결을 위한 비밀번호를 설정합니다. 여기서는 비밀번호를 빈 문자열로 설정했습니다.
  sql:  # <---- 코드를 추가 
    init:
      schema-locations:
      - classpath:db/table.sql  
      data-locations:
      - classpath:db/data.sql

---

(mysql설정 - 의존성 충돌시 로컬 DB로 사용하세요)

spring:
  mvc:
    view:
      prefix: /WEB-INF/view/
      suffix: .jsp
  servlet:
    multipart:
      max-file-size: 20MB #파일 용량 설정 최대 20MB   
      max-request-size: 20MB
  datasource:
    url: jdbc:mysql://localhost:3306/mybank?serverTimeZone=Asia/Seoul
    driver-class-name: com.mysql.cj.jdbc.Driver
    username: root
    password: asd1234

 

---

2. resourcese/db 패키지 생성 및 table.sql 파일 생성 data.sql 파일 생성

---

🔹 테이블 및 초기 데이터 삽입

테이블 및 초기 데이터를 자동으로 생성하기 위해 SQL 파일을 생성합니다.

 

✅ resources/db/table.sql (테이블 생성)

create table user_tb(
 id int auto_increment primary key, 
 username varchar(50) not null unique, 
 password varchar(100) not null,
 fullname varchar(50) not null, 
 created_at timestamp not null default now()
);

-- 사용자 계좌 테이블 설계 
create table account_tb(
	id int auto_increment primary key, 
    number varchar(30) not null unique,
    password varchar(20) not null, 
    balance bigint not null comment '계좌잔액',
    user_id int, 
    created_at timestamp not null default now()
);

-- 계좌 사용 내역 테이블 - 입금, 출금, 이체 
create table history_tb(
	id int auto_increment primary key comment '거래내역 ID',
    amount bigint not null comment '거래 금액',
    w_account_id int comment '출금계좌ID', 
    d_account_id int comment '입금계좌ID', 
    w_balance bigint comment '출금 요청된 후 계좌 잔액', 
    d_balance bigint comment '입금 요청된 후 계좌 잔액',
	created_at timestamp not null default now()
);

 

📌 테이블 구조:

• user_tb → 사용자 정보 저장
• account_tb → 계좌 정보 저장
• history_tb → 거래 내역 저장

---

✅ resources/db/data.sql (초기 데이터 삽입)

-- 샘플 데이터 입력 
-- 유저 
insert into user_tb(username, password, fullname, created_at)
values('길동', '1234', '고', now());

insert into user_tb(username, password, fullname, created_at)
values('둘리', '1234', '애기공룡', now());

insert into user_tb(username, password, fullname, created_at)
values('마이', '1234', '콜', now());

select * from user_tb;

-- 기본 계좌 등록 
insert into account_tb
		(number, password, balance, user_id, created_at)
values('1111', '1234', 1300, 1, now());        

insert into account_tb
		(number, password, balance, user_id, created_at)
values('2222', '1234', 1100, 2, now());        

insert into account_tb
		(number, password, balance, user_id, created_at)
values('3333', '1234', 0, 3, now());        

select * from account_tb;

-- 1번계좌 1000원 
-- 2번계좌 1000원 
-- 3번계좌 0원 

-- 이체 내역을 기록 
-- (1번 계좌에서 2번계좌로 100원 이체한다) 
insert into history_tb(amount, w_balance, 
			d_balance, w_account_id, d_account_id, created_at)
values(100, 900, 1100, 1, 2, now());

-- ATM 출금만! 1번 계좌에서 100원만 출금 하는 히스토리를 만드세요 
insert into history_tb(amount, w_balance, 
			d_balance, w_account_id, d_account_id, created_at)
values(100, 800, null, 1, null, now());

-- 입금 내역만 ! (1번계좌에 500원 입금) 
insert into history_tb(amount, w_balance, 
			d_balance, w_account_id, d_account_id, created_at)
values(500, null, 1300, null, 1, now()); 

📌 초기 데이터 확인:

• user_tb → 테스트 유저 3명 등록
• account_tb → 각 유저별 기본 계좌 1개 생성
• history_tb → 입출금 및 이체 내역 샘플 데이터 등

---

🔹 H2 데이터베이스 접속 및 확인

 

✅ 3.1 H2 DB 접근 방법

1. 로컬 서버 실행 (http://localhost:8080/h2-console)
2. JDBC URL 입력 (jdbc:h2:mem:bankdb)
3. Connect 클릭 후 user_tb, account_tb 등 데이터 조회

 

SELECT * FROM user_tb;
SELECT * FROM account_tb;
SELECT * FROM history_tb;

 

📌 데이터 검증: 정상적으로 테이블 및 샘플 데이터가 조회되는지 확인

---

🔹 회원 가입 화면 구현 (JSP + Bootstrap 4 활용)

회원 가입 화면은 HTML 폼을 활용하여 브라우저에서 입력 데이터를 서버로 전송하는 기능을 제공합니다.

✅  signUp.jsp 파일 생성

1. mainPage.jsp 파일을 복사하여 signUp.jsp 파일로 저장
2. Bootstrap 4 폼 태그를 활용하여 UI 작성

✅  회원 가입 폼 코드 (signUp.jsp)

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

<!-- header.jsp -->
<%@ include file="/WEB-INF/view/layout/header.jsp"%>

<!-- start of content.jsp(메인 영역)   -->
<div class="col-sm-8">
	<h2>회원 가입</h2>
	<h5>Bank App 오신 걸 환영합니다.</h5>
	<form action="/user/sign-up" method="post">
		<div class="form-group">
			<label for="username">Username:</label>
			<input type="text" class="form-control" placeholder="Enter username" id="username" name="username" value="cos">
		</div>
		<div class="form-group">
			<label for="pwd">Password: </label>
			<input type="password" class="form-control" placeholder="Enter password" id="pwd" name="password" value="1234">
		</div>
		<div class="form-group">
			<label for="fullname">Fullname: </label>
			<input type="text" class="form-control" placeholder="Enter fullname" id="fullname" name="fullname" value="spring">
		</div>
		<div class="text-right">
			<button type="submit" class="btn btn-primary">회원가입</button>
		</div>
	</form>
</div>
</div>
</div>

<!-- end of content.jsp(메인 영역)   -->

<!-- footer.jsp -->
<%@ include file="/WEB-INF/view/layout/footer.jsp"%>

부트스트랩 4 Form 태그 활용

W3Schools.com

signUp.jsp 파일을 생성해주세요

 

signUp.jsp 작업 순서

1. mainPage.jsp 파일에서 코드를 복사후에 signUp.jsp 파일로 붙여 넣기 합니다.

2. Bootstrap 4 Form 태그에서 코드를 복사해서 가져 옵니다.

 

 

2. Bootstrap 4 Form 코드 복사

 

signUp.jsp 파일에 복사한 코드를 불필요 한 부분을 삭제하고 복사 붙여 넣기 합니다

수정 완료된 코드

 

회원 가입 결과 확인 및 오류 테스트

username 컬럼에는 DB 제약 사항인 유니크 키가 걸려 있습니다.

 

동일한 username 으로 가입 재 요청시 오류 확인

---

🔹 회원 가입 결과 및 오류 테스트

회원 가입 시 username 컬럼이 UNIQUE KEY 제약 조건이 걸려 있으므로, 동일한 username으로 가입 요청 시 오류가 발생합니다.

 

✅ 테스트 시나리오

케이스	입력 데이터	예상 결과
✅ 정상 회원 가입	username=hong, password=1234, fullname=홍길동	회원 가입 성공 및 로그인 페이지 이동
❌ username 중복 가입	username=길동, password=1234, fullname=고	DB 오류 (Unique Key 위반)
❌ 비밀번호 누락	username=hong, fullname=홍길동	400 BAD_REQUEST - password 입력 요청

📌 검증 도구: Postman, Talend API Tester를 활용하여 회원 가입 API 테스트

---

6. 최종 정리

1️⃣ H2 인메모리 DB 설정 및 접근 방법 학습 (application.yml)
2️⃣ 테이블 (table.sql) 및 초기 데이터 (data.sql) 삽입 후 H2에서 확인
3️⃣ 회원 가입 화면 (signUp.jsp) Bootstrap 4 폼을 활용하여 구성
4️⃣ 회원 가입 후 데이터 검증 및 오류 테스트 (username 중복 테스트 등)

 

🚀 이제 H2 데이터베이스를 활용하여 기본적인 CRUD를 연습할 준비가 완료되었습니다! 🚀