JS
-
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..
-
[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을 켜보면???..