JSP 파일 (프론트엔드) + DB연결

moon.kick·2025년 5월 2일

좋아! 지금까지 우리가 본 Java 코드 (백엔드) 와는 달리,
이제는 src/main/webapp 폴더 안에 있는 JSP 파일 (프론트엔드) 이야기를 해보자!
파일 구조, 필요 여부, 인덱스 페이지 생성, 그리고 팀플 역할 분담까지 전부 알려줄게 💡

🌐 1. webapp 폴더 구조

webapp/
├── index.jsp               ← 메인 첫 화면
├── board/                  ← 게시판 관련 JSP
│   ├── list.jsp, read.jsp 등
├── cart/                   ← 장바구니 관련
├── goods/                  ← 상품 목록
├── order/                  ← 주문 관련
├── user/                   ← 회원 관련 (login.jsp 등)
├── META-INF/
└── WEB-INF/

👉 이 구조는 "기능 단위"로 잘 나눠져 있어.
기능이 복잡하다면 그대로 유지해도 좋아.
단순한 프로젝트라면 합칠 수도 있어. 예를 들어 cart, order는 /shop/ 하나로 합칠 수도 있음!

✅ 2. index.jsp 예시 (홈 화면 만들기)

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <title>Welcome</title>
</head>
<body>
    <h1>쇼핑몰 프로젝트에 오신 것을 환영합니다!</h1>

    <ul>
        <li><a href="/front?key=goods">상품 목록 보기</a></li>
        <li><a href="/front?key=board">게시판</a></li>
        <li><a href="/front?key=cart">장바구니</a></li>
        <li><a href="/front?key=order">주문하기</a></li>
        <li><a href="/user/login.jsp">로그인</a></li>
    </ul>
</body>
</html>

이렇게 하면 프로젝트 실행했을 때 깔끔한 메인페이지를 보여줄 수 있어!
※ key=xxx 부분은 actionMapping.properties와 연결되는 부분이야!

✂️ 3. 파일 줄일 수 있나?

폴더	줄여도 될까?	이유
`board/`	그대로 유지	게시판은 기능이 많아질 가능성이 큼
`cart/`, `order/`	→ `shop/`으로 합칠 수 있음	화면 수가 적다면 하나로 합쳐도 관리 쉬움
`goods/`	유지 가능	상품 관리만 따로 필요하면 유지
`user/`	유지 권장	로그인/회원가입은 분리되어 있어야 보안적으로도 좋아

결론:
기능이 단순하면 goods + cart + order → /shop/ 하나로 줄일 수 있고,
게시판(board/), 회원(user/)은 따로 두는 게 좋아.

👨‍👩‍👧‍👦 4. 팀플 4인 역할 분담

💡 팀원이 각자 전공/관심 다를 때 기준!

역할	담당 범위	추천 대상
🔸 프론트엔드 (JSP + 디자인)	`/webapp/*.jsp`, 메뉴 구성, 사용자 흐름 설계	UI 감각 있는 사람
🔹 컨트롤러 + 서비스 개발	`/controller`, `/service`	로직 이해 빠른 사람
🔸 DAO + DB 연동	`/dao`, DB 테이블 설계, 쿼리	SQL 잘 다루는 사람
🔹 통합 및 디버깅 + 배포	전체 흐름 점검, 오류 수정, 발표 준비	리더십 있고 꼼꼼한 사람

🧩 예시로 배정하면?

지우: 프론트 (JSP + index.jsp + 상품/회원 UI)
현우: 컨트롤러/서비스 구현 (InsertController, OrderController)
민지: DAO 및 DB 설계 (UserDAOImpl, OrderDAOImpl)
재희: 전체 연결 흐름 점검, PR 테스트, 발표자료 정리

✅ 마무리 요약

webapp/ 폴더는 화면(JSP) 중심이고, java/는 기능(Controller/Service) 중심이야!
index.jsp는 사용자 입장에서 진입점, 메뉴 역할을 해!
폴더는 기능이 단순하면 줄여도 되지만, 보통은 기능별로 나누는 게 좋아
팀플은 역할 분담을 기능별로 나누면 협업이 쉬워지고 책임도 명확해져!

좋아! 진도 팍팍 빼자 💪
그럼 다음 단계는 “DB 연결”과 “파일 업로드” 중 어떤 걸 먼저 해볼까?

🔸 1. DB 연결 먼저?

JDBC 사용해서 MySQL 같은 데이터베이스에 회원정보 저장해보기
기본 DAO 작성
테이블 생성 SQL문도 함께 제공

🔸 2. 파일 업로드 먼저?

게시판에서 이미지 업로드 기능
MultipartRequest or Servlet 3.0 Part 이용
파일명 중복 방지, 저장 경로 설정, 미리보기 구현 등

좋아! 그럼 JSP/Servlet 기반 웹 프로젝트에서 DB(MySQL) 연결하는 걸 차근차근 해보자.
기초부터 확실히! JDBC 기반으로 진행할게 💾

✅ DB 연결 전체 흐름 요약 (Step by Step)

DB 준비 (MySQL 설치 + DB & 테이블 생성)
JDBC 드라이버 설정 (JAR 라이브러리 추가)
DB 연결 도구 클래스 만들기 (DbManager.java)
DAO 클래스에서 DB 사용
Controller → Service → DAO → DB 저장/조회 테스트

🧱 Step 1. MySQL DB 준비

💡 샘플 DB 만들기

CREATE DATABASE web_basic;
USE web_basic;

CREATE TABLE member (
  id VARCHAR(20) PRIMARY KEY,
  pwd VARCHAR(20) NOT NULL,
  name VARCHAR(20),
  age INT,
  join_date DATETIME DEFAULT CURRENT_TIMESTAMP
);

👉 테이블 이름: member
id, 비밀번호, 이름, 나이, 가입일 저장

📦 Step 2. JDBC 드라이버 추가

✅ 방법

mysql-connector-j-8.x.x.jar 파일 다운로드
프로젝트의 lib/ 폴더에 넣고
프로젝트 오른쪽 클릭 → Build Path → Add to Build Path

🔧 Step 3. DB 연결 도우미 클래스 (DbManager)

package db.util;

import java.sql.Connection;
import java.sql.DriverManager;

public class DbManager {
    public static Connection getConnection() throws Exception {
        String url = "jdbc:mysql://localhost:3306/web_basic?useSSL=false&serverTimezone=Asia/Seoul";
        String user = "root"; // 본인 ID
        String password = "비밀번호"; // 본인 비번

        Class.forName("com.mysql.cj.jdbc.Driver");
        return DriverManager.getConnection(url, user, password);
    }
}

📌 이후 DAO에서 이걸 불러와서 DB 연결할 수 있음

📂 Step 4. DAO 클래스 예시

package web.mvc.dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import db.util.DbManager;
import web.mvc.dto.MemberDTO;

public class MemberDAOImpl {
    public void insert(MemberDTO dto) {
        String sql = "INSERT INTO member (id, pwd, name, age) VALUES (?, ?, ?, ?)";

        try (Connection conn = DbManager.getConnection();
             PreparedStatement pstmt = conn.prepareStatement(sql)) {

            pstmt.setString(1, dto.getId());
            pstmt.setString(2, dto.getPwd());
            pstmt.setString(3, dto.getName());
            pstmt.setInt(4, dto.getAge());

            pstmt.executeUpdate();
            System.out.println("DB 저장 완료!");

        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

🧪 Step 5. 실제 Controller에서 연결 테스트

public class InsertController implements Controller {
    private MemberService service = new MemberServiceImpl();

    public ModelAndView handleRequest(HttpServletRequest request, HttpServletResponse response) {
        String id = request.getParameter("id");
        String pwd = request.getParameter("pwd");
        String name = request.getParameter("name");
        int age = Integer.parseInt(request.getParameter("age"));

        MemberDTO dto = new MemberDTO(id, pwd, name, age);
        service.insertMember(dto);

        return new ModelAndView("index.jsp", true);
    }
}

📌 필요한 클래스 다 만들 준비되었어

클래스명	역할
`DbManager.java`	DB 연결 도우미
`MemberDTO.java`	회원 정보 객체
`MemberDAO.java`	DB에 insert 쿼리 실행
`MemberServiceImpl.java`	DAO 호출 중간 관리자
`InsertController.java`	사용자의 입력값 받아 서비스 호출

이 질문 너무 좋아!
“폴더를 더 합쳐서 간단하게 만들 수 없을까?”
→ 실제 개발에서도 초기엔 단순화해서 시작하고, 나중에 기능 많아지면 다시 분리하는 게 정석이야!

🎯 우선 요약부터

폴더	합칠 수 있어?	이유 (요약)
`cart/`, `order/`	✅ 합쳐서 `shop/` 으로 가능	둘 다 구매과정이므로 묶어도 자연스러움
`goods/`	🔸 조건부로 합칠 수 있음	`shop/`에 포함 가능 (상품 목록이라면)
`board/`	⚠️ 별도로 두는 게 좋음	사용자 게시판은 구조도 다르고 게시물/댓글 등 복잡
`user/`	⚠️ 반드시 분리 권장	로그인/회원가입은 보안과 세션 처리 따로 필요

📦 더 구체적으로 알려줄게!

✅ 1. `cart/`, `order/`, `goods/` → `shop/` 으로 통합 가능

통합된 구조 예시:

webapp/
└── shop/
    ├── goodsList.jsp     ← 상품 목록
    ├── cart.jsp          ← 장바구니 목록
    ├── order.jsp         ← 주문 정보
    ├── orderComplete.jsp ← 주문 완료

→ 이름을 명확하게 지으면 헷갈리지 않아
→ 컨트롤러도 GoodsController, CartController, OrderController는 따로 두고, 화면만 모아서 관리 가능

❌ 2. `board/`는 따로 두자

이유:
- 구조가 완전 다름 (게시판 글쓰기, 글읽기, 댓글 등)
- CRUD 방식으로 로직이 다르고
- 사용자 인터랙션 중심이라 UI도 많이 다름

❌ 3. `user/`는 반드시 따로

이유:
- 로그인/로그아웃
- 세션 처리
- 마이페이지, 회원가입, 비밀번호 변경 등 보안 중심
실제 웹사이트에서 유저 정보는 항상 별도로 철저히 관리함!

✅ 추천 구조 (간단하게 정리하면서도 확장성 유지)

webapp/
├── index.jsp
├── shop/           ← 상품, 장바구니, 주문
│   ├── goodsList.jsp
│   ├── cart.jsp
│   └── order.jsp
├── board/          ← 사용자 게시판
│   ├── list.jsp
│   ├── write.jsp
│   └── read.jsp
├── user/           ← 로그인/회원 기능
│   ├── login.jsp
│   └── register.jsp

💬 결론!

shop 폴더에 3개 통합 가능: goods, cart, order
board/user는 그대로 유지: 기능 구조가 완전히 달라

원하면 내가 이 구조로 디렉토리 리팩토링한 .jsp 예시 파일명도 새로 정리해줄게!
바로 컨트롤러 흐름까지도 맞춰서 연결 도와줄 수 있어 😎
리팩토링해서 진행할까?

moon.kick

@mgkick

이전 포스트

핸들러맵핑리스너

다음 포스트

JSP 파일 (프론트엔드) + DB연결

🌐 1. webapp 폴더 구조

✅ 2. index.jsp 예시 (홈 화면 만들기)

✂️ 3. 파일 줄일 수 있나?

👨‍👩‍👧‍👦 4. 팀플 4인 역할 분담

💡 팀원이 각자 전공/관심 다를 때 기준!

🧩 예시로 배정하면?

✅ 마무리 요약

🔸 1. DB 연결 먼저?

🔸 2. 파일 업로드 먼저?

✅ DB 연결 전체 흐름 요약 (Step by Step)

🧱 Step 1. MySQL DB 준비

💡 샘플 DB 만들기

📦 Step 2. JDBC 드라이버 추가

✅ 방법

🔧 Step 3. DB 연결 도우미 클래스 (DbManager)

📂 Step 4. DAO 클래스 예시

🧪 Step 5. 실제 Controller에서 연결 테스트

📌 필요한 클래스 다 만들 준비되었어

🎯 우선 요약부터

📦 더 구체적으로 알려줄게!

✅ 1. `cart/`, `order/`, `goods/` → `shop/` 으로 통합 가능

❌ 2. `board/`는 따로 두자

❌ 3. `user/`는 반드시 따로

✅ 추천 구조 (간단하게 정리하면서도 확장성 유지)

💬 결론!

핸들러맵핑리스너

팀원 4명 역할 분담 (기능 + 폴더 기준)

0개의 댓글

JSP 파일 (프론트엔드) + DB연결

🌐 1. webapp 폴더 구조

✅ 2. index.jsp 예시 (홈 화면 만들기)

✂️ 3. 파일 줄일 수 있나?

👨‍👩‍👧‍👦 4. 팀플 4인 역할 분담

💡 팀원이 각자 전공/관심 다를 때 기준!

🧩 예시로 배정하면?

✅ 마무리 요약

🔸 1. DB 연결 먼저?

🔸 2. 파일 업로드 먼저?

✅ DB 연결 전체 흐름 요약 (Step by Step)

🧱 Step 1. MySQL DB 준비

💡 샘플 DB 만들기

📦 Step 2. JDBC 드라이버 추가

✅ 방법

🔧 Step 3. DB 연결 도우미 클래스 (DbManager)

📂 Step 4. DAO 클래스 예시

🧪 Step 5. 실제 Controller에서 연결 테스트

📌 필요한 클래스 다 만들 준비되었어

🎯 우선 요약부터

📦 더 구체적으로 알려줄게!

✅ 1. cart/, order/, goods/ → shop/ 으로 통합 가능

❌ 2. board/는 따로 두자

❌ 3. user/는 반드시 따로

✅ 추천 구조 (간단하게 정리하면서도 확장성 유지)

💬 결론!

핸들러맵핑리스너

팀원 4명 역할 분담 (기능 + 폴더 기준)

0개의 댓글

✅ 1. `cart/`, `order/`, `goods/` → `shop/` 으로 통합 가능

❌ 2. `board/`는 따로 두자

❌ 3. `user/`는 반드시 따로