[웹앱 디자인] 스프링부트JPA 7. 개발방식, 데이터를 게시판 CRUD화 하기. CRUD프로젝트 생성.

안녕하세요.

오늘 할 것은 데이터. 엔티티들을 CRUD형태로 변환하여 놓는 것 입니다. 동일한 형태로 CRUD를 만들어 둠으로서, 개발효율을 높일 수 있습니다. 여기서 생각해 볼 점은...

1. 사용자의 엔티티. Role. 세션여부와 생각해야한다.
2. 엔티티안에 엔티티가 있는 경우. 맵핑의 경우.
3. CRUD로직을 제외한 로그인등을 모두 제거한다.

1번의 경우역시, 세션을 다제거하고, 단순히 CRUD가 되는지 여부만 한번 그려주는 것이 되겠습니다. 3번에서 이야기한 기타 모든 로직을 제거하고, 오직 데이터의 CRUD만 기록하는 형태가 되겠습니다. 새 프로젝트로 만들기로 하죠.

 

실제, Github에 프로젝트로 올렸기 때문에, 코드 작성에 신경을 쓸 필요는 없겠습니다. 읽어가면서 공부해보세요. 실제, 이 글은 웹서비스, 정보시스템 구축이 있을때에 도움이 될거라고 생각해봄니다

 

infott2t/springboot-querydsl-ex: SpringBoot JPA + QueryDSL First Instance Project (github.com)

GitHub - infott2t/springboot-querydsl-ex: SpringBoot JPA + QueryDSL First Instance Project

 

 

 

이번 편의 목적은...

 

 

모든 부분을 제거하고, CRUD로직만 한정한다. 이렇게 되겠습니다.

새 프로젝트로 구현해줌니다.

 이 작업은, 백엔드 로직의 균일성을 만들고, 단순한 약속으로 이루어진 로직이기 때문에 재활용성이 높구요. 웹 개발을 하면서, 엔티티. 데이터들이 늘어나겠죠. 그럴때마다, 데이터를 추가해서 개발하는 방식입니다.

 전에 작업하던 엔티티들을 죽 나열해서 적어줌니다. 그다음, 컨트롤러. index컨트롤러에, 로그인 화면을 구현하는 것이 좋을까요. 분명히 네비게이션의 형태로 세션과의 관계, url마다의 관계가 생성이 될 것입니다. 이 부분은 두번째에 하기로 하죠~.

바로 전편에 기획했던, 웹디자인을 토대로 새로 만들어질 데이터 엔티티들을 구상하고, 지금 현재 이 프로젝트에서 CRUD를 만들어 놓는다.

이런 형태가 됨니다. 또 이런 형태는,

실제 프로젝트에서 응용해서 편집해서 사용한다. 사용하기 수월해 진다.

이렇게 되는 것이죠.



가상의 세션의 임시 유저 데이터를 만든다. -> 이 부분은, 전에 구글로그인으로 자동 생성되었던 데이터를 참조하면 되겠죠.

index페이지에, 관리자, 사용자, 기업회원. 이렇게 링크로 분기를 들어가는 링크를 만들어 줌니다. 또, 현재 프로젝트에 이어개발을 할 수 있기 때문에, root폴더를 firstInstance 폴더로 생성해서, 거기를 토대로 url을 만들어 갑시다. 데이터 개발환경을 만드는 폴더라고 이름 붙였네요. 먼저라는 뜻이 있군요. 다음에, 실제 지금 프로젝트에 이어 개발할 때에, firstInstance폴더의 url들을 참조해서 개발할 수 있기 때문에, 수월하게 개발할 수 있을 검니다.

현재 타임리프 환경으로 개발하고 있기 때문에, /resources/templates/firstInstance/index.html. 이런 식으로 뷰 파일을 만들어 줌니다.

welcome페이지. index페이지에서 할일의 구분.

1. 로그인 로직구현 : 로그인페이지의 연결 or 간편로그인 버튼 and 회원가입페이지 연결.
2. 로그인 전 화면: 일반적으로 데이터의 수정은 되지 않고, 보기는 가능하다.
3. 로그인 후 화면: 회원의 역할 별로, 보여주는 페이지를 달리 한다.

위의 처럼 되겠죠. 세션이 로그인을 통해 생기기 때문에, 이중적으로 생각해야합니다. 이러한 생각을 프로그래밍을 하면서, 계속 생각하는 것은 번거롭기 때문에, 일정한 규칙을 만들어서, 쉽게 만들 수 있는 방법을 찾아야하는 것이죠~.

단순하게 CRUD만 먼저 하기로 했기 때문에 위의 로직을 전체적으로 생각하지 않고, 만들어 봅시다.

이번 프로젝트에서, 해야할 일은,

로그인도 생략,

세션도 생략,

엔티티 데이터의 CRUD로직 구현, 엔티티간의 맵핑 데이터 구현.

 

이렇게 되겠습니다.

---

패키지의 구성을 보죠.

엔티티 클래스.
엔티티 데이터는 모두 domain 패키지에서 일괄적으로 엔티티 이름으로 이어 만들어 들어가게 됨니다. PhoneStr. 예를 들어, 전화번호를 저장하는 엔티티는 domin.phonestr.PhoneStr.java 이런 파일이 되는 것이죠.

컨트롤러 클래스 - 일반 컨트롤러와 Rest컨트롤러.
컨트롤러의 경우에는 일반 컨트롤러와 Rest컨트롤러가 있습니다. 일반컨트롤러는 리턴값이 뷰페이지가 됨니다. 실제적으로 네비게이션, 페이지 이동과 관련이 있죠. Rest컨트롤러의 경우에는 엔티티 데이터의 CRUD. 삽입, 수정, 삭제, 읽기. 이런 부분을 하게 되는 것이죠.
컨트롤러의 경우에, controller패키지, restcontroller 패키지. 이런 이름을 줌니다. 또, 최상단에, firstinstance라는 패키지를 주어서, 엔티티 데이터의 CRUD를 구성한다는 것을 잘 정의해 줘야겠죠. (패키지 명은 소문자만 적을 수 있습니다. firstinstance 패키지.)

엔티티의 경우에는 실제 프로젝트에서 바로 사용하고, 따로 구분하지 않더라도 직관적이기 때문에, domain패키지를 그대로 사용해도 되지만, 컨트롤러의 경우에는 실제 뷰페이지, 웹페이지 네비게이션에 따라 달라지기 때문에 구분하는 것이 필요합니다.

url 컨트롤러의 구성은, 정하는 방법에 따라 여러 방식으로 만들 수 있지만, 실제 프로젝트의 경우에는 웹 페이지 별로 컨트롤러를 구성하는 것이 좋다고 봄니다.실제 rest 컨트롤러는 한번 만들면 그대로 사용해도 되기 때문에, 한번만 만들어도 되죠. 엔티티 데이터의 CRUD만 잘 해주면 되기 때문이겠죠.


1. 엔티티를 도메인에 집어 넣는다.

2. 엔티티 CRUD만 할 컨트롤러는 firstinstanceurl, rest 패키지에 집어 넣는다.

실제, 프로젝트에 사용할 컨트롤러는, controller 패키지에 만들어 줌니다.

---

 

<실제 프로젝트 or firstInstance 프로젝트 도메인 엔티티, 컨트롤러의 위치>

---

< 실제 프로젝트 or firstInstance 프로젝트 뷰페이지 위치>

 

---

실제 패키지는 Github에 만들면서 올리기 때문에... 내용 그대로가 올라가 있을 검니다. 다음에 웹프로그래밍, 서비스를 만들때에 참조하기 좋겠죠.

이번에는, firstInstance.controller를 만들어 줍시다. 여기 적힌 글 순서대로 만들어 주면 금방 만들수 있을 검니다.

테스트 CRUD용 URL 컨트롤러 만들기.
패키지가, org.example.firstinstance.controller.firstinstanceurl.InstanceUrlController.java. 이렇게 되는군요. 테스트용, CRUD프로젝트에서 url네비게이션을 할 때 사용하는 컨트롤러 이름입니다.

package org.example.firstinstance.controller.firstinstanceurl;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class InstanceUrlController {

    @GetMapping("/administer/instanceurl")
    public String index(){
        //firstInstance index의 처음 위치.
        return "firstInstance/index";
    }
}

테스트 CRUD용 index페이지 만들기.
최대한 단순하게 만들어 줌니다. 테이블 이름만 적어서 둡시다. 그 후에, 사용자별 링크. 관리자 페이지. 이런 식으로 만들어도 좋겠구요.
테이블이름을 적으면서, 참조사항. 어디에 사용하는지, 어떤 테이블과 맵핑되는지 이런 것도 메모식으로 적어두면, 나중에 개발할 때 수월하겠죠.

저장되는 위치는, resources/templates/firstInstance/index.html 되겠습니다.

<!doctype html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="/css/nav.css">
    <title>오늘, 일 하시는 것은 어떤가요. 좋은 하루되세요.</title>
    <style>
        .navbar-brand {
            font-size: 1rem;
        }
        .card {
            margin-bottom: 10px;
        }

        .nav_bottom {
            margin-bottom: 40px;
        }


    </style>
    <script th:inline="javascript">
        /*<![CDATA[*/
        let result = [[${workPlanList}]]
        /*]]>*/
    </script>
</head>

<body>
<div class="fixed-bottom">
    <nav class="navbar navbar-expand  nav1">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">스마트 팩토리</a>&nbsp;&nbsp;&nbsp; <a class="navbar-brand">테스트, CRUD 페이지.</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon" style="color:black;margin-top:5px;"><i class="bi bi-justify"></i></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">

            </div>
        </div>
    </nav>
</div>
<div class="container">

    <br/>
    <h2>엔티티 데이터 CRUD 체크 테스트</h2>
    <br />
    <br/>
    <p><a href="#">사용자 테이블(USER)로 이동</a></p>

    <p><a href="#">RoleADMIN 테이블로 이동</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">RoleCOMPANY 테이블로 이동</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">RoleUSER 테이블로 이동</a></p>
    <hr/>
    <br/>
     <p><a href="#">address 게시판 엔티티 AddressStr 로 이동</a></p>
     <p><a href="#">phone 게시판 엔티티 PhoneStr 로 이동</a> </p>
    <p style="margin-left:100px;">주소, 전화번호 저장 테이블. 사용자 테이블, RoleADMIN, RoleCOMPANY, RoleUSER 테이블에서 사용.</p>
    <hr/>
    <br/>
    <p><a href="#">Coperation 테이블로 이동</a></p>
    <p style="margin-left:100px;">RoleCOMPANY테이블에서 사용.</p>
    <hr/>
    <br/>
    <p><a href="#">WorkPlan 테이블로 이동</a></p>
    <p style="margin-left:100px;">WorkPlan테이블. Coperation 테이블이 칼럼 맵핑됨.</p>


</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

<nav class="navbar nav_bottom">
    <div class="container-fluid">
        <div class="navbar-text" href="#">
            <i class="bi bi-emoji-smile"></i>
            스마트 팩토리, UI 만들어봤습니다. 2021년 6월 21일 ~ 2021 7월 9일., 2022년 12월 29일 ~ ... <br />한번 만들어보세요~. 일하기가 더 좋아졌으면 좋겠습니다. 좋은 개발되세요~.
            감사합니다.<br />작성자: 최현일
            |
            Github주소 <a href="https://github.com/infott2t/smartFactory-ex">@infott2t</a>
            <br/>
        </div>
    </div>
</nav>


</div>





<!-- Optional JavaScript; choose one of the two! -->

<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
  -->
<script src="/js/jquery-3.6.3.min.js"></script>
<script>
    $(document).ready(function(){
        var email = $("#email").text()

        setTimeout(function () {
            window.ReactNativeWebView.postMessage('{"email" : "'+email+'"}')
        }, 2000)


    });

</script>
</body>

</html>

실제 보이는 화면...

각 링크를 걸어주면 되겠죠~.

엔티티 데이터의 CRUD... 해당 로직은 1편을 참조해주세요. 자동화코드를 사용해서 빠르게 만드는 방법을 설명했습니다.
[웹 프로그래밍] 스프링부트JPA 1. 데이터를 클래스화 하기. 자동 생성. (tistory.com)

[웹 프로그래밍] 스프링부트JPA 1. 데이터를 클래스화 하기. 자동 생성.

CRUD로직을 만들어 줌니다.


에러발생시... 칼럼에 null값이 들어가게 될경우, 타임리프에서 오류를 발생시키게 되는데요. 특히, 엔티티끼리 맵핑이 된경우에 그럴 수 있습니다.
이때는 관련된 칼럼. 타임리프 프로퍼티 앞에 ?표를 붙여주면 됨니다. 검색해서 알았군요.

 <td th:text="${user.roleGuest?.id}"></td>

User, 사용자 테이블의 리스트 출력까지 만들었네요. 공부해봅시다~. 데이터 내용, 일부 가렸습니다.

좋은 하루되세요.
--
저의 글, 봐 주셔서 감사합니다.