모달을 만드는 방법에 대한 질문입니다.

Question

기술란에 올리긴 했지만 방법에 대한 질문입니다.코드를 작성하다 보면 모달을 만들어야 할 경우가 있습니다.대체로 모달을 만들 때 페이지의 주된 컨텐츠 이후에 하단에 작성하게 됩니다.이때는 html 파일 하나에 모달도 포함된 형태인데요, 모달의 코드가 좀 복잡하다면html의 가독성이 떨어지게 됩니다.그래서 thymeleaf를 쓰는 저의 경우에는

이런 식으로 모달파일을 분리하고 분리한 파일의 경로를 사용 페이지에 기입해주면서버에서 페이지를 내려줄 때 모달도 합쳐서 내려줍니다.결과적으로 html에 코드가 합쳐지긴 하지만 파일은 분리된 상태로 관리하니 페이지의 내용은 간략하게 유지할 수 있습니다.그런 데리액트와 같은 프론트 웹 프레임워크, 혹은 그렇지 않더라도모달 영역만 미리 잡아주고 (div 껍데기만 있고 내용물이 없는 경우)모달을 버튼으로 이벤트호출 시에만 불러오는 경우가 있습니다.Javascript단에서 모달을 그려주는 게 아니라면, 비동기 통신을 통해서 해당 모달이나 데이터를 가져와야 합니다.리액트라면 포탈에 모달이 그려지겠구나 예상하겠는데thymeleaf는 기껏해야 컨트롤러에서 model값을 불러와서 넣어준다는 발상, 혹은 RestController에서 데이터를 가져온다는 발상밖에는 생각이 나지 않습니다.모달 div 자체를 비동기적으로 그려넣어주려면 어떻게 해야 할까요?모달 파일을 분리했을 경우에 어떻게 해야 그것을 모달 div 껍데기 안에 넣어줄 수 있을까요?

초무쿤 · Answer

이런거 말씀하시는거 같습니다만..dialog.html에 정의된 fragment 들이 들어있는 _dialog.html에서 testDialog fragment가 위의 div에 replace 됩니다.여기 html 에 화면에(여기는 이미 html들이 그려져있음)불러온 값들 채워주시면 될듯 하네요.

모달을 만드는 방법에 대한 질문입니다.

1개의 답변

기술 목록