(국비교육) 49 - project1 이어하기16 ( 댓글 글자수 세기 + 스프링부트로 만들기)

■ 댓글쓰기 몇 글자 썼는지 확인하는 코드

 

 

keyup : 키를 놓을 때 이벤트가 발생합니다. 

입력창의 값의 길이를 텍스트에 저장한다.

그리고 이것을 버튼 창에다가 출력한다. 

 

키 600자 이상 입력 시 막는 것도 가능하다.

버튼 분리도 도전해도 된다.  

 

https://developer.mozilla.org/ko/docs/Web/API/Element/keyup_event

Document: keyup event - Web API | MDN

 

 

100글자 초과도 막을 수 있다.

 

 

 

입력된 값의 값을 가져올 때 input 이나 textarea 는 val() 을 사용해서 값을 가져온다. 

가져온 값의 0부터 100까지 길이를 가져오고 그것을 나타낸다. 

 

그 길이 또한 100까지 설정될 수 있도록 글쓰기 버튼도 조정해준다.

 

 

변수 내용을 다시 간단하게 바꿔 좀 더 활용할 수 있도록 바꿀 수 있다. 

 

■ 댓글창 수정하기 만들기

 

 

class 를 눌렀을때 효과를 주기 위해 써준다. 

 

 

누르면 ! 정상적으로 뜬다. 

 

 

bno 와 cno 수정불가 처리해준다. 

상위 중 commentHead 오 형제인 c_comment 의 text 를 나타내게 하면 content 내용이 뜬다. 

 

 

전체 하나에 해당하는 부분 빨간색으로 변경된다.

 

 

리무브 설정주면 댓글 사라진다. 

 

 

.after()는 선택한 요소 뒤에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시킬 수 있다.

after 을 통해 내가 찍어주는 것 다음에 수정 댓글창을 넣을 것이다. 

 

수정하는 것은 원래 있던 글은 지우고 그 이후에 수정박스 넣는 것이다.

append를 안쓰는 이유는 append는 붙여주는 것이기 때문에 위에 창 remove 시 연결돼 다 사라질까봐 after 을 쓴다. 

 

 

다음과 같이 코드를 치면 찍히나요가 찍히면서 원래 있던 댓글이 사라진다. 

 

https://www.codingfactory.net/10205

jQuery / Method / .after() - 선택한 요소 뒤에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시키

 

 

수정댓글창을 다음과 같이 html 효과를 줘서 만들어준다. 

 

 

동일하게 css 처리하고 버전 바꿔서 돌려본다. 

 

 

그러면 수정하기 버튼 누르면 다음과 같이 댓글 수정창이 뜬다. 

 

 

 

content 변수를 넣어주면 안에 내용을 그대로 가져온다. 

 

 

수정하기 버튼을 누르면 다른 댓글 수정하기 및 댓글창 열기 버튼이 사라진다. 

 

 

댓글수정창을 클릭해보면 다음과 같이 가져온 값이 정상적으로 뜨는 것을 확인 가능하다. 

 

 

해당 내용을 form 태그로 엮어서 보낼 수 있다. 

 

 

컨트롤러가 없어서 나는 오류이므로 만들어준다. 

 

 

값 정상적으로 가져온다. 

 

 

로그인한 사람만 가져오게끔 설정하기

 

 

bno 와 cno 값 공백과 비어있는지 여부 체크도 넣어준다. 

 

 

이제 map 을 담아서 서비스가 일하게 한다. 

 

 

서비스와 dao 에 동일하게 메소드 만들어준다.

update 를 통해 변경처리 해준다. 

 

 

다시 수정한 글을 c_comment db 에 저장해주고,

bno, cno, m_no 의 mid 가 같을때 실행하게 해준다. 

 

댓글 수정하기 반영되었다. 

 

■ 스프링부트 이용하기

 

 

 

Type : Gradle

Kotlin : 안드로이드 개발할 때 주로 사용

packaging : Jar (자바 실행할 수 있는 라이브러리), war(웹페이지)

 

 

 

스프링부트는 톰캣 내장이다.

 

 

해당 부분에서 기본 설정해준다.

 

dependencies {
   implementation 'org.springframework.boot:spring-boot-starter-web' //기본 starter web
   implementation 'org.mybatis.spring.boot:mybatis-spring-boot-starter:2.3.0' // mybatis
   
   implementation 'javax.servlet:jstl:1.2'//jsp
   implementation "org.apache.tomcat.embed:tomcat-embed-jasper"//tomcat사용하기
   implementation 'org.mariadb.jdbc:mariadb-java-client:3.0.8'
   
   compileOnly 'org.projectlombok:lombok' //lombok //compileOnly= 컴파일 시점에만 참여
   developmentOnly 'org.springframework.boot:spring-boot-devtools' // 개발시만 사용
   annotationProcessor 'org.projectlombok:lombok' // 어노테이셔으로 사용하기 위해 
   implementation 'org.springframework.boot:spring-boot-starter-tomcat' //runtime시에만 필요, 실행환경에서 제공되는 dependency를 설정
   testImplementation 'org.springframework.boot:spring-boot-starter-test'//test코드 수행때만 사용
}

 

 

해당 파일 만들어준다. 

 

 

 

컨트롤러 설정 후 열면 다음과 같이 나온다. 

 

 

 

1부터 10까지 출력할 수 있다. 

 

 

모델앤뷰 타입으로 만들어준다.

 

 

서비스 만들어준다. 

 

 

DAO 도 만들어준다. 

인터페이로 만들어주고 여기서 toSize 이름이 맞으면 바로 호출되도록 @Mapper 을 사용해준다. 

 

 

맵퍼는 MyBatis XML Mapper 파일로 만들어준다. 

 

 

namespace 는 @Mapper에서 사용한 이름과 패키지명 이름 일치시켜준다.

전체 게시물의 수를  구하는  sql 명령을 준다.

결과값은 integer 로 나간다. 

 

해당 결과값을 mv.addObject 로 담아주고 이를 반환시킨다. 

 

 

이를 출력하면 다음과 같이 숫자가 나온다. 

 

* 에러해결

 

포트명을 넣어주니 정상 출력되었다.