SVG 도넛차트

도넛 모양의 차트를 구현한 일이 있었는데, 디자인 상의 그라데이션과 100% 채워졌을때의 디자인이 일반 SVG 도넛차트와 달라서 여러 방법으로 테스트를 하던 중, 비슷한 라이브러리를 찾아 구현할 수 있었다. chart sample chart sample https://github.com/aluvy/chart-donutgauge GitHub - aluvy/chart-donutgauge Contribute to aluvy/chart-donutgauge development by creating an account on GitHub. github.com https://aluvy.github.io/chart-donutgauge/ Radial/Ring/Circle Progress Chart Generator fo..

2022.12.05

마우스 커서 변경하기

이미지를 마우스 커서로 사용하기 CSS 커서 속성을 이용해 이미지 파일을 마우스 커서로 설정해서 사용할 수 있다. cursor: url('주소'), 속성값; 커서 속성 값url 중 마지막에 "auto" 속성 값은 비트맵 이미지 커서를 가져올 수 없는 경우 최종적으로 적용하는 커서 속성값이다. 커서 속성값은 쉼표로 구분해서 여러 개를 나열할 수 있으며, 왼쪽부터 순서대로 적용 가능한 커서 속성 값을 우선 적용한다. body { cursor: url('/resources/assets/images/icon/arrow_cusor_1.cur'), pointer;} 이모지를 마우스 커서로 사용하기 비트맵 이미지를 직접 만들어 사용하는 것 보다 이모지를 사용하면 조금 더 간편하게 마우스 커서를 변경할 수 있다. 사용..

2022.11.18

React에서 자주 쓰는 if문 작성패턴 5가지

1. component 안에서 쓰는 if else component에서 JSX를 조건부로 보여주고 싶으면 이렇게 쓴다. function Compoenent(){ if ( true ){ return 참이면 보여줄 HTML } return null; } 2. JSX안에서 쓰는 3항 연산자 ternary operator 조건문 ? 조건문 참일때 실행할 코드 : 거짓일 때 실행할 코드 function Component(){ return ( { 1 === 1 ? 참이면 보여줄 HTML : null } ) } 3항 연산자는 중첩 사용도 가능하다. 단점. 가독성이 나쁘다. function component(){ return ( { 1 === 1 ? 참이면 보여줄 HTML : ( 2 === 2 ? 안녕 : 하이 ) }..

2022.11.17

모바일 환경에서의 vh

문제인식 프로젝트 진행 중 전체화면을 만들기 위해 100vh를 사용했다. PC환경에서 테스트 할 때에는 문제가 없었지만, 실제 모바일 기기에서 브라우저로 접속 후 확인했더니 세로 스크롤이 생기는 버그가 있었다. vh는 viewport height에 해당하는 단위로, 해당 브라우저의 높이에 따라 상대적으로 적용되는 단위다. 예를 들어, 화면의 높이가 100px이라면 1vh는 1px이 된다. 원인 모바일 브라우저에서 100vh는 하단 URL을 입력하는 공간(이 영역은 스크롤 방향에 따라 가변적)을 포함하기 때문이었다. 모바일 브라우저에서 100vh는 하단 URL을 입력하는 공간을 포함한다. URL바는 상황에 따라 보여지거나 없어지는 경우가 있는데, 100vh는 그에 따라 다시 측정되지 않는다. 해결 모바일 ..

2022.11.17

상태관리 라이브러리 Reducx

Redux Redux는 props 없이 state를 공유할 수 있게 도와주는 라이브러리다. Redux를 설치하면 JS 파일 하나에 state를 보관할 수 있는데, 이걸 모든 컴포넌트가 직접 꺼내 쓸 수 있다. 그래서 props 문법이 필요없어진다. 설치하기 https://ko.redux.js.org/introduction/getting-started/ Redux 홈페이지에서 설치하면 된다. 설치하기 전 확인사항 1 Redux를 설치하기 전, package.json에서 react와 react-dom의 버전을 확인해야 한다. 이 2가지 버전이 모두 18.1.X 이상이어야 Redux 사용이 가능하다. "react": "^18.1.0", "react-dom": "^18.1.0", 설치하기 전 확인사항 2 Red..

2022.11.12

React Axios

Ajax란? 서버에 GET, POST 요청을 할 때 새로고침 없이 비동기적으로 데이터를 주고받을 수 있게 도와주는 간단한 브라우저 기능이다. 방법 3가지 Ajax로 GET/POST를 요청하는 방법은 3가지가 있다. 1. XMLHttpRequest 라는 옜날 문법 쓰기 2. fetch() 라는 최신 문법 쓰기 3. axios 같은 외부 라이브러리 쓰기 (추천) Axios를 설치해보자 https://axios-http.com/kr/docs/intro 터미널 열어서 npm 명령어를 입력한다. npm install axios Ajax GET 요청하는 법 1. axios를 상단에 import 하고 2. axios.get(url) 로 요청을 한다. 3. 가져온 데이터를 사용한다. import axios from '..

2022.11.12