본문 바로가기
[vue] 빌드 후, 특정 파일을 독립적으로 유지시키고 싶다면 vue + quasar 환경입니다. 다른 환경은 테스트 안해봄 한줄요약 다이나믹 임포트 쓰면 됨 문제점 vue 프로젝트를 빌드할 시 자동으로 번들링이 되어 여러 파일이 한 파일로 묶이는등의 작업이 진행됨 이 때문에 기존의 접속정보등 작성한 설정파일등이 다른 파일들과 묶여서 빌드 파일 내에서 찾고 수정하기 살짝 번거로울 수 있었음 ex xx.config.js파일은 특정 서버의 접속정보가 적혀 있으며, 접속정보를 쉽게 변경하기 위해 빌드 후에도 독립적으로 파일이 유지되게 작성해야 하는 문제가 있다. 작성과정 1. 어딘진 기억안나지만 아마 vue 공식문서에서 빌드이후 독립적으로 파일을 유지하면 public에 위치시키면 된다는 문장이 있었음 위 말대로 루트폴더에서 public폴더만이 번들링과정에서 파일묶음현상을.. 2024. 2. 28.
영상송출방식 RTSP / RTMP / HLS / SRT 간단간단정리 구글링을 통해 찾아보는데 글마다 "보안" 관련해서는 말이 달랐음 RTSP - 미디어 서버 운영 어려움 - 화질 미흡 - 요새 잘 안사용함 - RTP 기반 - 서버 비용이 비싸다. RTMP - Http 기반 프로토콜에 비해 확장 기능이 덜함 - 최신 비디오 코덱 지원못함 (HEVC) - 플래시 기반 응용 프로그램에서 자주 사용 - TCP 기반 - 서버 비용이 비싸다. HLS - 미디어 서버 구축시 비용이 큼 - 높은 호환성 범용성 - 최신 비디오 코덱 지원못함 (HEVC) - 미디어가 여러 세그먼트로 나누어져 서버에 저장한다. - 클라이언트는 HTTP를 통해 여러 파일들을 받아오고 이 세그먼트들을 순차적으로 다운로드하여 재생한다. SRT - 화질 개선 - 보안 개선 - 높은 안전성 => 데이터 전송 후 응.. 2024. 1. 12.
팝업 / 모달 팝업 / 모달 류의 종류로는 크게 팝업, 모달, 모달리스가 있다. 1. 팝업 브라우저에서 새창을 띄워주는 효과 2. 모달 브라우저에서 새창을 띄우지않고 div와 같은 엘리먼트만을 이용해 추가 레이어를 쌓음 이 때 추가 레이어의 권한이 기존 창에 비해 높아 추가 레이어를 먼저 닫아야 기존 창을 조작 가능하다. 3. 모달리스 모달과 비슷하게 엘리먼트를 이용해 추가 레이어를 쌓지만, 새창을 띄워주는 것처럼 기존창과 모달을 번갈아가며 사용 가능하다. 2024. 1. 12.
js 생성시점때 형제스코프내에서 메소드를 찾고싶을때 const a = { b: function() { return 5; }, c:a.b()} 위 소스처럼 데이터를 객체구조로 정리하고싶을때,자기자신의 형제 메소드를 이용해야할 때가 있음 a.c는 a.b를 이용해 자기자신을 초기화하려 하지만,초기화단계에서 접근해버리면 a의 초기화가 마무리지어지지 않기때문에a를 제대로 찾지 못해버림 이럴땐 즉시실행함수를 이용해 초기화 작업을 진행한다.const a = (function(){ const b = function() { return 5; }; const c = b() return {b,c}})()위처럼 객체구조의 초기화가 아닌,함수를 이용한 후, 객체를 리턴해주면c를 초기화 할때 바로 같은단계에서 선언된 .. 2023. 9. 11.
[vue3] 컴포넌트 캐시 보존 (keepAlive) 동적으로 컴포넌트를 교체해줄때, 입력해주었던 데이터들도 초기화되는 현상이 있다. 그 데이터들을 컴포넌트가 교체될떄 보존해주고 싶다면, keepAlive를 사용 참고로 v-if를 썼을땐 데이터가 보존되지않고, v-show를 썼을땐 데이터가 보존되었다. 본문은 v-if, v-show가 아닌 다른방식의 동적컴포넌트 호출문법에서 사용가능하다. 위처럼 따라할 예정 부모 컴퍼넌트 부모컴퍼넌트에서 Hello, Abc 자식컴퍼넌트를 반복하여 교체하며, input의 값을 입력할 것임. 현재는 keepAlive 태그를 쓰지않았기 때문에 컴퍼넌트를 교체할때마다 input의 값이 사라짐 위처럼 KeepAlive 태그만 추가해줘도 컴퍼넌트의 교체가 있더라도 데이터를 보존해준다. max 옵션을 통해 최대 캐싱 수 조절 가능 캐싱.. 2023. 8. 30.
[vue3] 커스텀 디렉티브 태그 vue에서는 엘리먼트 각각의 생명주기를 감지해, 이벤트를 등록할 수 있음 onMounted, beforeCreated 등을 이용해 컴포넌트 전체의 생명주기가 아닌 엘리먼트 각각의 생명주기를 감지함 vFocus를 태그로 지정했으며, 이 태그를 등록한 엘리먼트는 mounted 될시에 focus하라는 뜻임 아주 간단함 위 예시는 컴퍼넌트 하나에서만 사용이 가능한 것이고, 아래예시처럼 createApp을 이용해 앱전체에서 사용할 수 있다. const app = createApp({}) // 모든 컴포넌트에서 v-focus를 사용할 수 있도록 합니다. app.directive('focus', { mounted: (el) => el.focus() }) 출처 : https://v3-docs.vuejs-korea.or.. 2023. 7. 21.

티스토리툴바