다연이네

강북삼성병원 야경

다연 — Mon, 21 Nov 2022 15:45:32 +0900

#야경맛집 #강북삼성병원

Linux 기본 셋팅 (PuTTY)

다연 — Wed, 21 Jul 2021 15:07:09 +0900

리눅스로 서비스를 올리기 위해 기존 Window에 셋팅했던 프로젝트를 리눅스로 옮기는 과정을 정리한다.

1. 개발 서버 정보 : ~~xxx.xxx.x.xx~~ (SSH)
2. 계정정보 : ~~id / password~~
3. 설치경로 : /home/gwtest/bdy
4. 사용포트 : 9002
5. contextpath : xclick_bdy
6. DB 정보 :
HOST ~~xxx.xxx.x.xx~~
PORT 1521
SID orcl : 계정 ~~id / password~~
7. 소스 : ~~svn://xxxxxx~~
8.JDK : OpenJDK1.8
9.WAS : apache-tomcat-9.0.46

* 서버 및 데이터베이스 정보는 비공개

* 소스 -> svn, '셋팅'만 정리

윈도우 환경에서 서비스가 올라간다는 가정 하에 시작한다.

1. PuTTY 다운로드, 접속

(리눅스 서버 접속을 위한 프로그램)

Host Name: 개발서버 정보

Port: 22(ssh)

* 우측의 Save 버튼을 통해 세션 저장 가능

2. 폴더 생성 - mkdir

접속 후 아이디와 비밀번호를 입력한다.

로그인 성공 후 명령어 pwd를 통해 현재 위치를 확인하고, 설치경로에 맞는 폴더를 생성한다.

설치 경로가 /home/gwtest/bdy이고, 현재는 gwtest까지밖에 없기 때문에 해당 위치에 mkdir bdy 명령어를 통해 폴더를 생성해주었다.

pwd 현재 경로(위치)를 보여준다.
mkdir bdy bdy라는 폴더를 생성한다.
cd bdy bdy라는 폴더로 이동한다.

3. filezilla 다운로드 (윈도우용)

https://filezilla-project.org/

파일질라란 컴퓨터의 파일들을 FTP 서버에 옮기도록 돕는 프로그램이다.

쉽게 말해 윈도우의 파일을 리눅스로, 리눅스의 파일을 윈도우로 복사할 수 있게 해주는 프로그램이다.

리눅스 편집기(vi)를 통해 파일 내용을 수정하는 것이 불편하고 익숙하지 않다면, 파일질라를 통해 파일을 윈도우로 받아와 수정한 뒤 재업로드하는 것이 훨씬 간편하다고 느낄 것이다.

개발서버 및 계정정보를 통해 리눅스에 접속했다.

가운데를 기준으로 좌측은 윈도우, 우측은 리눅스이다. 보이는 바와 같이 방금 mkdir로생성했던 bdy 폴더가 gwtest 밑에 있다.

앞으로 파일질라를 통해 모든 파일을 리눅스로 업로드할 것이다.

4. WAS 다운로드

프로젝트에 맞는 WAS을 다운로드한다. 이번 프로젝트는 톰캣9버전을 사용했다.

해당 zip파일을 파일질라를 통해 리눅스로 업로드한 후, 명령어를 통해 압축을 푼다. 압축을 풀 때는 mkdir로 폴더를 생성하여 그 안에 압축을 풀었다.

unzip 파일명.zip 압축풀기
zip 압축후파일명.zip 원래파일명 압축하기

zip과 압축 풀린 폴더

5. JDK 다운로드(리눅스용)

프로젝트에 맞는 JDK-리눅스용을 다운로드한다. (리눅스 bit를 확인 한 후 그에 맞는 JDK 다운)

파일 확장자가 tar이다. 압축된 상태 그대로 리눅스로 업로드한 후 명령어를 통해 압축을 풀었다.

tar로 압축 tar -cvf 파일명.tar 폴더명 (폴더를 파일명.tar로 압축)
tar 압축풀기 tar -xvf 파일명.tar
tar.gz로 압축 tar -zcvf 파일명.tar 폴더명
tar.gz로 압축 풀기 tar -zxvf 파일명.tar.gz

tar와 압축 풀린 폴더

JDK에 권한을 부여한다.

chmod 755 jdk1.80_291(폴더명)

6. 프로젝트 업로드

mkdir project로, 프로젝트를 위한 폴더를 생성한다. 해당 폴더에 이클립스에서 작업했던 프로젝트들이 담길 것이다.

이클립스에서 작업했던 프로젝트들 내에 경로가 윈도우 기준으로 맞춰진 모든 부분을 수정해준다.(ex. web.xml 등)

/home/gwtest/bdy/project/xclickr3_bdy_web~ 로 리눅스 경로 맞춰 수정

그 후 빌드를 한 다음 team>disconnect로 svn 연결을 끊어주고, 프로젝트들을 복사해 tar로 압축한 후 리눅스에 올려 압축을 풀어준다.

(이 때 java는 빌드되어 jar 형태로 말려있기 때문에 리눅스로 올리지 않는다.)

7. server.xml 수정, catalina.sh 수정

서버 포트를 다른 사람들과 겹치지 않게 수정해줘야한다. 로컬에서 셋팅했을 경우(이클립스) 상관 없으나, 리눅스는 다중 사용자를 지원하기 때문에 포트번호가 겹치지 않아야 한다.

나의 경우 SHUTDOWN 포트를 수정했고, 모든 context 경로들(윈도우 기준에 맞춰진)을 리눅스에 맞춰 수정했다.

수정된 파일을 파일질라를 통해 업로드한다. 위치는 톰캣 > conf

이클립스에서 작업했을 때, 서버에 Arguments를 추가해줬던 경우(해당사항 없으면 넘어가도 된다) catalina.sh를 수정해줘야한다. Argements를 추가했는지 안했는지 기억이 안난다면, 아래 사진과 같이 확인 가능하다.

(위 사진은 Argement가 추가되어있지 않은 경우이다)

만약 추가한 경우, 리눅스에서 catalina.sh파일을 다운받아와 수정해준다. (나의 경우 JAVA_OPTS 부분을 추가해줬다)

catalina.sh의 위치는 톰캣 > bin 이다.

명령어를 통해 카타리나에 대한 실행권한을 부여한다. (카타리나 뿐만 아니라 확장자가 sh인 모든 파일)

chmod 700 *.sh

또한, 카타리나가 특정 jdk를 바라보도록 아래 2줄을 추가해줘야한다. (리눅스 내 경로로 맞추기)

카타리나 수정이 끝나면 다시 리눅스로 업로드한다.

8. 서버 실행 & 종료

실행

Ex) cd /gwtest/bdy/apache-tomcat-7.0.22/bin/

./startup.sh

종료

Ex) cd /gwtest/bdy/apache-tomcat-7.0.22/bin/

./shutdown.sh

Tips

- PuTTY를 한 개 더 띄워 실시간으로로그를 확인할 수 있다.

cd명령어를 통해 톰캣 내 logs 폴더까지 들어간 후, tail -f catalina.out

- ps -ef | grep tomcat 명령어를 통해 현재 실행중인 톰캣목록을 볼 수 있다.

- 권한

chmod 644 소유자:읽기,쓰기 그룹/다른사용자:읽기

chmod 755 소유자:읽기,쓰기,실행 그룹/다른사용자:읽기, 실행

디렉토리인 경우, 디렉토리 파일 안에 있는 하위까지 변경: chmod -R 755 파일명

Git

다연 — Wed, 3 Mar 2021 12:24:05 +0900

버전관리시스템(VCS - Version Control System)

각 파일을 이전 상태로 되돌릴 수 있고, 프로젝트를 통째로 이전 상태로 되돌릴 수 있고, 시간에 따라 수정 내용을 비교해 볼 수 있고, 누가 문제를 일으켰는지 추적할 수 도 있고, 누가 언제 만들어낸 이슈인지도 알 수 있다.

버전 관리 시스템 종류

ㄱ. 로컬 버전 관리 시스템 (요즘 잘 안씀)

데이터베이스를 사용해서 파일의 변경 정보를 관리

RCS(Revision Control System) - 회사에서 많이 사용

날짜별로, 시간별로 DB관리, 일련의 Patch Set을 적용해서 모든 파일을 특정 시점으로 되돌릴 수 있다.

ㄴ. 중앙 집중식 버전 관리 시스템(CVCS)

CVS, [Subversion] == SVN, Perforce 같은 시스템은 파일을 관리하는 서버가 별도로 있고

클라이언트가 중앙 서버에서 파일을 받아 사용

치명적인 결함 - 가장 대표적 : 중앙 서버에 문제가 발생하면 그동안 작업 불가

중앙 데이터베이스가 있는 하드디스크에 문제가 생기면 프로젝트의 모든 히스토리를 잃음

ㄷ. 분산 버전 관리 시스템

[Git], Mecurial, Bazaar, Darcs 등

중앙 집중식의 치명적 결함을 극복 - 저장소를 히스토리와 더불어 전부 복제

서버에 문제가 생기면 이 복제물로 다시 작업을 시작할 수 있다.

용어

1) VCS

2) Checkout (중앙 서버에서 파일을 받아 사용)

3) Patch Set (파일에서 변경되는 부분)

4) Clone (복제, 모든 데이터를 가진 진정한 백업)

5) Git 브랜치 (branch 가지)

6) Commit (Staging Area -> 로컬 저장소에 저장)

7) 체크섬 (40/16) SHA-1 해시 기법

8) 세 가지 상태 (깃은 파일을 아래 3가지 상태로 관리)

ㄱ. Committed 데이터가 로컬 DB에 안전하게 저장된 상태 ( 로컬 저장소에 저장 완료! 원격(서버)저장소X )

ㄴ. Modified 수정한 파일을 아직 로컬 데이터베이스에 커밋하지 않은 것

ㄷ. Staged 현재 수정한 파일을 곧 커밋할 것이라고 표시한 상태

9) Git 디렉토리는 Git이 프로젝트의 메타데이터와 객체 데이터베이스를 저장하는 곳을 말한다.

이 Git 디렉토리가 Git의 핵심이다. 다른 컴퓨터에 있는 저장소를 Clone 할 때 Git 디렉토리가 만들어진다.

10) 워킹 트리는 프로젝트의 특정 버전을 Checkout 한 것이다. Git 디렉토리는 지금 작업하는 디스크에 있고

그 디렉토리 안에 압축된 데이터베이스에서 파일을 가져와서 워킹 트리를 만든다.

11) Index == Staging Area

12)

깃허브: 포스팅 업체, 서버, 깃과 다름

[days16] 파일 업로드 처리

다연 — Wed, 24 Feb 2021 13:37:02 +0900

ex05

첨부파일을 서버에 전송하는 방식

1) <form> 태그 이용

2) Ajax 이용

초기설정

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/maven-v4_0_0.xsd">
   <modelVersion>4.0.0</modelVersion>
   <groupId>org.zerock</groupId>
   <artifactId>controller</artifactId>
   <name>ex05</name>
   <packaging>war</packaging>
   <version>1.0.0-BUILD-SNAPSHOT</version>
   <properties>
      <java-version>1.8</java-version>
      <org.springframework-version>5.0.7.RELEASE</org.springframework-version>
      <org.aspectj-version>1.9.0</org.aspectj-version>
      <org.slf4j-version>1.7.25</org.slf4j-version>
   </properties>
   <dependencies>
      <!-- Spring -->
      <dependency>
         <groupId>org.springframework</groupId>
         <artifactId>spring-context</artifactId>
         <version>${org.springframework-version}</version>
         <exclusions>
            <!-- Exclude Commons Logging in favor of SLF4j -->
            <exclusion>
               <groupId>commons-logging</groupId>
               <artifactId>commons-logging</artifactId>
            </exclusion>
         </exclusions>
      </dependency>
      <dependency>
         <groupId>org.springframework</groupId>
         <artifactId>spring-webmvc</artifactId>
         <version>${org.springframework-version}</version>
      </dependency>

      <!-- AspectJ -->
      <dependency>
         <groupId>org.aspectj</groupId>
         <artifactId>aspectjrt</artifactId>
         <version>${org.aspectj-version}</version>
      </dependency>

      <!-- Logging -->
      <dependency>
         <groupId>org.slf4j</groupId>
         <artifactId>slf4j-api</artifactId>
         <version>${org.slf4j-version}</version>
      </dependency>
      <dependency>
         <groupId>org.slf4j</groupId>
         <artifactId>jcl-over-slf4j</artifactId>
         <version>${org.slf4j-version}</version>
         <scope>runtime</scope>
      </dependency>
      <dependency>
         <groupId>org.slf4j</groupId>
         <artifactId>slf4j-log4j12</artifactId>
         <version>${org.slf4j-version}</version>
         <scope>runtime</scope>
      </dependency>
      <!-- p.54 <dependency> <groupId>log4j</groupId> <artifactId>log4j</artifactId> 
         <version>1.2.15</version> <exclusions> <exclusion> <groupId>javax.mail</groupId> 
         <artifactId>mail</artifactId> </exclusion> <exclusion> <groupId>javax.jms</groupId> 
         <artifactId>jms</artifactId> </exclusion> <exclusion> <groupId>com.sun.jdmk</groupId> 
         <artifactId>jmxtools</artifactId> </exclusion> <exclusion> <groupId>com.sun.jmx</groupId> 
         <artifactId>jmxri</artifactId> </exclusion> </exclusions> <scope>runtime</scope> 
         </dependency> -->
      <!-- @Inject -->
      <dependency>
         <groupId>javax.inject</groupId>
         <artifactId>javax.inject</artifactId>
         <version>1</version>
      </dependency>

      <!-- Servlet -->
      <!-- <dependency> <groupId>javax.servlet</groupId> <artifactId>servlet-api</artifactId> 
         <version>2.5</version> <scope>provided</scope> </dependency> -->
      <!-- p.111 -->
      <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
      <dependency>
         <groupId>javax.servlet</groupId>
         <artifactId>javax.servlet-api</artifactId>
         <version>3.1.0</version>
         <scope>provided</scope>
      </dependency>

      <dependency>
         <groupId>javax.servlet.jsp</groupId>
         <artifactId>jsp-api</artifactId>
         <version>2.1</version>
         <scope>provided</scope>
      </dependency>
      <dependency>
         <groupId>javax.servlet</groupId>
         <artifactId>jstl</artifactId>
         <version>1.2</version>
      </dependency>

      <!-- Test p.54 -->
      <dependency>
         <groupId>junit</groupId>
         <artifactId>junit</artifactId>
         <version>4.12</version>
         <scope>test</scope>
      </dependency>

      <!-- p.54 -->
      <dependency>
         <groupId>org.springframework</groupId>
         <artifactId>spring-test</artifactId>
         <version>${org.springframework-version}</version>
      </dependency>
      <dependency>
         <groupId>org.projectlombok</groupId>
         <artifactId>lombok</artifactId>
         <version>1.18.18</version>
         <scope>provided</scope>
      </dependency>
      <dependency><!-- log4j.xml 설정 필요(자동) -->
         <groupId>log4j</groupId>
         <artifactId>log4j</artifactId>
         <version>1.2.17</version>
      </dependency>

      <!-- p.83 https://github.com/brettwooldridge/HiKariCP -->
      <dependency>
         <groupId>com.zaxxer</groupId>
         <artifactId>HikariCP</artifactId>
         <version>4.0.2</version>
      </dependency>

      <!-- p 90 -->
      <!-- https://mvnrepository.com/artifact/org.mybatis/mybatis -->
      <dependency>
         <groupId>org.mybatis</groupId>
         <artifactId>mybatis</artifactId>
         <!-- <version>3.4.6</version> -->
         <version>3.5.6</version>
      </dependency>
      <dependency>
         <groupId>org.mybatis</groupId>
         <artifactId>mybatis-spring</artifactId>
         <!-- <version>1.3.2</version> -->
         <version>2.0.6</version>
      </dependency>
      <dependency>
         <groupId>org.springframework</groupId>
         <artifactId>spring-tx</artifactId>
         <version>${org.springframework-version}</version>
      </dependency>
      <dependency>
         <groupId>org.springframework</groupId>
         <artifactId>spring-jdbc</artifactId>
         <version>${org.springframework-version}</version>
      </dependency>

      <!-- p 101 -->
      <dependency>
         <groupId>org.bgee.log4jdbc-log4j2</groupId>
         <artifactId>log4jdbc-log4j2-jdbc4</artifactId>
         <version>1.16</version>
      </dependency>

      <!-- p 147 jackson-databind -->
      <dependency>
         <groupId>com.fasterxml.jackson.core</groupId>
         <artifactId>jackson-databind</artifactId>
         <version>2.12.1</version>
      </dependency>

      <!-- p 149 -->
      <!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
      <dependency>
         <groupId>commons-fileupload</groupId>
         <artifactId>commons-fileupload</artifactId>
         <version>1.4</version>
      </dependency>

      <!-- p 357 -->
      <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.dataformat/jackson-dataformat-xml -->
      <dependency>
         <groupId>com.fasterxml.jackson.dataformat</groupId>
         <artifactId>jackson-dataformat-xml</artifactId>
         <version>2.12.1</version>
      </dependency>

      <!-- p 357 Java 인스턴스를 JSON 타입의 문자열로 변환 -->
      <!-- https://mvnrepository.com/artifact/com.google.code.gson/gson -->
      <dependency>
         <groupId>com.google.code.gson</groupId>
         <artifactId>gson</artifactId>
         <version>2.8.6</version>
      </dependency>

      <!-- https://mvnrepository.com/artifact/org.aspectj/aspectjweaver -->
      <dependency>
         <groupId>org.aspectj</groupId>
         <artifactId>aspectjweaver</artifactId>
         <version>${org.aspectj-version}</version>
      </dependency>

      <!-- https://mvnrepository.com/artifact/net.coobird/thumbnailator -->
      <dependency>
         <groupId>net.coobird</groupId>
         <artifactId>thumbnailator</artifactId>
         <version>0.4.8</version>
      </dependency>

      <!-- https://mvnrepository.com/artifact/org.quartz-scheduler/quartz -->
      <dependency>
         <groupId>org.quartz-scheduler</groupId>
         <artifactId>quartz</artifactId>
         <version>2.3.0</version>
      </dependency>

      <!-- https://mvnrepository.com/artifact/org.quartz-scheduler/quartz-jobs -->
      <dependency>
         <groupId>org.quartz-scheduler</groupId>
         <artifactId>quartz-jobs</artifactId>
         <version>2.3.0</version>
      </dependency>

      <dependency>
         <groupId>org.springframework.security</groupId>
         <artifactId>spring-security-web</artifactId>
         <version>${org.springframework-version}</version>
      </dependency>

      <dependency>
         <groupId>org.springframework.security</groupId>
         <artifactId>spring-security-config</artifactId>
         <version>${org.springframework-version}</version>
      </dependency>

      <dependency>
         <groupId>org.springframework.security</groupId>
         <artifactId>spring-security-core</artifactId>
         <version>${org.springframework-version}</version>
      </dependency>

      <!-- https://mvnrepository.com/artifact/org.springframework.security/spring-security-taglibs -->
      <dependency>
         <groupId>org.springframework.security</groupId>
         <artifactId>spring-security-taglibs</artifactId>
         <version>${org.springframework-version}</version>
      </dependency>
   </dependencies>
   <build>
      <plugins>
         <plugin>
            <artifactId>maven-eclipse-plugin</artifactId>
            <version>2.9</version>
            <configuration>
               <additionalProjectnatures>
                  <projectnature>org.springframework.ide.eclipse.core.springnature</projectnature>
               </additionalProjectnatures>
               <additionalBuildcommands>
                  <buildcommand>org.springframework.ide.eclipse.core.springbuilder</buildcommand>
               </additionalBuildcommands>
               <downloadSources>true</downloadSources>
               <downloadJavadocs>true</downloadJavadocs>
            </configuration>
         </plugin>
         <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-compiler-plugin</artifactId>
            <version>3.5.1</version>
            <configuration>
               <source>1.8</source>
               <target>1.8</target>
               <compilerArgument>-Xlint:all</compilerArgument>
               <showWarnings>true</showWarnings>
               <showDeprecation>true</showDeprecation>
            </configuration>
         </plugin>
         <plugin>
            <groupId>org.codehaus.mojo</groupId>
            <artifactId>exec-maven-plugin</artifactId>
            <version>1.2.1</version>
            <configuration>
               <mainClass>org.test.int1.Main</mainClass>
            </configuration>
         </plugin>
      </plugins>
   </build>
</project>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.1"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee https://java.sun.com/xml/ns/javaee/web-app_3_1.xsd">

	<!-- The definition of the Root Spring Container shared by all Servlets and Filters -->
	<context-param>
		<param-name>contextConfigLocation</param-name>
		<param-value>/WEB-INF/spring/root-context.xml</param-value>
	</context-param>
	
	<!-- Creates the Spring Container shared by all Servlets and Filters -->
	<listener>
		<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
	</listener>

	<!-- Processes application requests -->
	<servlet>
		<servlet-name>appServlet</servlet-name>
		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
		<init-param>
			<param-name>contextConfigLocation</param-name>
			<param-value>/WEB-INF/spring/appServlet/servlet-context.xml</param-value>
		</init-param>
		<!-- p 159 404-->
      <init-param>
        <param-name>throwExceptionIfNoHandlerFound</param-name>
        <param-value>true</param-value>
      </init-param>
      
		<load-on-startup>1</load-on-startup>
		
		<multipart-config>
         <location>C:\\upload\\temp</location>
         <max-file-size>20971520</max-file-size> <!--1MB * 20 -->
         <max-request-size>41943040</max-request-size><!-- 40MB -->
         <file-size-threshold>20971520</file-size-threshold> <!-- 20MB -->
      </multipart-config>
	</servlet>
		
	<servlet-mapping>
		<servlet-name>appServlet</servlet-name>
		<url-pattern>/</url-pattern>
	</servlet-mapping>
	
	<filter>
      <filter-name>encodingFilter</filter-name>
      <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
      <init-param>
         <param-name>encoding</param-name>
         <param-value>UTF-8</param-value>
      </init-param>
   </filter>
   <filter-mapping>
      <filter-name>encodingFilter</filter-name>
      <url-pattern>/*</url-pattern>
   </filter-mapping>

</web-app>

- 상단 네임스페이스 버전 3.1로 수정하고, http 링크 수정하고, <multipart-config> 태그 추가

servlet-context.xml에 아래 코딩 추가

<context:component-scan base-package="org.zerock.controller" />
	
	<!-- 파일첨부하려면 반드시, 이름도 반드시 -->
	<beans:bean id="multipartResolver"
      class="org.springframework.web.multipart.support.StandardServletMultipartResolver">
   </beans:bean>

-Java 설정을 이용하는 경우 p492

1) <form> 방식의 파일 업로드

컨트롤러

	@GetMapping("/uploadForm")
	public void uploadForm() {

		log.info("upload form");
	}

	@PostMapping("/uploadFormAction")
	public void uploadFormPost(MultipartFile[] uploadFile, Model model) {

		String uploadFolder = "C:\\upload";

		for (MultipartFile multipartFile : uploadFile) {

			log.info("-------------------------------------");
			log.info("Upload File Name: " + multipartFile.getOriginalFilename());
			log.info("Upload File Size: " + multipartFile.getSize());

			File saveFile = new File(uploadFolder, multipartFile.getOriginalFilename());

			try {
				multipartFile.transferTo(saveFile);
			} catch (Exception e) {
				log.error(e.getMessage());
			} // end catch
		} // end for

	}

uploadForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>


<form action="uploadFormAction" method="post" enctype="multipart/form-data">

<input type='file' name='uploadFile' multiple>

<button>Submit</button>

</form>

</body>
</html>

2) Ajax를 이용하는 파일 업로드

컨트롤러

	@GetMapping("/uploadAjax")
	public void uploadAjax() {

		log.info("upload ajax");
	}

	@PostMapping("/uploadAjaxAction")
	public void uploadAjaxPost(MultipartFile[] uploadFile) {

		log.info("update ajax post.........");

		String uploadFolder = "C:\\upload";

		for (MultipartFile multipartFile : uploadFile) {

			log.info("-------------------------------------");
			log.info("Upload File Name: " + multipartFile.getOriginalFilename());
			log.info("Upload File Size: " + multipartFile.getSize());

			String uploadFileName = multipartFile.getOriginalFilename();

			// IE has file path
			uploadFileName = uploadFileName.substring(uploadFileName.lastIndexOf("\\") +
					1);
			log.info("only file name: " + uploadFileName);

			File saveFile = new File(uploadFolder, uploadFileName);

			try {

				multipartFile.transferTo(saveFile);
			} catch (Exception e) {
				log.error(e.getMessage());
			} // end catch

		} // end for

	}

uploadAjax.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>Upload with Ajax</h1>



	<style>
.uploadResult {
	width: 100%;
	background-color: gray;
}

.uploadResult ul {
	display: flex;
	flex-flow: row;
	justify-content: center;
	align-items: center;
}

.uploadResult ul li {
	list-style: none;
	padding: 10px;
}

.uploadResult ul li img {
	width: 100px;
}
</style>

<style>
.bigPictureWrapper {
  position: absolute;
  display: none;
  justify-content: center;
  align-items: center;
  top:0%;
  width:100%;
  height:100%;
  background-color: gray; 
  z-index: 100;
}

.bigPicture {
  position: relative;
  display:flex;
  justify-content: center;
  align-items: center;
}
</style>

<div class='bigPictureWrapper'>
  <div class='bigPicture'>
  </div>
</div>


	<div class='uploadDiv'>
		<input type='file' name='uploadFile' multiple>
	</div>

	<div class='uploadResult'>
		<ul>

		</ul>
	</div>


	<button id='uploadBtn'>Upload</button>

<!-- 그냥 jquery 사용하는 스크립트다 -->
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"
		integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
		crossorigin="anonymous"></script>

	<script>

 $(document).ready(function(){
		
		 $("#uploadBtn").on("click", function(e){

		 var formData = new FormData();
		
		 var inputFile = $("input[name='uploadFile']");
		
		 var files = inputFile[0].files;
		
		 console.log(files);
		
		 //add filedate to formdata
		 for(var i = 0; i < files.length; i++){
		 	formData.append("uploadFile", files[i]);
		 }

		
		 $.ajax({
		 url: '/uploadAjaxAction',
		 processData: false,
		 contentType: false, // 얘네 두개는 무조건 false줘야하고 의미 몰라도 됨 (필수사항이라고 알기)
		 data: formData,
		 type: 'POST',
		 success: function(result){
		 	alert("Uploaded");
		 }
		 }); //$.ajax
		
	 });  
}); 

		

	</script>


</body>
</html>

[days16] 댓글과 댓글 수에 대한 처리

다연 — Wed, 24 Feb 2021 13:36:18 +0900

1. 쿼리 실행

alter table tbl_board add (replycnt number default 0);

select * from tbl_board;

update tbl_board
set replycnt = 
	(
	select count(rno) 
    from tbl_reply 
    where tbl_reply.bno = tbl_board.bno
    );

commit;

댓글수에 대한 컬럼을 추가하고, 기존에 댓글이 있는 게시글의 경우 그 댓글 수로 update하는 작업

2. BoardVO 추가

private int replyCnt; //추가

컬럼을 추가했으니 필드도 추가해주자

3. BoardMapper.java

//@Param 알고 있어야
public void updateReplyCnt(@Param("bno") Long bno, @Param("amount") int amount);

댓글 수를 update하는 메소드

4. BoardMapper.xml

	<update id="updateReplyCnt">
    	update tbl_board 
    	set replycnt = replycnt + #{amount} 
    	where bno = #{bno}
  	</update>

5. replyServiceImpl

- private BoardMapper boardMapper; 추가
- @Transactional 댓글 추가, 삭제 메소드 변경 (댓글수 증가하는 작업)

package org.zerock.service;

import java.util.List;

import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import org.zerock.domain.Criteria;
import org.zerock.domain.ReplyPageDTO;
import org.zerock.domain.ReplyVO;
import org.zerock.mapper.BoardMapper;
import org.zerock.mapper.ReplyMapper;

import lombok.AllArgsConstructor;
import lombok.extern.log4j.Log4j;

// p.390
@Service
@Log4j
@AllArgsConstructor
public class ReplyServiceImpl implements ReplyService {
  
  private ReplyMapper mapper;  //@AllArgsConstructor 생성자에 의해 자동 주입(DI) 
  
  private BoardMapper boardMapper;
  
  //댓글은 전부 ajax
	@Transactional
	@Override
	public int register(ReplyVO vo) {

		log.info("register......" + vo);

		boardMapper.updateReplyCnt(vo.getBno(), 1);

		return mapper.insert(vo);

	}	
  @Override
  public ReplyVO get(Long rno) {
    log.info("get......" + rno);
    return mapper.read(rno);
  }

  @Override
  public int modify(ReplyVO vo) {
    log.info("modify......" + vo);
    return mapper.update(vo);
  }

	@Transactional
	@Override
	public int remove(Long rno) {

		log.info("remove...." + rno);

		ReplyVO vo = mapper.read(rno);

		boardMapper.updateReplyCnt(vo.getBno(), -1);
		return mapper.delete(rno);

	}

  @Override
  public List<ReplyVO> getList(Criteria cri, Long bno) {
    log.info("get Reply List of a Board " + bno);
    return mapper.getListWithPaging(cri, bno);
  }
  
 
  @Override
  public ReplyPageDTO getListPage(Criteria cri, Long bno) {
    return new ReplyPageDTO(
        mapper.getCountByBno(bno), 
        mapper.getListWithPaging(cri, bno));
  }

}

private BoardMapper boardMapper 필드를 추가하고

댓글 추가, 삭제 메소드에 @Transaction을 삽입해 트랜잭션이 이루어지도록 한다.

6. list.jsp에서 댓글 수를 출력해 타이틀 옆에 띄우는 코딩

<b>[  <c:out value="${board.replyCnt}" />  ]</b>

[days16] AOP와 트랜잭션

다연 — Wed, 24 Feb 2021 13:10:08 +0900

AOP

AOP는 '관심사의 분리'를 추구한다. 예를 들어 나눗셈을 구현한다고 하면 '핵심 로직'은 두 개의 숫자를 나누는 것이지만, '주변 로직'은 0을 나누는 것ㅇ이 아닌지 등을 체크하는 것이다.

AOP는 과거에 개발자가 작성했던 '관심사 + 비즈니스 로직'을 분리해서 별도의 코드로 작성하도록 하고, 실행할 때 이를 결합하는 방식으로 접근한다. 실제 실행은 결합된 상태의 코드가 실행되므로 개발자들은 핵심 비즈니스 로직에만 근거하여 코드를 작성하고, 나머지는 어떤 관심사들과 결합할 것인지를 설정하는 것 만으로 모든 개발을 마칠 수 있다.

예제

1. pom.xml에 스프링 버전과 AOP 버전을 수정, 라이브러리 추가

- 스프링AOP는 AspectJ라는 라이브러리의 도움을 많이 받음

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/maven-v4_0_0.xsd">
   <modelVersion>4.0.0</modelVersion>
   <groupId>org.zerock</groupId>
   <artifactId>controller</artifactId>
   <name>ex04</name>
   <packaging>war</packaging>
   <version>1.0.0-BUILD-SNAPSHOT</version>
   <properties>
      <java-version>1.8</java-version>
      <org.springframework-version>5.0.7.RELEASE</org.springframework-version>
      <org.aspectj-version>1.9.0</org.aspectj-version>
      <org.slf4j-version>1.7.25</org.slf4j-version>
   </properties>
   <dependencies>
      <!-- Spring -->
      <dependency>
         <groupId>org.springframework</groupId>
         <artifactId>spring-context</artifactId>
         <version>${org.springframework-version}</version>
         <exclusions>
            <!-- Exclude Commons Logging in favor of SLF4j -->
            <exclusion>
               <groupId>commons-logging</groupId>
               <artifactId>commons-logging</artifactId>
            </exclusion>
         </exclusions>
      </dependency>
      <dependency>
         <groupId>org.springframework</groupId>
         <artifactId>spring-webmvc</artifactId>
         <version>${org.springframework-version}</version>
      </dependency>

      <!-- AspectJ -->
      <dependency>
         <groupId>org.aspectj</groupId>
         <artifactId>aspectjrt</artifactId>
         <version>${org.aspectj-version}</version>
      </dependency>

      <!-- Logging -->
      <dependency>
         <groupId>org.slf4j</groupId>
         <artifactId>slf4j-api</artifactId>
         <version>${org.slf4j-version}</version>
      </dependency>
      <dependency>
         <groupId>org.slf4j</groupId>
         <artifactId>jcl-over-slf4j</artifactId>
         <version>${org.slf4j-version}</version>
         <scope>runtime</scope>
      </dependency>
      <dependency>
         <groupId>org.slf4j</groupId>
         <artifactId>slf4j-log4j12</artifactId>
         <version>${org.slf4j-version}</version>
         <scope>runtime</scope>
      </dependency>
      <!-- p.54 <dependency> <groupId>log4j</groupId> <artifactId>log4j</artifactId> 
         <version>1.2.15</version> <exclusions> <exclusion> <groupId>javax.mail</groupId> 
         <artifactId>mail</artifactId> </exclusion> <exclusion> <groupId>javax.jms</groupId> 
         <artifactId>jms</artifactId> </exclusion> <exclusion> <groupId>com.sun.jdmk</groupId> 
         <artifactId>jmxtools</artifactId> </exclusion> <exclusion> <groupId>com.sun.jmx</groupId> 
         <artifactId>jmxri</artifactId> </exclusion> </exclusions> <scope>runtime</scope> 
         </dependency> -->
      <!-- @Inject -->
      <dependency>
         <groupId>javax.inject</groupId>
         <artifactId>javax.inject</artifactId>
         <version>1</version>
      </dependency>

      <!-- Servlet -->
      <!-- <dependency> <groupId>javax.servlet</groupId> <artifactId>servlet-api</artifactId> 
         <version>2.5</version> <scope>provided</scope> </dependency> -->
      <!-- p.111 -->
      <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
      <dependency>
         <groupId>javax.servlet</groupId>
         <artifactId>javax.servlet-api</artifactId>
         <version>3.1.0</version>
         <scope>provided</scope>
      </dependency>

      <dependency>
         <groupId>javax.servlet.jsp</groupId>
         <artifactId>jsp-api</artifactId>
         <version>2.1</version>
         <scope>provided</scope>
      </dependency>
      <dependency>
         <groupId>javax.servlet</groupId>
         <artifactId>jstl</artifactId>
         <version>1.2</version>
      </dependency>

      <!-- Test p.54 -->
      <dependency>
         <groupId>junit</groupId>
         <artifactId>junit</artifactId>
         <version>4.12</version>
         <scope>test</scope>
      </dependency>

      <!-- p.54 -->
      <dependency>
         <groupId>org.springframework</groupId>
         <artifactId>spring-test</artifactId>
         <version>${org.springframework-version}</version>
      </dependency>
      <dependency>
         <groupId>org.projectlombok</groupId>
         <artifactId>lombok</artifactId>
         <version>1.18.18</version>
         <scope>provided</scope>
      </dependency>
      <dependency><!-- log4j.xml 설정 필요(자동) -->
         <groupId>log4j</groupId>
         <artifactId>log4j</artifactId>
         <version>1.2.17</version>
      </dependency>

      <!-- p.83 https://github.com/brettwooldridge/HiKariCP -->
      <dependency>
         <groupId>com.zaxxer</groupId>
         <artifactId>HikariCP</artifactId>
         <version>4.0.2</version>
      </dependency>

      <!-- p 90 -->
      <!-- https://mvnrepository.com/artifact/org.mybatis/mybatis -->
      <dependency>
         <groupId>org.mybatis</groupId>
         <artifactId>mybatis</artifactId>
         <!-- <version>3.4.6</version> -->
         <version>3.5.6</version>
      </dependency>
      <dependency>
         <groupId>org.mybatis</groupId>
         <artifactId>mybatis-spring</artifactId>
         <!-- <version>1.3.2</version> -->
         <version>2.0.6</version>
      </dependency>
      <dependency>
         <groupId>org.springframework</groupId>
         <artifactId>spring-tx</artifactId>
         <version>${org.springframework-version}</version>
      </dependency>
      <dependency>
         <groupId>org.springframework</groupId>
         <artifactId>spring-jdbc</artifactId>
         <version>${org.springframework-version}</version>
      </dependency>

      <!-- p 101 -->
      <dependency>
         <groupId>org.bgee.log4jdbc-log4j2</groupId>
         <artifactId>log4jdbc-log4j2-jdbc4</artifactId>
         <version>1.16</version>
      </dependency>

      <!-- p 147 jackson-databind -->
      <dependency>
         <groupId>com.fasterxml.jackson.core</groupId>
         <artifactId>jackson-databind</artifactId>
         <version>2.12.1</version>
      </dependency>

      <!-- p 149 -->
      <!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
      <dependency>
         <groupId>commons-fileupload</groupId>
         <artifactId>commons-fileupload</artifactId>
         <version>1.4</version>
      </dependency>

      <!-- p 357 -->
      <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.dataformat/jackson-dataformat-xml -->
      <dependency>
         <groupId>com.fasterxml.jackson.dataformat</groupId>
         <artifactId>jackson-dataformat-xml</artifactId>
         <version>2.12.1</version>
      </dependency>

      <!-- p 357 Java 인스턴스를 JSON 타입의 문자열로 변환 -->
      <!-- https://mvnrepository.com/artifact/com.google.code.gson/gson -->
      <dependency>
         <groupId>com.google.code.gson</groupId>
         <artifactId>gson</artifactId>
         <version>2.8.6</version>
      </dependency>

<!-- AOP 중요 -->
      <!-- https://mvnrepository.com/artifact/org.aspectj/aspectjweaver -->
      <dependency>
         <groupId>org.aspectj</groupId>
         <artifactId>aspectjweaver</artifactId>
         <version>${org.aspectj-version}</version>
      </dependency>

      <!-- https://mvnrepository.com/artifact/net.coobird/thumbnailator -->
      <dependency>
         <groupId>net.coobird</groupId>
         <artifactId>thumbnailator</artifactId>
         <version>0.4.8</version>
      </dependency>

      <!-- https://mvnrepository.com/artifact/org.quartz-scheduler/quartz -->
      <dependency>
         <groupId>org.quartz-scheduler</groupId>
         <artifactId>quartz</artifactId>
         <version>2.3.0</version>
      </dependency>

      <!-- https://mvnrepository.com/artifact/org.quartz-scheduler/quartz-jobs -->
      <dependency>
         <groupId>org.quartz-scheduler</groupId>
         <artifactId>quartz-jobs</artifactId>
         <version>2.3.0</version>
      </dependency>

      <dependency>
         <groupId>org.springframework.security</groupId>
         <artifactId>spring-security-web</artifactId>
         <version>${org.springframework-version}</version>
      </dependency>

      <dependency>
         <groupId>org.springframework.security</groupId>
         <artifactId>spring-security-config</artifactId>
         <version>${org.springframework-version}</version>
      </dependency>

      <dependency>
         <groupId>org.springframework.security</groupId>
         <artifactId>spring-security-core</artifactId>
         <version>${org.springframework-version}</version>
      </dependency>

      <!-- https://mvnrepository.com/artifact/org.springframework.security/spring-security-taglibs -->
      <dependency>
         <groupId>org.springframework.security</groupId>
         <artifactId>spring-security-taglibs</artifactId>
         <version>${org.springframework-version}</version>
      </dependency>
   </dependencies>
   <build>
      <plugins>
         <plugin>
            <artifactId>maven-eclipse-plugin</artifactId>
            <version>2.9</version>
            <configuration>
               <additionalProjectnatures>
                  <projectnature>org.springframework.ide.eclipse.core.springnature</projectnature>
               </additionalProjectnatures>
               <additionalBuildcommands>
                  <buildcommand>org.springframework.ide.eclipse.core.springbuilder</buildcommand>
               </additionalBuildcommands>
               <downloadSources>true</downloadSources>
               <downloadJavadocs>true</downloadJavadocs>
            </configuration>
         </plugin>
         <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-compiler-plugin</artifactId>
            <version>3.5.1</version>
            <configuration>
               <source>1.8</source>
               <target>1.8</target>
               <compilerArgument>-Xlint:all</compilerArgument>
               <showWarnings>true</showWarnings>
               <showDeprecation>true</showDeprecation>
            </configuration>
         </plugin>
         <plugin>
            <groupId>org.codehaus.mojo</groupId>
            <artifactId>exec-maven-plugin</artifactId>
            <version>1.2.1</version>
            <configuration>
               <mainClass>org.test.int1.Main</mainClass>
            </configuration>
         </plugin>
      </plugins>
   </build>
</project>

2. 서비스 계층 설계

SampleService 인터페이스

package org.zerock.service;

public interface SampleService {

  public Integer doAdd(String str1, String str2)throws Exception;

}

SampleServiceImpl

package org.zerock.service;

import org.springframework.stereotype.Service;

@Service
public class SampleServiceImpl implements SampleService {

	@Override
	public Integer doAdd(String str1, String str2) throws Exception {

		return Integer.parseInt(str1) + Integer.parseInt(str2);

	}
}

3. Advice 작성

위의 SampleServiceImpl 코드를 보면 기존에 항상 하던 log.info()가 빠져있다. 지금까지 해왔던, 로그를 기록해 오던 일은 '반복적이면서 핵심 로직도 아니고, 필요하기는 한 기능'이기 때문에 '관심사'라고 볼 수 있다.

로그를 기록해주는 LogAdvice를 설계해보자

org.zerock.aop에 LogAdvice.java 생성

package org.zerock.aop;

import java.util.Arrays;

import org.aspectj.lang.ProceedingJoinPoint;
import org.aspectj.lang.annotation.AfterThrowing;
import org.aspectj.lang.annotation.Around;
import org.aspectj.lang.annotation.Aspect;
import org.aspectj.lang.annotation.Before;
import org.springframework.stereotype.Component;

import lombok.extern.log4j.Log4j;

@Aspect //보조 기능을 하는 구현 클래스
@Log4j  //로그 기록 
@Component // 컴포넌트 스캔
public class LogAdvice {

  @Before( "execution(* org.zerock.service.SampleService*.*(..))") //AspectJ 문법
  public void logBefore() {

    log.info("========================");
  }
  
  @Before("execution(* org.zerock.service.SampleService*.doAdd(String, String)) && args(str1, str2)")
  public void logBeforeWithParam(String str1, String str2) {

    log.info("str1: " + str1);
    log.info("str2: " + str2);
  }  
  //before두개면 다 실행

  @AfterThrowing(pointcut = "execution(* org.zerock.service.SampleService*.*(..))", throwing="exception")
  public void logException(Exception exception) {
    
    log.info("Exception....!!!!");
    log.info("exception: "+ exception);
  
  }
  
  
  @Around("execution(* org.zerock.service.SampleService*.*(..))")
  public Object logTime( ProceedingJoinPoint pjp) {
    
    long start = System.currentTimeMillis();
    
    log.info("Target: " + pjp.getTarget());
    log.info("Param: " + Arrays.toString(pjp.getArgs()));
    
    
    //invoke method 
    Object result = null;
    
    try {
      result = pjp.proceed();
    } catch (Throwable e) {
      // TODO Auto-generated catch block
      e.printStackTrace();
    }
    
    long end = System.currentTimeMillis();
    
    log.info("TIME: "  + (end - start));
    
    return result;
  }
}

4. AOP 설정

스프링 프로젝트에 AOP를 설정하는 것은 스프링 2버전 이후에는 간단히 자동으로 Proxy 객체를 만들어주는 설정을 추가해주면 된다.

프로젝트의 root-context.xml에서 Namespaces에 aop와 context를 추가하고 아래 코딩을 추가하자

   <!-- p.455 -->
   <context:annotation-config></context:annotation-config>   
   <context:component-scan base-package="org.zerock.service" />
   <context:component-scan base-package="org.zerock.aop" />   
   <aop:aspectj-autoproxy></aop:aspectj-autoproxy>

컴포넌트 스캔을 통해 패키지들을 스캔하고, 이 과정에서 SampleServiceImpl 클래스와 LogAdvice가 스프링의 빈으로 등록된다. <aop:aspectj-autoproxy>를 이용해 LogAdvice에 설정한 @들이 동작하게 된다.

-Java 설정을 이용하는 경우 p456

5. AOP 테스트

정상적인 상황이라면 SampleServiceImpl, LogAdvice는 같이 묶여서 자동으로 Proxy 객체가 생성된다.

테스트 폴더에 SampleServiceTests 추가

package org.zerock.service;

import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;

import lombok.Setter;
import lombok.extern.log4j.Log4j;

@RunWith(SpringJUnit4ClassRunner.class)
@Log4j
@ContextConfiguration({ "file:src/main/webapp/WEB-INF/spring/root-context.xml" })
//Java설정의 경우 
//@ContextConfiguration(classes= {RootConfig.class})
public class SampleServiceTests {

  //@Setter(onMethod = @__({ @Autowired }))
  @Setter(onMethod_ = @Autowired)
  private SampleService service;
  
  
  @Test
  public void testClass() {
    //보조기능 출력
    log.info(service);
    log.info(service.getClass().getName());     
    
  }
  
  @Test
  public void testAdd() throws Exception {
    
    log.info(service.doAdd("123", "456"));
    
  }
  
  @Test
  public void testAddError() throws Exception {
    
    log.info(service.doAdd("123", "ABC"));
    
  }  
}

스프링에서 트랜잭션 관리

스프링 트랜잭션 설정은 AOP와 같이 XML을 이용해서 설정하거나 어노테이션을 이용해서 설정이 가능하다.

1. pom.xml에 라이브러리 추가 - spring-jdbc, spring-tx, mybatis, mybatis-spring, hikari 등

(위 pom.xml과 동일)

2. root-context.xml에는 Namespaces 탭에서 tx 항목 체크 아래 태그 등록

<tx:annotation-driven />

: 어노테이션 기반으로 트랜잭션을 설정할 수 있도록 함

-Java 설정을 이용한 트랜잭션 설정 p470

3. 예제 테이블 생성

create table tbl_sample1(col1 varchar2(500));
create table tbl_sample2(col2 varchar2(50));

Sample1MApper - tbl_sample1 테이블에 데이터 삽입하는 메소드

package org.zerock.mapper;

import org.apache.ibatis.annotations.Insert;

public interface Sample1Mapper {

	@Insert("insert into tbl_sample1 (col1) values (#{data}) ")
	public int insertCol1(String data);

}

Sample2Mapper - tbl_sample2 테이블에 데이터 삽입하는 메소드

package org.zerock.mapper;

import org.apache.ibatis.annotations.Insert;

public interface Sample2Mapper {

	@Insert("insert into tbl_sample2 (col2) values (#{data}) ")
	public int insertCol2(String data);

}

4. 비즈니스 계층과 트랜잭션 설정

트랜잭션은 비즈니스 계층에서 이루어지므로, org.zerock.service 계층에서 Sample1Mapper, Sample2Mapper를 사용하는 SampleTxService, SampleTxServiceImpl 클래스 설계

SampleTxService

package org.zerock.service;

public interface SampleTxService {

	public void addData(String value);
}

SampleTxServiceImpl

package org.zerock.service;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import org.zerock.mapper.Sample1Mapper;
import org.zerock.mapper.Sample2Mapper;

import lombok.Setter;
import lombok.extern.log4j.Log4j;

@Service
@Log4j
public class SampleTxServiceImpl implements SampleTxService {

  @Setter(onMethod_ = { @Autowired })
  private Sample1Mapper mapper1;
  
  @Setter(onMethod_ = { @Autowired })
  private Sample2Mapper mapper2;
  
  @Transactional
  @Override
  public void addData(String value) { //마크: 내부적으로 AOP 처리된다는 의미
    
    log.info("mapper1....................");
    mapper1.insertCol1(value);
    
    log.info("mapper2.....................");
    mapper2.insertCol2(value);
    
    log.info("end..........................");
    //insert 작업을 2번 하는 동안 @트랜잭션 걸었음
    // 하나라도 잘못되면 전부 롤백되는지 확인 (O)
  }

}

5. Test

package org.zerock.service;

import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;
import org.springframework.transaction.annotation.Transactional;

import lombok.Setter;
import lombok.extern.log4j.Log4j;

@RunWith(SpringJUnit4ClassRunner.class)
@Log4j
@ContextConfiguration({ "file:src/main/webapp/WEB-INF/spring/root-context.xml" })
//Java설정의 경우 
//@ContextConfiguration(classes= {RootConfig.class})

public class SampleTxServiceTests {

  @Setter(onMethod_ = { @Autowired })
  private SampleTxService service;
  
  
  

  @Test
  public void testLong() {
/*    
    String str ="Starry\r\n" + 
        "Starry night\r\n" + 
        "Paint your palette blue and grey\r\n" + 
        "Look out on a summer's day";
 */
	  
	    String str ="Starry";
    log.info("길이: "+str.getBytes().length); 
    
    service.addData(str);    
    //위 글이 50바이트보다 크면 샘플2에 안들어가져서 트랜잭션에 의해 둘 다 롤백
    //작으면 커밋 (두 테이블 모두 잘 들어감)
  }
  
  
}

@Transaction 어노테이션에 의해 트랜잭션 처리가 잘 된다.

[days15] Ajax 댓글 처리

다연 — Tue, 23 Feb 2021 20:29:11 +0900

ex03_02

1. properties 파일 존재 여부 확인
2. ojdbc.jar 확인
3. developer

create table tbl_reply (
  rno number(10,0),
  bno number(10,0) not null,
  reply varchar2(1000) not null,
  replyer varchar2(50) not null,
  replyDate date default sysdate,
  updateDate date default sysdate
);

create sequence seq_reply;

alter table tbl_reply add constraint pk_reply primary key (rno);

alter table tbl_reply  add constraint fk_reply_board
foreign key (bno)  references  tbl_board (bno);

4. ReplyVO 생성

package org.zerock.domain;

import java.util.Date;

import lombok.Data;

@Data
public class ReplyVO {

  private Long rno;
  private Long bno;

  private String reply;
  private String replyer;
  private Date replyDate;
  private Date updateDate;

}

5. ReplyMapper.java 생성

package org.zerock.mapper;

import java.util.List;

import org.apache.ibatis.annotations.Param;
import org.zerock.domain.Criteria;
import org.zerock.domain.ReplyVO;

public interface ReplyMapper {

	public int insert(ReplyVO vo);

	public ReplyVO read(Long bno);

	public int delete(Long bno);

	public int update(ReplyVO reply);

	//P378 @Param 설명 	MyBatis의 @Param 기억   @Param("bno") ->#{bno}
	public List<ReplyVO> getListWithPaging(@Param("cri") Criteria cri, @Param("bno") Long bno);
	//게시글에 대한 총 댓글 수를 반환하는 메소드
	public int getCountByBno(Long bno);
}

6. ReplyMapper.xml 생성

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="org.zerock.mapper.ReplyMapper">

	<insert id="insert">
		insert into tbl_reply (rno, bno, reply, replyer)
		values (seq_reply.nextval, #{bno}, #{reply}, #{replyer})
	</insert>

	<select id="read" resultType="org.zerock.domain.ReplyVO">
		select *
		from tbl_reply
		where rno = #{rno}
	</select>
	
	<delete id="delete">
      delete from tbl_reply 
      where rno = #{rno}
   </delete>

   <update id="update">
      update tbl_reply 
      set reply = #{reply},updatedate = sysdate
      where rno = #{rno}
   </update>
   
   <select id="getListWithPaging"
      resultType="org.zerock.domain.ReplyVO">

     <![CDATA[
       select  rno, bno, reply, replyer, replydate, updatedate
       from 
         (
          select /*+INDEX(tbl_reply idx_reply) */ 
            rownum rn,  rno, bno, reply, replyer, replyDate, updatedate
          from tbl_reply
          where bno =  #{bno}          
             and rno > 0
             and rownum <= #{cri.pageNum} * #{cri.amount}
         ) where rn > (#{cri.pageNum} -1) * #{cri.amount}
   ]]>

   </select>


   <select id="getCountByBno" resultType="int">
      <![CDATA[
      select  count(rno) 
      from  tbl_reply 
      where  bno = #{bno}
      ]]>
   </select>
</mapper>

7. 단위테스트

package org.zerock.mapper;

import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;

import lombok.Setter;
import lombok.extern.log4j.Log4j;
@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration("file:src/main/webapp/WEB-INF/spring/root-context.xml") 
@Log4j
public class ReplyMapperTests {
   
   @Setter(onMethod_ = @Autowired)
   private ReplyMapper mapper;

   @Test
   public void testMapper() {

      log.info(this.mapper);

   }
   
   
      
}

8. @Param 어노테이션에 대한 이해
MyBatis는 두 개 이상의 데이터를 파라미터로 전달하기 위해서는
1) 별도의 객체로 구성하거나 2)Map을 이용하거나 3) Param을 이용해 이름을 사용

9. ReplyService 인터페이스 생성

package org.zerock.service;

import java.util.List;

import org.zerock.domain.Criteria;
import org.zerock.domain.ReplyPageDTO;
//import org.zerock.domain.ReplyPageDTO;
import org.zerock.domain.ReplyVO;

// p.389
public interface ReplyService {

   public int register(ReplyVO vo);

   public ReplyVO get(Long rno);

   public int modify(ReplyVO vo);

   public int remove(Long rno);

   public List<ReplyVO> getList(Criteria cri, Long bno); //댓글 목록만 돌릴게 아니라
   
   // List<ReplyVO> + replyCnt = ReplyPageDTO
   public ReplyPageDTO getListPage(Criteria cri, Long bno); //댓글 수도 같이 돌리기

}

10. ReplyPageDTO 생성

package org.zerock.domain;

import java.util.List;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.Getter;

@Data
@AllArgsConstructor
@Getter
public class ReplyPageDTO {

  private int replyCnt; //해당 게시글의 총 댓글 수 저장할 필드
  private List<ReplyVO> list;
}

11. 컨트롤러의 설계
등록
조회
삭제
수정
페이지
컨트롤러 생성

package org.zerock.controller;

import org.springframework.http.HttpStatus;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import org.zerock.domain.Criteria;
import org.zerock.domain.ReplyPageDTO;
import org.zerock.domain.ReplyVO;
import org.zerock.service.ReplyService;

import lombok.AllArgsConstructor;
import lombok.extern.log4j.Log4j;

// p.392
@RestController //@Controller가 아니고 @RestController (jsp요청아니라 xml이나 json이나 일반 텍스트를 요청하겠다는 의미)
@RequestMapping("/replies/")
@Log4j
@AllArgsConstructor
public class ReplyController {
   private ReplyService service;

   //	 /replies/new + POST -> 댓글 등록 
   @PostMapping(value = "/new"
         , consumes = "application/json" //  json형태로 입력해서
         , produces = { MediaType.TEXT_PLAIN_VALUE }) //돌려주는 값은 일반 텍스트 문자열 (응답)
   public ResponseEntity<String> create(@RequestBody ReplyVO vo) {

      log.info("ReplyVO: " + vo);

      int insertCount = service.register(vo); //댓글 db에 저장

      log.info("Reply INSERT COUNT: " + insertCount);

      return insertCount == 1   //영향받은 레코드값
    		  	  ?  new ResponseEntity<>("success", HttpStatus.OK) //얘로 응답
                  :  new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR);
   }

   
   //	 /replies/41 + GET -> 댓글 조회
   @GetMapping(value = "/{rno}",  //여기 번호가 @PathVariable에 들어감
         produces = { MediaType.APPLICATION_XML_VALUE,  
               MediaType.APPLICATION_JSON_UTF8_VALUE }) //쓰고싶은대로
   public ResponseEntity<ReplyVO> get(@PathVariable("rno") Long rno) {

      log.info("get: " + rno);

      return new ResponseEntity<>(service.get(rno), HttpStatus.OK);
   }

   
   //	 /replies/41 + PUT또는PATCH -> 댓글 수정
   @RequestMapping(method = { RequestMethod.PUT, RequestMethod.PATCH }
   , value = "/{rno}"
         , consumes = "application/json" //수정하고자하는 새로입력받은 데이터는 json
         , produces = {   MediaType.TEXT_PLAIN_VALUE    }) 
   public ResponseEntity<String> modify(
         @RequestBody ReplyVO vo, 
         @PathVariable("rno") Long rno) {

      vo.setRno(rno);

      log.info("rno: " + rno);
      log.info("modify: " + vo);

      return service.modify(vo) == 1 
            ? new ResponseEntity<>("success", HttpStatus.OK)
                  : new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR);

   }

   //@DeleteMapping + /replies/41 		댓글 삭제 
   @DeleteMapping(value = "/{rno}", produces = { MediaType.TEXT_PLAIN_VALUE })
   public ResponseEntity<String> remove(@PathVariable("rno") Long rno) {

      log.info("remove: " + rno);

      return service.remove(rno) == 1 
            ? new ResponseEntity<>("success", HttpStatus.OK)
                  : new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR);

   }

   /*
   @GetMapping(value = "/pages/{bno}/{page}", 
            produces = {
                     MediaType.APPLICATION_XML_VALUE,
                     MediaType.APPLICATION_JSON_UTF8_VALUE 
                     })
   public ResponseEntity<List<ReplyVO>> getList(
         @PathVariable("page") int page,
         @PathVariable("bno") Long bno) {


      log.info("getList.................");
      Criteria cri = new Criteria(page,10);
      log.info(cri);

      return new ResponseEntity<>(service.getList(cri, bno), HttpStatus.OK);
   }
   */

   //	 
   @GetMapping(value = "/pages/{bno}/{page}", 
            produces = { MediaType.APPLICATION_XML_VALUE,
                     MediaType.APPLICATION_JSON_UTF8_VALUE })
   public ResponseEntity<ReplyPageDTO> getList(@PathVariable("page") int page, @PathVariable("bno") Long bno) {

      Criteria cri = new Criteria(page, 10);

      log.info("get Reply List bno: " + bno);

      log.info("cri:" + cri);

      return new ResponseEntity<>(service.getListPage(cri, bno), HttpStatus.OK);
   }
    

}

12. get.jsp

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
  
  <div class="panel panel-default">
   <h3>Board Read - p.251</h3>
   
         <!-- /.panel-heading -->
       <div class="panel-body">

          <div class="form-group">
          <label>Bno</label> <input class="form-control" name='bno'
            value='<c:out value="${board.bno }"/>' readonly="readonly">
        </div>

        <div class="form-group">
          <label>Title</label> <input class="form-control" name='title'
            value='<c:out value="${board.title }"/>' readonly="readonly">
        </div>

        <div class="form-group">
          <label>Text area</label>
          <textarea class="form-control" rows="3" name='content'
            readonly="readonly"><c:out value="${board.content}" /></textarea>
        </div>

        <div class="form-group">
          <label>Writer</label> <input class="form-control" name='writer'
            value='<c:out value="${board.writer }"/>' readonly="readonly">
        </div>
<%-- 
        <button data-oper='modify' class="btn btn-default">
        <a href="/board/modify?bno=<c:out value="${board.bno}"/>">Modify</a></button>
        <button data-oper='list' class="btn btn-info">
        <a href="/board/list">List</a></button>  
 --%>
 
   <button data-oper='modify' class="btn btn-default">Modify</button>
   <button data-oper='list' class="btn btn-info">List</button>
    

<%-- <form id='operForm' action="/boad/modify" method="get">
  <input type='hidden' id='bno' name='bno' value='<c:out value="${board.bno}"/>'>
</form> --%>


    <!-- p 317 -->
   <form id='operForm' action="/boad/modify" method="get">
     <input type='hidden' id='bno' name='bno' value='<c:out value="${board.bno}"/>'>
     <input type='hidden' name='pageNum' value='<c:out value="${cri.pageNum}"/>'>
     <input type='hidden' name='amount' value='<c:out value="${cri.amount}"/>'>
     
     <!-- p 345 -->
     <input type='hidden' name='keyword' value='<c:out value="${cri.keyword}"/>'>
     <input type='hidden' name='type' value='<c:out value="${cri.type}"/>'>
     
   </form> 

   </div>
   
   <!-- ------------- -->
    <div class="col-lg-12">

    <!-- /.panel -->
    <div class="panel panel-default">
<!--       <div class="panel-heading">
        <i class="fa fa-comments fa-fw"></i> Reply
      </div> -->
      
      <div class="panel-heading">
        <i class="fa fa-comments fa-fw"></i> Reply
        <button id='addReplyBtn' class='btn btn-primary btn-xs pull-right'>New Reply</button>
      </div>      
      
      
      <!-- /.panel-heading -->
      <div class="panel-body">        
      
        <ul class="chat">

        </ul>
        <!-- ./ end ul -->
      </div>
      <!-- /.panel .chat-panel -->

   <div class="panel-footer"></div>


      </div>
  </div>
  <!-- ./ end row -->
<!-- ------------- -->

<!-- p.420 ------------- -->
<!-- Modal -->
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
        aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal"
                aria-hidden="true">&times;</button>
              <h4 class="modal-title" id="myModalLabel">REPLY MODAL</h4>
            </div>
            <div class="modal-body">
              <div class="form-group">
                <label>Reply</label> 
                <input class="form-control" name='reply' value='New Reply!!!!'>
              </div>      
              <div class="form-group">
                <label>Replyer</label> 
                <input class="form-control" name='replyer' value='replyer'>
              </div>
              <div class="form-group">
                <label>Reply Date</label> 
                <input class="form-control" name='replyDate' value='2018-01-01 13:13'>
              </div>
      
            </div>
<div class="modal-footer">
        <button id='modalModBtn' type="button" class="btn btn-warning">Modify</button>
        <button id='modalRemoveBtn' type="button" class="btn btn-danger">Remove</button>
        <button id='modalRegisterBtn' type="button" class="btn btn-primary">Register</button>
        <button id='modalCloseBtn' type="button" class="btn btn-default">Close</button>
      </div>          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>
      <!-- /.modal -->
<!-- ------------- -->      
    
<!-- p 265 --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function (){
     var operForm = $("#operForm");
     
     $("button[data-oper='modify']").on("click", function (e){
        operForm.attr("action","/board/modify").submit();
     });
     
     // http://localhost/board/list?[pageNum=3&amount=5 ]
     $("button[data-oper='list']").on("click", function (e){
        operForm.find("#bno").remove();
        operForm.attr("action","/board/list").submit();
     }); 
  });
</script>
<script src="/resources/js/reply.js"></script>
<script>
   // 1.
   // console.log( replyService );
   
   // 2.
   /* 
   console.log("----------");
   console.log("JS TEST");
   var bnoValue = '<c:out value="${board.bno}"/>';
   replyService.add({ reply:"JS TEST", replyer:"tester", bno:bnoValue }
                    ,function (result){
                       alert("RESULT: " + result);
                    });
    */
    
    // 3. p 407
    /* 
    console.log("----------");
    console.log("JS TEST");
    var bnoValue = '<c:out value="${board.bno}"/>';
    replyService.getList({ bno:bnoValue, page:1 }
                     ,function (list){
                        for (var i = 0, len=list.length||0 ; i < len; i++) {                           
                           console.log(list[i]);
                   }
                     });
     */
</script>

<script>
// p.415
$(document).ready(function () {
  //조회하는 게시글 번호
  var bnoValue = '<c:out value="${board.bno}"/>';
  
  var replyUL = $(".chat"); //댓글을 표시하기 위한 ul태그
  //alert( bnoValue );
  //alert( replyUL );
    showList(1);
    
function showList(page){
   
     console.log("show list " + page);
    
    replyService.getList({bno:bnoValue,page: page|| 1 }, function(replyCnt, list) {
      
    console.log("replyCnt: "+ replyCnt );
    console.log("list: " + list);
    console.log(list);
    
    if(page == -1){
      pageNum = Math.ceil(replyCnt/10.0);
      showList(pageNum);
      return;
    }
      
     var str="";
     
     if(list == null || list.length == 0){
       return;
     }
     
     for (var i = 0, len = list.length || 0; i < len; i++) {
       str +="<li class='left clearfix' data-rno='"+list[i].rno+"'>";
       str +="  <div><div class='header'><strong class='primary-font'>["
          +list[i].rno+"] "+list[i].replyer+"</strong>"; 
       str +="    <small class='pull-right text-muted'>"
           +replyService.displayTime(list[i].replyDate)+"</small></div>";
       str +="    <p>"+list[i].reply+"</p></div></li>";
     }
     
     replyUL.html(str);
     
     showReplyPage(replyCnt);

 
   });//end function
     
 }//end showList
    
    var pageNum = 1;
    var replyPageFooter = $(".panel-footer");
    
    function showReplyPage(replyCnt){
      
      var endNum = Math.ceil(pageNum / 10.0) * 10;  
      var startNum = endNum - 9; 
      
      var prev = startNum != 1;
      var next = false;
      
      if(endNum * 10 >= replyCnt){
        endNum = Math.ceil(replyCnt/10.0);
      }
      
      if(endNum * 10 < replyCnt){
        next = true;
      }
      
      var str = "<ul class='pagination pull-right'>";
      
      if(prev){
        str+= "<li class='page-item'><a class='page-link' href='"+(startNum -1)+"'>Previous</a></li>";
      }
      
      for(var i = startNum ; i <= endNum; i++){
        
        var active = pageNum == i? "active":"";
        
        str+= "<li class='page-item "+active+" '><a class='page-link' href='"+i+"'>"+i+"</a></li>";
      }
      
      if(next){
        str+= "<li class='page-item'><a class='page-link' href='"+(endNum + 1)+"'>Next</a></li>";
      }
      
      str += "</ul></div>";
      
      console.log(str);
      
      replyPageFooter.html(str);
    }
     
    replyPageFooter.on("click","li a", function(e){
       e.preventDefault();
       console.log("page click");
       
       var targetPageNum = $(this).attr("href");
       
       console.log("targetPageNum: " + targetPageNum);
       
       pageNum = targetPageNum;
       
       showList(pageNum);
     });     

    
/*     function showList(page){
      
      replyService.getList({bno:bnoValue,page: page|| 1 }, function(list) {
        
        var str="";
       if(list == null || list.length == 0){
        
        replyUL.html("");
        
        return;
      }
       for (var i = 0, len = list.length || 0; i < len; i++) {
           str +="<li class='left clearfix' data-rno='"+list[i].rno+"'>";
           str +="  <div><div class='header'><strong class='primary-font'>"+list[i].replyer+"</strong>"; 
           str +="    <small class='pull-right text-muted'>"+replyService.displayTime(list[i].replyDate)+"</small></div>";
           str +="    <p>"+list[i].reply+"</p></div></li>";
         }


    replyUL.html(str);

      });//end function
      
   }//end showList */
   
    var modal = $(".modal");
    var modalInputReply = modal.find("input[name='reply']");
    var modalInputReplyer = modal.find("input[name='replyer']");
    var modalInputReplyDate = modal.find("input[name='replyDate']");
    
    var modalModBtn = $("#modalModBtn");
    var modalRemoveBtn = $("#modalRemoveBtn");
    var modalRegisterBtn = $("#modalRegisterBtn");
    
    $("#modalCloseBtn").on("click", function(e){
       
       modal.modal('hide');
    });
    
    $("#addReplyBtn").on("click", function(e){
      
      modal.find("input").val("");
      modalInputReplyDate.closest("div").hide();
      modal.find("button[id !='modalCloseBtn']").hide();
      
      modalRegisterBtn.show();
      
      $(".modal").modal("show");
      
    });
    

    modalRegisterBtn.on("click",function(e){
      
      var reply = { //json이 아니라 js Object, 
            reply: modalInputReply.val(),
            replyer:modalInputReplyer.val(),
            bno:bnoValue
          }; //js Object -> json 변환하고자 한다면 ? JSON.stringify(reply)
      replyService.add(reply, function(result){
        
        alert(result); //success 
        
        //modal.find("input").val(""); 모달창 초기화
        //modal.modal("hide");			숨기기
        
        //showList(1);
        showList(-1); //함수 가보면 -1이면 댓글 목록 다시 출력하는 코딩
        
      });
      
    });


  //댓글 조회 클릭 이벤트 처리 
    $(".chat").on("click", "li", function(e){
      
      var rno = $(this).data("rno");
      
      replyService.get(rno, function(reply){
      
        modalInputReply.val(reply.reply);
        modalInputReplyer.val(reply.replyer);
        modalInputReplyDate.val(replyService.displayTime( reply.replyDate))
        .attr("readonly","readonly");
        modal.data("rno", reply.rno);
        
        modal.find("button[id !='modalCloseBtn']").hide();
        modalModBtn.show();
        modalRemoveBtn.show();
        
        $(".modal").modal("show");
            
      });
    });
  
    
/*     modalModBtn.on("click", function(e){
      
      var reply = {rno:modal.data("rno"), reply: modalInputReply.val()};
      
      replyService.update(reply, function(result){
            
        alert(result);
        modal.modal("hide");
        showList(1);
        
      });
      
    });

    modalRemoveBtn.on("click", function (e){
         
       var rno = modal.data("rno");
       
       replyService.remove(rno, function(result){
             
           alert(result);
           modal.modal("hide");
           showList(1);
           
       });
       
     }); */

    modalModBtn.on("click", function(e){
         
        var reply = {rno:modal.data("rno"), reply: modalInputReply.val()};
        
        replyService.update(reply, function(result){
              
          alert(result);
          modal.modal("hide");
          showList(pageNum);
          
        });
        
      });


      modalRemoveBtn.on("click", function (e){
        
        var rno = modal.data("rno");
        
        replyService.remove(rno, function(result){
              
            alert(result);
            modal.modal("hide");
            showList(pageNum);
            
        });
        
      });

 
});

</script>



<script>

/* console.log("===============");
console.log("JS TEST");

var bnoValue = '<c:out value="${board.bno}"/>'; */

//for replyService add test
/* replyService.add(
    
    {reply:"JS Test", replyer:"tester", bno:bnoValue}
    ,
    function(result){ 
      alert("RESULT: " + result);
    }
); */


//reply List Test
/* replyService.getList({bno:bnoValue, page:1}, function(list){
    
     for(var i = 0,  len = list.length||0; i < len; i++ ){
       console.log(list[i]);
     }
});
 */

 
/*  //17번 댓글 삭제 테스트 
 replyService.remove(17, function(count) {

   console.log(count);

   if (count === "success") {
     alert("REMOVED");
   }
 }, function(err) {
   alert('ERROR...');
 });
 */
 

//12번 댓글 수정 
/* replyService.update({
  rno : 12,
  bno : bnoValue,
  reply : "Modified Reply...."
}, function(result) {

  alert("수정 완료...");

});  
 */

</script>  

</body>
</html>

13. reply.js

console.log("Reply Module........");

/*
// p.401
var replyService = (function() {
                  return { name : "AAAA" };                  
               })();
*/

/*
// p.402
var replyService = (function() {
                  function add(reply, callback){
                      console.log("reply.....");
                  }
                  return { add : add };                  
               })();
*/

 
var replyService = (function() {

   function add(reply, callback, error) {
      console.log("add reply...............");

      $.ajax({
         type : 'post',
         url : '/replies/new',
         data : JSON.stringify(reply), //stringify : 위 reply(문자열)를 json타입으로 변환할 때 사용
         contentType : "application/json; charset=utf-8",
         success : function(result, status, xhr) {
            if (callback) {
               callback(result);
            }
         },
         error : function(xhr, status, er) {
            if (error) {
               error(er);
            }
         }
      })
   }

//   function getList(param, callback, error) {
//
//      var bno = param.bno;
//      var page = param.page || 1;
//

 //        /replies/pages/41/2
//      $.getJSON("/replies/pages/" + bno + "/" + page + ".json",
//            function(data) {
//               if (callback) {
//                  callback(data);
//               }
//            }).fail(function(xhr, status, err) {
//         if (error) {
//            error();
//         }
//      });
//   }
   
   

   function getList(param, callback, error) {

       var bno = param.bno;
       var page = param.page || 1;
       
       $.getJSON("/replies/pages/" + bno + "/" + page + ".json",
           function(data) {
          
             if (callback) {
               //callback(data); // 댓글 목록만 가져오는 경우 
               callback(data.replyCnt, data.list); //댓글 숫자와 목록을 가져오는 경우 
             }
           }).fail(function(xhr, status, err) {
         if (error) {
           error();
         }
       });
     }

   
   function remove(rno, callback, error) {
      $.ajax({
         type : 'delete',
         url : '/replies/' + rno,
         success : function(deleteResult, status, xhr) {
            if (callback) {
               callback(deleteResult);
            }
         },
         error : function(xhr, status, er) {
            if (error) {
               error(er);
            }
         }
      });
   }

   function update(reply, callback, error) {

      console.log("RNO: " + reply.rno);

      $.ajax({
         type : 'put',
         url : '/replies/' + reply.rno,
         data : JSON.stringify(reply),
         contentType : "application/json; charset=utf-8",
         success : function(result, status, xhr) {
            if (callback) {
               callback(result);
            }
         },
         error : function(xhr, status, er) {
            if (error) {
               error(er);
            }
         }
      });
   }

   function get(rno, callback, error) {

      $.get("/replies/" + rno + ".json", function(result) {

         if (callback) {
            callback(result);
         }

      }).fail(function(xhr, status, err) {
         if (error) {
            error();
         }
      });
   }

   function displayTime(timeValue) {

      var today = new Date();

      var gap = today.getTime() - timeValue;

      var dateObj = new Date(timeValue);
      var str = "";

      if (gap < (1000 * 60 * 60 * 24)) {

         var hh = dateObj.getHours();
         var mi = dateObj.getMinutes();
         var ss = dateObj.getSeconds();

         return [ (hh > 9 ? '' : '0') + hh, ':', (mi > 9 ? '' : '0') + mi,
               ':', (ss > 9 ? '' : '0') + ss ].join('');

      } else {
         var yy = dateObj.getFullYear();
         var mm = dateObj.getMonth() + 1; // getMonth() is zero-based
         var dd = dateObj.getDate();

         return [ yy, '/', (mm > 9 ? '' : '0') + mm, '/',
               (dd > 9 ? '' : '0') + dd ].join('');
      }
   }
   ;

   return {
      add : add,
      get : get,
      getList : getList,
      remove : remove,
      update : update,
      displayTime : displayTime
   };

})();

[days15] REST 방식으로 전환

다연 — Tue, 23 Feb 2021 20:20:23 +0900

앱에서 서버에 기대하는 것은 완성된 HTML이 아니라 그저 자신에게 필요한 순수한 데이터만을 요구하게 되어 있다. 이처럼 서버의 역할은 점점 더 순수하게 데이터에 대한 처리를 목적으로 하는 형태로 진화하고 있다.

- URL : 이 곳에 가면 당신이 원하는 것을 찾을 수 있습니다. (URI의 하위개념)

- URI : 당신이 원하는 주소는 여기입니다.

REST는 하나의 URI는 하나의 고유한 리소스를 대표하도록 설계된다는 개념에 전송방식을 결합해서 원하는 작업을 지정한다.

URI + GET/POST/PUT/DELETE...

REST관련 어노테이션들

@RestController Controller가 REST 방식을 처리하기 위한 것임을 명시

@ResponseBody 일반적인 JSP와 같은 뷰로 전달되는게 아니라 데이터 자체를 전달하기 위한 용도

@PathVariable URL 경로에 있는 값을 파라미터로 추출하려고 할 때 사용

@CrossOrigin Ajax의 크로스 도메인 문제를 해결

@RequestBody JSON 데이터를 원하는 타입으로 바인딩 처리

@RestController

메소드의 리턴 타입으로 사용자가 정의한 클래스 타입을 지정할 수 있고, 이를 JSON이나 XML로 자동으로 처리 가능

사용하기 위한 준비

1. pom.xml에 필요 라이브러리 추가

     <!-- p 147 jackson-databind -->
      <dependency>
         <groupId>com.fasterxml.jackson.core</groupId>
         <artifactId>jackson-databind</artifactId>
         <version>2.12.1</version>
      </dependency>
      <!-- 추가-->
      <dependency>
         <groupId>com.fasterxml.jackson.dataformat</groupId>
         <artifactId>jackson-dataformat-xml</artifactId>
         <version>2.9.6</version>
      </dependency>
      <!-- 추가 -->
      <dependency>
         <groupId>com.google.code.gson</groupId>
         <artifactId>gson</artifactId>
         <version>2.8.2</version>
      </dependency>

위 라이브러리는 JSON 데이터를 처리하기 위해, 또 니중에 브라우저에 객체를 JSON이라는 포맷의 문자열로 변환시켜 전송하기 위해 필요하다. 또한, 테스트 시 직접 Java 인스턴스를 JSON 타입의 문자열로 변환해야 하는 일들도 있으므로 gson 라이브러리도 추가한다.

SampleController 생성

- 기존의 @Controller는 문자열을 반환하는 경우 JSP 파일의 이름으로 처리하지만, @RestController의 경우 순수한 데이터가 된다.

- @GetMapping에 사용된 produces 속성은 해당 메소드가 생산하는 MIME 타입을 의미한다. 문자열로 직접 지정할 수 도 있고, 메소드 내의 MediaType이라는 클래스를 이용할 수도 있다.

package org.zerock.controller;

import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.stream.Collectors;
import java.util.stream.IntStream;

import org.springframework.http.HttpStatus;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.zerock.domain.SampleVO;
import org.zerock.domain.Ticket;

import lombok.extern.log4j.Log4j;


@RestController
@RequestMapping("/sample")
@Log4j
public class SampleController {
	
	// p.359
	   @GetMapping(value = "/getText", produces = "text/plain; charset=UTF-8")   
	   public String getText() {
	      log.info("MIME TYPE : " + MediaType.TEXT_PLAIN_VALUE);
	      return "안녕하세요";
	   }  
	   
}

객체의 반환

객체를 반환하는 작업은 JSON이나 XML을 이용한다.

SampleVO

- @NoArgsConstructor 비어있는 생성자 만들기

package org.zerock.domain;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class SampleVO {
   
   private Integer mno;
   private String firstName;
   private String LastName;

}

컨트롤러에 메소드 추가

	// p.361
	   @GetMapping(value = "/getSample", produces = {
	         //MediaType.APPLICATION_JSON_UTF8_VALUE, 
	         MediaType.APPLICATION_JSON_VALUE,
	         MediaType.APPLICATION_XML_VALUE
	   }) 
	   public SampleVO getSample() {
	      return new SampleVO(112, "스타", "로드");
	   }
	   //url 뒤에 .json 붙히면 자동으로 json으로 출력
	   //안붙히면 기본은 xml

@GetMapping이나 @RequestMapping의 procedures 속성은 반드시 지정해야 하는 것은 아니므로 생략해도 된다.

컬렉션 타입의 객체 반환

배열, 리스트, 맵 타입의 객체 전송

컨트롤러 추가

	// p.364
	   @GetMapping("/getMap")
	   public Map<String, SampleVO> getMap(){
	      
	      Map<String, SampleVO> map = new HashMap<String, SampleVO>();
	           //  key              value
	      map.put("First", new SampleVO(1, "f", "l"));            
	      map.put("Second", new SampleVO(2, "f", "l"));
	      
	      return map;
	   }

	   
	// p.363
	   @GetMapping("/getList")
	   public List<SampleVO> getList(){
	      return IntStream
	            .range(1, 10)
	            .mapToObj(i -> new SampleVO(i, "first " + i, "last "+i))
	            .collect(Collectors.toList());
	   } //포폴 스프링 REST 방식으로 처리했다 써야함 (꼭 사용하기)

ResponseEntity 타입

Rest방식으로 호출하는 경우는 화면 자체가 아니라 데이터 자체를 전송하는 방식으로 처리되기 때문에 데이터를 요청한 쪽에서는 정상 데이터인지 비정상 데이터인지를 구분할 수 있는 확실한 방법을 제공해야 한다.

ResponseEntity는 데이터와 함께 HTTP 헤더의 상태메시지 등을 같이 전달하는 용도로 사용한다.

컨트롤러

	// p.365
	   @GetMapping(value = "/check", params = {"height", "weight"})
	   public ResponseEntity<SampleVO> check(Double height, Double weight){
	      SampleVO vo = new SampleVO(1, ""+height, ""+weight);
	      ResponseEntity<SampleVO> result = null;
	      
	      if (height < 150) {
	         result = ResponseEntity.status(HttpStatus.BAD_GATEWAY).body(vo);
	      } else {
	         result = ResponseEntity.status(HttpStatus.OK).body(vo);
	      }
	      return result;
	   }

@PathVariable

REST 방식에서는 URL 내에 최대한 많은 정보를 담으려고 노력한다. 예전에는 ? 뒤에 추가되는 쿼리 스트링 형태로 파라미터를 전달되던 데이터들이 REST 방식에서는 경로의 일부로 차용되는 경우가 많다.

스프링 MVC에서는 @PathVariable 어노테이션을 이용해 URL 상에 경로의 일부를 파라미터로 사용할 수 있다.

컨트롤러

	// p.366
	   //     /sample/product/bags/1234"
	   @GetMapping("/product/{cat}/{pid}")
	   public String[] getPath(@PathVariable("cat") String cat
	         , @PathVariable("pid") Integer pid) {
	      return new String[] { "category: " + cat, "productid: " + pid };
	   }

요청 URL

<a href="/sample/product/bags/1234">/sample/product/bags/1234</a>

@RequestBody

전달된 요청의 내용을 이용해 해당 파라미터의 타입으로 변환을 요구한다.

Ticket 클래스 추가

package org.zerock.domain;

import lombok.Data;

@Data
public class Ticket {

  private int tno;
  private String owner;
  private String grade;
}

컨트롤러

	// p.368
	   // 클라이언트에서 [json 데이터]를 파라미터로 ajax 요청
	   //    {"tno":1,"owner":"kenik","grade":"mvp"}   -->     Ticket 자바객체로 변환
	   //                   @RequestBody
	   @PostMapping("/ticket")
	   public Ticket convert(@RequestBody Ticket ticket) {
	      log.info("> convert..........ticket " + ticket);
	      return ticket;
	   }

jsp (뷰)

<!-- p.369 -->
<%
  Ticket ticket = new Ticket();
  ticket.setTno(1);
  ticket.setOwner("kenik");
  ticket.setGrade("mvp");
  
  //자바 객체Ticket 을 json 데이터로 변환하는 코딩
  String jsonTicket = new Gson().toJson(ticket);
%>
jsonTicket : <%= jsonTicket %><br>

다양한 전송방식

REST 방식의 데이터 교환에서 가장 특이한 점은 기존의 GET/POST 외에 다양한 방식으로 데이터를 전달한다는 점이다.

Create	POST
Read	GET
Update	PUT
Delete	DELETE

[days14] 페이징 처리 및 [검색 기능] 구현 (2/2)

다연 — Mon, 22 Feb 2021 21:22:49 +0900

앞의 페이징 처리에 이어서 검색 기능 추가 p325

게시물의 검색 기능은 다음과 같이 분류가 가능하다.

- 제목/내용/작성자와 같이 단일 항목 검색

- 제목,내용/제목,작성자 등 다중 항목 검색

** AND와 OR이 섞여있는 SQL을 작성할 때는 우선순위 연산자인 '()'를 이용해 OR 조건을 처리해야한다.

MyBatis의 동적 SQL

MyBatis는 동적 태그 기능을 통해서 SQL을 파라미터들의 조건에 맞게 조정할 수 있는 기능을 제공한다.

MyBatis의 동적 태그는 약간의 구문을 이용해 전달되는 파라미터를 가공해서 경우에 따라 다른 SQL을 만들어 실행할 수 있다.

- MyBatis의 동적 태그들

if / choose(when, otherwise) / trim(where, set) / foreach

if - 검색 조건이 'T'이면 title이 keyword인 항목 검색

( title like '%' || #{keyword} || '%' )

</if>

</if>

<choose> - 여러 상황들 중 하나의 상황에만 동작 (if~else 처럼)

(title like '%' || #{keyword} || '%' )

</when>

</when>

(title like '%' || #{keyword} || '%' OR content like '%' || #{keyword} || '%')

</otherwise>

</choose>

<trim> <where> <set> - 단독으로 사용되지 않고 <if>, <choose>와 같은 태그들을 내포하여 SQL들을 연결,

앞 뒤에 필요한 구문들 (AND, OR, WHERE 등)을 추가하거나 생략하는 역할

<where>의 경우 태그 안쪽에서 SQL이 생성될 때는 WHERE 구문이 붙고, 그렇지 않은 경우 생성되지 않는다.

select * from tbl_board

<where>

bno = #{bno}

</if>

</where>

- bno 값이 존재하는 경우 : select * from tbl_board where bno=33

- bno 값이 존재하지 않는 경우 : select * from tbl_board

<trim>은 하위에서 만들어지는 SQL문을 조사하여 앞 쪽에 추가적인 SQL을 넣을 수 있다.

prefix, suffix, prefixOverrides, suffixOverrides 속성을 지정 가능하다.

select * from tbl_board

<where>

bno = #{bno}

</if>

rownum = 1

</trim>

</where>

- bno 값이 존재하는 경우 : select * from tbl_board where bno = 33 and rownum = 1

- bno 값이 존재하지 않는 경우 : select * from tbl_board where rownum=1

<foreach>는 List, 배열, 맵 등을 이용해 루프를 처리할 수 있다. 주로 IN 조건에서 많이 사용하지만, 경우에 따라서는 복잡한 WHERE 조건을 만들 때에도 사용할 수 있다.

foreach를 배열이나 List를 이용하는 경우에는 item 속성만을 이용하면 되고, Map의 형태로 key와 value를 이용해야 할 때에는 index와 item속성을 둘 다 이용한다.

19.

검색 조건 처리를 위한 Criteria의 변화
-> 필드 type(조건)과 keyword(검색어) 추가, 메소드 생성 2개

package org.zerock.domain;

import org.springframework.web.util.UriComponentsBuilder;

import lombok.Getter;
import lombok.Setter;
import lombok.ToString;


@ToString
@Setter
@Getter
public class Criteria {

  private int pageNum;
  private int amount;
  
  private String type;
  private String keyword;

  public Criteria() {
    this(1, 10);
  }

  public Criteria(int pageNum, int amount) {
    this.pageNum = pageNum;
    this.amount = amount;
  }
  
  public String[] getTypeArr() {
    return type == null? new String[] {}: type.split("");
    //TC 이면 T하나 C하나 잘라 배열로 만듦
  }
  
  // p 349
  // 가장 편리한 점 한글 처리에 신경쓰지 않아도 된다.
  // 쿼리스트링(queryString)
  // UriComponentsBuilder 클래스 라이브러리 사용해서 자동으로
  // ?pageNum=2&amount=10&keyword=kenik&type=W  이렇게 뒤에 붙는다. (jsp에서 지저분하게 안해도 됨)   
  public String getListLink() {
     String path = "";
     UriComponentsBuilder builder  = 
           UriComponentsBuilder.fromPath(path)
           .queryParam("pageNum", this.pageNum)
           .queryParam("amount", this.amount)
           .queryParam("type", this.getType())
           .queryParam("keyword", this.keyword) 
           ;      
     return builder.toUriString();
  }

}

20.

list.jsp

검색을 위한 태그

   <form id='searchForm' action="/board/list" method='get'>
      <select name='type'>
         <option value=""
            <c:out value="${pageMaker.cri.type == null?'selected':''}"/>>--</option>
         <option value="T"
            <c:out value="${pageMaker.cri.type eq 'T'?'selected':''}"/>>제목</option>
         <option value="C"
            <c:out value="${pageMaker.cri.type eq 'C'?'selected':''}"/>>내용</option>
         <option value="W"
            <c:out value="${pageMaker.cri.type eq 'W'?'selected':''}"/>>작성자</option>
         <option value="TC"
            <c:out value="${pageMaker.cri.type eq 'TC'?'selected':''}"/>>제목
            or 내용</option>
         <option value="TW"
            <c:out value="${pageMaker.cri.type eq 'TW'?'selected':''}"/>>제목
            or 작성자</option>
         <option value="TWC"
            <c:out value="${pageMaker.cri.type eq 'TWC'?'selected':''}"/>>제목
            or 내용 or 작성자</option>
      </select> 
      <input  type='text' name='keyword' value='<c:out value="${pageMaker.cri.keyword}"/>' /> 
      <input  type='hidden' name='pageNum' value='<c:out value="${pageMaker.cri.pageNum}"/>' /> 
      <input  type='hidden' name='amount' value='<c:out value="${pageMaker.cri.amount}"/>' />
      <button class='btn btn-default'>Search</button>
   </form>

검색을 위한 스크립트

<script>
//p342 검색을 위한
var searchForm = $("#searchForm");

$("#searchForm button").on( "click", function(e) {

			if (!searchForm.find("option:selected").val()) {
				alert("검색종류를 선택하세요");
				return false;
			}
			if (!searchForm.find( "input[name='keyword']").val()) {
				alert("키워드를 입력하세요");
				return false;
			}
			
			searchForm.find("input[name='pageNum']").val("1");
			e.preventDefault();
			
			searchForm.submit();
		});
</script>

21.

총 레코드 수 가져올때도 검색된 것의 총 레코드 수를 가져와야 페이징 처리 가능
=> 반복적으로 써지기 때문에

BoardMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="org.zerock.mapper.BoardMapper">


	<sql id="criteria">
		<trim prefix="(" suffix=") AND " prefixOverrides="OR">
			<foreach item='type' collection="typeArr">
				<trim prefix="OR">
					<choose>
						<when test="type == 'T'.toString()">
							title like '%'||#{keyword}||'%'
						</when>
						<when test="type == 'C'.toString()">
							content like '%'||#{keyword}||'%'
						</when>
						<when test="type == 'W'.toString()">
							writer like '%'||#{keyword}||'%'
						</when>
					</choose>
				</trim>
			</foreach>
		</trim>
	</sql>


	<select id="getList" resultType="org.zerock.domain.BoardVO">
	<![CDATA[
		select * from tbl_board where bno > 0 
		]]>
	</select>

	<insert id="insert">
		insert into tbl_board (bno,title,content,writer)
		values (seq_board.nextval, #{title}, #{content}, #{writer})
	</insert>

	<insert id="insertSelectKey">

		<selectKey keyProperty="bno" order="BEFORE"
			resultType="long">
			select seq_board.nextval from dual
		</selectKey>

		insert into tbl_board (bno,title,content, writer)
		values (#{bno},
		#{title}, #{content}, #{writer})
	</insert>

	<select id="read" resultType="org.zerock.domain.BoardVO">
		select * from tbl_board where bno =
		#{bno}
	</select>


	<delete id="delete">
		delete tbl_board where bno = #{bno}
	</delete>

	<update id="update">
		update tbl_board
		set title= #{title},
		content=#{content},
		writer = #{writer},
		updateDate = sysdate
		where bno =
		#{bno}
	</update>

	<!-- <select id="getListWithPaging" resultType="org.zerock.domain.BoardVO"> 
		<![CDATA[ select bno, title, content, writer, regdate, updatedate from ( 
		select /*+INDEX_DESC(tbl_board pk_board) */ rownum rn, bno, title, content, 
		writer, regdate, updatedate from tbl_board where rownum <= #{pageNum} * #{amount} 
		) where rn > (#{pageNum} -1) * #{amount} ]]> </select> -->


	<select id="getListWithPaging"
		resultType="org.zerock.domain.BoardVO">
  <![CDATA[
  select 
    bno, title, content, writer, regdate, updatedate
  from 
      (
      select /*+INDEX_DESC(tbl_board pk_board) */
        rownum rn, bno, title, content, writer, regdate, updatedate 
      from 
        tbl_board
      where 
  ]]>
		<include refid="criteria"></include>
      
  <![CDATA[    
      rownum <= #{pageNum} * #{amount}
      )
  where rn > (#{pageNum} -1) * #{amount}   
  ]]>
	</select>




	<select id="getTotalCount" resultType="int">
		select count(*) from tbl_board where 
		
		<include refid="criteria"></include> 
		
		bno > 0
		
	</select>

</mapper>

22.

페이징 토탈 카운트할때도 위 trim 코딩이 필요하니 이 코딩을 sql이라는 태그로 하나 빼자
=> 중복해서 사용되는 동적SQL 쿼리 부분을 sql 태그 사용해서 하나 뺌
<sql id="criteria"></sql>
필요한 곳에 <include refid="criteria"></include>

23.

test하기

24.

25.

검색 버튼의 이벤트 처리 - list.jsp

    <form id='actionForm' action="/board/list" method='get'> 
      <input type='hidden' name='pageNum' value='<c:out value="${pageMaker.cri.pageNum}"/>' /> 
      <input type='hidden' name='amount' value='<c:out value="${pageMaker.cri.amount}"/>' />
    	<input type='hidden' name='type' value='<c:out value="${ pageMaker.cri.type }"/>'> 
    	<input type='hidden' name='keyword' value='<c:out value="${ pageMaker.cri.keyword }"/>'>
    </form>

26.

조회 페이지에서 검색 추가 -

get.jsp operForm에

<input type='hidden' name='keyword' value='<c:out value="${cri.keyword}"/>'>
<input type='hidden' name='type' value='<c:out value="${cri.type}"/>'>

modify.jsp

<input type='hidden' name='type' value='<c:out value="${cri.type }"/>'>
<input type='hidden' name='keyword' value='<c:out value="${cri.keyword }"/>'>

27.

컨트롤러 1) modify에 추가, 2) remove 수정

	 	   @PostMapping("/modify")
			public String modify(BoardVO board, @ModelAttribute("cri") Criteria cri, RedirectAttributes rttr) {
				log.info("modify:" + board);
	
				if (service.modify(board)) {
					rttr.addFlashAttribute("result", "success");
				}
	
				rttr.addAttribute("pageNum", cri.getPageNum());
				rttr.addAttribute("amount", cri.getAmount());
				
				rttr.addAttribute("type", cri.getType()); //얘네 두개 추가
				rttr.addAttribute("keyword", cri.getKeyword()); //얘네 두개 추가
	
				return "redirect:/board/list";
			}   
				// p.220
	   /*
	   @PostMapping("/remove")
	   public String remove(@RequestParam("bno") Long bno, RedirectAttributes rttr)
	   {

	      log.info("remove..." + bno);
	      if (service.remove(bno)) {
	         rttr.addFlashAttribute("result", "success");
	      }
	      
	      return "redirect:/board/list";
	   }
	   */
	   @PostMapping("/remove")
		public String remove(@RequestParam("bno") Long bno, Criteria cri, RedirectAttributes rttr) {

			log.info("remove..." + bno);
			if (service.remove(bno)) {
				rttr.addFlashAttribute("result", "success");
			}
			rttr.addAttribute("pageNum", cri.getPageNum());
			rttr.addAttribute("amount", cri.getAmount());
			rttr.addAttribute("type", cri.getType());
			rttr.addAttribute("keyword", cri.getKeyword());

			return "redirect:/board/list";
		}

28.

modify.jsp 가서 주석 풀기

            var keywordTag = $("input[name='keyword']").clone();
            var typeTag = $("input[name='type']").clone();    
            
            formObj.append(keywordTag);
            formObj.append(typeTag);

[days14] [페이징 처리] 및 검색 기능 구현 (1/2)

다연 — Mon, 22 Feb 2021 19:15:21 +0900

ex02_02

1. 페이징 처리

페이징 처리에 필요한 파라미터

1) 현재 페이지 번호 2)한 페이지당 몇개의 데이터를 보여줄 것인지

=> 위 데이터들을 하나의 객체로 묶어서 클래스를 만들자 (확장성을 위해)

org.zerock.domain.Criteria 클래스 추가

package org.zerock.domain;

import org.springframework.web.util.UriComponentsBuilder;

import lombok.Getter;
import lombok.Setter;
import lombok.ToString;


@ToString
@Setter
@Getter
public class Criteria {

  private int pageNum;
  private int amount;
  
 // private String type;
 // private String keyword;

  public Criteria() {
    this(1, 10);
  }

  public Criteria(int pageNum, int amount) {
    this.pageNum = pageNum;
    this.amount = amount;
  }
  /*
  public String[] getTypeArr() {
    return type == null? new String[] {}: type.split("");
    //TC 이면 T하나 C하나 잘라 배열로 만듦
  }
  */
  /*
  // p 349
  // 가장 편리한 점 한글 처리에 신경쓰지 않아도 된다.
  // 쿼리스트링(queryString)
  // UriComponentsBuilder 클래스 라이브러리 사용해서 자동으로
  // ?pageNum=2&amount=10&keyword=kenik&type=W  이렇게 뒤에 붙는다. (jsp에서 지저분하게 안해도 됨)   
  public String getListLink() {
     String path = "";
     UriComponentsBuilder builder  = 
           UriComponentsBuilder.fromPath(path)
           .queryParam("pageNum", this.pageNum)
           .queryParam("amount", this.amount)
           .queryParam("type", this.getType())
           .queryParam("keyword", this.keyword) 
           ;      
     return builder.toUriString();
  }
*/
  
  
}

주석부분들은 이따 검색하기 위한 부분들이니 일단 신경쓰지 말고

pageNum(페이지 수)와 amount(현재 페이지에 뿌릴 게시글 수) 필드와 생성자들을 만들었다.

위 클래스는 MyBatis에서도 사용됨을 기억하자(중요)

interface BoardMapper에 Criteria 타입을 파라미터로 사용하는 메소드 작성

BoardMapper.xml에 코딩 추가 (페이징을 위한 쿼리)

<select id="getListWithPaging" resultType="org.zerock.domain.BoardVO"> 
		<![CDATA[ 
          select 
            bno, title, content, writer, regdate, updatedate 
          from ( 
		    select /*+INDEX_DESC(tbl_board pk_board) */ 
              rownum rn, bno, title, content, writer, regdate, updatedate 
            from 
              tbl_board 
            where 
              rownum <= #{pageNum} * #{amount} 
		  ) 
          where 
            rn > (#{pageNum} -1) * #{amount} 
        ]]> 
</select>

단위 테스트 작업

//페이징 테스트
@Test
public void testPaging() {

	Criteria cri = new Criteria();
		
	//10개씩 3페이지 
	cri.setPageNum(2);
	cri.setAmount(3);

	List<BoardVO> list = mapper.getListWithPaging(cri);
	list.forEach(board -> log.info(board));
    
}

BoardService 인터페이스 수정

public List<BoardVO> getList(); ---> public List<BoardVO> getList(Criteria cri);

BoardController 수정

/*
	@GetMapping("/list")
	public void list(Model model) {

		log.info("list");
		model.addAttribute("list", service.getList()); 

	}
*/
	
	@GetMapping("/list")
	 public void list(Criteria cri, Model model) {
	
	 log.info("list: " + cri);
	 model.addAttribute("list", service.getList(cri));
	
	}

7. 페이징 화면 처리

home.jsp

<a href="/board/list?pageNum=2&amount=3">/board/list?pageNum=2&amount=3</a> 	
<br>

브라우저 주소창에 숫자를 입력해 확인할 수 있다.

페이징 블록 만들기

- jsp 페이지 번호 출력
- 각 페이지 번호에 클릭 이벤트 처리
- 전체 데이터 개수를 반영해 페이지 번호 조절
- 하나의 게시글 클릭 후 다시 이전 페이지로 돌아가기

페이징 처리할 때 필요한 정보들
- 현재 페이지 번호
- 이전, 다음 버튼의 표시 여부
- 화면에서 보여지는 페이지의 시작 번호와 끝 번호

페이지 블록을 위해 PageDTO를 생성하자

package org.zerock.domain;

import lombok.Getter;
import lombok.ToString;
//p306
// 페이지 블럭 	< 1 [2] 3 4 ... 10 > 	을 만들기 위한 클래스 
@Getter
@ToString
public class PageDTO {

  private int startPage;
  private int endPage;
  private boolean prev, next;

  private int total;
  private Criteria cri;

  public PageDTO(Criteria cri, int total) {

    this.cri = cri;
    this.total = total;

    this.endPage = (int) (Math.ceil(cri.getPageNum() / 10.0)) * 10;

    this.startPage = this.endPage - 1;

    int realEnd = (int) (Math.ceil((total * 1.0) / cri.getAmount()));

    if (realEnd <= this.endPage) {
      this.endPage = realEnd;
    }

    this.prev = this.startPage > 1;

    this.next = this.endPage < realEnd;
  }
  
}

10.

BoardMapper 인터페이스에 아래 메소드 추가

public int getTotalCount(Criteria cri); // 총 게시글 수를 가져옴

11.

board.xml 추가

<!-- p 339 -->
<select id="getTotalCount" resultType="int">
	 select count(*) 
	from tbl_board 
	<!--  검색을 위한 것이니 일단 주석
	 where
	<include refid="criteria"></include>
	bno > 0 
	-->
</select>

12.

BoardService 추가

public int getTotal(Criteria cri);

BoardServiceImpe 추가

    @Override
   public int getTotal(Criteria cri) {

      log.info("get total count");
      return mapper.getTotalCount(cri);
   }

13.

BoardController 수정 - 아까 list 불러오던 메소드 재수정

	/*
	@GetMapping("/list")
	public void list(Model model) {

		log.info("list");
		model.addAttribute("list", service.getList()); 
	}
	*/
	/*
	@GetMapping("/list")
	 public void list(Criteria cri, Model model) {
	
	 log.info("list: " + cri);
	 model.addAttribute("list", service.getList(cri));
	
	}
	*/
	// p 307
	   @GetMapping("/list")
	   public void list(Criteria cri, Model model) {

	      log.info("list: " + cri);
	      
	      model.addAttribute("list", service.getList(cri));
	      //model.addAttribute("pageMaker", new PageDTO(cri, 11)); //  총게시글수 11으로 고정

	      int total = service.getTotal(cri);
	      log.info("total: " + total);
	      model.addAttribute("pageMaker", new PageDTO(cri, total));
	   }

14.

jsp파일에서 페이지 번호 부분 코딩

- 페이지 번호 이벤트 처리 - jsp에서 페이지 이동 태그에서 처리하면 관리(유지보수)어려우니
form hidden태그 만들고 js로
(요지: 코딩을 직접 페이지 태그에 줄줄이 넣지 않고 js로 만들어 넘기겠다 )

list.jsp

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

   <br>
   <a href="/board/register">register</a>
   <br>
   <br>
   
   <table class="table table-striped table-bordered table-hover">
      <thead>
         <tr>
            <th>#번호</th>
            <th>제목</th>
            <th>작성자</th>
            <th>작성일</th>
            <th>수정일</th>
         </tr>
      </thead>

      <c:forEach items="${list}" var="board">
         <tr>
            <td><c:out value="${board.bno}" /></td>
            <%-- p 314 1번 페이지가 뿌려질 것
            <td>
               <a href='/board/get?bno=<c:out value="${board.bno}"/>'>
                  <c:out value="${board.title}"/>
               </a>
            </td>
            --%>
            <td><!-- 위 코딩 대신 얘로, js로 처리 - 가독성, 유지보수  -->
              <a class='move' href='<c:out value="${board.bno}"/>'>
               <c:out value="${board.title}" />
              </a>
            </td> 

            <td><c:out value="${board.writer}" /></td>
            <td><fmt:formatDate pattern="yyyy-MM-dd"
                  value="${board.regdate}" /></td>
            <td><fmt:formatDate pattern="yyyy-MM-dd"
                  value="${board.updateDate}" /></td>
         </tr>
      </c:forEach>
   </table>
   
   <br>
   
 
   <form id='searchForm' action="/board/list" method='get'>
      <select name='type'>
         <option value=""
            <c:out value="${pageMaker.cri.type == null?'selected':''}"/>>--</option>
         <option value="T"
            <c:out value="${pageMaker.cri.type eq 'T'?'selected':''}"/>>제목</option>
         <option value="C"
            <c:out value="${pageMaker.cri.type eq 'C'?'selected':''}"/>>내용</option>
         <option value="W"
            <c:out value="${pageMaker.cri.type eq 'W'?'selected':''}"/>>작성자</option>
         <option value="TC"
            <c:out value="${pageMaker.cri.type eq 'TC'?'selected':''}"/>>제목
            or 내용</option>
         <option value="TW"
            <c:out value="${pageMaker.cri.type eq 'TW'?'selected':''}"/>>제목
            or 작성자</option>
         <option value="TWC"
            <c:out value="${pageMaker.cri.type eq 'TWC'?'selected':''}"/>>제목
            or 내용 or 작성자</option>
      </select> 
      <input  type='text' name='keyword' value='<c:out value="${pageMaker.cri.keyword}"/>' /> 
      <input  type='hidden' name='pageNum' value='<c:out value="${pageMaker.cri.pageNum}"/>' /> 
      <input  type='hidden' name='amount' value='<c:out value="${pageMaker.cri.amount}"/>' />
      <button class='btn btn-default'>Search</button>
   </form>
    
    
    <!-- p 311 -->
    <form id='actionForm' action="/board/list" method='get'> 
      <input type='hidden' name='pageNum' value='<c:out value="${pageMaker.cri.pageNum}"/>' /> 
      <input type='hidden' name='amount' value='<c:out value="${pageMaker.cri.amount}"/>' />
    	<input type='hidden' name='type' value='<c:out value="${ pageMaker.cri.type }"/>'> 
    	<input type='hidden' name='keyword' value='<c:out value="${ pageMaker.cri.keyword }"/>'>
    </form>
    
   <!-- p 308 -->
   <div class='pull-right'>
               <ul class="pagination">

                  <%--             <c:if test="${pageMaker.prev}">
              <li class="paginate_button previous"><a href="#">Previous</a>
              </li>
            </c:if>

            <c:forEach var="num" begin="${pageMaker.startPage}"
              end="${pageMaker.endPage}">
              <li class="paginate_button"><a href="#">${num}</a></li>
            </c:forEach>

            <c:if test="${pageMaker.next}">
              <li class="paginate_button next"><a href="#">Next</a></li>
            </c:if> --%>

                  <c:if test="${pageMaker.prev}">
                     <li class="paginate_button previous"><a
                        href="${pageMaker.startPage -1}">Previous</a></li>
                  </c:if>

                  <c:forEach var="num" begin="${pageMaker.startPage}"
                     end="${pageMaker.endPage}">
                     <li class="paginate_button  ${pageMaker.cri.pageNum == num ? "active":""} ">
                        <a href="${num}">${num}</a>
                     </li>
                  </c:forEach>

                  <c:if test="${pageMaker.next}">
                     <li class="paginate_button next"><a
                        href="${pageMaker.endPage +1 }">Next</a></li>
                  </c:if>

               </ul>
            </div>
            <!--  end Pagination -->
         </div>
         
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
   $(document).ready(function(){
      var result = '<c:out value="${result}"/>';
      
      checkModal(result);
      
      // p.257
      history.replaceState({}, null, null);
      
      function checkModal(result){
         if(result === '' || history.state) return;
         if( parseInt(result)>0 ) alert("게시글 " + parseInt(result) +" 번이 등록되었습니다. "); 
      } 
   });
</script>

<script>
  // p 312  버튼 클릭 이벤트
  var actionForm = $("#actionForm");
  $(".paginate_button a").on("click", function (e){
     e.preventDefault();
     console.log("click");
     actionForm.find("input[name='pageNum']").val($(this).attr("href")); //$(this).attr("href") == 3페이지
     actionForm.submit();
  });
</script>

<script>
  // p 314 
  $(".move").on("click", function (e){
     e.preventDefault();
     console.log("click"); 
     /* actionForm은 현재 페이지 번호와 amout가지고 있는 폼 */
     actionForm.append("<input type='hidden' name='bno' value='"+$(this).attr("href")+"'>");
     actionForm.attr("action", "/board/get");
     actionForm.submit();
  });

</script>

<script>
//p342 검색을 위한
var searchForm = $("#searchForm");

$("#searchForm button").on( "click", function(e) {

			if (!searchForm.find("option:selected").val()) {
				alert("검색종류를 선택하세요");
				return false;
			}
			if (!searchForm.find( "input[name='keyword']").val()) {
				alert("키워드를 입력하세요");
				return false;
			}
			
			searchForm.find("input[name='pageNum']").val("1");
			e.preventDefault();
			
			searchForm.submit();
		});
</script>
</body>
</html>

위 코딩에서 주요 부분은

1. 페이지 버튼 태그

<!-- p 308 -->
<div class='pull-right'>
  <ul class="pagination">
    <c:if test="${pageMaker.prev}">
      <li class="paginate_button previous">
       <a href="${pageMaker.startPage -1}">Previous</a>
      </li>
    </c:if>

    <c:forEach var="num" begin="${pageMaker.startPage}" end="${pageMaker.endPage}">
      <li class="paginate_button  ${pageMaker.cri.pageNum == num ? "active":""} ">
        <a href="${num}">${num}</a>
      </li>
    </c:forEach>

    <c:if test="${pageMaker.next}">
      <li class="paginate_button next">
        <a  href="${pageMaker.endPage +1 }">Next</a>
      </li>
    </c:if>

  </ul>
</div>
<!--  end Pagination -->

번호의 출력 부분은 <c:out>을 이용해 출력하는 것이 좋지만 예제에서는 가독성의 문제로 일반 EL 이용

2. hidden을 모아 넘길 action 폼

<!-- p 311 -->
<form id='actionForm' action="/board/list" method='get'> 
   <input type='hidden' name='pageNum' value='<c:out value="${pageMaker.cri.pageNum}"/>' /> 
   <input type='hidden' name='amount' value='<c:out value="${pageMaker.cri.amount}"/>' />
   <!-- 검색을 위한
     <input type='hidden' name='type' value='<c:out value="${ pageMaker.cri.type }"/>'> 
     <input type='hidden' name='keyword' value='<c:out value="${ pageMaker.cri.keyword }"/>'>
    -->
 </form>

3. 페이지 버튼 클릭 이벤트 jQuery

<script>
  // p 312  버튼 클릭 이벤트
  var actionForm = $("#actionForm");
  $(".paginate_button a").on("click", function (e){
     e.preventDefault();
     console.log("click");
     actionForm.find("input[name='pageNum']").val($(this).attr("href")); //$(this).attr("href") == x페이지
     actionForm.submit();
  });
</script>

4. 게시글 세부보기 클릭 jQuery

<script>
  // p 314 
  $(".move").on("click", function (e){
     e.preventDefault();
     console.log("click"); 
     /* actionForm은 현재 페이지 번호와 amout가지고 있는 폼 */
     actionForm.append("<input type='hidden' name='bno' value='"+$(this).attr("href")+"'>");
     actionForm.attr("action", "/board/get");
     actionForm.submit();
  });
</script>

어쨌든 게시글 세부보기로 가나 다른 페이지로 이동을 하나 action 폼이 submit된다.

15.

조회 또는 수정 페이지에서 List로 돌아가기 (1페이지가 아니라 보고있던 해당 페이지로 이동해야함)
돌아갈 페이지 번호와 수량을 알고 있어야 돌아갈 수 있다. (넘겨주는 작업)
controller 수정

/*
@GetMapping({ "/get", "/modify" })
public void get(@RequestParam("bno") Long bno, Model model) {

	log.info("/get or modify ");
	model.addAttribute("board", service.get(bno)); 
}
*/
@GetMapping({ "/get", "/modify" })
public void get(@RequestParam("bno") Long bno, @ModelAttribute("cri") Criteria cri, Model model) {
					//@ModelAttribute ? 
					//모델에 담아 넘기겠다? 커맨드 객체는 안 담아도 넘어갔잖아 ? 
					//일단은 ...
	log.info("/get or modify");
	model.addAttribute("board", service.get(bno));
}

16.

세부보기 jsp 수정

get.jsp - list버튼 누를때 페이지번호 , amout가지고 요청하도록

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
  
  <div class="panel panel-default">
   <h3>Board Read - p.251</h3>
   
         <!-- /.panel-heading -->
       <div class="panel-body">

          <div class="form-group">
          <label>Bno</label> <input class="form-control" name='bno'
            value='<c:out value="${board.bno }"/>' readonly="readonly">
        </div>

        <div class="form-group">
          <label>Title</label> <input class="form-control" name='title'
            value='<c:out value="${board.title }"/>' readonly="readonly">
        </div>

        <div class="form-group">
          <label>Text area</label>
          <textarea class="form-control" rows="3" name='content'
            readonly="readonly"><c:out value="${board.content}" /></textarea>
        </div>

        <div class="form-group">
          <label>Writer</label> <input class="form-control" name='writer'
            value='<c:out value="${board.writer }"/>' readonly="readonly">
        </div>
<%-- 
        <button data-oper='modify' class="btn btn-default">
        <a href="/board/modify?bno=<c:out value="${board.bno}"/>">Modify</a></button>
        <button data-oper='list' class="btn btn-info">
        <a href="/board/list">List</a></button>  
 --%>
 
 <!-- data-oper  -->
 <!-- data-xxx='데이터'    :   어떤 데이터를 태그에 저장하고자 할 때  -->
   <button data-oper='modify' class="btn btn-default">Modify</button>
   <button data-oper='list' class="btn btn-info">List</button>
    

<%-- <form id='operForm' action="/boad/modify" method="get">
  <input type='hidden' id='bno' name='bno' value='<c:out value="${board.bno}"/>'>
</form> --%>


    <!-- p 317 -->
   <form id='operForm' action="/boad/modify" method="get">
     <input type='hidden' id='bno' name='bno' value='<c:out value="${board.bno}"/>'>
     <input type='hidden' name='pageNum' value='<c:out value="${cri.pageNum}"/>'>
     <input type='hidden' name='amount' value='<c:out value="${cri.amount}"/>'>
     <!-- 검색된 결과의 조회페이지 -->
     <input type='hidden' name='keyword' value='<c:out value="${cri.keyword}"/>'>
     <input type='hidden' name='type' value='<c:out value="${cri.type}"/>'>
      
   </form> 

   </div>

    </div>
<!-- p 265 --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function (){
     var operForm = $("#operForm");
     
     // 수정
     $("button[data-oper='modify']").on("click", function (e){
        operForm.attr("action","/board/modify").submit();
     });
     //jQuery ${modify} ??
     
     //리스트 돌아가기
     //http://localhost/board/get?[pageNum=1&amount=10&bno=23] 
     $("button[data-oper='list']").on("click", function (e){
        operForm.find("#bno").remove();
        operForm.attr("action","/board/list").submit();
     });
  });
</script>

</body>
</html>

위 코딩에서 주요 부분은

<!-- p 317 -->
<form id='operForm' action="/boad/modify" method="get">
     <input type='hidden' id='bno' name='bno' value='<c:out value="${board.bno}"/>'>
     <input type='hidden' name='pageNum' value='<c:out value="${cri.pageNum}"/>'>
     <input type='hidden' name='amount' value='<c:out value="${cri.amount}"/>'>
     <!-- 검색된 결과의 조회페이지 -->
     <!--
     <input type='hidden' name='keyword' value='<c:out value="${cri.keyword}"/>'>
     <input type='hidden' name='type' value='<c:out value="${cri.type}"/>'>
     -->
</form>

2. operForm을 submit - 1. 수정하러 갈 때 2. 돌아갈때

<script>
  $(document).ready(function (){
     var operForm = $("#operForm");
     
     // 수정
     $("button[data-oper='modify']").on("click", function (e){
        operForm.attr("action","/board/modify").submit();
     });
     //jQuery ${modify} ??
     
     //리스트 돌아가기
     //http://localhost/board/get?[pageNum=1&amount=10&bno=23] 
     $("button[data-oper='list']").on("click", function (e){
        operForm.find("#bno").remove();
        operForm.attr("action","/board/list").submit();
     });
  });
</script>

* data-xxx='데이터' : 어떤 데이터를 태그에 저장하고자 할 때

17.

게시글을 수정하는 jsp도 수정

modify.jsp

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

   <h3>Board Modify - p.259</h3>

   <div class="panel-body">

      <form role="form" action="/board/modify" method="post">
      
        <input type='hidden' name='pageNum' value='<c:out value="${cri.pageNum }"/>'>
        <input type='hidden' name='amount' value='<c:out value="${cri.amount }"/>'>
        
       <input type='hidden' name='type' value='<c:out value="${cri.type }"/>'>
      <input type='hidden' name='keyword' value='<c:out value="${cri.keyword }"/>'>
       
 
      <div class="form-group">
        <label>Bno</label> 
        <input class="form-control" name='bno' 
           value='<c:out value="${board.bno }"/>' readonly="readonly">
      </div>
      
      <div class="form-group">
        <label>Title</label> 
        <input class="form-control" name='title' 
          value='<c:out value="${board.title }"/>' >
      </div>
      
      <div class="form-group">
        <label>Text area</label>
        <textarea class="form-control" rows="3" name='content' ><c:out value="${board.content}"/></textarea>
      </div>
      
      <div class="form-group">
        <label>Writer</label> 
        <input class="form-control" name='writer'
          value='<c:out value="${board.writer}"/>' readonly="readonly">            
      </div>
      
      <div class="form-group">
        <label>RegDate</label> 
        <input class="form-control" name='regDate'
          value='<fmt:formatDate pattern = "yyyy/MM/dd" value = "${board.regdate}" />'  readonly="readonly">            
      </div>
      
      <div class="form-group">
        <label>Update Date</label> 
        <input class="form-control" name='updateDate'
          value='<fmt:formatDate pattern = "yyyy/MM/dd" value = "${board.updateDate}" />'  readonly="readonly">            
      </div>
   
             
   
     <button type="submit" data-oper='modify' class="btn btn-default">Modify</button>
     <button type="submit" data-oper='remove' class="btn btn-danger">Remove</button>
     <button type="submit" data-oper='list' class="btn btn-info">List</button>
     
   </form>


   </div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
   $(document).ready(function(){
       var formObj = $("form");

        $('button').on("click", function(e){
          
          e.preventDefault(); 
          
          var operation = $(this).data("oper");
          
          console.log(operation);
          
          if(operation === 'remove'){
            formObj.attr("action", "/board/remove");
            
          }else if(operation === 'list'){
            //move to list
            formObj.attr("action", "/board/list").attr("method","get");
            
            var pageNumTag = $("input[name='pageNum']").clone();
            var amountTag = $("input[name='amount']").clone();
            var keywordTag = $("input[name='keyword']").clone();
            var typeTag = $("input[name='type']").clone();      
            
            formObj.empty();
            
            formObj.append(pageNumTag);
            formObj.append(amountTag);
            formObj.append(keywordTag);
            formObj.append(typeTag);          
          }
          
          formObj.submit();
        });
   });
</script>
</body>
</html>

위 코딩에서 주요 부분

1. hidden으로 페이지 정보(와 검색 정보) 담기

<input type='hidden' name='pageNum' value='<c:out value="${cri.pageNum }"/>'>
<input type='hidden' name='amount' value='<c:out value="${cri.amount }"/>'>
        
<input type='hidden' name='type' value='<c:out value="${cri.type }"/>'>
<input type='hidden' name='keyword' value='<c:out value="${cri.keyword }"/>'>

2. script

<script>
   $(document).ready(function(){
       var formObj = $("form");

        $('button').on("click", function(e){
          
          e.preventDefault(); 
          
          var operation = $(this).data("oper");
          
          console.log(operation);
          
          if(operation === 'remove'){
            formObj.attr("action", "/board/remove");
            
          }else if(operation === 'list'){
            //move to list
            formObj.attr("action", "/board/list").attr("method","get");
            
            var pageNumTag = $("input[name='pageNum']").clone(); //clone()은 복제
            var amountTag = $("input[name='amount']").clone();
            var keywordTag = $("input[name='keyword']").clone();
            var typeTag = $("input[name='type']").clone();      
            
            formObj.empty();
            
            formObj.append(pageNumTag);
            formObj.append(amountTag);
            formObj.append(keywordTag);
            formObj.append(typeTag);          
          }
          
          formObj.submit();
        });
   });
</script>

컨트롤러 수정

/*
@PostMapping("/modify")
public String modify(BoardVO board, RedirectAttributes rttr) {
	log.info("modify:" + board);
	
	if (service.modify(board)) {
		rttr.addFlashAttribute("result", "success");
	}
	return "redirect:/board/list";
}
*/

@PostMapping("/modify")
public String modify(BoardVO board, @ModelAttribute("cri") Criteria cri, RedirectAttributes rttr) {
	log.info("modify:" + board);
		
	if (service.modify(board)) {
		rttr.addFlashAttribute("result", "success");
	}
		
	rttr.addAttribute("pageNum", cri.getPageNum());
	rttr.addAttribute("amount", cri.getAmount());
	//rttr.addAttribute("type", cri.getType());
	//rttr.addAttribute("keyword", cri.getKeyword());
		
	return "redirect:/board/list";
}