스프링부트

블로그 V4 - SPA

김인범's avatar
김인범
Nov 25, 2024
블로그 V4 - SPA
단일 HTML 페이지에서 모든 컨텐츠를 동적으로 로드하고,
페이지 전환 없이 사용자와 상호작용할 수 있도록 설계된 어플리케이션 (중요!!)
 
JAVA SCRIPT를 이용해 HTML파일 하나만 이용해, 다른 페이지들을 구현해보았습니다.
<!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가 들어갈 위치입니다. -->

</body>
</html>
기본 틀로 만든 index.html 파일입니다.
다른 파일들을 추가하지 않고, index 파일만 가지고
Java script를 통해 다른 웹페이지들을 구현했습니다.
 
<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"> <!--id값 넣을때는 컨벤션/ 카멜X-->
                    
                </tbody>
            </table>
            <button onclick="renderDetail()">상세보기 테스트</button>
            `;

        root.innerHTML = dom;
        sendList();

    }

    function renderListItem(){
        let dom = `
            <tr>
                <td>1</td>
                <td>제목1</td>
                <td><a href="/detail.html">상세보기</a></td>
            </tr>
        `;
        return dom;
    }
    
    //after / before / append/ pretend
    // append , pretend = 객체를 넣어야함.

    function renderUpdateForm(){
        clear();
        let dom = `
            <form> 
                <input type="text" value="1" readonly="true"></br>
                <input type="text" id="title" placeholder="제목1"></br>
                <input type="text" id="content" placeholder="내용1"></br>
                <input type="text" value="2024.11.22" readonly></br>
                <button type="button" onclick="sendUpdate()">글 수정하기</button>
            </form>
        `;
        //폼테그 쓰지마  json전송안되 + 초기화되서 정보사라져 
        root.innerHTML = dom;
    }

    function renderDetail(){
        clear();
        let dom = `
            <form action="http://localhost:8080/board/1/delete" method="post">
                <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 sendSave(){
        
        // 1. 사용자 입력값 받기

        // 2. JSON 변환

        // 3. API 요청

        // 4. 응답 처리
    }

    function sendList(){
        
        // 1. 사용자 입력값 받기

        // 2. JSON 변환

        // 3. API 요청

        // 4. 응답 처리
    }

    function sendDelete(){
        alert("삭제요청 들어옴");
        // 1. 사용자 입력값 받기

        // 2. JSON 변환

        // 3. API 요청

        // 4. 응답 처리
    }

    function sendUpdate(){
        alert("update 실행");
        // 1. 사용자 입력값 받기

        // 2. JSON 변환

        // 3. API 요청

        // 4. 응답 처리
    }

    // 화면 초기화
    function clear(){
        root.innerHTML = "";
    }
</script>
script 를 통해 만든 function 들 입니다.
<section id=”root”></section> 해당 파트가 다른 웹페이지의 디자인 코드들이 들어갈 부분입니다.
 
let root = document.querySelector("#root"); 를 통해 section 구역을 스크립트 메서드에서 지정할 수 있게 했습니다.
 
먼저 메인페이지에서 나오는 리스트 콘텐츠를 꺼내는 메서드를 통해 설명하겠습니다. 
<script>
    // init
    let root = document.querySelector("#root");
    renderList();

// list 디자인
    function renderList(){
        clear();
        let dom = `
             <table border="1">
                 <thead>
                     <tr>
                         <th>번호</th>
                         <th>제목</th>
                         <th></th>
                     </tr>
                 </thead>

                <tbody id="list-box"> <!--id값 넣을때는 컨벤션/ 카멜X-->
                    
                </tbody>
            </table>
            <button onclick="renderDetail()">상세보기 테스트</button>
            `;

        root.innerHTML = dom;
        sendList();

    }
    
    // 화면 초기화
    function clear(){
        root.innerHTML = "";
    }
  
  <!-- 나머지 코드 -->  
  </script>
let root 밑에 renderList( ) 를 통해서 페이지를 들어가면, 바로 글 목록이 뜨게 끔 할 수 있습니다.
 
function renderList( ) 를 보면 clear( ) 라는 화면 초기화 코드를 통해 기존에 있던
다른 페이지의 디자인을 지우고 난 뒤,
let dom 에 적혀있는 목록 디자인을 참고하여 프로그램이
root.innerHTML 을 통해 화면에 목록 디자인을 반영해 줍니다.
 
let dom 에 디자인 구조가 적혀있는 코드를 적을 때는 쌍따옴표( ” “ )가 아닌,
백틱( ` ` ) 을 이용하여 코드를 넣어줍니다.
 
다음은 저장 요청을 보내는 글쓰기 페이지 코드를 index의 script 에 넣은 코드입니다.
// 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;
    }
    
    function sendSave(){
        
        // 1. 사용자 입력값 받기

        // 2. JSON 변환

        // 3. API 요청

        // 4. 응답 처리
    }
renderList( ) 와 같은 역할을 하고 있는 renderSaveForm( ) 입니다.
기존의 개별 페이지를 가지고 있던 save-form.html 파일 과 다른 점이 있습니다.
 
개선점으로 <form> 태그에 action과 method 속성을 사용하지 않았다는 점이 있습니다.
💡
action 과 method 속성을 사용할 경우,
서버로 데이터를 전송하고 난 뒤, 페이지를 새로고침하거나 이동시키기 때문에
JSON 전송이 안되고, 페이지 초기화 문제가 발생할 수 있습니다.
 

JSON 전송이 안되는 이유

form 태그는 데이터 전송을 기본적으로 application/x-www-form-urlencoded 방식으로
데이터를 인코딩하여 전송하고 있습니다.
백엔드 서버에서 JSON형식으로 데이터를 받아야 한다면, 기본방식으로는 적합하지 않습니다.
프론트 서버에서 JSON 데이터를 전송하려면 JavaScript를 통해 데이터를 수집하고,
AJAX 또는 Patch API를 사용해 전송해야 합니다.
 

페이지 초기화의 문제

form 태그는 데이터를 전송하고 난 뒤, 브라우저에서 새로고침하거나 다른 URL로 이동을 합니다.
위 의 동작으로 인해, 사용자가 입력한 데이터가 사라지고, 페이지가 초기화 되는 문제가 있습니다.
이 문제들을 방지하기 위해 <button> 태그 기본 동작을 막아야 합니다.
<button> 태그의 기본 동작을 막기 위해서는 “type”을 button 으로 하거나
event.preventDefault( ) 를 사용해야 합니다.
 

위 예시 코드에서 onclick="sendSave()로 요청을 보내는 이유

onclick 이벤트를 통해서 JavaScript를 사용하고, 요청을 보내면
  • AJAX나 Fetch를 활용해 JSON 데이터를 전송할 수 있기 때문입니다.
  • JavaScript를 활용하기 때문에 페이지 새로고침을 방지할 수 있습니다.
  • 추가 로직을 구현할 수 있습니다. (유효성 검사, 사용자 알림, 비동기 처리 등)
 
Share article

More articles

See more posts

블로그 V4 - fetch + async/await

November 25, 2024
블로그 V4 - fetch + async/await

블로그 V4 - 스프링 RestAPI 전환

November 25, 2024
블로그 V4 - 스프링 RestAPI 전환

블로그 V4 - 서버 나누기

November 25, 2024
블로그 V4 - 서버 나누기

배열 뒤집기

November 24, 2024
배열 뒤집기

taker

RSS·Powered by Inblog