Notice
Recent Posts
Recent Comments
Link
«   2026/05   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Archives
Today
Total
관리 메뉴

ki-sd 님의 블로그

[2026-05-15] JSP 게시판(BBS) 완성과 완전한 CRUD 아키텍처 구현 본문

WebStudy

[2026-05-15] JSP 게시판(BBS) 완성과 완전한 CRUD 아키텍처 구현

ki-sd 2026. 5. 15. 20:45

 오늘은 사용자가 직접 데이터를 생성(Create), 수정(Update), 삭제(Delete)하는 게시판 시스템을 처음부터 끝까지 구현해 냈다. 웹 애플리케이션의 핵심인 CRUD 아키텍처와 화면 이동(Redirection)의 메커니즘을 완벽히 이해한 뜻깊은 시간이었다.

 

1. 처리용 페이지(Process Page)의 도입과 화면 이동 로직

  • 보이지 않는 백엔드 로직 (_ok.jsp): 사용자가 boardInsert.jsp에서 폼(Form)을 작성해 전송하면, 이를 직접 화면에 그리지 않고 insert_ok.jsp라는 중간 처리용 페이지가 데이터를 받는다. 이 페이지는 자바 로직(DAO 호출)만을 순식간에 수행한 뒤 브라우저에게 "목록 페이지로 가라"고 지시한다.
  • response.sendRedirect(): DB에 INSERT나 UPDATE 작업이 완료된 후, 새로고침으로 인한 데이터 중복 전송을 막기 위해 브라우저의 URL을 강제로 변경하여 다른 페이지(예: boardList.jsp)로 이동시키는 웹 트랜잭션의 필수 흐름을 체득했다.

2. 데이터 무결성과 비밀번호 기반의 권한 검증 (보안)

  • UPDATE / DELETE 검증 로직: 게시글을 수정하거나 삭제할 때 가장 중요한 것은 '작성자 본인인가?'를 확인하는 것이다. update_ok.jsp와 delete_ok.jsp에서는 클라이언트가 입력한 비밀번호와 DB에 저장된 비밀번호를 먼저 비교한다.
  • 성공과 실패의 분기 처리: 비밀번호가 일치하여 DAO 로직이 true를 반환하면 수정/삭제 후 목록이나 상세보기로 sendRedirect 시킨다. 만약 틀렸다면 자바스크립트의 alert()으로 경고창을 띄우고 history.back()을 호출하여 이전 화면으로 되돌려 보내는 직관적인 예외 처리 흐름을 구현했다.

3. 디테일한 UI/UX 제어 (프론트엔드 연동 기법) 백엔드 로직이 탄탄해진 만큼, 사용자가 마주하는 프론트엔드의 디테일도 여러 기법을 통해 끌어올렸다.

  • pre-wrap을 통한 텍스트 보존: 게시글 작성 시 textarea에서 입력한 엔터(줄바꿈)나 공백은 일반 HTML에 출력하면 모두 한 줄로 무시된다. 이를 해결하기 위해 상세보기(boardDetail.jsp)의 내용 출력 영역에 CSS white-space: pre-wrap; 속성을 부여하여 사용자가 작성한 형태 그대로(있는 그대로) 렌더링되도록 처리했다.
  • 자동 크기 조절 텍스트박스: 게시판 수정 폼(boardUpdate.jsp)에서 내용이 길 경우 스크롤바가 생기는 답답함을 없애기 위해, oninput 이벤트 리스너와 this.scrollHeight를 활용하여 글자 양에 따라 textarea의 높이가 동적으로 늘어나는 자바스크립트 DOM 제어 기법을 적용했다.
  • 새 글 아이콘([NEW]) 동적 출력: 자바의 SimpleDateFormat을 활용해 오늘 날짜(new Date())를 구한 뒤, 게시글의 작성일(dbday)과 문자열을 비교하여 일치할 경우에만 뱃지 이미지(new.gif)를 조건부로 렌더링하는 실무적인 로직을 구현했다.

4. 서버 사이드 페이징의 수학적 완성

  • 전체 게시글 수(rowCount)를 가져와 10으로 나눈 뒤 소수점을 올림(Math.ceil) 처리하여 총 페이지 수(totalPage)를 구하는 수학적 연산을 적용했다.
  • 특히 게시물 리스트 번호(count)를 DB의 PK(No)가 아닌 연산된 가상 번호로 내림차순 부여(rowCount - ((curPage-1) * offsetCount))하여, 중간에 게시물이 삭제되더라도 화면의 글 번호가 이빨 빠진 것처럼 보이지 않고 깔끔하게 이어지도록 출력 로직을 최적화했다.