전체 글

[React] Chartjs로 막대그래프 그리기

패키지 설치 npm install chartjs react-chartjs-2 chartjs 뿐만 아니라 react에서 chart를 렌더링하기 위한 react-chartjs-2도 설치해야한다. Chart 그리기 1) 사용할 chart 요소 등록하기 (register) react에서 chartjs를 사용하려면 컴포넌트를 불러오는 것 뿐만 아니라 사용할 컴포넌트들을 register하는 과정이 필요하다. import React from 'react'; import { Bar } from 'react-chartjs-2'; import { Chart as ChartJS, CategoryScale, LinearScale, Title, Tooltip, Legend, BarElement, } from 'chart.js'..

[JS] Chartjs 막대그래프 그리기 (별점 분포 차트)

별점들을 표시하고 최빈값을 다른 색으로 표시하는 차트를 그릴 것이다. 1. 준비물 CDN 방식으로 라이브러리 불러오기 script 부분 body 부분 2. 크키 지정 (반응형) chartjs 옵션을 따로 설정할 필요 없이 차트 canvas를 div로 감싸고, 그 div에 max-width로 크기를 지정하면 된다. .chart-box { margin: auto; max-width: 800px; } #average { margin-top: 30px; text-align: center; } 3. 차트 그리기 const ratings = [ { stars: 1, count: 100 }, { stars: 2, count: 230 }, { stars: 3, count: 700 }, { stars: 4, count:..

[React] 회원가입 유효성 검사 구현하며 겪은 시행착오와 react-hook-form 사용

TL;DR onChange마다 유효성 검사를 하면 리렌더링이 너무 잦고 에러 메시지 관리도 힘들다. react-hook-form은 보통 submit시 유효성 검사를 한다고 알려져 있지만, onChange때마다 검사하도록 mode를 설정할 수도 있다. react-hook-form으로 리렌더링 횟수를 줄이고 유효성 검사를 간편하게 해보자. 1. 시행착오 과정 recoil로 직접 값 검증 구현 vs react-hook-form 이용하기 나는 react-hook-form은 비제어 컴포넌트 방식이고, 제출시에 값 검증을 하는 라이브러리라고 알고 있었다. 난 onChange마다 유효성 검사를 하고 싶었었기 때문에 react-hook-form 사용 대신 input을 별도의 컴포넌트로 분리하고, 컴포넌트 내부에 rec..

[React] useInfiniteQuery와 Intersection Observer 이용한 무한스크롤 구현 👀 unsplash 이미지 무한으로 불러오기

개요 먼저 hook과 useInfiniteQuery를 사용하지 않고 순수하게 js와 react의 기능만을 사용해 무한스크롤을 구현한 예제를 소개할 것이다. 그리고 Intersection Observer로 특정 element를 구독하는 과정을 간단하게 할 수 있는 useIntersect hook을 만들어보고, 그 hook의 callback으로 useInfiniteQuery의 fetchNextPage 함수를 줘서 무한스크롤로 API 호출하는 예제를 작성해 볼 것이다. 1. 순수하게 intersect observer 이용해 무한스크롤 구현하기 hook으로 로직 추상화를 하거나 별도의 라이브러리 없이 infinite observer로 target을 구독하는 코드를 직접 구현해봤다. function Infinit..

프로그래머스 Lv.0 | 소인수분해

https://school.programmers.co.kr/learn/courses/30/lessons/120852 💻 코드 12는 2, 2, 3으로 소인수분해 된다는 것을 생각해보자. while문을 통해 i=2부터 시작해 수를 i로 나눠보는 것을 반복한다. 더 이상 나누어 떨어지지 않으면 2로 인수분해할 것이 떨어졌다는 뜻이므로 i++ 해서 다음 수로 계속 나누는 식으로 반복한다. 중간에 if문으로 이미 소인수로 배열에 등록된 수가 들어가지 않도록 검사해준다. (혹은 그냥 if문 없이 계속 answer.push(i)를 하고, 마지막 결과 반환 부분에서 return [...new Set(answer)]를 해도 된다. function solution(n) { const answer = []; let i =..

[React] 카카오 지도 API - 키워드로 장소 검색하고 목록으로 보여주기 구현 +) Typescript

결과 코드가 궁금한 사람은 3. 구현 성공! 부분으로 바로 넘어가기 1. 사전 준비 1-1) API 키 발급받기 카카오 개발자 센터에 가서 API 키를 발급받자. 메인화면에서 '내 애플리케이션' 메뉴로 들어가 내 프로젝트 명과 정보를 등록해 키를 발급받는다. 그리고 내 애플리케이션의 플랫폼 메뉴로 들어가 API를 호출할 곳의 주소를 설정해줘야 한다. 로컬에서 React로 개발할 것이므로 localhost:3000을 설정하자. (만약 여기에 등록되지 않은 주소에서 호출하게 되면 API가 제대로 호출되지 않는다) 1-2) 라이브러리 불러오는 script 삽입하기 public 폴더의 index.html로 가서 script를 삽입한다. git에 올려도 유출 걱정이 없도록 프로젝트의 최상단에 (src 아래 X) ..

[CSS] Navbar 아랫부분의 그림자가 가려지지 않게 하는 법 +) 가상클래스, react-router-dom Outlet, MUI

개요 MUI의 AppBar 컴포넌트를 불러와서 navbar를 만들어줬더니, 아래 사진처럼 컨텐츠에 의해 Navbar의 그림자가 가려지는 문제가 발생했다. 이건 MUI만의 문제가 아니라, 모든 그림자를 가진 박스를 다른 요소와 바로 이어붙일 때 발생하는 문제일 것이다. 결론부터 말하자면 가상클래스 중 after를 이용해서 해결할 수 있었다. (네비게이션을 구현하는 전 과정을 차례대로 서술하고 있으니 해결 방법만 알고 싶은 사람은 3번만 보세요!) 목차 react-router-dom의 Outlet으로 전체에 일관되게 Nav를 추가하는 방법 material ui의 AppBar를 커스텀하는 방법 가상클래스로 그림자같은 효과를 내서 문제 해결하기 1. react-router-dom의 Outlet으로 전체에 일관되..

[MUI] material-ui <Link> 컴포넌트에 React-router-dom의 Link 적용하는 법

개요 클라이언트 사이드 렌더링을 하고 싶은데 MUI에서 제공하는 Link 컴포넌트는 일반 href을 사용해서 화면이 깜박이고 이동이 느리다. 회원가입 하기 그렇다고 react-router-dom의 Link를 사용하자니 MUI의 Link로 간편하게 스타일링한다는 장점을 잃어버리고 만다. 어떻게 하면 좋을까? 답은 바로 react-router-dom 상속하기이다. react-router-dom의 Link 적용하기 material ui의 Routing libraries 문서를 보면 Link 컴포넌트에 third-party 라이브러리의 Link를 적용하는 방법을 설명하고 있다. 요약하면 먼저 MUI의 Link 컴포넌트로 평소처럼 스타일링해준다. react-router-dom의 Link를 중복 방지를 위해 Rou..