드디어 본격적으로 게시판 만들기를 들어가겠습니다.
방명록 느낌으로 간단한 CRUD 화면을 작업할 예정인데요.
Spring 연동 없이 오리지널 Servlet 으로 작업할겁니다.
Servlet 의 구조를 파악하면서 기초부터 확실하게 잡기 위해서인데요.
잠깐 잡담을 해 보자면, 저는 개발자로 일을 하며 회의감을 많이 느꼈습니다.
무엇보다 제가 짠 코드를 제대로 설명하지 못한다는 것이 답답했어요.
시간에 쫓겨서 무작정 타인의 코드를 복붙해서 작업하고,
제대로 알지도 못한 채로 작동하니까 놔두고.
이것의 반복이었죠.
그래서 개인적으로 공부를 하기로 결심했습니다.
처음부터 하나씩, 꼼꼼하게 분석하면서 작업하면 속도는 매우 느려지겠지만.
그럼에도 불구하고 끝까지 한 번 해보려고 합니다.
"작은 거 하나라도 제대로 알자."
이런 마음으로 진행하는 프로젝트입니다.
끝까지 함께 해 주시면 좋을 것 같아요.
글을 읽다가 이해가 가지 않거나, 오류가 있는 부분이 있다면 댓글로 달아주세요.
같이 성장하면 좋겠습니다.
그럼, 잡담은 여기까지 하고 본론으로 넘어가겠습니다.
1. 폴더 생성
2. jsp 파일 생성
3. 인코딩 설정
4. list.jsp
1. 폴더 생성
1-1. views 폴더 생성
1-2. visit 폴더 생성
1-1. views 폴더 생성
WEB-INF 폴더 안에 views 폴더를 생성하겠습니다.
views 안에는 주로 jsp 파일, 화면을 직접적으로 그리는 파일들을 넣을 겁니다.
여기서 jsp 파일을 views 안에, 더 정확히는 WEB-INF 안에 넣어야 하는 이유를 간단히 설명하겠습니다.
한 줄로 요약하면 보안 + MVC 구조 때문이라고 말할 수 있습니다.
WEB-INF 폴더 아래 있는 파일은 브라우저에서 직접 접근할 수 없습니다.
주소창에 직접 url을 입력해도 마찬가지로 404가 뜨며 접근이 불가하죠.
WEB-INF 폴더에 jsp를 둔다는 것은, 반드시 컨트롤러를 거쳐서만 접근이 가능하게 만드는 것입니다.
만약, 직접 url로 특정 jsp를 호출할 수 있다면 코드가 유출될 가능성이 큽니다.
보안적으로 위험해지는거죠.
이를 막기 위해 WEB-INF 폴더 안에 jsp 파일을 두는 겁니다.
이해가 되셨나요?
* 더 자세한 설명은 추후에 정리해서 업로드하겠습니다.
1-2. visit 폴더 생성
views 폴더 안에 visit 폴더를 추가로 생성합니다.
폴더 즉, 카테고리를 잘 나눠놔야 나중에 문제가 발생하지 않으니 주의해주세요.
2. jsp 파일 생성
visit 폴더 안에 총 4개의 파일을 생성하겠습니다.
1. write.jsp (글쓰기 화면)
2. list.jsp (목록 화면)
3. detail.jsp (상세화면)
4. edit.jsp (수정화면)
생성 과정은 하단의 이미지를 참고해주세요.
visit 폴더 안에 4개의 파일이 다 제대로 생성되었는지 확인해주시기 바랍니다.
3. 인코딩 설정
처음으로 jsp 파일을 생성하면 이런 코드가 입력되어 있을겁니다.
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
</body>
</html>
아래 글을 보면 알 수 있듯이, 여기서 인코딩과 jstl 라이브러리 사용 코드를 입력해줘야 합니다.
https://silverji.tistory.com/251#jstl_write
[JAVA]3. 디렉토리 구조 및 JSTL 라이브러리 설정
본격적으로 게시판을 만들기에 앞서, 디렉터리 구조를 보고 그에 맞게 파일을 만들어볼겁니다.1. 폴더 생성2. 게시판 jsp 파일 생성3. JSTL 라이브러리 다운로드 및 적용4. JSTL 코드 작성 기본적인
silverji.tistory.com
jstl 라이브러리야 필요한 곳에만 입력하면 되지만, 인코딩은 모든 페이지에 바꿔줘야 합니다.
그러니, 귀찮음을 줄이기 위해 이클립스 내의 설정으로 인코딩이 자동으로 변경되게 하겠습니다.
상단의 Window > Preferences 로 들어간 후에
Web > JSP Files 로 들어가주세요.
오른쪽의 박스에서 Encoding 부분을 클릭하고 UTF-8 로 인코딩을 변경해줍니다.
Apply and Close 를 눌러 적용하고 닫은 후에 기존 파일을 하나 삭제하고 다시 만들어보겠습니다.
write.jsp 파일을 선택하고 delete 버튼 혹은 마우스 우클릭 > Delete 를 눌러 지워주세요.
그리고 다시 동일한 이름으로 jsp 파일을 생성합니다.
그러면 아래처럼 인코딩 부분이 UTF-8 로 자동 변경되어 생성됩니다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
</body>
</html>4. list.jsp
4-1. 화면 띄우기
4-2. JSTL 라이브러리 코드 추가
4-3. head
4-4. body
4-5. 최종 테스트
4-1. 화면 띄우기
앞서 얘기했듯이, WEB-INF 내의 jsp 파일은 접근이 불가능합니다.
접근하기 위해서는 두 단계가 필요합니다.
1. index.jsp
2. BoardListSerlet.java
앞서 WEB-INF 밖에 index.jsp 파일을 만든 적이 있었죠.
그곳에 코드를 추가하겠습니다.
https://silverji.tistory.com/250
[JAVA]2. Eclipse 톰캣 연동과 JSP 화면 띄우기
이번엔 이클립스에 서버를 연동해서, 최종적으로는 JSP 화면을 띄워볼겁니다.1. 톰캣 설치 및 설정2. 이클립스 연동3. JSP 화면 띄우기 1. 톰캣 설치 및 설정1-1. 톰캣 다운로드1-2. 톰캣 설치와 설정1-
silverji.tistory.com
< a href= ""> 를 통해서 링크를 걸어주겠습니다.
저 부분을 클릭하면 list.jsp로 화면이 넘어가게 하는 코드입니다.
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<a href="visit/list">게시판 목록으로 이동</a>
</body>
</html>
다음은 실제로 list.jsp로 넘어가는 "기능"을 구현하겠습니다.
BoardListServlet.java 파일을 생성해서 코드를 작성할텐데요.
상단의 Java Resources > src/main/java 에서 마우스 우클릭 > New > Package 를 눌러줍니다.
New Java Package 창에서 Name에 패키지명을 입력해주겠습니다.
* "." 을 입력하면 한 번에 여러 단계의 패키지를 만들 수 있습니다.
BoardListServlet.java 파일에 코드를 입력하기 전에, 아래 글에 각 코드에 관한 자세한 설명이 나와 있으니 참고 부탁드립니다.
https://silverji.tistory.com/256
[JAVA]BoardListServlet.java 파일 생성 및 코드 분석
1. @WebServlet- JAVA EE (또는 Jakarta EE)에서 서블릿 클래스를 웹 요청 URL과 매핑하기 위해 사용하는 선언- 아직은 Spring 연동이 되어 있지 않아서, 서블릿으로 작업한다.- 예전에는 web.xml에 와 을 적어야
silverji.tistory.com
BoardListServlet.java
package com.visit.board.controller;
import java.io.IOException;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
@WebServlet("/visit/list")
public class BoardListServlet extends HttpServlet {
public BoardListServlet() {
super();
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
// list.jsp 페이지 포워딩
// Spring MVC 방식이 아닌, 순수 Servlet 방식이어서 getRequestDispatcher() 사용 필수
// req.getRequestDispatcher("/board/list.jsp").forward(req, res);
req.getRequestDispatcher("/WEB-INF/views/visit/list.jsp").forward(req, res);
}
}
이제 index.jsp 파일을 실행하고 게시판 목록으로 이동 이라고 적힌 부분을 클릭하면 list.jsp 페이지로 넘어가는 것을 볼 수 있습니다.
4-2. JSTL 라이브러리 코드 추가
그러면 이제 list.jsp 코드를 작성해보겠습니다.
인코딩 코드 밑에 JSTL를 사용하겠다는 코드를 추가합니다.
2번째 라인에 입력된 taglib 코드를 확인해주세요.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
</body>
</html>4-3. head
글의 제목, title을 수정하겠습니다.
<head> ... </head> 안에 <title>Insert title here</title> 부분이 보이시나요?
Insert title here 를 지우고 게시판 목록 이라고 입력하겠습니다.
* 참고로, <태그명> .. </태그명> 는 한 쌍의 태그입니다. 뒤쪽에 </태그명>을 입력하지 않으면 태그가 닫히지 않아서 전체적으로 적용되거나 오류가 날 수 있으니, 필요한 범위만큼 사용했다면 반드시 닫아주세요.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시판 목록</title>
</head>
<body>
</body>
</html>4-4. body
<body> ... </body> 안에 본격적으로 표를 그려보겠습니다.
<h2> </h2> 태그를 사용해서 페이지의 가장 상단에 적힐 한 줄의 내용을 입력합니다.
저는 게시판 목록이라 적겠습니다.
보통은 <div> </div> 태그를 통해 구역을 나누어서 작업하는 것이 가장 깔끔합니다. 관리하기도 편하죠.
다만, 지금처럼 완전한 표의 형태를 갖추어야 할 때는 <table> </table> 태그를 사용하는 것을 추천합니다.
<thead> </thead> 안에 테이블의 헤더 즉, 가장 위쪽에 고정될 열을 추가합니다.
저는 글 번호, 제목, 작성자, 작성일, 조회수를 넣겠습니다.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시판</title>
</head>
<body>
<h2 style="text-align:center;">게시판 목록</h2>
<table border="1" cellpadding="10" cellspacing="0" style="width:100%;">
<thead>
<tr>
<th>번호</th>
<th>제목</th>
<th>작성자</th>
<th>작성일</th>
<th>조회수</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
4-5. 화면 띄우기
index.jsp 에서 상단의 실행 아이콘을 눌러 화면을 열겠습니다.
index.jsp 상단의 "게시판 목록이로 이동"을 클릭하면 다음과 같이 게시판 목록 화면으로 넘어갑니다.
오늘은 여기까지 하겠습니다.
수고하셨습니다.
☞ 참고
https://silverji.tistory.com/251#jstl_write
[JAVA]3. 디렉토리 구조 및 JSTL 라이브러리 설정
본격적으로 게시판을 만들기에 앞서, 디렉터리 구조를 보고 그에 맞게 파일을 만들어볼겁니다.1. 폴더 생성2. 게시판 jsp 파일 생성3. JSTL 라이브러리 다운로드 및 적용4. JSTL 코드 작성 기본적인
silverji.tistory.com
https://silverji.tistory.com/250
[JAVA]2. Eclipse 톰캣 연동과 JSP 화면 띄우기
이번엔 이클립스에 서버를 연동해서, 최종적으로는 JSP 화면을 띄워볼겁니다.1. 톰캣 설치 및 설정2. 이클립스 연동3. JSP 화면 띄우기 1. 톰캣 설치 및 설정1-1. 톰캣 다운로드1-2. 톰캣 설치와 설정1-
silverji.tistory.com
https://silverji.tistory.com/256
[JAVA]BoardListServlet.java 파일 생성 및 코드 분석
1. @WebServlet- JAVA EE (또는 Jakarta EE)에서 서블릿 클래스를 웹 요청 URL과 매핑하기 위해 사용하는 선언- 아직은 Spring 연동이 되어 있지 않아서, 서블릿으로 작업한다.- 예전에는 web.xml에 와 을 적어야
silverji.tistory.com
'개인 프로젝트 > 실습' 카테고리의 다른 글
| [JAVA]10. MySQL Workbench를 활용한 ERD 기반 테이블 설계 (25) | 2025.07.11 |
|---|---|
| [JAVA]9. MySQL Workbench 설치 및 DB 연동 (16) | 2025.07.03 |
| [JAVA]7. Eclipse에 MySQL 연동 (22) | 2025.06.21 |
| [JAVA]6. DBeaver 설치 + MySQL 연결 (12) | 2025.06.19 |
| [JAVA]5. MySQL 설치하기 (4) | 2025.06.18 |
