유혁스쿨

SBOM 명세 개념 및 Maven(Spring), NPM(Node) 작업 가이드

유혁스쿨 — Mon, 26 Jan 2026 14:06:49 +0900

SBOM 이란?

소프트웨어 자재 명세서 Software Bill of Materials의 약자로, 소프트웨어를 구성하는 오픈소스, 라이브러리, 모듈 등 제 3자 구성요소와 종속성 버전, 라이브러리 정보를 기계 판독 가능한 형식으로 나열한 목록을 말한다.

식품 영양 성분 표기처럼 소프트웨어 공급망의 투명성을 확보하고 보안 취약점을 신속히 탐지/대응하기 위한 필수 기술이다.

주로 개발, 빌드, 배포 등 다양한 단계에서 생성되어 보안 위험을 관리하는 데 활용된다.

SBOM 작성 가이드

Maven

Maven의 경우 CycloneDX 플러그인을 활용하여 SBOM을 생성한다.

pom.xml에 정의된 의존성을 포함하여 생성할 수 있다.

1.CycloneDX 설치

https://github.com/CycloneDX/cyclonedx-cli/releases

2. cyclonedx plugin 추가

<dependencies>
<!-- 생략 -->
</dependencies>
<build>
    <resources>
    <!-- 생략 -->
    </resources>
    <plugins>
        <plugin>
            <groupId>org.cyclonedx</groupId>
            <artifactId>cyclonedx-maven-plugin</artifactId>
            <version>2.7.10</version>
            <executions>
                <execution>
                    <phase>package</phase>
                    <goals>
                        <goal>makeAggregateBom</goal>
                    </goals>
                </execution>
            </executions>
            <configuration>
                <includeCompileScope>true</includeCompileScope>
                <includeRuntimeScope>true</includeRuntimeScope>
                <includeProvidedScope>false</includeProvidedScope>
                <includeTestScope>false</includeTestScope>
                <includeSystemScope>false</includeSystemScope>
                <outputFormat>json</outputFormat>
                <outputName>application</outputName>
            </configuration>
        </plugin>
    </plugins>

3. mvn 명령 실행

mvn clean cyclonedx:makeAggregateBom -U

4. target 디렉토리 application.json 생성 확인

정상적으로 작업이 완료되었다면 해당 경로에 아래 사진과 같이 파일이 생성된다.

5. spdx json 변환

target 디렉토리에 설치한 cyclonedx의 exe 파일을 구성하고 아래 명령을 실행한다.

(PowerShell로 실행)

.\cyclonedx-win-x64.exe convert `
  --input-file .\application.json `
  --output-file .\application.spdx32.json `
  --output-format spdxjson

모든 작업이 정상적으로 완료되었다면 application.spdx32 이름의 json 파일이 생성된 것을 확인할 수 있다.

NPM

NPM은 SPDX 플러그인을 활용하여 SBOM을 생성한다.

1. npm 버전 확인

npm 9 버전 이상 필요하다.

node 버전과 다르니 주의해야한다.

npm -v

2. package-lock.json 생성

가장 최신 package.json 기준으로 해당 lock 파일이 필요하다.

최신이 아닐 수 있으니 기존 package-lock.json 파일은 제거하고 파일만 생성하도록 한다.

npm install --package-lock-only --ignore-scripts

3. SPDX 2.3 생성

npm sbom --sbom-format=spdx > sbom.spdx.json

4. 파일 생성 확인 및 내용 확인

sbom.spdx.json 파일이 생성된다.

만약 npm 버전이 올바르지 않다면 아래와 같은 내용으로 채워진다.

초록색 마킹을 보면 npm 버전이 6.10.3임을 알려주고 있다.

[Tibero] LISTAGG(DISTINCT 컬럼명, "") 오라클 호환 대응

유혁스쿨 — Mon, 24 Nov 2025 23:55:34 +0900

상황

오라클로 개발되어 있는 상태에서 데이터베이스 Vendor만 티베로로 변경하였을때 LISTAGG(DISTINCT ~ )와 같이 LISTAGG 함수 내에 DISTINCT 키워드를 사용할 경우 티베로에서는 오류가 발생한다.

(지원하지 않는 문법)

티베로에서는 서브쿼리를 통해 전처리 DISTINCT 중복제거를 한 뒤, 해당 데이터를 기준으로 XMLAGG 함수를 활용해야한다.

CREATE TABLE TEST_LISTAGG (
    ID NUMBER,
    KEYWORD VARCHAR2(50)
);

INSERT INTO TEST_LISTAGG VALUES (1, 'apple');
INSERT INTO TEST_LISTAGG VALUES (1, 'banana');
INSERT INTO TEST_LISTAGG VALUES (1, 'apple');
INSERT INTO TEST_LISTAGG VALUES (1, 'cherry');
INSERT INTO TEST_LISTAGG VALUES (2, 'banana');
INSERT INTO TEST_LISTAGG VALUES (2, 'banana');
INSERT INTO TEST_LISTAGG VALUES (2, 'apple');
INSERT INTO TEST_LISTAGG VALUES (2, 'date');

WITH DISTINCT_KEYWORD AS (
    SELECT DISTINCT ID, KEYWORD
    FROM TEST_LISTAGG
)
SELECT
    tl.ID,
    LISTAGG(DISTINCT KEYWORD, ',') WITHIN GROUP (ORDER BY KEYWORD) AS LISTAGG_KEYWORD,
    (
        SELECT RTRIM(
                   XMLCAST(
                       XMLAGG(XMLELEMENT(ITEM, DK.KEYWORD || ',') ORDER BY DK.KEYWORD)
                       AS VARCHAR2(4000)
                   ), ','
               )
        FROM DISTINCT_KEYWORD DK
        WHERE DK.ID = tl.ID
    ) AS XMLAGG_KEYWORD
FROM TEST_LISTAGG tl
GROUP BY tl.ID
ORDER BY tl.ID;

오라클에서 실행해보면 LISTAGG_KEYWORD와 XMLAGG_KEYWORD 두 결과가 동일하게 나온다.

그러나 위와같은 방식은, Main 쿼리에 Where나 Group By에 의해 많은 조건이 들어갈 경우 서브쿼리에도 동일하게 적용해야하므로, 쿼리가 매우 길어지고 복잡해진다.

가장 효율적인 방법은 DISTINCT 키워드를 제거하고, 백엔드에서 컬렉션 등을 활용하여 중복을 제거하는 방법이다.

[Spring] CORS: Security 설정 없이 Filter를 통한 Allow

유혁스쿨 — Mon, 24 Nov 2025 23:35:44 +0900

상황

web.xml에 아래 코드와 같이 HttpSessionEventPublisher만 등록하여 Security의 보안 기능은 활성화 하지 않고,
단순히 HttpSession(서블릿 세션)을 Spring의 ApplicationContext로 전파하는 용도로만 사용하고 있다.
(Session의 LifeCycle(생성/소멸) 이벤트를 Spring 빈에서 감지)

<listener>
  <listener-class>org.springframework.security.web.session.HttpSessionEventPublisher</listener-class>
</listener>

SecurityConfig 파일을 만든다고 해도 쉽게 CORS 설정을 할 수 없는 경우가 있다.

이 경우 Filter를 통해 CORS 설정이 가능하다.

CorsFilter 구현

CORS 설정을 위한 Filter 클래스를 구현한다.

@Component
public class CorsFilter implements Filter {

 @Override
 public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
     HttpServletRequest request = (HttpServletRequest) req;
     HttpServletResponse response = (HttpServletResponse) res;
     response.setHeader("Access-Control-Allow-Origin", "http://localhost:8080");
     response.setHeader("Access-Control-Allow-Credentials", "true");
     response.setHeader("Access-Control-Allow-Methods","*");
     response.setHeader("Access-Control-Max-Age", "3600");
     response.setHeader("Access-Control-Allow-Headers",
             "Origin, X-Requested-With, Content-Type, Accept, Authorization");
     chain.doFilter(req, res);
 }
}

web.xml에 Filter 클래스를 등록해준다.

<filter>
<filter-name>CORS</filter-name>
 <filter-class>com.패키지.CorsFilter</filter-class>
</filter>

예외 오류

만약 아래와 같은 오류가 발생했다면, origin 즉, 요청자 측 url이 서버에 허용되지 않아 CORS 오류가 발생한것이다.

Access to XMLHttpRequest at 'http://localhost:8888/context/url' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the request resource.

이 경우 모든 origin(요청자)와 모든 headers를 열어주면 된다.

Allow 적용 코드

response.setHeader("Access-Control-Allow-Origin", "http://localhost:8080");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods","*");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers",
                  "Origin, X-Requested-With, Content-Type, Accept, Authorization");
/* 모든 Origin, Headers 허용 */
response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
response.setHeader("Access-Control-Allow-Headers", request.getHeader("Access-Control-Request-Headers"));
chain.doFilter(req, res);

해당 설정은 중복될 수 없어 최종 값으로 덮어씌워진다.
(Access-Control-Allow-Origin을 "*"과 같이 와일드카드로 적용할 수 있지만, 이 경우 Access-Control-Allow-Credentials 설정이 true와 함께 쓸 수 없다.
자격 증명 즉, 쿠키, 인증헤더 등을 모든 도메인에 허용하는 것은 보안 위험이 있기 때문에 브라우저 규칙에 의해 브라우저가 보안상 요청을 차단한다.)

환경변수를 통한 조건부 적용

Tomcat의 환경변수를 통해 프로필 정보를 읽어들여 설정해준다.

@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class CorsFilter implements Filter {

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "http://localhost:9999");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods","*");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers",
                "Origin, X-Requested-With, Content-Type, Accept, Authorization");

        String property = System.getProperty("spring.profiles.active");
        if (property != null && property.equals("local")) { /* VM Option: -Dspring.profiles.active=local */
            response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
            response.setHeader("Access-Control-Allow-Headers", request.getHeader("Access-Control-Request-Headers"));
        }

        chain.doFilter(req, res);
    }
}

Apache Tomcat 특정 버전 다운로드

유혁스쿨 — Thu, 30 Oct 2025 10:15:52 +0900

Apache 공식 사이트에는 현재 최신 안정 버전만 메인 다운로드 페이지에 노출되고 있으며, 과거 버전 혹은 특정 버전은 Archive 저장소 형태로 제공되고 있다.

1. 공식 다운로드 페이지 접속

https://tomcat.apache.org/

2. 좌측 Download에서 원하는 Tomcat 메이저 버전을 선택

우측 Quick Navigation 버전 확인 후 원하는 버전인지 확인

3. 좌측 Download에서 Archives 선택

4. 페이지에서 원하는 버전 선택

https://archive.apache.org/dist/tomcat/

원하는 메이저 버전에 해당하는 tomcat 디렉토리 선택
원하는 마이너 혹은 패치버전에 해당하는 디렉토리 선택
bin 디렉토리 선택
exe 확장자 파일 혹은 tar.gz 확장자 파일 선택(다운로드)

[MySQL/Oracle] TIMESTAMP 타입에 대한 소요 시간(정수) 계산 - 이슈트래킹

유혁스쿨 — Sat, 16 Aug 2025 01:04:42 +0900

실무 사례

운영 중인 시스템에서 배치 작업 실행 로그를 분석하다가, 시작 시간(start_time)과 종료 시간(end_time)을 이용해 총 소요 시간(초 단위)을 계산해야 하는 일이 있었다.

MySQL의 경우 TIMESTAMPDIFF를 사용하여 간단하게 해결하였으나, 오라클의 경우 해당 함수 지원이 되지 않아 단순 숫자 연산으로 처리하였는데, 이 경우 날짜 차이 계산이 정확하지 않은 이슈가 있었다.

예시로 다음과 같은 테이블과 데이터를 준비한다.

-- 샘플 테이블
CREATE TABLE JOB_EXECUTION_LOG (
    job_id       INT,
    start_time   TIMESTAMP,
    end_time     TIMESTAMP
);

INSERT INTO JOB_EXECUTION_LOG VALUES
(1, '2025-08-15 10:00:00', '2025-08-15 10:05:30'),
(2, '2025-08-15 23:59:50', '2025-08-16 00:00:10');

MYSQL

MySQL TIMESTAMPDIFF 사용법

TIMESTAMPDIFF(unit, datetime_expr1, datetime_expr2)

unit 값	설명	예시
SECOND	초 차이	330
MINUTE	분 차이	5
HOUR	시간 차이	1
DAY	일 차이	2

MySQL TIMESTAMPDIFF 적용 쿼리

SELECT TIMESTAMPDIFF(SECOND, start_time, end_time) AS elapsed_seconds
FROM JOB_EXECUTION_LOG
LIMIT 1;

오라클

오라클의 문제 사례

SELECT TO_NUMBER(TO_NUMBER(TO_CHAR(end_time, 'YYYYMMDDHH24MISS'))
       - TO_NUMBER(TO_CHAR(start_time, 'YYYYMMDDHH24MISS')))
FROM JOB_EXECUTION_LOG
WHERE ROWNUM <= 1;

TO_CHAR로 문자열 변환 후 단순 숫자 차를 계산
20250815235950 - 20250816000010 같이 날짜 형식 숫자를 빼면 일자·월·년 변화가 반영되지 않고 단순 자리수 차이만 계산됨
하루를 넘어가는 경우, 음수 또는 엉뚱한 값이 나옴

DATE로 CAST해야 하는 이유 (Oracle)

Oracle의 TIMESTAMP는 날짜 + 나노초 단위까지 저장됨
TIMESTAMP끼리 뺄셈을 바로 하면 INTERVAL 타입이 반환되는데, 이를 숫자로 바로 연산하면 복잡해짐
DATE 타입으로 캐스팅하면 소수 형태의 일(day) 값으로 단순화되어, 일/시/분/초 단위 계산이 쉬워짐
특히 배치 실행 시간 계산처럼 초 단위 정확도가 필요한 경우, (DATE 차이) × 86400 방식이 가장 간단하고 안정적임

오라클 올바른 방식

SELECT (CAST(end_time AS DATE) - CAST(start_time AS DATE)) * 86400 AS elapsed_seconds
FROM JOB_EXECUTION_LOG
WHERE ROWNUM <= 1;

CAST(... AS DATE) : TIMESTAMP → DATE 변환 (시간까지 포함됨)
Oracle에서 DATE 타입끼리 뺄셈 시, 결과는 일(day) 단위의 소수로 반환됨
1일 = 24시간 × 60분 × 60초 = 86400초 이므로, 이를 곱해 초 단위로 변환

예시 결과

job_id	start_time	end_time	elapsed_seconds
1	2025-08-15 10:00:00	2025-08-15 10:05:30	330
2	2025-08-15 23:59:50	2025-08-16 00:00:10	20

[타입스크립트] React, Vue 등 FrontEnd에서 Domain 성격의 State를 Model(DTO) 클래스로 관리해보기

유혁스쿨 — Sun, 16 Feb 2025 20:19:27 +0900

FrontEnd에서 Domain 성격의 State를 Model(DTO) 클래스로 관리하기

JavaScript에서 Runtime시에만 발생되는 오류에 대한 해결책으로 Compile시점에 오류를 미리 잡을 수 있도록 TypeScript 문법이 탄생했다.

FrontEnd 뷰 템플릿을 사용하며 여러 의문이 들었다.

FrontEnd Framework인 VueJS나 ReactJS Library 에서는 왜 DTO를 따로 쓰지 않는것일까?

TypeScript 뿐만 아니라 제대로 관리하려면 자바스크립트에서 최신으로 지원하는 클래스 문법도 사용해야 하는것 아닐까?

자바스크립트에서 신버전에 클래스 문법을 괜히 추가해서 제공해주는것이 아닐텐데?

진짜 제대로 관리할거면, 타입스크립트 타입 뿐만 아니라 도메인 성격을 띄우는 Object 타입의 State값들도 자바처럼 클래스로 관리 할 수 있도록 하는게 맞지않을까?

자바를 따라 객체를 관리하는것도, 재사용성 면에서는 장점이 있을거라 생각이 들었고 괜한 고집이 생겼다.

물론 FrontEnd는 BackEnd API, 디자인, 기획 등등 많은 범위에서 잦은 변경에 노출된다.

이 때문에 타입스크립트만을 사용하는것으로 타협을 한것은 아닐까 생각이 든다.

그래도 구현 해볼래!

Model로 관리할 DTO 클래스에 대한 타입 인터페이스를 선언해준다.

/**
 * 도메인 성격이 강한 객체 타입 인터페이스 정의
 * Person.interface.ts파일로 관리
 */
export interface Person {
  name: string;
  age: number;
  getName(): string;
  setName(value: string): void;
  getAge(): number;
  setAge(value: number): void;
}

인터페이스를 실제로 구현할 구현체 DTO 클래스를 선언한다.

멤버에 pravte 접근제한자를 적용한 뒤 getter setter를 선언함으로써 캡슐화를 적용한다

/**
 * 도메인 성격이 강한 객체 클래스 정의
 * PersonDTO.class.ts파일로 관리
 */
import { Person } from './Person.interface';
export class PersonDTO implements Person{
  private _name: string; // _ prefix는 private 변수, 외부에서 접근하지 않음
  private _age: number; // _ prefix는 private 변수, 외부에서 접근하지 않음

  constructor(name: string = "", age: number = 0) {
    this._name = name;
    this._age = age;
  }

  getName(): string {
    return this._name;
  }

  setName(value: string): void {
    this._name = value;
  }

  getAge(): number {
    return this._age;
  }

  setAge(value: number): void {
    this._age = value;
  }
}

React

리액트의 경우 state의 변경을 감지 하기 위해서는 `새로운 객체`를 만들어서 변경된 필드에 대한 초기화를 진행하고 state에 set을 해줘야한다.

DTO로 관리되는 PersonDTO 객체는 private 접근제한자를 통해 캡슐화 되어있기 때문에 필드에 직접 접근할 수 없다.

따라서 new 인스턴스로 새로운 인스턴스를 생성하고, setter getter를 통해 필드에 접근하여 값을 초기화 해 준다.

JSX에서는 getter를 통해 접근한다.

/**
 * 컴포넌트
 */
import { Person } from './Person.interface';
import { PersonDTO } from './PersonDTO.class';
import { useState, useEffect } from 'react';


export default function App() {

  const [person, setPerson] = useState<Person>(new PersonDTO("이름", 30));
  
  const onChangeName = (e: React.ChangeEvent<HTMLInputElement>) => {
    const updatePerson = new PersonDTO(); // 새로운 참조 인스턴스 객체 생성
    updatePerson.setName(e.target.value); // Name만 직접 수정
    updatePerson.setAge(person.getAge()); // Age는 기존값 그대로 세팅
    setPerson(updatePerson); // 새로운 인스턴스객체로 초기화
  };
  
  const onChangeAge = (e: React.ChangeEvent<HTMLInputElement>) => {
    const updatePerson = new PersonDTO(); // 새로운 참조 인스턴스 객체 생성
    updatePerson.setAge(e.target.value); // Age만 직접 수정
    updatePerson.setName(person.getName()); // Name은 기존값 그대로 세팅
    setPerson(updatePerson); // 새로운 인스턴스객체로 초기화
  };
  
  useEffect(()=> {
    console.log("person 객체 변경되었습니다.")
  }, [person])
  
  return (
	<div>
      <div><p>이름: { person.getName() }</p></div>
      <div><p>나이: { person.getAge() }</p></div>
      <div>이름 입력: <input type="text" value={person.getName()} onChange={onChangeName}/></div>
      <div>나이 입력: <input type="text" value={person.getAge()} onChange={onChangeAge}/></div>
    </div>
  )
}

REACT 전체 테스트용 코드

import { useState, useEffect } from 'react';

interface Person {
  name: string;
  age: number;
  getName(): string;
  setName(value: string): void;
  getAge(): number;
  setAge(value: number): void;
}

class PersonDTO implements Person{
  private _name: string; // _ prefix는 private 변수, 외부에서 접근하지 않음
  private _age: number; // _ prefix는 private 변수, 외부에서 접근하지 않음

  constructor(name: string = "", age: number = 0) {
    this._name = name;
    this._age = age;
  }

  getName(): string {
    return this._name;
  }

  setName(value: string): void {
    this._name = value;
  }

  getAge(): number {
    return this._age;
  }

  setAge(value: number): void {
    this._age = value;
  }
}

export default function App() {

  const [person, setPerson] = useState<Person>(new PersonDTO("이름", 30));
  
  const onChangeName = (e: React.ChangeEvent<HTMLInputElement>) => {
    const updatePerson = new PersonDTO(); // 새로운 참조 인스턴스 객체 생성
    updatePerson.setName(e.target.value); // Name만 직접 수정
    updatePerson.setAge(person.getAge()); // Age는 기존값 그대로 세팅
    setPerson(updatePerson); // 새로운 인스턴스객체로 초기화
  };
  
  const onChangeAge = (e: React.ChangeEvent<HTMLInputElement>) => {
    const updatePerson = new PersonDTO(); // 새로운 참조 인스턴스 객체 생성
    updatePerson.setAge(e.target.value); // Age만 직접 수정
    updatePerson.setName(person.getName()); // Name은 기존값 그대로 세팅
    setPerson(updatePerson); // 새로운 인스턴스객체로 초기화
  };
  
  useEffect(()=> {
    console.log("person 객체 변경되었습니다.")
  }, [person])
  
  return (
	<div>
      <div><p>이름: { person.getName() }</p></div>
      <div><p>나이: { person.getAge() }</p></div>
      <div>이름 입력: <input type="text" value={person.getName()} onChange={onChangeName}/></div>
      <div>나이 입력: <input type="text" value={person.getAge()} onChange={onChangeAge}/></div>
    </div>
  )
}

Vue2 - OptionsAPI

vue의 경우에도 private 접근레벨이기 때문에, template영역에서 직접 접근할 수 없다.

react와 마찬가지로 해당 DTO 클래스의 getter로 접근하여 보간법을 통해 값을 바인딩해야한다.

그러나 v-model에도 수정하기위한 필드를 getter로 접근하여 수정하는것은 불가능하다.

(@Input과 setter를 통해 v-model 대신 디테일하게 코드를 구성할경우에는 가능)

따라서 v-model까지 고려한다면 computed를 통해 get과 set을 구현함으로써 객체를 직접 접근하지 않고,

한번 wrapping함으로써 객체의 값도 초기화 하고, 실제 출력하는 값은 computed를 통해 접근하는 원리로 사용하면 문제가 해결된다.

<template>
  <div>
    <p>이름: {{ personName }}</p> <!-- computed의 get으로 접근 -->
    <p>나이: {{ personAge }}</p> <!-- computed의 get으로 접근 -->
    <div>이름 입력: <input type="text" v-model="personName"/></div> <!-- computed의 set으로 접근 -->
    <div>나이 입력: <input type="text" v-model="personAge"/></div> <!-- computed의 set으로 접근 -->
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import { PersonDTO } from './PersonDTO.class';
import { Person } from './Person.interface';

export default {
  data() {
    return {
      // PersonDTO 객체로 초기화
      person: new PersonDTO("John", 30) as Person,
    };
  },
  computed: {
    personName: {
      get(): string {
        return this.person.getName();
      },
      set(value: string) {
        this.person.setName(value);
      },
    },
    personAge: {
      get(): number {
        return this.person.getAge();
      },
      set(value: number) {
        this.person.setAge(value);
      },
    },
  },
};
</script>

전체 테스트용 코드

<template>
  <div>
    <p>이름: {{ personName }}</p> <!-- computed의 get으로 접근 -->
    <p>나이: {{ personAge }}</p> <!-- computed의 get으로 접근 -->
    <div>이름 입력: <input type="text" v-model="personName" /></div> <!-- computed의 set으로 접근 -->
    <div>나이 입력: <input type="text" v-model="personAge" /></div> <!-- computed의 set으로 접근 -->
  </div>
</template>
<script lang="ts">
import Vue from "vue";

interface Person {
  name: string;
  age: number;
  getName(): string;
  setName(value: string): void;
  getAge(): number;
  setAge(value: number): void;
}

class PersonDTO implements Person {
  private _name: string; // _ prefix는 private 변수, 외부에서 접근하지 않음
  private _age: number; // _ prefix는 private 변수, 외부에서 접근하지 않음

  constructor(name: string = "", age: number = 0) {
    this._name = name;
    this._age = age;
  }

  getName(): string {
    return this._name;
  }

  setName(value: string): void {
    this._name = value;
  }

  getAge(): number {
    return this._age;
  }

  setAge(value: number): void {
    this._age = value;
  }
}

// Vue.extend 방식을 사용하여 컴포넌트 정의
export default {
  data() {
    return {
      // PersonDTO 객체로 초기화
      person: new PersonDTO("John", 30) as Person,
    };
  },
  computed: {
    personName: {
      get(): string {
        return this.person.getName();
      },
      set(value: string) {
        this.person.setName(value);
      },
    },
    personAge: {
      get(): number {
        return this.person.getAge();
      },
      set(value: number) {
        this.person.setAge(value);
      },
    },
  },
};
</script>

Vue3 - CompositionAPI (SETUP)

vue3도 vue2와 똑같이 computed를 사용해야 한다.

<template>
  <div>
    <p>이름: {{ personName }}</p> <!-- computed의 get으로 접근 -->
    <p>나이: {{ personAge }}</p> <!-- computed의 get으로 접근 -->
    <div>이름 입력: <input type="text" v-model="personName"/></div> <!-- computed의 set으로 접근 -->
    <div>나이 입력: <input type="text" v-model="personAge"/></div> <!-- computed의 set으로 접근 -->
  </div>
</template>

<script setup lang="ts">
import { reactive, computed } from "vue";

import { Person } from "./Person.interface";
import { PersonDTO } from "./PersonDTO.class";

const person = reactive<Person>(new PersonDTO("John", 30));

// computed를 사용하여 캡슐화된 값에 접근
const personName = computed({
  get: () => {
    return person.getName()
  },
  set: (value: string) => {
    person.setName(value)
  }
});

const personAge = computed({
  get: () => {
    return person.getAge()
  },
  set: (value: number) => {
    person.setAge(value)
  }
});
</script>

전체 테스트용 코드

<template>
  <div>
    <p>이름: {{ personName }}</p> <!-- computed의 get으로 접근 -->
    <p>나이: {{ personAge }}</p> <!-- computed의 get으로 접근 -->
    <div>이름 입력: <input type="text" v-model="personName"/></div> <!-- computed의 set으로 접근 -->
    <div>나이 입력: <input type="text" v-model="personAge"/></div> <!-- computed의 set으로 접근 -->
  </div>
</template>
<script setup lang="ts">
import { reactive, computed } from "vue";

interface Person {
  name: string;
  age: number;
  getName(): string;
  setName(value: string): void;
  getAge(): number;
  setAge(value: number): void;
}
class PersonDTO implements Person{
  private _name: string; // _ prefix는 private 변수, 외부에서 접근하지 않음
  private _age: number; // _ prefix는 private 변수, 외부에서 접근하지 않음

  constructor(name: string = "", age: number = 0) {
    this._name = name;
    this._age = age;
  }

  getName(): string {
    return this._name;
  }

  setName(value: string): void {
    this._name = value;
  }

  getAge(): number {
    return this._age;
  }

  setAge(value: number): void {
    this._age = value;
  }
}

const person = reactive<Person>(new PersonDTO("John", 30));

// computed를 사용하여 캡슐화된 값에 접근
const personName = computed({
  get: (): string => {
    return person.getName()
  },
  set: (value: string) => {
    person.setName(value)
  }
});

const personAge = computed({
  get: () => {
    return person.getAge()
  },
  set: (value: number) => {
    person.setAge(value)
  }
});
</script>

직접 코드로 구현해보고 느낀점은, 이러하다.
각 컴포넌트의 State 값들은 UI중심적이기에 DTO처럼 모델이 강제된다면 DTO와 UI 간의 업데이트가 까다롭다는것을 느꼈다.

캡슐화라는 필드 접근 제약 규칙으로 인해

`React`에서는 새 객체를 만들어서 setter를 통해 객체를 초기화 해주고 추가로 state에 대한 set을 해줘야하며,

`Vue`에서는 Template 영역의 input 태그 v-model 디렉티브에 getter 함수를 바인딩 해준다는 것이 매커니즘적 측면에서 말이 안되는 행위고, 실제로 변경도 이루어지지 않기에 Computed로 Wrapping해줘야만 했다.

그래서 한번 더 생각해본것은 API 호출시 Request용 파라미터 객체나 Response용 응답 객체를 DTO 클래스로 사용하는건 어떨까? 였다.

하지만 이 역시도 리터럴 객체 선언 후 매개변수 타입과 반환 타입에 타입스크립트의 interface나 type을 지정하는것이 클래스로 강제화 해서 관리하는것과 다를것 없지 않나? 하는 생각이 들었다.

이러한 이유 때문에 FrontEnd에서는 굳이 클래스로 까지 관리하지 않고 타입스크립트의 타입으로 손쉽게 객체를 관리하는것이 아닐까 하는 결론을 내렸다.

Error in [eslint] '_' is defined but never used (no-used-vars)

유혁스쿨 — Wed, 25 Dec 2024 22:11:03 +0900

javascript에서 변수 혹은 참조(모듈)등 선언 후 사용하지 않을 경우 위와같은 에러가 발생하며 아래와 같이 lint 옵션을 설정한다.

.eslintrc.js

module.exports = {
  /* 생략 */
  rules: {
    'no-unused-vars': 'off'
  }
}

Error in [eslint] '_' is defined but never used (vue/no-used-vars)

유혁스쿨 — Tue, 24 Dec 2024 22:47:46 +0900

vue 에서 변수 혹은 참조(모듈, 컴포넌트)등 선언 후 사용하지 않을 경우 위와같은 에러가 발생하며 아래와 같이 lint 옵션을 설정한다.

.eslintrc.js

module.exports = {
  /* 생략 */
  rules: {
    'vue/no-unused-vars': 'off'
  }
}

[eslint] The "___" component has been registered but not use

유혁스쿨 — Mon, 23 Dec 2024 01:07:23 +0900

vue를 사용할때, 컴포넌트를 import 후 사용하지 않는 컴포넌트에 대해 런타임시 eslint에 의해 에러를 뱉는다.

해결방법은 아래와 같다

./.eslintrc.js

module.exports = {
  /* 생략 */
  rules: {
  	/* 생략 */
    'vue/no-unused-components': 'off'
  }
}

[ESLint] Parsing error: Unexpected token import ___

유혁스쿨 — Mon, 23 Dec 2024 00:51:39 +0900

export한 module을 import 한 뒤 사용하지 않는 경우 발생하는 런타임 에러이다.

해결방법은 아래와 같다.

./.eslintrc.js

module.exports = {
  /* 생략 */
  "parserOptions": {
    "ecmaVersion": 2015,
    "sourceType": "module"
  },
}