분류 전체보기
-
DTO vs VOJAVA 2025. 4. 16. 14:13
실무에서 DTO와 VO를 구분짓지 않고 비슷하게 사용하는 경우가 많다.이 둘은 명칭이 다른거처럼 사용하기위한 목적이 엄연히 다르다. 바로 요약부터 하자면 아래와 같다. 항목 VO (Value Object) DTO (Data Transfer Object) 목적값을 표현하는 객체 (불변, 의미 중심)데이터 전송을 위한 객체 (레이어 간 전달)용도도메인 모델의 구성 요소계층 간 (예: 컨트롤러 ↔ 서비스) 데이터 전달불변성원칙적으로 불변 (immutable)변경 가능 (mutable)equals/hashCode값 기준 비교 (필수 구현)주로 필요 없음위치도메인 모델 내부계층 사이 (Controller, Service, etc)이렇게 봐도 사실 크게 와닿지 않을 수 있다. 추가로 예시코드까지 봐보자.이메일에..
-
React 프로젝트 생성 및 React 버전 다운그레이드 방법JS 2024. 12. 27. 14:01
React를 사용해 프론트엔드 프로젝트를 시작하면서 최신 버전의 React(2024년 12월 27일 기준, React 19 버전)에서 문제가 발생한 경험을 공유합니다. 이를 해결하기 위해 React의 버전을 낮춰 프로젝트를 설정하는 방법을 정리했습니다.1. 프로젝트 폴더 생성먼저 작업을 진행할 프로젝트 폴더를 생성합니다. 아래 명령어를 순서대로 실행하세요.cd \ mkdir app\frontend cd app\frontend 위 명령어를 실행하면 C:\app\frontend 폴더가 생성됩니다.2. React 프로젝트 설치React 프로젝트를 초기화하려면 npx create-react-app 명령어를 실행합니다.npx create-react-app .create-react-app 명령어는 프로젝트 초기 설..
-
HTMLVideoElement WRTC Camera Zoom UpdateJS 2024. 8. 8. 17:06
문제 : video태그를 통해서 웹캠 혹은 핸드폰 카메라를 출력할때 간혹 zoom을 변경하고 싶을 수 있다.결론: 웹캠이 하드웨어적으로 zoom 변경 기능이 있다면 사용할 수 있다. (핸드폰으로 가능) 예시코드let minZoom, maxZoom;const zoom = 1;// 하드웨어 zoom 정보// undefined가 아니라면, {min:1, max:8} 이런식의 Object를 반환함const zoomObj = videoElement.srcObject.getVideoTracks()[0].getCapabilities().zoom;if (zoomObj) { {minZoom, maxZoom} = zoomObj; console.log(`minZoom: ${minZoom}, maxZoom: ${max..
-
Html Video set currentTime not working(not change)JS 2024. 8. 5. 14:37
문제currentTime을 0이 아닌 값으로 변경해도 0으로 설정되는 이슈controls 설정을 true로 해서 타임라인bar를 변경해도 원래시간으로 돌아감.해결과정이벤트 리스너들을 통해 정상적으로 load되는지 확인.예시코드 Your browser does not support the video tag.// console.log 결과 출력Buffered range 0: 0 to 0.0 // seek할 수 있는 범위 (여기가 문제임)Ready state: 4Network state: 1다양한 시행착오 결과...같은 html소스라도 서버에서 html을 반환하는것과 정적으로 띄우는것에서 차이가 생김을 발견.비디오 경로를 일반 static 경로가 아닌, 서버에서 파일 객체를 반환하는 mapping..
-
파이썬 **의미, 언패킹(unpacking)Python 2024. 8. 2. 10:58
** 연산자:딕셔너리 언패킹 연산자딕셔너리의 key-value 쌍을 함수의 키워드 인자로 펼쳐서 전달한다.예시코드class Item(BaseModel): id: str price: Optional[Union[int, float]] = None manufacture: Optional[str] = None etc: Optional[str] = None # json 타입의 iteminput_item_dict = { "id": "ch1" , "price": 100 , "manufacture": "korea" , "etc": "etc1"}# dict => Item classchange_item_class = Item(**input_item_dict)이런식으로 input_item_dict..
-
[Fast-API] Fast-API + TypeScript 환경구성Python 2024. 7. 30. 17:30
문제점 : 기존 app에서 이용하는 web-view를 단순 js코드가 아닌 ts코드를 이용할 필요성이 생김.해결 : back-end로 사용하고있는 fast-api 서버에 일부 웹뷰를 ts코드로 구현. 현재 프로젝트 구성project/├── templates/│ ├── (html 파일들)├── router/│ ├── (..py)├── static/│ ├── audio/│ │ └── (Audio 파일들)│ ├── css/│ │ └── (css 파일들)│ ├── js/│ │ └── (컴파일된 js 파일들)│ ├── ts/│ │ └── (ts 파일들)└── .env└──main.py└──README.md└──requirements.txt└──... ts폴더 밑에..
-
[JS] 디자인 패턴 - 2.ConstructorJS 2024. 6. 29. 13:59
생성자 패턴(Constructor Pattern)은 객체 지향 프로그래밍에서 클래스를 사용하여 객체를 생성하는 패턴입니다. 이 패턴은 자바스크립트에서 주로 클래스 또는 함수형 객체 생성자를 통해 구현됩니다. 생성자 패턴을 사용하면 같은 유형의 객체를 여러 개 만들 때 중복된 코드를 줄이고, 객체의 초기화 과정을 표준화할 수 있습니다.기본 생성자 패턴자바스크립트에서는 함수가 일급 객체(first-class object)로 취급되므로 함수 자체를 생성자로 사용할 수 있습니다. 이때, 생성자 함수는 대문자로 시작하는 것이 관례입니다. new 키워드를 사용하여 생성자 함수를 호출하면, 새로운 객체가 생성되고 생성자 함수 내의 this가 그 객체를 참조하게 됩니다.function Person(name, age) ..
-
[JS] 디자인 패턴 - 1. FactoryJS 2024. 6. 28. 11:53
팩토리 패턴(Factory Pattern)은 객체 생성 로직을 별도의 팩토리 메서드로 분리하여 객체 생성의 구체적인 과정을 숨기는 디자인 패턴입니다. 이를 통해 코드의 유연성과 재사용성을 높이고, 객체 생성 과정의 복잡성을 줄일 수 있습니다. 팩토리 패턴은 주로 다음과 같은 상황에서 유용합니다.생성할 객체의 구체적인 클래스가 동적으로 결정될 때생성 과정이 복잡하거나 여러 단계가 필요할 때객체 생성 로직을 캡슐화하여 코드의 유지보수성을 높이고자 할 때 팩토리 패턴에는 크게 두 가지 유형이 있습니다:단순 팩토리 패턴 (Simple Factory Pattern)팩토리 메서드 패턴 (Factory Method Pattern)아래는 자바스크립트로 각각의 팩토리 패턴을 구현한 예제입니다.단순 팩토리 패턴 (Simp..