[HTML] 게시판에서 팝업창 띄우기

[HTML] 게시판에서 팝업창 띄우기

[게시판에서 게시글의 제목을 클릭하면 게시물 내용이 등록일, 수정일과 함께 팝업창으로 띄우기]

* 현재 작업은 React로 진행 중이며, 특히 ant-design의 Protable 컴포넌트를 이용하고 있다.

팝업창으로 띄우는 방법에 대해 현재 상황에 맞는 여러 방법을 모색 해 보았다.

1) ant-design의 Popoverˇ 사용하기: 아래 같은 작은 팝업이 아닌 팝업 창으로 띄우고 싶었기 때문에 pass.

ant-design의 Popover

2) javascript 를 이용해서 render할 때 바로 창 띄우기: render 할 때 사용할 새로운 함수를 만들어야 해서 pass.

3) ProTable을 사용 중이니 form을 그대로 활용 해서 게시글 내용 보이게 하기:

하지만 disabled는 동작하지 않았고 또 비슷한 종류의 옵션을 살펴 봤지만 딱히 보이지 않았다.

그래서, 어쩔 수 없이 결국 form 안에 를 이용해서 내용을 그냥 박제(?)하기로 했다.

이는 Input 태그를 이용하기로 생각했는데 Input에 disabled를 처리 하니까 가독성이 떨어졌다.

그래서 다른 Input의 옵션을 찾아보다가 사이트ˇ에서 잘 정리 되어 있어서 참고했다.

disabled 옵션 대신 readOnly 옵션이 존재 해서 이를 활용하기로 했다.

disabled 와 readOnly를 비교해 보면 다음과 같다.

disabled 옵션 사용 readOnly 옵션 사용

여기까지 하고 나서 또 다른 문제가 생겼는데, 바로 게시글을 불러 올 때 줄바꿈이 작동하지 않고 한 줄로 받아 오는 것이었다.

이 부분에 대해서 여러 사이트를 찾아 보았다.

[DB에서 textarea 데이터를 가져올 때 줄바꿈 적용하기]

처음에 게시글을 저장할 때 textarea 타입으로 글을 저장했는데, 이 때 DB에는 개행문자인 \r

의 형식으로 줄바꿈이 저장된다.

이 때, 이 데이터를 다시 가져와서 출력하면 줄바꿈이 제대로 적용되지 않는다는 것을 볼 수 있다.

이를 수정하기 위해서는 두 가지 방법이 있다.

1) DB에 값을 입력할 때 개행문자를 태그로 변환하기

2) jsp 화면에 뿌릴 때 개행문자를 태그로 변환하기

(추후에 이런 방법이 필요하다면 아래 사이트들ˇ을 참고 하겠다.)

하지만, 나는 이 데이터가 '게시글 내용'에 해당하는 워낙 간단한 데이터였기 때문에

db나 새로운 변수를 추가해서 변환하는 방법 없이 textarea로 바로 가져오고 싶어서 다른 방법을 모색했다.

이에 확인한 방법은 아래와 같이 textarea의 value 값으로 해당 데이터를 넘겨 주는 것이었다.

이렇게 하면 아래와 같이 내가 원했던 글 그대로 불러와서 출력 해 주는 것을 확인 할 수 있다.

textarea value값으로 데이터 넘기기

[react 시간 형식 저장]

Reference

1) 'Popover', ant-design : ant.design/components/popover/

2) '', MDN Web Docs : developer.mozilla.org/ko/docs/Web/HTML/Element/Input

3) textarea 줄바꿈 사용하기

- 'textarea 줄바꿈 값을 db에 입력하고 jsp에서 사용하기', 삽질하는 프로그래머 통통만두 : marsland.tistory.com/410

- 'textarea 쓴 글 그대로, 있는 그대로 저장, 출력 wrap="hard"', 우주 정복자 원펀만: oneshottenkill.tistory.com/320

from http://nong-coding-diary.tistory.com/7 by ccl(A) rewrite - 2021-01-14 19:01:39