모달, Ajax 차이점은?
본문
모달, 실제로 데이타가 출력되지만 display:none 기능으로 보이지 않다가, show 버튼을 누르면 display:block 으로 변경되면서 눈에 보이게 됨. (페이지 용량이 더 늘어남)
Ajax
화면에 출력되지 않다가 버튼을 글릭하면 자바스크팁트가 실행되면서 해당 페이지에 내용을 불려와서 출력하는 방식. (페이지 용량이 더 적음)
위 내용이 제가 알고 있는건데 맞나요?
답변 3
아닙니다.
모달은 말그대로 눈에 보이지않다가. 클릭시 그 내용이 출력된다 비유하자면,
일반 모달의 경우 눈에 보이지않는 내용들도 함께 모달창안에 숨어있지요?
그 내용들은 항상 고정된 텍스트를 출력합니다.
이때 ajax를 연동할 경우, 데이터베이스와 연동하여
모달창에 있는 텍스트 내용을 바꿀 수 있습니다.
즉 목록에 10개의 글이있고, 모달보기 버튼이있다면,
일반적으로는 10개의 글에 10개의 모달을 만들겠지만,
ajax를 사용하면 10개의 글에 1개의 모달을 만들어, 그 속의 내용만 동적으로 불러온다 할 수 있습니다.
제가 만든 테마의 일 부분입니다.
http://theme.gnuwiz.com/
이 부분이 모달은 1개이지만, 내용을 각각 다르게 불러오는 ajax가 적용된 상태입니다.
-----------
그 외 다른 동작에서 비유하자면,
상태를 바꾸는 버튼이 있다고 하겠습니다.
보통은 그 버튼을 누르면 <form>에있는 뒷단으로 넘겨서 그 뒷단에서 db에 업데이트 후
다시 원래 있던 페이지로 리다이렉트 시킵니다. 즉 새로고침이 2번은 최소 실행됩니다.
하지만 ajax의 경우 바로 뒷단으로 넘겨 동적으로 html의 상태를 완료로 변경하는 겁니다.
게시글이 1,000 개일때 파일 용량을 따지면 모달 vs Ajax 중 어떤 것이 더 큰가요?
파일용량은 미세하게 줄겠지만,
1000의 모달을 html로 만드는것 보다야,
ajax가 훨씬 좋습니다..
'모달'과 'ajax' 는 완전 별개로 생각하는 것이 좋습니다.
'ajax' 를 기초부터 다시 개념이해 하는 것을 추천합니다.
=> https://upcake.tistory.com/142
https://www.w3schools.com/jquery/jquery_ajax_intro.asp
브라우저 주소창에서
~/a.php 를 입력하면, ~/a.php 페이지가 로딩됩니다.
b.php 내용을 불러오려면, 주소창에서 ~/b.php 를 입력해야 됩니다.
'ajax'는.. a.php 페이지에서,
주소창 ~/b.php 를 입력하지 않고, (링크 클릭하지 않고 / form submit 하지 않고)
b.php 내용을 불러오는 개념입니다.
=> https://codepen.io/btholt/pen/abLeGa
=> https://marscompany.tistory.com/27
=> https://homzzang.com/b/jquery-247
모달은 UI용어로 aJax는 개발용어로 보면 되지 않을까 싶은데요...
형태는 모달, 내부적인 연결은 ajax 하겠다..
보통 이렇게 말하니까 두개를 비교하는건 좀 다른 의미 같아요.
