[기술정리] SPA(Single Page Application)

Stupefyee

Nov 22, 2024

Contents

1. 정의 2. 주요 특징 3. 장점 4. 단점 5. 대표 프레임워크/라이브러리 6. 예시 코드

1. 정의

단일 HTML 페이지

동적 업데이트

자바스크립트 기반

2. 주요 특징

단일 페이지 로드

한 번만 리소스 로드
새로고침 없음

클라이언트 사이드 렌더링(CSR)

브라우저에서 렌더링
서버 요청 감소

라우팅

클라이언트에서 처리
History API 사용

데이터 처리

REST API, GraphQL
JSON 데이터 주고받음

3. 장점

빠른 사용자 경험

페이지 전환 없음
속도 빠름

모던 UX

애니메이션 지원
직관적 인터페이스

효율적 네트워크 요청

필요한 데이터만 요청

4. 단점

SEO 어려움

SEO: 검색 엔진 최적화(Search Engine Optimization).

웹 페이지가 검색 엔진 결과에서 잘 노출되도록 최적화하는 작업.

SSR: 서버 사이드 렌더링(Server-Side Rendering).

서버에서 HTML을 미리 렌더링해 브라우저에 전달.
SEO 문제 해결 가능.

SSG: 정적 사이트 생성(Static Site Generation).

빌드 시 HTML 생성 후 배포.
성능과 SEO 모두 개선.

첫 로딩 속도

초기 리소스 다운로드 필요

복잡성 증가

상태 관리 복잡
라우팅 로직 필요

5. 대표 프레임워크/라이브러리

React

Vue.js

Angular

Svelte

6. 예시 코드


<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>blog</title>
</head>

<body>

<nav>
    <ul>
        <li>
            <a href="javascript:void(0);" onclick="renderList()">홈</a>
        </li>
        <li>
            <a href="javascript:void(0);" onclick="renderSaveForm()">글쓰기</a>
        </li>
    </ul>
</nav>

<hr>

<section id="root">

</section>

<script>
    // init
    let root = document.querySelector("#root");
    renderList();

    // saveForm 디자인
    function renderSaveForm() {
        clear();
        let dom = `
            <form>
                <input type="text" id="title" placeholder="제목"><br>
                <input type="text" id="content" placeholder="내용"><br>
                <button type="button" onclick="sendSave()">글쓰기</button>
            </form>
        `;
        root.innerHTML = dom;
    }
    // list 디자인
    function renderList() {
        clear();
        let dom = `
            <table border="1">
                <thead>
                    <tr>
                        <th>번호</th>
                        <th>제목</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody id="list-box">

                </tbody>
            </table>
            <button onclick="renderDetail()">상세보기테스트</button>
            `;
        root.innerHTML = dom;
        sendList();
    }

    function renderListItem() {
        let dom = `
                <tr>
                    <td>1</td>
                    <td>제목1</td>
                    <td><a href="javascript:void(0);" onclick="renderDetail()">상세보기</a></td>
                </tr>
        `;
        return dom;
    }

    // updateForm 디자인
    function renderUpdateForm() {
        clear();
        let dom = `
                <form>
                    <input type="text" value=1 readonly><br>
                    <input type="text" id="title" value="제목1"><br>
                    <input type="text" id="content" value="내용1"><br>
                    <input type="text" value="2024.11.22" readonly><br>
                    <button onclick="sendUpdate()">수정하기</button>
                </form>
            `;
        root.innerHTML = dom;
    }

    // detail 디자인
    function renderDetail() {
        clear();
        let dom = `
                <form>
                    <button type="button" onclick="sendDelete()">삭제</button>
                </form>
                <form>
                    <button type="button" onclick="renderUpdateForm()">수정</button>
                </form>
                <div>
                    번호: 1 <br>
                    제목: 제목1 <br>
                    내용: 내용1 <br>
                    작성일: 2024.11.22 <br>
                </div>
            `;
        root.innerHTML = dom;
    }

    // 화면 초기화
    function clear() {
        root.innerHTML = "";
    }
</script>

</body>
</html>

<section> 부분만 브라우저의 새로고침 없이 업데이트되며, URL은 필요에 따라 변경될 수 있음

Contents

1. 정의 2. 주요 특징 3. 장점 4. 단점 5. 대표 프레임워크/라이브러리 6. 예시 코드

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>blog</title> </head> <body> <nav> <ul> <li> <a href="javascript:void(0);" onclick="renderList()">홈</a> </li> <li> <a href="javascript:void(0);" onclick="renderSaveForm()">글쓰기</a> </li> </ul> </nav> <hr> <section id="root"> </section> <script> // init let root = document.querySelector("#root"); renderList(); // saveForm 디자인 function renderSaveForm() { clear(); let dom = ` <form> <input type="text" id="title" placeholder="제목"><br> <input type="text" id="content" placeholder="내용"><br> <button type="button" onclick="sendSave()">글쓰기</button> </form> `; root.innerHTML = dom; } // list 디자인 function renderList() { clear(); let dom = ` <table border="1"> <thead> <tr> <th>번호</th> <th>제목</th> <th></th> </tr> </thead> <tbody id="list-box"> </tbody> </table> <button onclick="renderDetail()">상세보기테스트</button> `; root.innerHTML = dom; sendList(); } function renderListItem() { let dom = ` <tr> <td>1</td> <td>제목1</td> <td><a href="javascript:void(0);" onclick="renderDetail()">상세보기</a></td> </tr> `; return dom; } // updateForm 디자인 function renderUpdateForm() { clear(); let dom = ` <form> <input type="text" value=1 readonly><br> <input type="text" id="title" value="제목1"><br> <input type="text" id="content" value="내용1"><br> <input type="text" value="2024.11.22" readonly><br> <button onclick="sendUpdate()">수정하기</button> </form> `; root.innerHTML = dom; } // detail 디자인 function renderDetail() { clear(); let dom = ` <form> <button type="button" onclick="sendDelete()">삭제</button> </form> <form> <button type="button" onclick="renderUpdateForm()">수정</button> </form> <div> 번호: 1 <br> 제목: 제목1 <br> 내용: 내용1 <br> 작성일: 2024.11.22 <br> </div> `; root.innerHTML = dom; } // 화면 초기화 function clear() { root.innerHTML = ""; } </script> </body> </html>