본문 바로가기
[vue] 동적 컴퍼넌트 호출 feat. [Vue warn]: Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with `markRaw` or using `shallowRef` instead .. vue 문서들을 보던중, 동적 엘리먼트 부분에서 v-is라는 속성을 보아 테스트 해봄 데이터에따라 동적으로 컴퍼넌트를 호출할때 사용한다 함 (vue3 기준) *주의점 vue2에서는 // vue2 is="HelloWorld" // vue3 :is="'HelloWrold'" 위와 같이 네이티브 태그에 is옵션을 사용하였고 vue3에서는 디렉티브로 바뀌어 문자열값을 사용할 경우 "" 안에 ''을 추가해주어야함 Vue는 반응성 객체로 만들어진 구성 요소를 받았습니다. 이로 인해 불필요한 성능 오버헤드가 발생할 수 있으므로 구성 요소를 'markRaw'로 표시하거나 'ref' 대신 'shallowRef'를 사용하는 것은 피해야 합니다. 1. ref가 없어서 그런가? x 아니었음 2. 뭔가 v-for의 :key처럼.. 2022. 2. 28.
[vue] emit을 props처럼 관리하기 특별한건 아니고 props처럼 script부분에 명시해두는 것 부모 컴퍼넌트 자식 컴퍼넌트 자식이 abc라는 이름으로 1452라는 값을 넘기고 부모가 받아서 bar함수를 실행시켜 콘솔에 노출시킨다. 이 동작자체가 바뀌는건 없고 그냥 2번째 이미지처럼 명시해둘 수 있음 emits: { abc:Number } 혹시 그냥 vue에서 아예 무시를 하나 테스트하기위해 emits에 적혀진 소스를 아래와 같이 살짝 수정해봄 emits: { abcd:Number } 감지를 하긴 하네용. 따로 명시를 해 두지 않아도 emit자체는 잘 동작하기 때문에 개인이나 팀이 성격에 맞추면 될 듯 합니다. 2022. 2. 24.
[vue] v-for 안에서 값이 바뀌지 않는 버그 || v-model cannot be used on v-for or v-slot scope variables because they are not writable. v-model cannot be used on v-for or v-slot scope variables because they are not writable. 업무도중 위와 같은 에러를 만났다. 사실 위 문장을 바로 마주친건 아니였고... 회사에서 quasar라는 ui 프레임워크를 사용하는데 (quasar는 vue 기반으로 사용) https://quasar.dev/ Quasar Framework - Build high-performance VueJS user interfaces in record time Developer-oriented, front-end framework with VueJS components for best-in-class high-performance, responsive webs.. 2022. 2. 21.
js ajax로 비동기 통신하기 기존 클라이언트가 서버에 요청을 할 때는 매번 전체 페이지를 새로 렌더링을하며 불편함을 줬었다.=> AJAX는 이 불편함을 없애기 위해 등장한 것=> 서버와 비동기적으로 http 통신을하며 일부 내용만 교체를 함 ajax 기술의 핵심에는 XMLHttpRequest 객체가 있습니다.이 객체를 통해 서버와 통신할 수 있습니다.옛날 브라우저에선 XMLHttpRequest 객체대신 ActiveXObject를 쓴다네요1. 기존 XMLHttpRequest 통신방법const httpRequest = new XMLHttpRequest()httpRequest.open("POST", "/examples/media/request_ajax.php", true);httpRequest.setRequestHeader("Conten.. 2022. 2. 4.
http란? * HTTP는 Hyper Text Transfer Protocol의 축약어로 인터넷에서 데이터를 주고받을 수 있는 프로토콜(규칙) 우리가 어느 사이트에 들어갈 시 서버에 html,css,이미지등 자원을 요청, 서버에서는 해당자원을 응답하여 전송함 여기서 html,css,이미지와 같은 자원들을 서버와 클라이언트가 주고받기위해선 서로 메시지를 주고받아야 하는데, 그 메시지의 형태를 약속한 것이 http 프로토콜 HTTP 요청 메소드 https://developer.mozilla.org/ko/docs/Web/HTTP/Methods HTTP 요청 메서드 - HTTP | MDN HTTP는 요청 메서드를 정의하여, 주어진 리소스에 수행하길 원하는 행동을 나타냅니다. 간혹 요청 메서드를 "HTTP 동사"라고 부르기도.. 2022. 2. 2.
콘텐츠 보안 정책 (CSP) Content-Security-Policy CSP란 웹 취약점 중 하나인 XSS등의 공격을 방지하기 위한 보안정책입니다. 이를 이용해 원래 존재하지 않았던 스크립트를 막아준다거나, 특정 웹사이트에서만 자원을 불러오도록 설정할 수 있습니다. 저는 프론트엔드이므로 HTML파일의 meta태그로 설정하는법만 적겠습니다. (^__^) 문장의 형식자체는 쉽습니다. content="이곳에 넣고싶은 지시문과 옵션을 넣으면 됩니다." 위에선 default-src 'none'이라고 되어있네요. default-src 지시문은 [모든속성에 대해] 지시하겠단 뜻이고 none은 [허용하지않겠다] 란 뜻입니다. => 모든속성에 대해 허용하지 않겠다. 여러문장을 넣고싶을시엔 ;로 구분을 주어 사용하면 됩니다. self는 현재도메인의 리소스만 만 사용하겠다는 뜻입니다. scr.. 2022. 1. 28.

티스토리툴바