[프론트엔드개발] JavaScript로 Html변경하여 SPA이해하기
[프론트엔드개발] JavaScript로 Html변경하여 SPA이해하기 — #프론트엔드개발 #SPA #html 학습법 이론 학습을 하기 이전, 명심해야할 학습법이 있다. 1.이해가지 않...
#Node js#Naver Blog
#프론트엔드개발 #SPA #html
학습법 이론
학습을 하기 이전, 명심해야할 학습법이 있다.
1.이해가지 않는다고 뒤돌아가 다시 보지 말 것
2.외우지 말라
=> 자주 봐서 외워짐을 당하라
=> 구글검색하여 copy and paste하라
- 이해하는게 중요하다
=> 왜 생겨났는지?
=> 왜 사용하는지?
===> 응용이 가능해진다.
웹페이지 동작원
웹페이지 동작원리
계속해서 반복되는 웹페이지 동작원리에 대해 복습해보자. 여태 하나의 서버로부터 벡엔드,프론트엔드 파일이 넘어오는줄 알았지만, 벡엔드서버와 프론트엔드서버 각각 따로 존재한다.
SPA 기초예
SPA
SPA와 MPA의 개념은 이전글을 통해 배웠다. 이번에는 SPA가 어떤식으로 동작하는지 간단하게 이해할 수 있는 예제를 준비했다.
HTML
| <!DOCTYPE html><html lang="ko"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Test</title></head><body> <a id="test">loading page...</a></body></html><script src="index.js"></script> |
|---|
간단하게 html파일만들어 js와 연동해준다.
JS
document.getElementById("test").innerHTML=****<a onclick="showList()">리스트로 이동</a>****; | .innerText 메소드는HTML요소를 추가/변경할 수 있다. |
|---|
<a>태그 속성에 href를 주지 않는 이유는 href를 사용하면 페이지가 이동되기 때문이다. onclick함수를 실행하여 클릭시 모든 HTML내용만 바꿔주겠다.
const showList = ()=>{ document.getElementById("test").innerHTML= <table> <tr> <td>No</td> <td>Wirter</td> <td>Title</td> </tr> <tr> <td>1</td> <td>짱구</td> <td>안녕하세요</td> </tr> </table> ; } | .innerHTML 메서드를 사용하면a링크안에 HTML요소를 추가시켜 내용을 변경할 수 있다. |
|---|
클릭시 웹페이지가 이동하지않고 깔끔하게 UI만 바뀌는 걳을 볼 수 있다.
SPA는 이런식으로 동작하고, 다음글에는 Mysql과 연동하여 API를 구현해 보겠다.