svg see: SVG 파일 미리보기 extention
svg 미리 보기 활성화 하는 방법 파일을 직접 열지 않아도 미리 볼 수 있기 때문에, 작업 속도가 빨라집니다. 특히 여러 SVG 파일을 다루는 경우 시간 절약 효과가 더욱 뛰어납니다. 확장 프로그램 설치 하기 svg-explorer-extension SVG SEE 프로그래 설치 사이트로 이동해서 컴퓨터 사양에 맞는 버전을 다운로드 합니다. ...
aluvy
[SASS] CSS 전처리기 SASS SCSS
CSS 전처리기란? SASS는 CSS전처리기(Preprocessor)라고도 합니다. CSS 전(예비)처리기 입니다. 보통 언급되는 전치리기 3대장으로 Less, SASS(SCSS), Styleus가 있습니다. 그 중 SASS는 2006년부터 시작하여 가장 오래된 CSS 확장 언어이며, 그만큼 높은 성숙도와 많은 커뮤니티를 가지고 있고 기능도 훌...
웹사이트를 뭘로 만들었는지 알 수 있게 해주는 크롬 확장 프로그램 Wappalyzer
Identify technologies on websites 크롬 확장프로그램 Wappalyzer를 사용하면 현재 접속한 사이트가 어떤 프레임워크(Framework)나 언어를 사용해 만들어졌는지 파악할 수 있다. 아래 이미지는 Wappalyzer 공식 사이트의 상태 값이다. LINK 공식 사이트: Wappalyzer ...
[Vue] Vuex
Vuex 컴포넌트 별로 데이터를 주고 받기 어렵다. 하위 컴포넌트 전송은 props, 상위 컴포넌트로의 전송은 custom event, mitt 라이브러리를 써야 한다. 이 때 쓸 수 있는 라이브러리가 Vuex다. Vuex는 모든 컴포넌트들이 데이터를 공유할 수 있는 하나의 자바스크립트 파일이다. 컴포넌트와 데이터가 많을 때 Vuex를 쓰면 편...
[Vue] 원하는 컴포넌트에 데이터 전송 mitt
FilterBox.vue 의 데이터를 Container.vue 를 넘어 App.vue로 전송하기 mitt mitt라는 라이브러리를 사용하면 원하는 컴포넌트로 데이터를 보내줄 수 있다. 부모 컴포넌트 뿐 아니래 형제 컴포넌트에게도 보낼 수 있다. 1. 설치 npm install mitt // or sudo npm install mitt // ...
[Vue] slot props
자식데이터 -> 부모 컴포넌트에서 사용 자식 컴포넌트의 데이터를 부모 컴포넌트에서 사용하고 싶을 때 slot props 문법이 있다. 자식 컴포넌트에 데이터가 있다고 가정하자. <slot :msg="msg"></slot> (FilterBox.vue) <template> <div class="fil...
[Vue] props 말고 slot
부모 컴포넌트로부터 자식컴포넌트로 데이터를 받아오는 방법으로 props 말고 slot이 있다. props를 보내고 받고 사용하는 과정 없이도 직관적으로 데이터를 컴포넌트로 보낼 수 있다. slot은 데이터 바인딩을 HTML에다가 할 때 사용한다. 속성 등에는 사용할 수 없다. slot 문법 2가지 step 자식 컴포넌트에서 <slot...
[Vue] Vue3 global(전역) 함수 사용하기
1. JS 파일 생성 const methods = { globalFuncTest(){ console.log('global function test'); } } export default { install(Vue) { Vue.config.globalProperties.$globalFuncTest = methods.global...
[Vue] 인스타그램 필터 cssgram
cssgram CSSgram index.html (index.html) <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cssgram/0.1.10/cssgram.min.css"> </head> 나는 cssgram.c...
[Vue] 게시글 등록
$emit 사용 시 emits: [‘write’] 등록을 안했더니 계속 에러가 남..! (App.vue) <template> <div class="header"> <h1 class="logo"><a href="#" title="vue-stagram"></a></h1> ...