![[SPA/게시판]스프링 익명블로그v4](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2024-11-29T11%3A27%3A46.482Z-97f05b27-d23c-4815-809f-dbc15a935893&w=3840&q=75)
자바스크립트로 전환하여 SPA에서 HTTP를 통해 서버와 데이터를 주고받고, 페이지 새로고침하지 않는 동적 업데이트 방식 구현
1. 사용 기술
자바스크립트
클라이언트에 동작하는 스크립트
웹 페이지의 동적 콘텐츠 업데이트, 이벤트 처리, 서버와의 비동기 통신 등 담당
SPA(Single Page Application)
웹 애플리케이션 구조 중 하나. 페이지 새로고침을 하지 않고, 자바스크립트를 사용해 페이지의 일부만 동적 업데이트하는 방식
HTTP
클라이언트(웹 브라우저)와 서버 간의 통신 프로토콜
SPA는 HTTP 요청을 통해 서버와 데이터를 주고받아 웹 애플리케이션 동작시킴. AJAX, Fetch API 등 HTTP를 통해 서버와 비동기적 통신
2. 코드 - 방식
- form 태그와 <name=””> → <id=””> 변경
form제출로 인한 페이지 새로고침 피하기
name은 폼 제출 시 전송되는 데이터와 관련이 있지만, SPA는 폼 제출 하지 않고 자바스크립트로 직접 데이터 처리하기 때문에, DOM 요소를 식별하는id사용
적용 방식
- 대신 자바스크립트에서 이벤트 리스너를 사용하여 양식 데이터를 처리하고,
fetch()또는XMLHttpRequest를 사용하여 서버에 AJAX 요청을 보냅
- dom 형태
- innerHTML
3. 코드 - 기능
Share article