몽땅뚝딱 개발자

이렇게 크기가 고정되면 레이블이 잘 보이지 않는 현상이 발생.. ◽ 기존 font: { size: 14, family: 'Pretendard', }, ◽ 변경 font: function (context) { const width = context.chart.width const size = Math.round(width / 32) return { size: size, family: 'Pretendard', } }, 크기에 맞게 가독성있는 크기로 잘 변환되었다. 출처 Limit labels number on Chart.js line chart I want to display all of the points on my chart from the data I get, but I don't want to dis..

Vue는 v-html이라는 디렉티브를 이용하여 깔끔히 구현할 수 있지만 리액트는 없는 것으로 보인다. 방법 1. split 사용 {characterInfo.ka_star_info && characterInfo.ka_star_info.split('\n').map((line) => { return ( {line} ) })} 방법 2. white-space: pre-line; 사용 '\n'만 적용된다. &_desc { white-space: pre-line; } 출처 React에서 줄바꿈을 하는 방법 리액트에서 줄바꿈을 하는 방법 jsx에 의해서 개행문자나 태그는 동작하지 않고 그대로 출력한다. Reference https://developer.mozilla.org/ko/docs/Web/CSS/white-sp..

보호되어 있는 글입니다.

너무 오랜만에 올리는 클론코딩 근황... Vue는 정해진 hook이 있었고 강의나 실제 사용하는 곳에서도 비슷비슷한 느낌의 구조라 금방 적용할 수 있었다. 하지만 리액트는 라이프사이클을 보고... hook을 봐도 무슨 말인지 모르겠다. (Vue를 처음 공부할 때랑 똑같은 느낌.. 나중엔 나아지겠지만..!) 그래서 주변에 리액트를 사용하는 개발자들에게 물어보고 구글링도 많이 해봤는데 모두 구조를 다르게 사용하고 있었다. 고민하다가 여러가지 정보들 + Vue에서 사용하는 구조를 다 혼합해서 구조를 정리하고 페이지에 데이터 연동까지 완료했다. 1. 설정 해당 글을 참고하였다. 이 글과 동일하게 AxiosInstance를 생성하고 api를 작성했다! [Axios][업무][베트남🇻🇳] - Axios instanc..

오랜만에 백엔드 프로젝트를 실행하면서 문제가 생겼다 ^_ ^ 간단히 해결돼서 다행이다. 에러 Driver net.sf.log4jdbc.sql.jdbcapi.DriverSpy claims to not accept jdbcUrl Driver net.sf.log4jdbc.sql.jdbcapi.DriverSpy claims to not accept jdbcUrl 원인 주소고 포트고 아무것도 바뀐게 없는데 어제까지만해도 run 잘 됐는데... 아침에 갑자기 해당 에러를 출력하며 실행되지 않았다. 바로 구글링해보니 Gradle 새로고침을 하면 된다고 한다. 잘 실행된다! 출처 Spring MySql 연동시 Driver net.sf.log4jdbc.sql.jdbcapi.DriverSpy claims to not ac..

◽ @ts-check 마이그레이션 과정에서 타입스크립트 전환 시 어떤 문제가 발생하는지 @ts-check를 활용하여 시험해 볼 수 있다. // @ts-check const person = { first: 'Grace', last: 'Hopper' } 2 * person.first // Error! ◽ JSDoc 아래 코드에서 에러가 나는 이유는 더 상위 개념인 HTMLElement 타입을 반환하기 때문이다. // @ts-check const ageEl = document.getElementById('age') ageEl.value = '12' // Error! 'HTMLElement' 유형에 'value' 속성이 없습니다. 확실히 input 엘리먼트라는 것을 알고있다면 단언문을 사용히여 해결할 수 있다...

🌈 목차 1. ECMAScript 모듈 사용하기 2. 프로토타입 대신 클래스 사용하기 3. var 대신 let/const 사용하기 4. for(;;) 대신 for-of 또는 배열 메서드 사용하기 5. 함수 표현식보다 화살표 함수 사용하기 6. 단축 객체 표현과 구조 분해 할당 사용하기 ECMAScript 모듈 사용하기 ◽ 개별로 모듈을 분리했던 과거의 방법들 개별 모듈로 분리하는 방법은 여러개의 사용하기, makefile 기법(뭔지 모르겠음..), NodeJS 스타일의 require 구문, AMD 스타일의 define 콜백까지 매우 다양했다. 📄 CommonJS - required 구문 // a.js const b = require('./b') // b.js const name = require('Mod..

Vuetify — A Material Design Framework for Vue.js vuetifyjs.com

타입스크립트에서는 DOM 엘리먼트의 계층 구조를 파악하기가 용이하다. Element와 EventTarget에 달려 있는 Node의 구체적인 타입을 안다면 타입 오류를 디버깅 할 수 있고, 언제 타입 단언을 사용해야 할 지 알 수 있다. (일반적으로 타입 단언은 지양하는게 좋지만, DOM 관련해서는 타입스크립트보다 우리가 알고있는게 더 명확하므로 사용해도 된다.) ◽ dom 계층의 타입들 타입 예시 EventTarget window, XMLHttpRequest Node document, Text, Comment Element HTMLElement, SVGElement HTMLElement , HTMLxxxElement : HTMLButtonElement : HTMLParagraphElement ◽ Even..