(국비교육) 27 - 게시판 꾸미기 3 + summernote + 위지위그 + 자바스크립트

■ 엔터키 적용해주기

* Write.java

 

 

게시판에 글 작성하면 엔터처리 안된다.

왜냐하면 자바로 작성된 글자가 html 언어가 먹히지 않았기 때문이다.

 

따라서 서블릿으로 돌아가서 문자를 바꿔주는 코드를 작성해야 한다.

여기서 replace 를 써준다.

※ replaceAll 써도 된다.

- replace 모두 바꿔줘요
- replaceAll 모두 바꿔줘요. + 정규식
- replaceFirst 하나만 바꿔요.

 

replace(old data, 바꿀내용) 한 내용을 content 에 담아주고 이를 출력한다. 

 

 

확인 후 서버를 다시 시작하면 다음과 같이 엔터처리 됨을 확인할 수 있다. 

 

■ summernote 활용하기 (하단 홈페이지 링크 참고)

 

 

위지위그(WYSIWYG: What You See Is What You Get, "보는 대로 얻는다")는 

문서 편집 과정에서 화면에 포맷된 낱말, 문장이 출력물과 동일하게 나오는 방식을 말한다

 

상단 getting stated 클릭

 

https://summernote.org/

Summernote - Super Simple WYSIWYG editor

 

 

해당 코드 복사

 

* write.jsp

 

write.css 밑에 붙여넣기

 

 

summernote 로 이름 변경해주기

 

* 에러해결

 

 

나의 경우 다음과 같이 name="summernote" 로 변경해서 오류가 떴다.

name="content" 로 그 전에와 동이라게 두고 id="summernote" 로 해줘야 한다. 

 

 

닫는 바디 위에 복사한 script 붙여넣기

 

 

다음과 같이 뜬다. 

그러나 버튼 모양이 바르지 않으므로 조정해준다.

 

* write.css

 

button 을 삭제처리 해준다. 

왜냐하면 각 하나의 목록들이 다 버튼으로 인식돼서 크기가 이상해지기 때문이다. 

 

 

다음과 같이 뜬다.

만약 캐쉬가 남아 있는 경우 제대로 안뜨므로

ctrl + f5 처리 해준다. 

 

 

높이 400 설정해준다.

 

 

다음과 같이 나온다. 

 

* detail.jsp 

 

 

이전 이미지는 무지가 detail 에 설정돼 있어서 겹치는 현상이 나온다.

따라서 해당 부분을 삭제해준다. 

 

* write.jsp

 

 

onclick = "check()" 버튼을 누르면 check() 라는 함수를 실행합니다. 

 

javascript 을 써본다.

/head 앞에 써주고 해당 기능을 넣어준다. 

 

 

글쓰기를 눌렀을 때 경고창이 뜬다. 

 

※ 역사

자바스크립트(=ECMAscript) -> JQuery -> TypeScript -> 바닐라 스크립트

JQuery: 이미 만들어진 녀석을 가져다 씁니다. 

TypeScript: 자바스크립트에 타입을 입혀서 안정적으로 씁시다.

바닐라 스크립트: 다시 원래 간단한 스크립트로 돌아가자

 

 

let title 을 통해 변수를 다음과 같이 선언하고 초기화해준다. 

document.getElementsByName 는 문서에서 () 안에 값을 가져온다.

아래 id="title" 로 정한 title 을 넣어준다. 

alert(title[0]); 그 안에 0번째에 있는 value 값을 꺼낸다. 

 

 

하단에 input id 이름을 title 로 정하고 

title.value 를 통해 그 값을 알림으로 나타낼 수 있다.  

 

onclick을 return check() 로 지정하는 이유는 해당 메소드를 체크하면서

참이면 form 작업을 진행하고 그렇지 않으면 실행하지 않는다.

 

이를 위해 조건식을 만들어준다. 

 

 

title.value.length; 하면 길이 출력 가능

 

 

조건식을 만들어보면,

다섯글자 이하 "제목은 다섯글자 이상이어야 합니다."

5글자 이상 "저장합니다." 알림

 

 

제목 다섯글자 이하일때 경고문 뜨고

다시 제목 창으로 가게 해준다.

 

여기서 제목 창으로 가게 하는 것이 title.focus() 이다. 

 

if 문에 return false 를 걸어준다.

따라서 if 안에 들어오게 되면 false 처리가 돼서 form 문이 실행안된다. 

 

 

마찬가지로 임의의 변수 textarea를 통해 아래 id summernote 를 가져온다. 

 

 

5글자 이하일 때 해당 창 빨갛게 표시하기.

 

순수 자바 스크립트로 쓰는 것을 바닐라 스크립트라고 한다.

바닐라 자바스크립트(Vanilla JS)란? (tistory.com)

바닐라 자바스크립트(Vanilla JS)란?

 

 

처음 span을 썼을때는 아무것도 보이지 않는다.

span.innerText는 span 의 안에 글자를 " " 안에 글자로 바꾼다는 뜻으로

<span>의 내부 텍스트 콘텐츠를 나타내는 속성이다.

 

span.innerHTML 은 요소의 내부에 있는 HTML 콘텐츠를 가져오거나 설정할 수 있다.

span.style.border = "5px red solid"; 하면 다음과 같이 뜬다. 

 

 

let div = document.getElementsByClassName("writeDiv")[0]; 는 "writeDiv" 의

첫 번째 요소를 선택하여 div 변수에 할당한다. 

 

div.setAttribute("style","background-color:red"); 은 선택된 요소의 배경색을 빨간색으로 설정한다.