03.03 국비학원 104일차 (vue↔spring↔jpa 게시판 등록)

* 게시판 등록 페이지 생성

 

[Vue]

views - 등록 페이지

components 로 등록 폼을 가지고 온다.

components - 등록 폼

제목, 작성자, 본문, 등록버튼, 취소버튼을 가진 폼 생성

등록 폼은 초기 데이터를 가지고 있게 설정 하였고, onSubmit() 이벤트가 실행되면 각 title, writer, content 값을 상위 컴포넌트로 보낸다.

/board-register url 에 전송되는 화면

 

 

>> store 기능 분리 (상태 관리 기능 제공)

      - actions.js : 비동기 통신 및 동작을 정의하고 관리 (mutation 트리거)

      - getters.js : 공유되는 상태 값 조회 로직 관리

      - mutation-types.js : type 정의

      - mutations.js : 상태 값을 변경하는 로직 관리 (mutation을 통해서만 state를 변경할 수 있다)

      - states.js : 공통 관리되는 데이터 상태 관리

actions.js

title, content, writer 데이터 값을 spring 에 post 방식으로 보냄 (비동기 통신)

 

 

[Spring]

이제부턴 JPA를 사용하여 DB에 접근할 것임

application.yaml 에 datasource와 jpa 설정 추가

 

 

[JPA란?]

JPA는 자바 애플리케이션에서 관계형 데이터베이스를 사용하는 방식을 정의한 인터페이스이다. 

JDBC API 는 자바 프로그래밍 언어와 다양한 데이터베이스 SQL 또는 테이블 형태의 데이터 사이의 독립적인 연결을 지원하는 표준으로 하나의 자바 응용프로그램만으로 JDBC 드라이버를 제공하는 어떤 종류의 DBMS에도 접근이 가능하다.

 

* 수업에서 사용하는 hibernate 구현체

하이버네이트는 JPA 의 구현체로, 내부적으로 JDBC API를 사용한다. 메소드 호출만으로 쿼리를 수행할 수 있으나, 조작에 한계가 있다는 단점이 있다. 그러나 객체를 불러올 때 연관된 객체 또한 함께 불러와지기 때문에 SQL에 의존적이지 않은 객체 중심의 개발이 가능하다.