본문 바로가기

개발 실습/CRUD 게시판 만들기

[JAVA]3. 디렉토리 구조 및 JSTL 라이브러리 설정

반응형

 

본격적으로 게시판을 만들기에 앞서, 디렉터리 구조를 보고 그에 맞게 파일을 만들어볼겁니다.

1. 폴더 생성
2. 게시판 jsp 파일 생성
3. JSTL 라이브러리 다운로드 및 적용
4. JSTL 코드 작성

 

 

기본적인 틀은 이렇습니다.

* 언어, 툴이나 회사 상황에 따라 구조가 달라질 수 있습니다.

 

 

이를 참고해서 작업한 제 디렉토리 구조입니다.

 

1. 폴더 생성

Dynamic Web Project를 생성하고 아무것도 하지 않았다면, 자동으로 생성되는 기본 구조는 다음과 같습니다.

 

 

이 다음부터는 직접 추가할 예정인데요. 먼저, webapp 폴더부터 봅시다.

간단한 게시판을 만들어볼 것이기에 그에 맞게 폴더를 추가해줍니다. 

 

폴더를 추가하는 과정은 다음과 같습니다.

 

 

webapp 안에는 css, js 폴더를 추가합니다.

webapp > WEB-INF 안에 views  폴더를, views 폴더 안에 borad 폴더를 추가하겠습니다.

 

views 폴더는 jsp 파일을 넣어놓을 곳이고, 그중에서도 board는 게시판과 관련된 jsp 파일들이 들어갈 겁니다.

* 이름은 최대한 용도에 맞게 직관적으로 지어주세요. 나중에 헷갈림을 방지하기 위해서입니다.

* css, js 폴더는 일단 생성만 해두겠습니다. 지금 당장 뭘 하지는 않을거에요.

 

아래 이미지처럼 폴더가 잘 생성되었는지 확인해봅시다.

* 실제 개발 속도와 블로그에 글을 업로드하는 속도가 달라서, 조금의 차이가 있습니다. 필요한 부분만 확인해주세요.

 

 

2. 게시판 jsp 파일 생성

이제 게시판에 필요한 jsp 파일들을 생성해보겠습니다.

 

board 폴더 안에 총 4개의 jsp 파일을 만들겁니다.

 

1. list.jsp

- 게시판 목록 화면

- 가장 메인이 되는 화면으로, 게시판에 들어왔을 때 가장 먼저 보이는 화면

- 작성한 글의 목록이 보이는 화면

 

2. write.jsp

- 글쓰기 화면

- 글을 쓸 때에 사용하는 화면

 

3. detail.jsp

- 상세보기 화면

- 특정 글을 클릭했을 때 보여지는 글의 상세 화면

 

4. edit.jsp

- 수정 화면

- 글을 수정할 때 사용하는 화면

- 추후 상황을 보고 detail.jsp에 기능만 추가할지, 따로 만들지 결정할 예정

 

jsp 파일 생성 과정은 이미지의 순서를 따라주세요.

 

 

이렇게 다 만들었으면, 최종적으로 이런 구조가 됩니다.

 

 

3. JSTL 라이브러리 다운로드 및 적용

3-1. 다운로드
3-2. 적용

 

3-1. 다운로드

 

jsp 파일을 만들었으면, 이제 JSTL 라이브러리를 다운로드 받을겁니다.

JSTL은 표준 태그 라이브러리라고 해서 core 관련 태그를 사용하기 위한 라이브러리입니다.

 

Java 17, Tomcat 10 버전이니 그에 맞는 라이브러리 버전으로 다운받아야해요.

아래 링크로 들어가서 다운받아주세요.

 

API


https://mvnrepository.com/artifact/jakarta.servlet.jsp.jstl/jakarta.servlet.jsp.jstl-api

 

 

 

구현체


https://mvnrepository.com/artifact/org.glassfish.web/jakarta.servlet.jsp.jstl/3.0.1?utm_source=chatgpt.com

 

 

참고로 라이브러리가 2개만 필요한 이유는 다음과 같습니다.

 

 

3-2. 적용

 

이제 다시 이클립스로 넘어갑니다.

WEB-INF 밑에 있는 lib 폴더 안에 다운받은 JSTL 라이브러리를 복사해서 붙여넣습니다.

 

 

4. JSTL 코드 작성

4-1. JSP 설정 코드
4-2. JSTL 사용 코드

 

이제 list.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>

 

4-1. JSP 설정 코드

여기서 맨 위에 적힌 코드를 살펴봅시다.

 

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

 

이 코드는 JSP 페이지의 출력 형식과 문자 인코딩을 지정하는 코드입니다.

더 자세히 살펴볼까요?

 

  • contentType="text/html"

- 브라우저에 HTML 페이지로 응답하겠다는 의미입니다.

 

  • charset=EUC-KR

- EUC-KR은 인코딩이긴 하지만, 현재는 거의 사용하지 않습니다. 이 인코딩을 사용하면 종종 한글이 깨지기도 해요.

 

  • charset=UTF-9

- UTF-8 인코딩으로 문자를 출력한다는 의미입니다. 한글 깨짐을 방지해주죠.

- 국제 표준이자, 가장 범용적으로 사용되는 인코딩입니다. 되도록이면 이 인코딩 방식을 사용하는 것을 추천드려요.

 

그렇기에 아래 코드처럼 수정해주면 됩니다.

 

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

 

4-2. JSTL 사용 코드

이제 JSTL을 사용하기 위한 코드를 추가합니다.

 

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

 

이건 JSTL 라이브러리 중에서도 core 기능을 사용하기 위해 추가하는 선언입니다.

마찬가지로 좀 더 자세히 살펴보겠습니다.

 

  • prefix="c"

- c:forEach, c:if 등, JSTL core 라이브러리를 사용할 때 쓸 이름표(prefix)를 c로 정하겠다는 의미이다.

  • url="..."

- JSTL core 태그의 위치를 지정합니다.

 

여기까지 했다면, 최종적으로 list.jsp의 코드는 다음과 같이 완성됩니다.

 

list.jsp 라는 화면임을 확실하게 알기 위해 <h2>로 한 줄을 추가했어요.

그 외의 코드에 관한 추가적인 설명은 다음 글에 정리하겠습니다.

 

<%@ 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>
</body>
</html>

 

여기서 주의할 점은, 이렇게 적고 list.jsp를 실행한다고 해서 화면이 제대로 뜨지 않는다는 것입니다.

404 에러 페이지가 뜨는게 당연해요.

보안 및 구조적인 이유 때문인데요.

 

설정을 마무리한 후에, 더 자세한 설명과 함께 list.jsp 페이지를 추가로 작업해보겠습니다.

 

여기까지 수고하셨습니다.

감사합니다.


☞ 이전 글

 

[JAVA]Eclipse 톰캣 연동과 JSP 화면 띄우기

 

[JAVA]2. Eclipse 톰캣 연동과 JSP 화면 띄우기

이번엔 이클립스에 서버를 연동해서, 최종적으로는 JSP 화면을 띄워볼겁니다.1. 톰캣 설치 및 설정2. 이클립스 연동3. JSP 화면 띄우기 1. 톰캣 설치 및 설정1-1. 톰캣 다운로드1-2. 톰캣 설치와 설정1-

silverji.tistory.com

 

 

반응형