Springboot + JQuery Ajax로 CRUD 어플리케이션 구현-01【설계】

1. 프로젝트 목적 

 - EC2 서버상에 Spring boot로 웹 애플리케이션을 개발하고 배포까지 하는 과정을 기록하기 위함입니다.
  : 지금까지 자기 계발을 해오면서 여러 가지 이유로 실서버로의 배포까지를 제대로 한 것이 손에 꼽기 때문에 
  최소한의 기능을 구현한 프로그램을 배포까지 해보면서 배포 과정을 정리해보고 싶습니다.

 - EC2サーバー上にSpring bootを用いてウェブアプリケーションを開発し、デプロイする過程を記録するためです。
  : 今まで自己開発をしながら色々な理由で実サーバーにデプロイまできちんと済ませたのが殆どないため、
  最小限の機能を実装したプラグラムをデプロイまでしてみてデプロイまでの過程を整理してみたいです。
 
 - 회사 기술 스택인 AWS RDS에 대비하기 위함입니다.
 - 会社の技術スタックのAWS RDSに対比するため。

2. 요건 정의

 - 비동기 HTTP통신으로 DB 테이블에 데이터를 CRUD.
 - 非同期 HTTP通信でDBテーブルにデータをCRUD。
 

3. 사용기술 스택 

 - 언어 (言語)                      : Java 11, JSP, Java Script(JQuery)
 - 프레임워크 (フレームワーク)           : Spring boot
 - WAS (ウェブアプリケーションサーバー)   : Tomcat 9
 - 개발환경 (開発環境)                 : Windows 10 Home 
 - 운영(배포) 환경 (本番環境)            : AWS EC2(Amazon Linux 2)
 - 데이터베이스(개발) (データベース(開発))  : xampp mysql
 - 데이터베이스(운영)  (データベース(本番)) : AWS RDS (MariaDB)

 

4. 구성도

5. 서비스 사양 

 메인 페이지에서
 - 검색을 통해 상품정보 출력
 - 출력된 상품정보를 수정 가능 
 - 상품정보 삭제 가능 
 - 상품정보 등록 가능 

 メインページから
 - 検索で商品情報を出力
 - 検索を通して出力された商品情報を修正可能。
 - 商品情報の削除可能
 - 商品情報の登録可能。
 

6. 상세 사양 

 1) 상품 검색 商品検索

  (1) 화면(요청)　画面(リクエスト)

   - 메인 페이지의 검색란에서 상품번호를 입력한 후 , 검색 버튼 클릭
   - 파라미터의 유효성 검사
   - 상품번호를 파라미터로 하여 상품 API에 GET리퀘스트를 보낸다. 
   
   - メインページの検索欄に商品番号を入力した後、検索ボタンを押下。
   -パラメターの有効性検査
   - 商品番号をパラメターにし、商品APIにGETリクエストを送る。
   
  (2) API 
   - API에서 리퀘스트를 수신한다. 
   - 파라미터 유효성 검사
   - 상품 데이터를 DB로부터 가져온다
   - 화면으로 응답을 보낸다. 
    -> 상품 데이터가 있는 경우 
     : 응답 코드 200, 상품 데이터를 보낸다.
    -> 상품 데이터가 없는 경우   
     : 응답 코드 404, 상품 데이터가 없다는 메시지를 보낸다.
    -> 예외 / 에러 발생 시
     : 응답 코드 500, 에러 메시지를 보낸다.
 
   - APIでリクエストを受信する。
   - パラメターの有効性検査
   - 商品データをDBから抽出する。
   - 画面にレスポンスを返す。
    -> 商品データがある場合。
    : レスポンスコード 200, 上品データを送る。
    -> 上品データが存在しない場合
    : レスポンスコード 400, 上品データが存在しないというメッセージを送る。
    -> 例外 / エラー発生時
    : レスポンスコード 400, エラーメッセージを送る。

  (3) 화면(응답) 画面(レスポンス)
   - 응답 코드를 확인 
    -> 200의 경우 
     : 상품의 정보를 메인 페이지에 표시한다. 
    -> 404의 경우 
     : 상품이 없다는 메시지를 메인페이지 표시한다. 
    -> 500의 경우 
     : 에러 메시지를 메인페이지에 표시한다.
 
   - レスポンスコードを確認
    -> 200の場合
    : 商品データをメインページに表示する。
    -> 404の場合
    : 商品データが存在しないというメッセージをメインページに表示する。
    -> 500の場合
    : エラーメッセージをメインページに表示する。

 2) 상품 등록 商品登録

  (1) 화면(요청) 画面(リクエスト)
   - 메인 페이지에서 상품등록 버튼 클릭  
   - 상품등록 폼 페이지에서 상품 데이터 입력 
   - 상품등록 확인 버튼 클릭
   - 파라미터의 유효성 검사
   - 상품 API에 POST 리퀘스트를 보낸다. 
   
   - メインページで商品登録ボタンを押下。
   - 商品登録フォームに商品データ入力
   - 商品登録確認ボタンを押下。
   - パラメターの有効性検査
   - 商品APIにPOSTリクエストを送る。
   
  (2) API 
   - API에서 리퀘스트를 수신한다. 
   - 파라미터 유효성 검사
   - 상품 데이터를 DB에 등록
   - 화면으로 응답을 보낸다. 
    -> 상품 데이터가 등록 성공의 경우
     : 응답 코드 200, 등록된 상품의 정보를 보낸다.
    -> 예외 / 에러 발생 시
     : 응답 코드 500, 에러 메시지를 보낸다.
   
   - APIでリクエストを受信する。
   - パラメターの有効性検査
   - 商品データをDBに登録
   - 画面にレスポンスを返す。
    -> 商品データが登録成功の場合。
     : レスポンスコード 200, 登録商品のデータを送る。
    -> 例外 / エラー発生時
     : レスポンスコード、エラーメッセージを送る。

  (3) 화면(응답) 画面(レスポンス)
   - 응답 코드를 확인
    -> 200의 경우 
     : 상품의 정보를 메인 페이지에 표시한다. 
    -> 500의 경우 
     : 에러 메시지를 메인페이지에 표시한다.
 
   - レスポンスコード を確認
    -> 200の場合
    : 商品データをメインページに表示する。
    -> 500の場合
    : エラーメッセージをメインページに表示する。

 3) 상품정보 갱신 商品情報更新

   (1) 화면(요청) 画面(リクエスト)
   - 상품 상세 폼에 있는 상품 데이터를 변경한다.
   - 상품데이터 변경 버튼 클릭 
   - 파라미터의 유효성 검사
   - 상품 API에 PUT 리퀘스트를 보낸다.

   - 商品詳細フォームから商品データー変更。
   - 商品データ変更ボタンを押下。
   - パラメターの有効性検査
   - 商品APIにPUTリクエストを送る。
       
  (2) API 
   - API에서 리퀘스트를 수신한다. 
   - 파라미터 유효성 검사
   - 상품 데이터를 DB로부터 가져와서 데이터가 있는지 확인한다.
   - DB의 Select결과에 따라 아래와 같이 처리한다. 
    -> 상품 데이터가 있는 경우 
     : 응답 코드 200, 상품 데이터를 변경한 후 변경한 상품데이터를 화면으로 보낸다.
    -> 상품 데이터가 없는 경우   
     : 응답 코드 404, 상품 데이터가 없다는 메시지를 보낸다.
    -> 예외 / 에러 발생 시
     : 응답 코드 500, 에러 메시지를 보낸다.

   - APIでリクエストを受信する。
   - パラメターの有効性検査
   - 商品データをDBから抽出し、データが存在するかを確認する。
   - DBからのセレクト結果により以下の通り処理する。
    -> 商品データがある場合。
    : レスポンスコード200, 商品データを変更した後、変更したデータを画面に返す。
    -> 商品データが存在しない場合
    : レスポンスコード404, 商品データが存在しないというメッセージをメインページに表示する。
    -> 例外 / エラー発生時
    : レスポンスコード 500, エラーメッセージを送る。
   
  (3) 화면(응답) 画面(レスポンス)
   - 응답 코드를 확인
    -> 200의 경우 
    : 상품의 정보를 메인 페이지에 표시한다. 
    -> 404의 경우 
    : 상품이 없다는 메시지를 메인페이지 표시한다. 
    -> 500의 경우 
    : 에러 메시지를 메인페이지에 표시한다.

   - レスポンスコードを確認
    -> 200の場合
     : 商品のデータをメインページに表示する。
    -> 404の場合
     : 商品データが存在しないというメッセージをメインページに表示する。
    -> 500の場合
     : エラーメッセージをメインページに表示する。

 

 4) 상품정보 삭제 商品情報削除

  (1) 화면(요청)
   - 상품 상세에서 상품 데이터 삭제 버튼 클릭
   - 파라미터의 유효성 검사
   - 상품번호를 파라미터로 하여 상품 API에 DELETE 리퀘스트를 보낸다. 
   
   - 商品詳細から商品データ削除ボタンを押下。
   - パラメターの有効性検査
   - 商品番号をパラメターにし、商品APIにDELETEリクエストを送る。
   
  (2) API 
   - API에서 리퀘스트를 수신한다. 
   - 파라미터 유효성 검사
   - 상품 데이터를 DB로부터 가져와서 데이터가 있는지 확인한다.
   - 화면으로 응답을 보낸다. 
    -> 상품 데이터가 있는 경우 
     : 응답 코드 200, 상품 데이터를 삭제, 삭제에 성공했다는 메시지를 보낸다.
    -> 상품 데이터가 없는 경우   
     : 응답 코드 404, 상품 데이터가 없다는 메시지를 보낸다.
    -> 예외 / 에러 발생 시
     : 응답 코드 500, 에러 메시지를 보낸다.

   - APIでリクエストを受信する。
   - パラメターの有効性検査
   - 商品データをDBから抽出し、データが存在するかを確認する。
   - 画面にレスポンスを返す。
    -> 商品データがある場合。
    : レスポンスコード200、商品データを削除、削除に成功メッセージを送る。
    -> 商品データが存在しない場合
    : レスポンスコード404、商品データが存在しないというメッセージを送る。
    -> 例外 / エラー
    : レスポンスコード500、エラーメッセージを送る。
 
  (3) 화면(응답) 画面(レスポンス)
   - 응답 코드를 확인 
    -> 200의 경우 
    : 삭제된 상품의 번호를 메인 페이지에 표시한다. 
    -> 404의 경우 
    : 상품이 없다는 메시지를 메인페이지 표시한다. 
    -> 500의 경우 
    : 에러 메시지를 메인페이지에 표시한다.
 
   - レスポンスコード を確認
    -> 200の場合
    : 削除した商品の商品番号をメインページに表示する。
    -> 404の場合
    : 商品が存在しないというメッセージを表示する。
    -> 500の場合
    : エラーメッセージをメインページに表示する。