Web 썸네일형 리스트형 [Vue3] Composition API Vue3 Composition API 짧게 CAPI 라고도 불림 Vue2를 사용할 경우 별도로 composition-api를 설치해야 함 Vue3는 이미 포함되어 있어서 별도 설치 필요 없음 컴포넌트의 기능과 규모가 커질 수록 복잡도가 올라가서 좀 더 가독성과 정돈이 필요하여 나옴 논리적으로 연관된 부분을 그룹으로 묶어서 보여줄 수 있다는 장점이 있음 setup setup이라는 옵션API 안에서 거의 모든게 구현됨 setup의 첫번째 파라미터는 props setup의 두번째 파라미터는 context 변수 선언 동적인 변수로 사용을 해야할 경우 ref로 선언해줘야 함 import { ref } from "Vue" ... setup() { const name = ref("") ... } ... Obejct .. 더보기 [Vue3] <script setup> {{ msg }} {{ capitalize('hello') }} ref, reactive 등의 Reactivity APIs 사용 가능 컴포넌트 사용 원래는 컴포넌트 사용을 명시적으로 선언하고 해야하지만 import만 하면 사용 가능함 기본 사용 동적 컴포넌트 컴포넌트 재귀적 사용 import { FooBar as FooBarChild } from './components' 네임스페이스 컴포넌트 label defineProps() & defineEmits() 컴파일 매크로에서 사용된다. 따로 impotre 할 필요도 없음 defineExpose() useSlots() & useAttrs() 더보기 # Polyfill(폴리필) / Transpiler(트랜스파일러) Polyfill(폴리필) 자바스크립트 엔진에 없는 코드의 기능을 지원하기 위해 삽입하는 코드.예를들어서 ES6에만 있는 기능을 ES6를 지원하지 않는 브라우저에서 사용하고 싶을 때폴리필을 사용하여 호환성을 맞춰줄수 있음.폴리필 목록을 보고 참고하면 된다.참고https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#ecmascript-6-harmony Transpiler(트랜스파일러) ES6 트랜스 파일러다. 라는 의미는 ES6 소스코드를 ES5 소스 코드로 변환하여 거의 모든 자바스크립트 엔진에서 사용할 수 있게 해주는 것.폴리필과 비교해서 비슷한 의미지만, 폴리필은 파일 단위 / 기능 단위로 할수 있다고 생각하면 트랜스파일러는 .. 더보기 [Web]# 크로스 도메인 / 동일 출처 정책 : CORS, SOP 크로스 도메인 / 동일 출처 정책(SOP:Same Origin Policy)AJAX 호출 시 보안상 이유로 동일 서버 이외에는 막히는 문제 발생도메인이 다른 곳에서 자바스크립트에 접근하려 할때 거부 해결책 여러개 있음.document.domain으로 설정도메인은 같으나 서브도메인이 다른 경우http://a.tistory.com이랑 http://b.tistory.com 이런 경우jsonp 콜백 함수 사용 JSONP(JSON with Padding)jsonp는 SOP를 해결하기 위해 사용 되는 방법jquery의 getJSON(url주소?파라미터&callback=?), 익명 callback함수) $.getJSON("http://ssben.tistory.com/jsonp.json?callback=?", func.. 더보기 이전 1 다음
