728x90

백견불여일타 JSP& Servlet 책 공부를 마치고 

마지막 장에 MVC패턴에 대한 소개가 나왔다. 그 내용을 정리해보겠다~!

(jsp, servlet 공부하느라 적어놓은 것도 블로그에 올려야겠다!)

 

MVC 패턴(= model 2 방식)이란?

초창기 웹 애플리케이션을 작성하는 방식이 model1 이라고 한다. 

model1은 보여주는 화면단 프레젠테이션 로직과 비즈니스 로직단이 엉켜있는 방식이다. 

 

재사용성과 가독성을 위해 비즈니스 로직을 중심으로 하는 model 2방식이 나왔다.

 

model, view , controller 를 사용하는 패턴을 말한다. 

이 3가지 영역으로 나누고 이들의 결합도를 최소화하는 것이 MVC 패턴의 목표이다.

 

모델은 비즈니스 로직, 즉 데이터베이스와 연동하여 서비스를 동작하기 위한 로직을 말하고 

뷰는 결과를 출력하여 보여주는 화면단

컨트롤러는 모델과 뷰를 연결하고 제어하는 역할을 한다. 

이 책에서는 JSP 가 뷰 역할을 해서 화면에 결과물을 출력했고 

서블릿을 이용해 클라이언트의 요청을 받아 로직을 수행했다.

모델은 데이터베이스와 연동하는 비즈니스 로직을 통해 얻어온 데이트를 저장하는 용도로 사용한다. 

 

MVC 패턴의 동작원리는 다음과 같다. 

 

가장 중요한 것은 컨트롤러의 역할!

프로그램에서 컨트롤러는 요청에 따라 어떤 비즈니스 로직을 행해야하는지 결정해주는 역할을 한다. 

또한 모델을 통해 얻은 결과를 어떤 뷰에 보내서 처리할지도 결정한다. 

 

용어를 정리해보자면,

 

DAO란? Data access object 

데이터 접근 객체. 

즉 데이터베이스를 연결하는 역할을 한다. 

연결하고 연결을 끊고. 데이터베이스에 접속해서 처리할 작업들을 하는 객체이다. 

실습 때는 반복적으로 하는 디비연결, 연결 끊기는 별도의 DBManager 객체를 만들어 호출해 사용했다. (싱글톤으로! - 객체를 한번만 사용해서 기존에 생성된 인스턴스를 통해 연결..)

 

DAO 안에서 sql 쿼리를 날렸다.

 

DTO란? Data Transfer object

데이터 전송 객체 

 

나도 헷갈리는 것이 있는데 실습할 때는 VO 객체를 만들고 구현했기 때문에 

DTO와 VO의 구분이 가질 않았다. 책에서도 DTO라고 적고 VO로 사용한 것 같은데..

 

DTO와 VO의 특성을 알고 

어떤 걸 사용할지 고민하면 된다. (알고 보니 실습에서는 VO라고 하고 setter를 사용한 것을 보니 DTO로 쓴 듯하다.)

 

DTO 와 VO의 차이점

둘다 데이터를 다루지만 그 쓰임새가 다르다. 

 

결론적으로 보면

사용목적은 다르지만 사용하는 방식은 비슷해서 혼돈이 온다.

 

VO는 비즈니스 로직을 위한 데이터 상태를 처리하기 위해 주로 쓰여서

로직을 추가할 수 있고 getter 만 사용해 그 자체 값을 가져오고

( VO는 equals, hashcode를 재정의하여 사용해 객체의 주소값 상관없이 

내용이 같다면 동일하다고 본다. )

 

DTO는 데이터 전송에 주로 쓰이고

로직을 추가할 수 없고 setter, getter 를 쓴다는 차이가 있다.  

 

 

아래 코드를 통해 어떻게 사용하는지 살펴보자

 출처 chatgpt

 

 

VO (Value Object)는 주로 데이터의 상태를 나타내고 비즈니스 도메인의 특정 비즈니스 로직을 위해 사용됩니다. 다음은 DTO 대신 VO를 사용하는 경우의 예시와 상황입니다:

1. 도메인 모델 내부에서 사용하는 데이터: VO는 도메인 모델의 일부로 사용되며, 도메인 모델 내부에서 데이터를 표현하고 비즈니스 로직을 수행하는 데 사용됩니다. 예를 들어, 주문, 제품, 고객, 계좌 등과 같은 비즈니스 엔터티의 상태를 나타내기 위해 VO를 사용할 수 있습니다. 

   public class OrderVO {
       private int orderId;
       private List<ProductVO> products;
       private CustomerVO customer;
   
       // 비즈니스 로직을 포함할 수 있음
       public void calculateTotalPrice() {
           // 제품 가격을 합산하고 총 가격을 계산
       }
   }

2. 데이터 검증 및 유효성 검사:VO는 데이터의 유효성을 검사하고 특정 규칙에 따른 검증을 수행하기 위해 사용될 수 있습니다. VO 객체는 데이터의 일관성을 보장하고 비즈니스 로직에 따라 데이터를 처리하는 데 유용합니다.

 

   public class ProductVO {
       private int productId;
       private String name;
       private double price;
   
       public void validate() {
           // 제품 데이터의 유효성을 검사하고 오류를 처리
       }
   }



3. 비즈니스 룰 적용: VO는 비즈니스 룰 및 규칙을 적용하는 데 사용될 수 있습니다. 예를 들어, 할인, 부가세 계산, 주문 처리 등과 같은 비즈니스 규칙을 VO 내에서 구현할 수 있습니다.

 

   public class OrderVO {
       private int orderId;
       private List<ProductVO> products;
       private CustomerVO customer;
   
       public void applyDiscount() {
           // 할인 규칙을 적용하여 주문 가격을 조정
       }
   }



VO는 주로 비즈니스 도메인에서 데이터의 상태와 관련된 작업을 수행하기 위해 사용됩니다. 이러한 작업은 DTO보다 비즈니스 로직과 데이터 처리에 더 중점을 둔 작업이며, VO는 이를 효율적으로 처리할 수 있는 도구로 사용됩니다.

 

 

DTO (Data Transfer Object)는 주로 데이터 전송과 다른 레이어 간의 데이터 교환을 위해 사용됩니다. 다음은 DTO를 사용하는 몇 가지 주요 상황과 예시입니다:

1. 데이터베이스와 비즈니스 레이어 간 데이터 전송:데이터베이스에서 데이터를 검색하고, 이 데이터를 비즈니스 레이어로 가져올 때 DTO를 사용합니다. DTO는 데이터베이스 스키마와 비즈니스 모델 간의 데이터 구조 차이를 처리하고 데이터를 전달하는 역할을 합니다.

   예시:

   public class ProductDTO {
       private int productId;
       private String name;
       private double price;

       // Getter 및 Setter 메서드
   }



2. 서로 다른 시스템 간 데이터 교환: 웹 서비스나 REST API를 통해 다른 시스템으로 데이터를 전송할 때 DTO를 사용합니다. 이렇게 다른 시스템 간의 통신에서는 데이터를 구조화하고 표준 형식으로 전송하기 위한 목적으로 DTO를 활용합니다.

   예시:

   public class OrderRequestDTO {
       private List<ProductDTO> products;
       private CustomerDTO customer;

       // Getter 및 Setter 메서드
   }



3. 뷰 레이어와 비즈니스 레이어 간 데이터 전송: 웹 애플리케이션에서 사용자 인터페이스와 비즈니스 레이어 사이에서 데이터를 전달할 때 DTO를 사용합니다. DTO는 뷰에서 필요한 데이터를 비즈니스 레이어로 전달하고 그 반대로 비즈니스 로직의 결과를 뷰로 반환하기 위해 사용됩니다.

   예시:

   public class OrderFormDTO {
       private String customerName;
       private List<ProductDTO> selectedProducts;

       // Getter 및 Setter 메서드
   }



4. 데이터 필터링: 뷰에서 데이터베이스로 데이터를 요청할 때, DTO를 사용하여 필요한 필드만 선택적으로 전달하는 방식으로 데이터 필터링을 수행할 수 있습니다.

   예시:
 

   public class ProductRequestDTO {
       private boolean includePrice;
       private boolean includeDescription;

       // Getter 및 Setter 메서드
   }



DTO는 주로 데이터의 전송과 데이터 구조 변환을 간소화하고 효과적으로 관리하기 위해 사용됩니다. 데이터를 읽기, 쓰기, 전송하기 위한 간편한 방법을 제공하며, 데이터의 형식이나 구조가 서로 다른 레이어 간에 호환성을 유지하는 데 도움을 줍니다.

 

 

이 둘을 어떻게 사용할지 더 물어봤다. 



여기서는 간단한 예를 통해 설명하겠습니다:

1. DTO를 사용한 접근:

   - `ProductDTO`를 사용하여 데이터베이스에서 제품 정보를 가져옵니다.
   - `OrderVO`에서 이러한 `ProductDTO`를 사용하여 제품 가격을 가져와서 총 가격을 계산합니다.

   public class OrderVO {
       private List<ProductDTO> products;

       public void calculateTotalPrice() {
           double total = 0;
           for (ProductDTO productDTO : products) {
               // ProductDTO에서 제품 가격을 가져와서 합산
               total += productDTO.getPrice();
           }
           // 총 가격을 설정
           // total 값을 다른 VO 속성에 저장
       }
   }



2. DTO를 사용하지 않는 직접적인 접근:

   - `OrderVO`에서 데이터베이스에 직접 연결하여 제품 정보를 가져와 가격을 계산합니다.

 

   public class OrderVO {
       private List<ProductVO> products;

       public void calculateTotalPrice() {
           double total = 0;
           for (ProductVO productVO : products) {
               // 데이터베이스에 연결하여 제품 가격을 가져와서 합산
               // total 값을 다른 VO 속성에 저장
           }
       }
   }


- DTO (Data Transfer Object): 데이터를 전달하고 다른 레이어 간의 데이터 교환을 목적으로 사용됩니다. 주로 데이터를 구조화하고 전달하기 위한 객체입니다.

- DAO (Data Access Object): 데이터베이스와 상호 작용하여 데이터를 검색, 추가, 수정, 삭제하는 역할을 합니다. 데이터베이스 액세스와 데이터 관리를 위한 객체입니다.

- VO (Value Object):주로 비즈니스 도메인의 상태를 나타내며, 불변하고 비즈니스 로직을 수행하기 위한 객체입니다.

일반적으로 DTO는 DAO에서 데이터베이스에서 가져온 데이터를 비즈니스 레이어로 전달할 때 사용됩니다. 이후 비즈니스 로직은 VO나 다른 비즈니스 객체에서 처리됩니다. VO와 DTO는 각각의 역할과 목적을 갖고 있으며, 이러한 분리된 역할은 코드의 가독성, 유지보수성, 테스트 용이성을 개선하는 데 도움을 줍니다.

 

 

 

 

 

 

 

https://velog.io/@gillog/Entity-DTO-VO-%EB%B0%94%EB%A1%9C-%EC%95%8C%EA%B8%B0

728x90
728x90

Unhandled Runtime Error

Error: Objects are not valid as a React child (found: object with keys {findFirstTransaction}). If you meant to render a collection of children, use an array instead.

 

 

 

const check = () =>{

const { loading, error, data } = useQuery(CHECK_WITHDRAW, {
    variables: {
    
    },
  })


return (
<>{data}</>
)



}

data가 객체여서 뜨는 에러!!!

 

JSON.stringfy(data, undefined, 2)

 

하면 잘뜨는거 확인할 수 있음!

 

usequery는 렌더될 때 바로 실행돼서

버튼 할때만 하는 useLazyquery로 수정해야겠다...

둘의 차이는 자꾸 까먹으니까 정리해라 네네~

 

 

https://velog.io/@leehyunho2001/React-Query%EC%97%90%EC%84%9C-%EB%B2%84%ED%8A%BC-%ED%81%B4%EB%A6%AD%EC%8B%9C%EC%97%90-%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%A5%BC-%EC%9A%94%EC%B2%AD%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95-feat.-useQuery

 

728x90
728x90

axios는

지원하는 브라우저가 더 많고 

에러핸들링이 좋고

자동으로 데이터가 json형태로 되어 넘어간다

Automatic JSON data transformation

As we saw earlier, Axios automatically stringifies the data when sending requests (though you can override the default behavior and define a different transformation mechanism). When using fetch(), however, you’d have to do it manually.

Compare:

// axios
axios.get('https://api.github.com/orgs/axios')
  .then(response => {
    console.log(response.data);
  }, error => {
    console.log(error);
  });

// fetch()
fetch('https://api.github.com/orgs/axios')
  .then(response => response.json())    // one extra step
  .then(data => {
    console.log(data) 
  })
  .catch(error => console.error(error));

fetch는 직접 json화를 해줘야하지만

지원하는 브라우저 문제 등을 충분히  해결할 수 있다.

 

 

결론

Axios는 대부분의 HTTP통신 요구사항을 위해 컴팩트 패키지로 사용하기 쉬운 API를 제공한다.

하지만 fetch()메소드를 사용해서도 Axios 라이브러리의 주요기능을 완벽하게 재현할 수 있다.

는 글

https://blog.logrocket.com/axios-vs-fetch-best-http-requests/

 

Axios vs. fetch(): Which is best for making HTTP requests? - LogRocket Blog

Axios is not always an ideal solution; depending on your needs, there are sometimes better options for making HTTP requests. The Fetch API is one of them.

blog.logrocket.com

 

728x90
728x90

스택

후입선출(가장 늦게 넣은 데이터가 가장 빨리 나가는 것)

객체들의 집합소, 데이터를 기록하는 구조

비어있는 스택에서 원소 추출하려하면 stact underflow

스택 넘치는데 스택 추가하려고 하면 stack over

집합에서 가장 오랜 시간 존재했던 원소를 삭제

선입선출( 가장 먼저 넣은 데이터가 가장 빨리 나간다)

 

프로그램이 실행되기 위해서는 먼저 프로그램이 메모리에 로드(load)되어야함.

프로그램에서 사용되는 변수들을 저장할 메모리도 필요하다.

프로그램이 운영체제로부터 할당받는 대표적인 메모리 공간은 4가지

1. 코드code 영역->실행할 프로그램의 코드저장되는 영역,cpu가 여기서 명령어 가져가서 처리함

2. 데이터data 영역->프로그램의 전역변수와 정적 변수가 저장되는 영역, 프로그램 시작과 함께 할당되고 종료되면 소멸

3. 스택stack 영역->함수의 호출과 관계되는 지역변수와 매개변수가 저장되는 곳,함수호출시 할당되고 종료시 소멸

4. 힙heap 영역->사용자가 직접 관리할 수 있는,그래야하는 메모리 영역,사용자에 의해 메모리공간이 동적할당되고 해제됨. 메모리의 낮은 주소에서 높은 주소의 방향으로 할당됨.

 

 

--수업때 얘기는 밑에--

 

 

스택은 컴파일러가 돌기 전 단계.

힙은 구동된 다음에 메모리 반환 해제가 됨

스택 영역에 메모리 선언하면 해제도 못함

 

함수내부는 stack

헤더파일은 heap

 

선언할 때 함수에 많이 하면 터진다..스택이라서..

헤더에 해라..

 

 

 

 

출처

https://hwan1402.tistory.com/110

 

스택(Stack)과 힙(Heap) 차이점

메모리 구조 프로그램이 실행되기 위해서는 먼저 프로그램이 메모리에 로드(load)되어야 합니다. 또한, 프로그램에서 사용되는 변수들을 저장할 메모리도 필요합니다. 따라서 컴퓨터의 운영체제

hwan1402.tistory.com

 

728x90

+ Recent posts