[스프링 부트] 22. JavaScript로 CSR 방식 프론트엔드 작성 - 웹 게시판 v4.0

1. Create (Insert) 자바스크립트 코드

// 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;                                                    
}                                                                            
                                                                             
async function sendSave() {                                                   
    // 1. 사용자 입력값 받기                                                         
    let board = {                                                            
        title: document.querySelector("#title").value,                       
        content: document.querySelector("#content").value                    
    };                                                                       
                                                                             
    // 2. JSON 변환                                                            
    let requestBody = JSON.stringify(board); // js 오브젝트 -> json 문자열 변환       
    // console.log(requestBody); // 한 번에 fetch까지 쓰지말고 중간중간 확인할 것             
                                                                             
    // 3. API 요청                                                             
    let response = await fetch("http://localhost:8080/api/board", {          
        method: "post",                                                      
        body: requestBody,                                                   
        headers: {                                                           
            "Content-Type": "application/json; charset=utf-8"                
        }                                                                    
    });                                                                      
    let responseBody = await response.json(); // json 문자열 -> js 오브젝트 변환      
    // console.log(responseBody);                                            
                                                                             
    // 4. 응답 처리                                                              
    // location.href = "http://localhost:8080/"; -> 새로고침 되므로 쓰면 안된다.                 
    renderList();                                                            
}                                                                            

2. Delete 자바스크립트 코드

async function sendDelete(id) {
    // 1. 사용자 입력값 받기 -> 필요 없음

    // 2. JSON 변환 -> 필요 없음
    
    // 3. API 요청
    // alert("id : " + id);
    let response = await fetch(`http://localhost:8080/api/board/${id}`, {
        method: "delete"
    });
    let responseBody = await response.json();
    // console.log(responseBody);

    // 4. 응답 처리
    renderList();
}

3. Update 자바스크립트 코드

let state = { };

// updateForm 디자인                                                                  
function renderUpdateForm() {                                                       
    // 상세보기 하면서 받은 board 객체를 state 객체에 남겨두었다가 활용                                   
    // console.log("state", state);                                                
    clear();                                                                       
    let dom = `                                                                    
        <form>                                                                     
            <input type="text" value="${state.id}" readonly="true"><br>            
            <input type="text" id="title" value="${state.title}"><br>              
            <input type="text" id="content" value="${state.content}"><br>          
            <input type="text" value="${state.createdAt}" readonly="true"><br>     
            <button type="button" onclick="sendUpdate(${state.id})">글수정하기</button> 
        </form>                                                                    
    `;                                                                             
    root.innerHTML = dom;                                                          
}                                                                                  
                                                                                   
async function sendUpdate(id) {                                                     
    // 1. 사용자 입력값 받기                                                               
    let board = {                                                                  
        title : document.querySelector("#title").value,                            
        content : document.querySelector("#content").value                         
    };                                                                             
                                                                                   
    // 2. JSON 변환                                                                  
    let requestBody = JSON.stringify(board);                                       
                                                                                   
    // 3. API 요청                                                                   
    let response = await fetch(`http://localhost:8080/api/board/${id}`, {          
        method: "put",                                                             
        body: requestBody,                                                         
        headers: {                                                                 
            "Content-Type": "application/json; charset=utf-8"                      
        }                                                                          
    });                                                                            
    let responseBody = await response.json();                                      
    // 4. 응답 처리                                                                    
    renderDetail(id);                                                              
}