[Day 21 | JSP] 게시판 디자인 및 개발 과정

게시판 디자인 및 개발 과정

1. HTML → JSP

• HTML에서 JSP로 변환 작업

  • HTML은 정적 웹 페이지를 구성하는 기본적인 언어입니다. 이와 달리 JSP는 동적인 웹 페이지를 구성할 때 사용합니다.

  • JSP는 HTML 내부에 자바 코드를 삽입할 수 있으므로, 데이터베이스와의 상호작용을 통해 동적 콘텐츠를 생성할 수 있습니다.

  • 예를 들어, 게시판 글 목록을 출력하려면 JSP를 사용해 HTML을 동적으로 생성해야 합니다.

    HTML 예시:

    <table>
        <tr>
            <th>번호</th>
            <th>제목</th>
            <th>작성자</th>
        </tr>
        <tr>
            <td>1</td>
            <td>안녕하세요</td>
            <td>홍길동</td>
        </tr>
    </table>

    JSP 변환:

    <table>
        <tr>
            <th>번호</th>
            <th>제목</th>
            <th>작성자</th>
        </tr>
        <%
            List<Post> posts = postRepository.findAll();
            for (Post post : posts) {
        %>
        <tr>
            <td><%= post.getId() %></td>
            <td><%= post.getTitle() %></td>
            <td><%= post.getWriter() %></td>
        </tr>
        <% } %>
    </table>

---

2. 데이터베이스 기획 (모델링 - ERD)

• 2.1 데이터베이스 / 사용자 / 암호

  • 데이터베이스는 게시판 데이터를 저장하기 위한 시스템으로 설계합니다.

  • 애플리케이션에서 접근할 수 있도록 사용자 계정과 비밀번호를 설정합니다.

  • 예:

    • 데이터베이스: board
    • 사용자: board
    • 비밀번호: 123456

    SQL:

    CREATE DATABASE board;
    CREATE USER 'board'@'localhost' IDENTIFIED BY '123456';
    GRANT ALL PRIVILEGES ON board.* TO 'board'@'localhost';

• 2.2 테이블 설계

  • 게시판의 기본 구조를 설계합니다. 테이블에는 필요한 칼럼과 속성을 정의합니다.

    게시판 테이블 구조 예시:

칼럼명	데이터 타입	크기	설명	제약 조건
seq	INT	-	게시글 고유번호	PRIMARY KEY, AUTO_INCREMENT
subject	VARCHAR	150	게시글 제목	NOT NULL
writer	VARCHAR	12	작성자 이름	NOT NULL
mail	VARCHAR	50	작성자 이메일	NULL 가능
password	VARCHAR	41	비밀번호	NOT NULL
content	TEXT	-	게시글 내용	NULL 가능
hit	INT	-	조회수	NOT NULL
wip	VARCHAR	15	작성자 IP 주소	NOT NULL
wdate	DATE	-	작성일	NOT NULL

SQL:

 CREATE TABLE board1 (
     seq INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
     subject VARCHAR(150) NOT NULL,
     writer VARCHAR(12) NOT NULL,
     mail VARCHAR(50),
     password VARCHAR(41) NOT NULL,
     content TEXT,
     hit INT NOT NULL,
     wip VARCHAR(15) NOT NULL,
     wdate DATE NOT NULL
 );

---

3. 프로그램 기획

• 3.1 UML

  • 프로그램의 구조를 시각화하는 데 사용되지만, 작은 프로젝트에서는 생략하는 경우가 많습니다.

• 3.2 페이지 네비게이션 (DFD - 데이터 흐름 다이어그램)

  • 사용자 관점에서 페이지 이동 및 데이터 흐름을 정의합니다.
  • 예: 게시판의 페이지 흐름
    • board_list1.jsp → 글 목록 페이지
    • board_write1.jsp → 글쓰기 폼
    • board_write1_ok.jsp → 글쓰기 처리 후 목록 페이지로 리다이렉트
    • board_view1.jsp → 특정 글 상세 보기
    • board_modify1.jsp → 글 수정 폼
    • board_modify1_ok.jsp → 글 수정 처리 후 상세 페이지로 리다이렉트
    • board_delete1.jsp → 글 삭제 폼
    • board_delete1_ok.jsp → 글 삭제 처리 후 목록 페이지로 리다이렉트

---

4. 프로젝트 설정

• 4.1 UI 경로

  • 프로젝트에서 HTML과 CSS 파일을 정의하여 디자인 적용.
  • 예: /css/board.css

• 4.2 콘솔 한글 설정

  • 데이터베이스 또는 콘솔 출력에서 한글 깨짐 방지:

    SET NAMES 'utf8';

• 4.3 데이터베이스 풀링

  • 데이터베이스 연결을 효율적으로 관리하기 위해 풀링 설정.
  • Gradle 설정:

    implementation 'org.mariadb.jdbc:mariadb-java-client'

  • context.xml 설정:

    <Context>
        <Resource name="jdbc/mariadb1"
                  auth="Container"
                  type="javax.sql.DataSource"
                  driverClassName="org.mariadb.jdbc.Driver"
                  url="jdbc:mariadb://localhost:3306/board"
                  username="board"
                  password="123456"
                  maxActive="50"
                  maxIdle="10"
                  maxWait="-1" />
    </Context>

---

디자인의 위치 찾기

1. HTML 이해의 중요성

   • HTML은 게시판의 기본 구조와 UI를 설계하는 데 중요합니다.
   • 동적 데이터를 출력하기 위한 JSP 작업도 HTML 기반으로 이루어지므로 기본적인 HTML 지식이 필요합니다.

2. CSS와 UI

   • CSS를 통해 사용자 경험을 개선.
   • 예: board.css로 테이블 스타일, 버튼 디자인 등을 설정.

---

결론

• 게시판 설계는 데이터베이스 모델링, 프로그램 구조 기획, 프로젝트 설정, UI 설계를 포함한 전반적인 작업입니다.
• 이 과정은 HTML/CSS부터 데이터베이스와 동적 콘텐츠를 생성하는 JSP까지의 전반적인 웹 개발 기술을 요구합니다.