실시간 데이터가 중요하다면 react-query

react-query? react-query는 서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러 핸들링 등 비동기 과정을 더욱 편하게 하는데 사용된다. 여러가지 장점이 있지만 주로 아래와 같이 프론트 개발자가 구현하기 귀찮은 일들을 수행한다. 몇초마다 자동으로 데이터를 다시 가져온다. 요청 실패시 몇초 간격으로 재시도할 때 다음 페이지를 미리 가져올 수 있다 ajax 성공 / 실패 시 각각 다른 html을 보여준다. 직접 개발해도 되지만, react-query 라이브러리를 사용하면 편리하게 구현할 수 있다. SNS, 코인거래소 같은 실시간 데이터를 보여줘야 하는 사이트에서 유용하다. react-query 사용하기 1. 설치하기 npm install @tanstack/react-query 2..

2022.12.11

CSS 방법론

현재 CSS 방법론이라고 사람들이 말하는 것은 크게 3가지로 구분됩니다. 해당 방법론이 무엇이고 어떠한 장점과 단점을 가지고 있는지 알아봅니다. 3가지 방법론 중 무엇 하나 정답이라고 말할 수 없으며 공부를 하다 보면 자신에게 맞는 방법론이 보이게 됩니다. 그 방법론을 프로젝트에 맞게 또 공통 가이드화 하여 협업이 용이하게 사용하는게 더 중요합니다. 왜 CSS 방법론을 사용할까요? 협업 시 사람마다 다른 코드 구조 및 스타일 정의 (방법론을 사용하는 이유는 첫 번째 이유가 가낭 크다고 생각합니다.) 서로 다른 네이밍 규칙 유지보수가 어려운 코드 타인이 작성한 코드를 이해하고 분석하는데 드는 시간의 증가 복잡해지는 선택자 등 위 이유 이외에도 추가적으로 더 있을 수 있다. 코드의 규칙성(획일성)을 확보하기..

2022.12.07

google webFont loader

google web font loader CSS가 로드되기 전에 폰트가 로드되길 원하고, 스타일되지 않은 텍스트가 번쩍거리지 않게 하려면 웹 폰트 로더를 사용하라. 웹 폰트 로더는 사이트가 로드되기 전에 로드되고, 스타일되지 않은 텍스트가 번쩍이는 것을 확실하게 방지한다. 비동기 스크립트도 사용할 수 있지만, 폰트가 먼저 로드되는 것을 확실하게 하기 위해 동기 스크립트를 사용하는 것이 좋다. 사용하기 Web Font Loader 라이브러리를 사용하려면 페이지에 포함하고 로드할 글꼴을 지정하기만 하면 된다. Web Font Loader는 jsDelivr 및 CDNJS CDN에서도 사용할 수 있다. https://www.jsdelivr.com/package/npm/webfontloader https://gi..

2022.12.07

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