전체 글20 Visual Code 사용법 1. Visual Studio Code 설치하기 - 각 운영체제에 따라 다운로드 받는 화면이 다르게 나온다. 2. 설치 후, 웹브라우저에서 확인하는 방법 (1) 왼쪽 바 4번째 클릭 후, open in browser 검색, install 해준다. (2) 설치 후 원하는 코드 화면에서 mac 프로 기준 option + b 단축키를 누르면 브라우저 출력이 된다. 2022. 8. 8. 실시간 resize 확인 코드 반응형을 진행할 때 실시간으로 해상도를 체크해서 그에 따른 ui를 구현해 내야할 때가 있습니다. 그럴 때 사용할 수 있는 코드입니다. HTML width: {{ window.width }} height: {{ window.height }} SCRIPT export default { data() { return { window: { width: "", height: "", }, }; }, mounted() {}, created() { window.addEventListener("resize", this.handleResize); this.handleResize(); }, destroy() { window.removeEventListener("resize", this.handleResize); }, meth.. 2022. 8. 8. 코드 스플리팅 코드 스플리팅 도입 배경 SPA(Single Page Aplication) 경우 모든 페이지의 정보를 첫 진입시에 받아오게 됩니다. 페이지가 늘어날 수록 모든 페이지를 불러오게 되어 상대적으로 느려지게 됩니다. 이를 해결하기 위해서 필요한 페이지만 불러와서 사용하는 코드 스플리팅이 생겨나게 된 것 입니다. 사용예시 기존 방법과 코드 스플리팅을 사용했을 때의 방법을 코드를 통해 비교해보겠습니다. 우선, 사용전 라우터가 설치되어야 하며, 이동하는 페이지가 2개이상이 필요합니다. 코드 스플리팅 사용 전 : 사용하지 않는 코드를 모두 불러오는것 과 같습니다. myRefri라는 컴포넌트 하나를 부르면 되는데 addStuff라는 컴포넌트까지 모두 불러오므로서 랜더링시간이 늘어나게 됩니다. 현재 예시는 페이지가 2개.. 2022. 8. 8. vue chart.js https://vue-chartjs.org/ 2022. 8. 8. 이전 1 2 3 4 5 다음
