웹사이트를 뭘로 만들었는지 알 수 있게 해주는 크롬 확장 프로그램 Wappalyzer
Identify technologies on websites 크롬 확장프로그램 Wappalyzer를 사용하면 현재 접속한 사이트가 어떤 프레임워크(Framework)나 언어를 사용해 만들어졌는지 파악할 수 있다. 아래 이미지는 Wappalyzer 공식 사이트의 상태 값이다. LINK 공식 사이트: Wappalyzer ...
aluvy
[이슈][CSS] 사파리 overflow:hidden + border-radius 관련 이슈 해결법
사파리의 렌더링 엔진 Webkit의 버그 해결법 .box { border-radius: 1.2rem; overflow: hidden; isolation: isolate; } 참고 사파리 overflow:hidden + border-radius 관련 이슈 해결법
[Vue] Vuex actions 게시물 더보기 버튼 (feat. ajax)
Vuex에서는 state를 수정할 때 mutations 함수를 만들어서 수정하라고 배워봤는데, 가끔 서버에서 데이터를 가져와서 수정하고 싶을 때가 있다. 그럴때 당연히 서버로 ajax 요청을 날리면 되는데 그런건 mutations에서 직접 하지 않고 actions라는 항목에 적어야 한다. 왜나하면 mutations 함수들을 만들 때 내부에 aj...
[Vue] Vuex를 이용한 인스타그램 좋아요 기능
@숙제 피드 사진을 누르면 Likes가 1 증가하고, 다시 누르면 Likes가 1 감소한다. (store.js) import { createStore } from "vuex"; const store = createStore({ state () { return { likes: 36, } }, mutations:...
[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...