Vue.js 3 프로젝트 세팅, VO / Entity / DTO 차이점

---

Vue.js 3 프로젝트 설정 및 세팅

 

• vue 설치
  • npm install vue

 

• node.js 설치
  • npm install -g @vue/cli
  • npm을 사용하기 위해 node 설치가 필수적이다.
  • pc 환경 전역에 vue cli를 설치하는 명령이다.

 

 

• vue  설치 확인
  • vue --version을 통해 확인
  • 이 때, power shell 을 이용하면 vue 명령어를 인식하지 못한다. 따라서, cmd로 작업한다. 
  • (vue  명령이 시스템 변수에 등록되어 있지 않기 때문이다. power shell과 cmd 각각에 대한 환경 변수는 따로 설정한다.) 
• vue 2, 3 중 선택한다. 

VS code 의 cmd창 화면

 

 

• 백엔드와 겹치지 않도록 port 번호를 설정한다. 
  • vue.config.js 파일

<hide/>
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 8081
  }
})

 

 

• npm run local을 실행해서 확인
  
  • vue 프로젝트 세팅 완료

 

 

---

View - Controller 간 데이터 바인딩

• 어떤 목록을 검색한다고 가정하자. 여러 개의 검색 조건이 있다. 
• 이때 컨트롤러 메서드 안에 데이터를 어떻게 바인딩하면 좋을까?
• 처음에 @Entity가 붙은 클래스를 그대로 썼으나
  • long이나 LocalDate 같은 필드는 바인딩되지 않아서 문제가 생겼다. 
  • (프론트에서 백엔드에 보낸 날짜 데이터와 가격 데이터는URL에 이어붙인 query string 형태이기 때문에 타입이 String이 아닌 필드를 String으로 설정해준 클래스가 필요하다. )
  • 그래서 @Entity는 붙지 않으면서 모든 필드가 string 인 DTO 클래스를 새로 만들었다. 

 

• DTO(Data transfer object
  • DTO는 바구니 역할을 하기 위해 원칙적으로 @Getter, @Setter 두 개만 붙이도록 한다. 
  • cf) 적어도 @getter와 @builder  2개는 있어야 데이터가 바인딩된다. 

<hide/>
@Getter
@Setter
public class UserDto {
    private String userId;
    private String adminYn;
    private String loginId;
    private String oauthProvider;
    private String oauthProviderId;
    private String password;
    private String emailAuthYn;
    private String userNm;
    private String emailAuthKey;
    private String userRegDt;
    private String userAmdDt;
    private String phone;
    private String email;
    private String userStatus;
}

 

• 컨트롤러
  • 다음과 같이 
  • 매개변수로 위에서 생성한 Dto 클래스를 넣으면 dto의 필드 하나하나가 query string으로 전달된다. 

<hide/>
@GetMapping("/api/user")
public ResponseEntity<List<User>> getUserList(UserDto userDto) {
    return new ResponseEntity<>(userService.getUserList(userDto), HttpStatus.OK);
}

 

---

DTO(Data Transfer Object) vs VO (Value Object)  vs Entity

 

DTO: 계층 간 데이터 전달 위한 객체이다. 

• View - Controller 간 데이터를 전달할 때 주로 쓰인다. 
• @Getter, @Setter 두 개만 필요하다. 오로지 전달 용도이기 때문이다. 바구니같은 역할이라고 보면 된다.
• 이 외의 비즈니스 로직은 포함하지 않는다. 

 

 

VO: 값 자체를 표현하는 객체이다. 

• 주솟값이 다르더라고 값이 같으면 동일함.
• getter()와 비즈니스 로직을 포함 가능하다. 
• 값 자체를 나타내야하므로 setter()를 쓰지 않는다. (불변 객체)
• 값 비교를 위해서 equals(), hashcode() 오버라이드해야한다. 
  • 오버라이드하지 않으면 동일한 값을 가지는 두 개의 vo 인스턴스에 대해 equals()로 비교했을 때 다르다는 에러가 난다. 
• 목적: 데이터의 값 그 자체를 다루거나 전달하기 위해 사용한다. 

 

 

Entity: 실제 DB 테이블과 매핑되는 핵심 클래스이다. 

• 테이블 생성의 기준이 되는 클래스
• 이를 기준으로 테이블이 생성되고 스키마가 변경된다. 
• 따라서 이를 요청이나 응답값을 전달하는 클래스로 사용하지 않도록 한다. 
• 비즈니스 로직을 포함할 수 있다. 
• 목적: 데이터의 영속성과 라이프 사이클 관리

• 결론: Entity는 데이터 수정, 삭제, 저장, 조회같은 로직을 수행할 때에만  repository에 직접 접근해야만 하는 상황에서 사용하고 데이터가 필요한 다른 경우는 VO를 적용하는 게 적합하다. 

 

 

참고) https://tecoble.techcourse.co.kr/post/2021-05-16-dto-vs-vo-vs-entity/

GPT

---

화면 구성 계획

• 로그인 전 화면 
  • 강의 목록
  • 로그인 버튼  
• 로그인 후 화면
  • MyPage 버튼 추가 내 정보 관리
  • 내 강의
    • 강의 목록
• 관리자 화면
  • 회원 관리
  • 강의 관리
  • 메뉴 관리 (?)

 

---

To do list

• 로그인: 스프링 시큐리티, JWT 세팅
• 유효성 검증 로직 만들기
• 프론트 개발
• 프론트 백엔드 연결: CORS