소개 window.innerHeight 를 사용하면 현재 브라우저의 높이를 알 수 있다. 그리고, window event중에서 resize를 함께사용한다면 브라우저 높이가 바뀔때마다 변경된 높이 값을 얻을 수 있다. 이를 활용해서 현재 브라우저 높이에서 원하는 %만큼만 반환하는 함수를 만들어서 가져다 쓸 수 있게끔 코드를 작성해보았다 🐣 예를들어 현재 높이가 100인데, 그중에서 10%만 원한다면 ? 값을 구하는 방법은, 10을 100으로 나누고, 현재 높이에 곱해주면 된다. 그럼 100 * ( 10 / 100 ) 에서 100 * 0.1 으로 계산하는것과 같으니까, 원하는 결과인 10을 얻을 수 있게된다 ..! 예시 👀 체험 해보기 Vue SFC Playground play.vuejs.org 민우의 코딩일지

OptionsAPI와 차이점 📌 기존 OptionsAPI를 이용해서 자식 컴포넌트의 메소드를 호출하는 방법은 " 더보기 " 를 눌러보자 : ) 더보기 ex) 부모 컴포넌트에서 ex) 자식 컴포넌트에서 공통점 접근하고 싶은 컴포넌트 태그에 ref 속성을 사용한다. 차이점 스크립트 태그에서 this.$refs.ref속성값 대신 ref()함수로 선언된 변수명을 자식 컴포넌트의 ref 속성값으로 사용해야하고, *. 따라서 ref 속성값에 사용될 변수가 필요하다. 그리고, 자식 컴포넌트에서 defineExpose({ })를 사용해야한다. 사용 예시 부모 컴포넌트 자식 컴포넌트

간단한 코드 작성은 Vue SFC Playground 지원되는 기능이 적지만, 코드 입력시 반영되는 속도가 빠른편이다. 덕분에 간단한 코드 테스트용으로 좋다. 👉 해당 사이트로 이동하기 조금 더 많은 기능을 원한다면, Javascript Playground 기본적인 Vue 프로젝트 외에도, Element-plus 라이브러리를 적용한 프로젝트로 코드 작성을 해볼 수도 있다 👏👏 다양한 기능을 포함해서 코드를 작성해볼 수 있다는 장점이 있다. 대신, 속도가 조금 느릴순 있다 😅 👉 해당 사이트로 이동하기 블로그를 운영한다면 CodePen 본 티스토리 블로그처럼, 블로거하시는 분들이 많이 사용하는 CodePen 👉 해당 사이트로 이동하기 CodePen An online code editor, learning ..

라이브러리 소개 데이터 시각화를 제공하는 무료 라이브러리 📊 다양한 모양(막대바, 선, 동그란 도넛모양 ..등)을 손쉽게 나타내줄 수 있다. 📃 Chart.js 공식 문서 보기 라이브러리 사용 chart.js 설치하기 npm install chart.js 예시 및 설명 기본 옵션을 변경하고싶다면 Chart.js 공식 문서의 좌측 General, Configuration, Chart Types 메뉴에 각각에 대한 세부 옵션들을 확인할 수 있다. 참고로 상단 네비바 우측에 있는 "Sample" 버튼을 누르면 다양한 예시와 코드를 확인할 수 있다. 참고문서 Chart.js | Chart.js (chartjs.org) Chart.js | Chart.js Chart.js Welcome to Chart.js! Wh..

OptionsAPI와 차이점 OptinosAPI 방식에서 사용했던 props , $emit의 사용방법 그대로, CompositionAPI 방식에서 사용해보면 에러가 발생한다 😥 왜냐면, CompositionAPI 방식에선 defineProps, defineEmtis를 이용하도록 방법이 바뀌었기때문이다 .. ! defineEmits 관련 자료는 찾기가 어려워서 간단히 예시를 포스팅해보았다 ( 하는김에 defineProps도 같이 .. ) defineProps 부모 컴포넌트 자식 컴포넌트 Composition API 방식으로 Props 사용해보기 받은 내용 => {{ data }} defineEmits 부모 컴포넌트 자식 컴포넌트 emit 사용( 데이터 전달 x ) emit 사용( 데이터 전달 o )