devH.log

DTO (Data Transfer Object) VS VO(Value Object)

Wed, 26 Apr 2023 03:44:20 GMT

1. DTO (Data Transfer Object)

DTO는 계층간 데이터를 전달하기 위한 객체이다. 단순히 데이터를 주고받거나 전환하는 용도로 사용하기 때문에 로직을 갖지 않고 Getter/Setter 메소드만 갖는다. 👉 데이터를 옮기는 바구니

2. VO(Value Object)

VO는 도메인에서 한 개 또는 그 이상의 속성들을 묶어서 특정 값을 나타내는 객체이다. 로직을 포함할 수 있으며, 불변성의 보장을 위해 생성자를 사용하여야 한다. 👉 값 그 자체

3. 정리

	DTO	VO
목적	계층간 데이터 전송/전달	값 자체를 표현
동등성	필드값이 같아도 다른 객체	필드값이 같으면 같은 객체
가변성	Setter 존재시 가변, 비 존재시 불가변	불변
로직	Getter/Setter 메소드만 가짐	Getter/Setter외에 메소드를 가질수 있음 / 값 초기화는 생성자를 통해서만 가능하다.

[freeCodeCamp] | 자바스크립트 예제 프로젝트(Counter)

Sun, 02 Apr 2023 12:07:56 GMT

바닐라 자바스크립트 연습 기록 #2

설명

decrease, increase, reset 버튼을 누르면 각각 1씩 감소, 증가, 초기화가 되며 양수일때는 글씨가 초록색이 되고, 음수일때는 빨간색이 된다.

HTML

  Counter
  
  
    
      Counter
      0

CSS

body {
  width: 100%;
  height: 100%;
  background-color: rgb(226, 236, 235);
  display: flex;
  justify-content: center;
  align-items: center;
}
.container {
  width: 400px;
  height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
h1 {
  font-size: 70px;
  margin-bottom: 10px;
}
#number {
  font-size: 70px;
  font-weight: bold;
}
#btn-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
button {
  flex: 1;
  height: 40px;
  background-color: transparent;
  border: 1px solid #000;
  border-radius: 10px;
  cursor: pointer;
}
button:hover,
button:active {
  background-color: #333;
  color: #fff;
}

JS

let container = document.querySelector('#btn-container');
const increaseBtn = container.querySelector('#increase');
const decreaseBtn = container.querySelector('#decrease');
const resetBtn = container.querySelector('#reset');
const number = document.getElementById('number');

increaseBtn.addEventListener('click', function () {
  let count = Number(number.textContent);
  count = count + 1;
  number.textContent = count;
  numberColor(count);
});
decreaseBtn.addEventListener('click', function () {
  let count = Number(number.textContent);
  count = count - 1;
  number.textContent = count;
  numberColor(count);
});
resetBtn.addEventListener('click', function () {
  let count = Number(number.textContent);
  count = 0;
  number.textContent = count;
  numberColor(count);
});

function numberColor(count) {
  if (count < 0) {
    number.style.color = 'red';
  } else if (count > 0) {
    number.style.color = 'green';
  } else {
    number.style.color = 'black';
  }
}

가상머신(Virtual Machine) VS 컨테이너(Container)

Thu, 30 Mar 2023 13:10:32 GMT

가상머신(VM)이란?

물리적 컴퓨팅 환경을 소프트웨어로 구현한 것으로 즉, 컴퓨터 시스템을 에뮬레이션(가상현실화) 하는 소프트웨어 이며, 각 가상머신상에서 운영체제나 응용프로그램을 설치 및 실행하는 것

컨테이너(Container)란?

개별 Software의 실행에 필요한 실행환경을 독립적으로 운용할 수 있도록 기반환경 또는 다른 실행환경과의 간섭을 막고 실행의 독립성을 확보해주는 운영체계 수준의 격리 기술을 말합니다. 컨테이너는 애플리케이션을 실제 구동 환경으로부터 추상화할 수 있는 논리 패키징 메커니즘을 제공하는 것

차이점

가상 머신(VM)은 하드웨어 기반의 여러 게스트 운영 체제로, 하이퍼바이저를 통해 에뮬레이션됩니다. 컨테이너는 애플리케이션 수준 구성이며 커널 하나를 공유하는 여러 가상 환경을 에뮬레이션합니다.

시스템 성능 가상머신을 사용하는 기존 가상화는 각 가상머신마다 운영체제가 있기 때문에 가상머신에 구축된 애플리케이션을 실해할 때 메모리 사용량이 필요이상으로 많아진다. 반면에, 컨테이너는 한 운영체제 환경을 공유하여 사용하기 때문에 메모리 사용량이 상대적으로 적고 빠르다.
유지관리 가상머신은 운영 체제를 업데이트하거나 패치할 경우 기존 컴퓨터를 하나씩 업데이트해야 하고 각 게스트 OS를 개별적으로 패치해야 합니다. 컨테이너의 경우에는 컨테이너 호스트(컨테이너를 호스트하는 컴퓨터)의 운영 체제만 업데이트하면 됩니다. 따라서 유지관리가 매우 간소화됩니다.

보안성 가상머신은 보안적으로 문제가 생겨도 각각의 VM이 분리되어 있기 때문에 서로 피해가 가지 않지만 컨테이너는 보안적으로 문제가 생길 수 있다.

정리

기존의 가상머신보다 컨테이너를 선호하는 이유는? 가상머신은 한 대 마다 자체적인 운영체제, 하드웨어를 구축하여 격리된 방식의 컴퓨팅 환경으로 크기가 커서 메모리 사용이 비효율적이고 느리다. 반면에 컨테이너는 하드웨어에 설치된 커널(운영체제) 하나를 공유하여 애플리케이션 코드, 라이브러리, 바이너리가 패키징된 컨테이너를 실행한다. 따라서 자원들 끼리의 이동성과 유연성이 높고 메모리를 많이 차지하지 않고 실행속도가 빨라 성능이 우수하고 커널 하나를 관리하면 변경사항이 모든 컨테이너에 적용되어 서버를 더 효율적으로 유지관리 할 수 있습니다.

**단, 컨테이너는 커널을 공유하기 때문에, 보안적인 문제가 있다. 물리적으로 격리한 가상머신에 비해서는 보안이 취약 할 수 밖에 없다.

[Jump To SB] | Optional을 사용하는 이유

Mon, 27 Mar 2023 13:08:59 GMT

궁금증

점프투 스프링부트(2-05)를 공부하던중 findById를 통해 데이터를 조회하는 리포지터리의 메서드를 사용하면서 [Optional]은 무엇인가 궁금해졌다. (왜 객체를 저렇게 받는거지..?) 라고 생각했다. 알아보자!

Optional은 왜 사용해야 할까?

Optional은 null 처리를 유연하게 처리하기 위해 사용하는 클래스라고 한다. 즉, NPE 발생을 방지하기 위함이다. *NPE(NullPointerException) 실제 값이 아닌 null을 가지고 있는 객체/변수를 호출할 때 발생하는 예외다.

궁금증 해결

id값을 조회할때 객체가 없을경우(Null)를 방지하고자 Optional 클래스를 사용하여 아래와 같이 isPresent로 null이 아닌지를 확인한 후에 get으로 실제 Question 객체 값을 얻어야 한다.

 @Test
    void testJpa() {
        Optional oq = this.questionRepository.findById(1);
        if(oq.isPresent()) {
            Question q = oq.get();
            assertEquals("sbb가 무엇인가요?", q.getSubject());
        }
    }

[freeCodeCamp] | 자바스크립트 예제 프로젝트(Color Flipper)

Fri, 24 Mar 2023 12:53:47 GMT

바닐라 자바스크립트 연습 기록 #1

설명

버튼을 누르면 랜덤으로 배경색이 바뀌는 Color Flipper

사용개념

• arrays • document.getElementById() • document.querySelector() • addEventListener() • document.body.style.backgroundColor • Math.floor() • Math.random() • array.length

HTML

 Color Flipper
  
  
    
      
        Background Color : purple

CSS

body {
  margin: 0;
}
.container {
  width: 100vw;
  height: 100vh;
  background-color: purple;
  display: flex;
  justify-content: center;
  align-content: center;
}
.contents {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 25px;
}
p {
  padding: 30px 90px;
  font-size: 30px;
  border-radius: 10px;
  background-color: #000;
  font-weight: bold;
  color: white;
}
span {
  text-transform: capitalize;
  color: purple;
}
button {
  padding: 20px 90px;
  font-size: 20px;
  border: 1px solid black;
  border-radius: 10px;
  background-color: transparent;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: all 0.3s linear;
  cursor: pointer;
}
button:hover,
button:active {
  background-color: #333;
  color: white;
}

JS

const background = document.querySelector('.container');
const changeText = document.querySelector('.contents span');
const btn = document.querySelector('.btn');

const colors = [
  { id: 1, name: 'red', color: '#ea052d' },
  { id: 2, name: 'orange', color: '#ea7805' },
  { id: 3, name: 'yellow', color: '#eac805' },
  { id: 4, name: 'green', color: '#a1ea05' },
  { id: 5, name: 'skyblue', color: '#05c1ea' },
  { id: 6, name: 'blue', color: '#0545ea' },
  { id: 7, name: 'violet', color: '#7c05ea' },
  { id: 8, name: 'pink', color: '#ffc0cb' },
  { id: 9, name: 'salmon', color: '#fa8072' },
];

const clickHandler = () => {
  const randomNumber = Math.floor(Math.random() * colors.length);
  background.style.backgroundColor = colors[randomNumber].color;
  changeText.textContent = colors[randomNumber].name;
  changeText.style.color = colors[randomNumber].color;
};

btn.addEventListener('click', clickHandler);