오늘의 CODE

부모 컴포넌트 -> 자식 컴포넌트 props를 전달하거나 자식 컴포넌트 -> 부모 컴포넌트로 events를 발생시켜 전달하는 것 외에도 형제 컴포넌트끼리 데이터를 통신할 수 있는 방법이 EventBus이다. ** EventBus는 컴포넌트가 많지 않아 규모가 작은 프로젝트에 사용해야 한다. (대규모 프로젝트에서는 vuex를 사용) 😐 이벤트버스 생성 방법 EventBus는 쉽게 말해 비어있는 Vue 인스턴스 객체라고 할 수 있다. 이 인스턴스를 독립적인 각 컴포넌트끼리 통신할 때 중간 다리로 활용한다. (데이터 전달 방향 : vue components -> EventBus -> vue component) import Vue from "vue"; var EventBus = new Vue(); 🤪 이벤트버스..

활용 이벤트 이벤트명 설명 click 마우스 클릭 시 실행 dbclick 마우스 더블 클릭 시 실행 mouseover 마우스 포인터가 요소 위에 올라왔을 때 실행 mouseout 마우스 포인터가 요소 밖으로 벗어났을 때 실행 mousemove 마우스 포인터가 이동했을 때 실행 mousedown 마우스 버튼을 눌렀을 때 실행(클릭하는 동안) mouseup 마우스 버튼을 놓았을 때 실행(클릭 한 후) keydown 키보드 키를 눌렀을 때 실행(누르는 동안) keyup 키보드 키를 놓았을 때 실행(누른 후) change 요소가 변경될 때 실행 submit Form 이 제출될때 실행 reset Form이 초기화될 때 실행 select Select의 값이 선택되었을 때 실행 focus 태그에 포커스 있을 때 실행..

Vue 인스턴스란? vue를 실행하기 위해 첫번째로 생성하는 객체 var vm = new Vue({ // instance option properties }) // or new Vue({ // instance option properties }) Vue instance options 옵션 설명 예제 비고 el 값: any Vue가 실행될 HTML의 DOM 요소를 지정 el: '#app' DOM 요소에 직접 액세스하려면 $el 대신 template refs를 사용하는 것을 권장함. data 값: object Vue가 바라보는 data 객체를 지정 data: {} props 값: object 컴포넌트가 받는 현재 props를 나타냄. 컴포넌트 인스턴스 프록시는 props 객체의 속성에 접근할 수 있음 pro..

vue.js 기본 directive 디렉티브 설명 예시 비고 v-text 값: string innerText와 동일한 기능을 수행하며 태그를 인코딩하여 문자 그대로를 보여줌. {{ message }} * 인코딩 : 입력한 문자나 기호들을 변환 v-html 값: string innerHTML과 동일한 기능을 수행하며 태그를 파싱하여 화면을 구현함. XSS(Cross Site Scripting) 공격에 주의 * 파싱 : 간단히 문장이나 데이터 문자열(html, json 등)원하는 데이터를 분석하여 추출하는 기술 * xss 공격 :공격자가 상대방의 브라우저에서 스크립트가 실행되도록 사용자의 세션을 가로채거나 웹사이트를 변조하거나 악의적인 콘텐츠를 삽입하거나 피싱 공격을 하는 것을 말함 !!! 컴포넌트 사용하는..

기존 사용하던 vue slider에서 기존에 없는 fraction을 추가해보았다. 기존 사용 중이던 slider - https://ssense.github.io/vue-carousel/ Vue Carousel Vue Carousel - A flexible, responsive, touch-friendly carousel for Vue.js ssense.github.io 다른 슬라이더와 비교해서 딱히 두드러지는 장점은 없지만 해상도에 따라 슬라이드 개수를 설정할 수 있는 api가 있어 반응형 프로젝트 구현 시 좀 편하게 사용했다. ... {{ `${currentIndex} / ${slides.length}`}} 그냥 carousel 컴포넌트에 pageChange 이벤트를 추가하고 변경될 때마다 index가..

Description. 행렬의 덧셈은 행과 열의 크기가 같은 두 행렬의 같은 행, 같은 열의 값을 서로 더한 결과가 됩니다. 2개의 행렬 arr1과 arr2를 입력받아, 행렬의 덧셈의 결과를 반환하는 함수 solution을 완성해주세요. 행렬 arr1, arr2의 행과 열의 길이는 500을 넘지 않습니다. function solution(arr1, arr2) { var answer = [[]]; return answer; } Solution. 2차원 배열을 for문을 돌려 2개의 배열을 같은 인덱스끼리 더해주는 방식으로 진행하여, 더한 값을 temp라는 배열에 넣어주고, temp에 담긴 배열을 다시 answer에 넣어서 반환해주었음. function solution(arr1, arr2) { var ans..

배열과 객체에 사용할 수 있는 반복문으로 for in은 배열의 인덱스에 접근하여 값을 반환하는 반면 for of는 배열의 값 자체에 접근한다. let arr = [10, 20, 30]; for(let num of arr) { console.log(num); // for of 반복문의 콘솔 10 20 30 } for(let num in arr) { console.log(num); // for in 반복문의 콘솔 0 1 2 } for in은 객체의 속성을 순회하기 위해 배열의 속성이자 key에 해당하는 index를 반환하며 순회한 것이며 for of는 반복 가능한 배열의 요소를 순회하기 때문에, data를 직접 순회한 것이다. for in - 객체의 열거 가능한 속성에 대해 반복한다. for of - 반복 ..

animation이 1초 동안 진행이 되지만 반복되기 전 4초 정도의 딜레이를 주고 싶다고 가정해보자. 말로는 쉽지만 하려고 하니까 참 생각처럼 되지 않았다. animation-delay라는 속성이 있지만 이 속성은 animation이 처음 시작하기 전 딜레이를 주는 속성으로 내가 원하는 효과에는 도움이 되지 않았다. Solution. animation: shinig 5s infinite; animtion의 during 시간을 5초로 설정한 후 keyframe에서 4초동안 아무 움직임이 없도록 하는 편법을 사용했다. @keyframes shinig { 0% { // 아무 움직임 없음. } 80% { // 내가 원하는 값을 입력 } 100% { // 내가 원하는 값을 입력 } } 내가 너무 허술하게 설명하..

React-router-dom이 v6.0.2로 업데이트 됨에 따라 문법을 사용할 수 없게 되고 제목처럼 에러가 발생하게 된다. 업데이트 전 코드 const App = () => { return ( ) } 업데이트 후 코드 const App = () => { return ( ) } useHistory 또한 오류가 나는데 useNavigate로 변경해서 사용하면 된다~ 업데이트 전 코드 import { useHistory } from "react-router-dom"; const history = useHistory(); 업데이트 후 코드 import { useNavigate } from "react-router-dom"; const history = useNavigate();

firebase에 프로젝트를 등록하고, 진행중인 React 프로젝트에 등록한 후 npm run start 실행했더니 index.js에서 error가 떴다 검색해봤더니 firebase 버전에 따라 import를 달리 써주더라 firebase 8버전 이하 import firebase from 'firebase/app'; import 'firebase/auth'; import 'firebase/firestore'; firebase 9버전 이상 import firebase from 'firebase/compat/app'; import 'firebase/compat/auth'; import 'firebase/compat/firestore'; package.json 파일에서 확인한 firebase가 9버전이길래 버..