Project/Todo-List(Servelt, JSP)

0. Todo List 프로젝트 목적 및 환경 설정

빠긔 2020. 8. 12. 16:44
반응형

0. 개요

- Servlet, JSP, HTML, CSS, Javascript의 기초를 활용하여 프로젝트를 진행하지만,

  기초 내용은 다른곳에서 알고 시작해야 될 거 같습니다.

- 여기선 위 5가지 언어를 잘 조합하여 웹 어플리케이션을 만드는 과정을 정리할 예정입니다

 

1. 프로젝트 목적

- 학습한 Servlet, JSP, HTML, CSS, Javascript를 이용하여 할 일을 관리하는 Todo-List 웹 어플리케이션을 만들어보자

- Todo List는 MySQL을 이용하여 관리한다.

- MVC 모델을 활용한다.

 

2. 프로젝트 요구사항

-  프론트엔드 요구사항

  • 총 2개의 화면이 존재
    - 할 일 목록 화면 (리스트)
    - 할 일 등록 화면 (쓰기)
  • CSS는 외부 라이브러리(부트스트랩)을 사용하지 않기
  • jQuery를 사용하지 않고, querySelector, addEventListener, innerHTML을 사용해서 DOM, EVENT 처리하기
  • Ajax는 XMLHTTPRequest를 사용

- 웹백엔드 기술요구사항

  • 프로젝트는 maven프로젝트로 생성
  • 메인화면을 보여주기 위한 MainServlet과 main.jsp를 작성
  • MainServlet은 TodoDao를 이용해 결과를 조회해서 main.jsp 에 전달
  • 새로운todo등록 버튼을 클릭하면 해당 요청을 서블릿이 받아서 jsp로 포워딩하여 할 일 등록 화면을 보여줌
  • 할일등록폼에서 값을 입력하고 제출 버튼을 누르면 post 방식으로 요청
  • 해당 요청을 서블릿이 받아서 처리하게하고, 요청에 대한 모든 일이 끝나면 메인화면으로 리다이렉트
  • 메인화면에서 todo 상태변경 버튼(->)을 클릭하여 요청을 보낼 때, Todo 의 Id와 상태값을 전달하여 다음 상태로 (현재 상태가 Todo라면 doing으로 doing 이라면 done) 컬럼값을 변경

Main 화면
할 일 등록 화면

3. 환경 설정

- Eclipse photon

- Tomcat 8.5

- MySQL 8.0.17

- maven project 생성

 

- pom.xml 설정하기

	<dependency>	<!-- JDBC를 사용할 수 있도록 추가  -->
		<groupId>mysql</groupId>
		<artifactId>mysql-connector-java</artifactId>
		<version>8.0.17</version>
	</dependency>

	<dependency>	<!-- Servlet 3.1을 사용하기 위해 추가 -->
		<groupId>javax.servlet</groupId>
		<artifactId>javax.servlet-api</artifactId>
		<version>3.1.0</version>
		<scope>provided</scope>
	</dependency>

	<dependency>	<!-- JSP에서 JSTL을 사용하기 위해 추가 -->
		<groupId>javax.servlet</groupId>
		<artifactId>jstl</artifactId>
		<version>1.2</version>
	</dependency>
    
	<dependency>	<!-- JSP에서 태그할 때 필요함 -->
		<groupId>org.apache.taglibs</groupId>
		<artifactId>taglibs-standard-impl</artifactId>
		<version>1.2.5</version>
	</dependency>
<build>
    <finalName>Todo-List</finalName>
        <plugins>
		<plugin>
			<groupId>org.apache.maven.plugins</groupId>
			<artifactId>maven-compiler-plugin</artifactId>
			<version>3.6.1</version>
			<configuration>
				<source>1.8</source>	<!--java 1.8 버전을 사용하기 위해 추가-->
				<target>1.8</target>
			</configuration>
		</plugin>
	</plugins>
  </build>

프로젝트 update ->이클립스 종료 후 재부팅 -> java 1.8 확인

 

- Servlet 3.1 버전 사용하기

.settings/org.eclipse.wst.common.project.facet.core.xml 파일을 열고

<installed facet="jst.web" version="2.3"/> 에서 2.3 --> 3.1로 수정

properties -> project facet -> dynamic web module이 3.1로 되었는지 확인

 

- Servlet 3.1 에서는 어노테이션을 사용하므로 web.xml을 삭제한다.

그리고 pom.xml에서 url 아래에 프로퍼티를 추가한다.

<properties>
	<!-- web.xml 파일을 삭제해도 eclipse에서 오류가 발생하지 않는다. -->
	<failOnMissingWebXml>false</failOnMissingWebXml>
</properties>

 

- Navigator에서 src/main에 java 폴더를 생성한다. 그리고 MainServlet을 생성하고 Hello World를 출력

반응형