본문 바로가기

분류 전체보기369

[Quasar] 무엇이고, 왜 쓰는걸까?

무엇? Quasar = Vuetify + Webpack + PWA 왜 씀? Quasar CLI로 모바일 앱 또는 PWA로 앱을 배포할 수 있음 2022. 4. 7.

vscode prettier 자동 저장 설정

1. vscode에서 command + , 2. 검색: default formatter 3. Prettier - Code formatter 로 설정 4. 검색 : Format On Save 5. 체크박스 체크하기 2022. 4. 7.

[Highcharts]linechart series

문서 https://www.highcharts.com/docs/chart-concepts/series?_ga=2.264317647.1747863571.1644805038-1869819279.1637734258 dataset에 x축 설정하는 법 https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/series/data-array-of-arrays/ Highcharts Demo - JSFiddle - Code Playground jsfiddle.net 또는 https://jsfiddle.net/vx013nb6/ x축 날짜 입력 dataset 예시 https://jsfiddle.net/qj3jr5.. 2022. 2. 14.

[Vue.js2 + tailwindcss] build 설정 방법

main.js import Vue from "vue"; import App from "./App.vue"; import "tailwindcss/tailwind.css"; 👈 import "@/src/assets/global.css"; 👈 new Vue({ render: (h) => h(App), }).$mount("#app"); tailwind.config.js module.exports = { purge: ['./src/**/*.html', './src/**/*.js'], // 👈 prefix: 'tw-', // ... } postcss.config.js 프로젝트 홈 경로에 postcss.config.js 파일 생성 후 다음을 작성 const autoprefixer = require("autoprefi.. 2022. 2. 10.

[highcharts] 차트 높이 수정 방법

chartOptions: { title: '', chart: { type: 'gauge', height: 75 + '%', // 👈 높이 설정 퍼센트 // or height: 75 // 👈 높이 설정 px 고정값. // ... }, } 공식 문서 참고 : https://api.highcharts.com/highcharts/chart.height 2022. 2. 8.

[CSS] 여러 줄 텍스트. 보이는 줄 제한하기

multiline 제한하기 chrome같은 최신 브라우저에서 지원하는 css 문법. 하지만, IE에서는 지원하지 않음. 크로스 브라우징을 고려한다면, 다른 방법을 찾아야 함. 예로.. 3줄로만, 화면에 보여줘야 한다면, 다음과 같은 방법을 사용해서 문제를 해결함. .multiline { white-space: normal; text-align: left; word-wrap: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; // IE 대응 // line-height: 1.2rem; // max-height: 3.6rem; } IE 대응을 생각한다면, .multiline.. 2022. 2. 8.

[chartjs] legend style 변경

구현 결과 line, bar, pie 모두, 같은 세팅으로 적용 가능 차트 인스턴스 const chart = new Chart(ctx, { type: 'bar', // ... legend: { usePointStyle: true } ) dataset let dataset = { hoverBackgroundColor: [], backgroundColor: [], data: [], pointStyle: 'Rounded', // 👈 원 타입 설정 pointRadius: 1, // 👈 The radius of the point shape. If set to 0, the point is not rendered. }; pointStyle 타입 참고 https://www.chartjs.org/docs/latest/s.. 2022. 2. 7.

프레임워크와 라이브러리의 차이점

프레임워크 내 코드를 프레임워크가 호출함. 프레임워크가 정해주는 부분에 코드를 작성해야 함. Next.JS를 예로 들면, /Pages 디렉토리 하위의 jsx들을 각 라우터의 페이지로 인식한다. /Pages/_app.js를 최상위 컴포넌트로 인식한다. 라이브러리 개발자가 라이브러리 코드를 호출해서 사용함. 2022. 1. 19.

[NextJS] 서버에서 데이터도 패치받아서 렌더링하기

결국.. 그냥 서버사이드렌더링이 있고, 오로지 서버사이드렌더링이 있다. getServerSideProps()로 컴포넌트에서 데이터를 패치받으면, 이 패치받은 데이터까지 렌더링해서 클라이언트에 전달한다. getServerSideProps() 말고도, getInitialProps()도 있다. 오직 서버사이드렌더링의 장점 - API 요청에 사용하는 key나 restful 정보를 클라이언트가 못 보게 할 수 있다.(서버에서만 처리되기 때문) - 사용자가, 데이터를 패치받는데 걸리는 시간동안, 로딩화면이나 스켈레톤을 안 봐도 되서 사용자 경험에 좋다. 개요 서버사이드렌더링의 경우, 클라이언트가 서버에 페이지를 요청하면, 서버는 html을 만들어서 우선적으로 클라이언트에 전달합니다. 클라이언트는 html을 일단, .. 2022. 1. 16.

[NEXTJS] api key 숨기기 nextjs rewrites

개요 - 숨겨야 하는 이유 보안. 클라이언트를 통해서 사용자들이 api와 key를 확인할 수 있음. Next.js로 api 숨겨서 요청보내는 방법 nextjs rewrites 설정을 하면 됩니다. https://nextjs.org/docs/api-reference/next.config.js/rewrites next.config.js: Rewrites | Next.js Add rewrites to your Next.js app. nextjs.org rewrites 속성은 요청 경로를 다른 목적지 경로로 매핑해주는 설정 객체를 배열로 가지는 nextjs의 설정 속성입니다. rewrites속성을 사용한다면, 유저가 url을 변경해서 요청할 수 없고, 개발자가 의도한 경로로만 접근할 수 있게 할 수 있습니다. .. 2022. 1. 16.

티스토리툴바