Who I really am
막대그래프를 가로로 보여줘야 하는 상황! {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}을 추가하면 아래와 같이 잘 출력된다. ...
appId가 항상 있다고 보장되는 값이 아닌 상황이다. useState로 기본값 ' '(빈 문자열)을 넣어서 처리하면, '빈 문자열 아이디는 없다'며 아이디값이 들어올 때까지 에러를 띄웠다. 아래와 같이 처리하면 아이디 값이 있을 땐 api를 호출하고, 아니면 null을 리턴한다. export const getTestLogsKey = ({ appId, isTest = false, size = 10 }: Props) => appId ? `/apps/${appId}/logs?size=${size}&is_test=${isTest}` : null
const aaa = classroom?.students.map((student) => student.reviews .filter((review) => review.project.id === projectId && review.isDraft === true) .map((review) => review.student.id) ) const bbb = classroom?.students.flatMap((student) => student.reviews .filter((review) => review.project.id === projectId && review.isDraft === true) .map((review) => review.student.id) ) console.log(aaa) // [[1], [3..
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..
import { keyframes } from 'styled-components'; export const Bounce = keyframes` from {transform: translateY(0px);} to{transform: translateY(-15px);} `; export const LittleBounce = keyframes` from {transform: translateY(0px);} to{transform: translateY(-4px);} `; export const Opacity = keyframes` from {opacity: 0;} to {opacity: 1;} `; export const FromLeft = keyframes` from {transform: translateX(..
