분류 전체보기
-
[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..
-
[JS]Local Storage VS Session StorageJS 2024. 6. 27. 13:05
localStorage와 sessionStorage는 웹 브라우저의 클라이언트 측 스토리지 옵션. 이들은 브라우저에 데이터를 저장하고 나중에 검색할 수 있는 방법을 제공. localStorage특징:데이터가 사용자의 로컬에 영구적으로 저장됩니다. 즉, 브라우저를 닫고 다시 열어도 데이터는 지속됩니다.도메인당 5MB 정도의 데이터를 저장할 수 있습니다.JavaScript 객체 형태로 데이터를 저장하며, 문자열로 변환되어 저장됩니다. 사용 사례:사용자 설정이나 기본 설정을 저장할 때 유용합니다.로그인 정보를 저장하여 자동 로그인 기능을 구현할 때 사용할 수 있습니다.사용자가 종료해도 지속적으로 필요한 데이터를 유지해야 할 때 사용할 수 있습니다. 예시 코드: // 데이터 저장 localStorage.set..
-
[JS]MediaTrackConstraints - 웹캠 프레임 이슈 해결JS 2024. 5. 15. 20:12
웹캠을 이용해 웹에 영상을 제공할때 width, height 등의 속성을 지정할 수 있다.const constratins = {audio: false, facingMode: 'user', video: { width: 1280, height: 720 }}; 이렇게 잘 사용하는 와중 웹캠이 구현되는 디바이스 성능에 따라 frame이 버벅...이게 되는 경우가 종종 발생하는 현상이 있었다. 그래서 또 열심히 서칭한 결과 프레임을 어느정도 보장할 수 있는 속성을 발견했다.const constratins = { audio: false, facingMode: 'user', video: { width: 1280, height: 720, frameRat..
-
[JS]Mobile web debug for AndroidJS 2024. 5. 15. 19:47
실제 웹 서비스를 진행하다보면 PC에서는 문제가 없지만 가끔 모바일에서만 오류가 나는 경우가 있다.오류가 난다는 이야기를 듣고 버그를 잡기위해 PC에서 개발자도구 열고 열심히 디버깅을 해도 알 수 없는 노릇... "모바일에서는 개발자도구 열고 디버깅을 할 수 없을까?"하는 생각에 찾아보게 된 이번 글 결론은 "가능하다" 아 우선 안드로이드에 해당하는 내용입니다. 설정> 휴대전화 정보 > 빌드 번호를 7번 탭해서 개발자 옵션 활성화시스템 > 개발자 옵션 > USB 디버깅 ON설정을 해줬다면 chrome://inspect/#devices 크롬에서 해당 URL을 입력하면 현재 pc에 연결된 Device 정보를 볼 수 있는 사이트가 나옵니다.그리고 핸드폰을 USB에 연결해서 모바일에서 chrome을 켜보면???..
-
[AWS EC2] Mongo DB 설치Server 2024. 5. 15. 19:32
이번 프로젝트에 데이터 저장에 있어서 기존 RDMS가 아닌 NoSQL을 사용할 필요가 생겼고 우리 팀은 몽고DB를 선택했다.기존 PostgreSQL에서 JSON타입의 컬럼을 이용하여 저장하던 데이터를 분석하기 위해서는 너무나 복잡한 쿼리를 작성해야 했고 성능적인 측면에서도 좋지 못했기 때문이다.(mongo db는 json형태의 데이터를 관리하기에 충분한 퍼포먼스가 난다고 판단했다.)우선 AWS EC2서버에 몽고 디비를 설치한다. 우분투 버전 확인cat /etc/lsb-release 20.04 LTS("Focal")을 기준으로 설치하였습니다. Import Public Key curl -fsSL https://www.mongodb.org/static/pgp/server-7.0.asc | \ sudo g..
-
[Spring]Java ConfigurationSpring 2023. 12. 14. 22:19
나는 legacy에 xml기반 configuration 보다는 java configuration을 선호하는 편이다. 이유는 xml 보다 java소스로 보는게 좋으니까 ㅎㅎㅎㅎ @Configuration 어노테이션을 class 상단에 선언해줌 @Configuration public class CommonConfiguration { } 그리고 이러한 Configuration을 스캔해서 실행하는 일종의 RootConfiguration이 있어야한다. @Configuration @ComponentScan(basePackages= {"패키지경로"}) public class RootConfiguration{ } Configuration의 종류는 아래정도로 xml과 맵핑되지 않을까 싶다. context-aspect.x..