한 걸음/React
막대그래프를 가로로 보여줘야 하는 상황! {subjects.map((entry, index) => ( ))} {subjects.map((entry, index) => ( ))} 1. Barchart 안에 layout="vertical" 넣어주기 2. YAxis 안에 type="category" 넣어주기(이거 안해주면 안나옴..! 여기서 헤맸음) *** 데이터가 늘어남에 따라 무지개색 (ex 정보-빨강, 한문-주황, 수학-노랑...) 으로 막대들을 렌더링해야 해서, 안에 을 mapping 해주는 식으로 구현했다. (colors는 노가다로 색상값 array를 따로 만들어줌...) 그럴 필요 없다면 Cell 컴포넌트 사용할 필요 없음! *** 만약 그래프가 왼쪽 여백 없이(ex 캡쳐에서 '정보', '한문'이라..
위 캡쳐에서 100(나) 와 같이 사용자 정의 레이블을 넣어야 했다. 찾아보니 renderLabel과 같은 커스텀 함수를 만들어서 때려넣으라는데, 타입스크립트가 아니면 그냥 props로 뭉뚱그려서 받아오면 되겠지만... typescript는 LabelProps라는 타입을 import 해오는 게 필요하다. import { ResponsiveContainer, ... } from 'recharts' const renderLabel = ({ x, y, name, value, width, height }: LabelProps) => { const textX = Number(x) + Number(width) / 2 const textY = Number(y) + Number(height) / 2 return ( {..
리액트 리차트(recharts)를 사용하기 위해서는 해당 라이브러리에서 제공하는 라는 반응형 콘테이너로 그래프를 감싸주어야 하는데 (안 감싸주면 에러 뱉음) 이 때 height를 고정값(ex. 10rem, 200px)으로 줘야 그래프가 나타나는 현상이 있었다. 위 캡쳐에서 텍스트 삐져나옴 현상은 그래프 높이를 10rem으로 고정했기 때문에 발생하고 있다. ... 여기서 ResponsiveContainer를 감싸고 있는 고정 높이 10rem을 빼고, 해당 컴포넌트에 aspect={1}을 추가하면 아래와 같이 잘 출력된다. ...
type='submit' 이 아닌 type='button' 인 버튼을 눌렀을 때 react-hook-form의 formData를 가져올 수 있다. const { handleSubmit, register } = methods ... console.log(d))}> 임시저장 참고 https://stackoverflow.com/questions/66176755/react-js-multiple-submit-buttons-react-hook-form
프로그램에서 '앱 생성'이라는 똑같은 기능을 3군데에서 사용해야 했다. 해당 api 호출하는 부분을 커스텀 훅으로 만들어 재사용 가능하도록 했다. useCreateApp.ts import { useToast } from '@chakra-ui/react' import { AxiosError, AxiosResponse } from 'axios' import { request } from 'axios-client' import Router from 'next/router' import { useState } from 'react' type AppCreateType = { id: string } export const useCreateApp = () => { const [loading, setLoading] =..
Reason given for failure: CSRF token missing. In general, this can occur when there is a genuine Cross Site Request Forgery, or when Django’s CSRF mechanism has not been used correctly. For POST forms, you need to ensure: ... 서버에 post 요청을 보냈더니 CSRF 검증에 실패했다며 403 에러가 떴다. import axios from 'axios' axios.defaults.baseURL = 'http://localhost:8000/api/v1' axios.defaults.withCredentials = true axios.d..
CRA로 생성한 리액트 앱에서 src 경로에 있는 컴포넌트를 import 해올 때 절대경로에서 불러와서 쓰곤 했는데, 이번에 vite로 생성한 프로젝트에는 절대경로 설정하는 법이 조금 달라 설정해주는데 헤맸다. src/foo/boo... 와 같은 방식으로 import 해오는 방법 import MyComponent from 'src/foo/boo' vite.config.ts 파일 import react from '@vitejs/plugin-react' import { defineConfig } from 'vite' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], resolve: { alias: { src: '/s..
https://www.mixamo.com/ Mixamo www.mixamo.com 믹사모라는 사이트에 가입하면 다양한 캐릭터 및 움직이는 동작 소스들을 무료로(!) 다운받아서 활용할 수 있다. 상단 탭에서 캐릭터를 먼저 고른 뒤, animations 탭에서 동작을 고르면 내가 선택한 캐릭터가 해당 동작대로 움직이는 것을 확인할 수 있다. 위 설정대로 다운로드 받은 뒤 해당 파일을 블렌더(blender) 프로그램에서 열어주고, 해당 파일을 우리가 자바스크립트(react) 환경에서 사용할 수 있는 형태로 가공해준다. (자세한 방법은 https://www.youtube.com/watch?v=q7yH_ajINpA 강의를 따라하면 됨!) import { OrbitControls, useAnimations, use..
서비스 내에서 '카톡공유하기' 버튼을 누르면, 자동으로 카카오톡 프로그램이 열리면서 공유 링크를 전송할 수 있는 기능을 구현했다. 타입스크립트.. Any를 이번만 허용해주오... 우리는 타입스크립트를 사용 중이고, 카카오 SDK는 window.kakao 와 같은 형식으로 사용해야 하는데 카카오에서 type을 알려주지 않다보니 이 과정에서 약간 헤맸다. 처음엔 .eslintrc.json에서 any를 허용해주려고 했으나.. 이 기능 하나때문에 전체 프로젝트의 설정을 건드리는 것도 별로인데다가, 왜인지 any를 무시하라는 명령어도 동작하지 않았다(...) 그래서 애니 쓰지 말라며 에러를 띄우는 행마다 // eslint-disable-next-line 옵션을 주어 일단은 무시하도록 했다... 1. 카카오톡 디벨..