어리둥절 분석가 그리고 개발자

페이지 안에 탭이 있고, 탭은 tabIndex라는 상태로 관리된다. url을 통해 페이지로 접속할 때 특정 탭으로 바로 연결되도록 하고 싶다. ✔️ 필요성 페이지 안에 탭이 있고, 탭은 tabIndex라는 상태로 관리된다. url을 통해 페이지로 접속할 때 특정 탭으로 바로 연결되도록 하고 싶다. ✔️ 문제 해결 useRouter()를 통해서 query를 가져오고 query의 tabIndex 값을 받아서 state를 변경해준다 const [tabIndex, setTabIndex] = useState(0); const ref = useRef(null); const { isFallback, query } = useRouter(); useEffect(() => { const { tabIndex } = quer..

autoComplete와 비슷한데 Table도 MUI에서 제공하는 것을 쓸 까 하다가 왠지 할 수 있을 것 같아서 도전해보았당 나중에 비슷한 거 만들일이 많을 것 같은데 그 때에도 아래 코드 보면서 기억을 더듬더듬 만들어야지 import * as React from "react"; import styled from "@emotion/styled"; const TableContainer = styled.div``; const TableHead = styled.div` width: 100%; grid-template-columns: 1fr 2fr 1fr 3fr; //테이블 컬럼 너비 정하기 background-color: ${({ theme }) => theme.colors.grayEa}; display: ..

기존에 MUI 등에서 제공하는 AutoComplete 라이브러리를 사용하다가, 꾸미기도 생각보다 내 맘대로 안되고 기능을 추가하거나 할 때 너무 불편해서 그냥 이번엔 직접 구현했다. 나중에 비슷한 거 구현할 때마다 다시 쳐다봐야지. import styled from "@emotion/styled"; import React, { useEffect, useRef, useState } from "react"; import classNames from "classnames"; import Text from "../../elements/Text"; import { SearchItem } from "../../../types/common"; export const Container = styled.div` disp..

https://swr.vercel.app/docs/getting-started Getting Started – SWR For normal RESTful APIs with JSON data, first you need to create a fetcher function, which is just a wrapper of the native fetch: 💡 If you want to use GraphQL API or libs like Axios, you can create your own fetcher function. Check here for more examples swr.vercel.app SWR은 Next.js팀이 만든 데이터 fetching 라이브러리로, 나는 정확하게는 잘 모르지만 react-qu..

Chart.js는 웬일인지 모르겠는데 차트 크기가 고정되어 있다. 내가 원하는건 데이터의 크기에 따라서 세로 길이가 길어지게 하는거였기 때문에 맨 처음에는 height = {2n} 이런식으로 설정하고 싶었다. 구글링을 해보니 이걸 바꾸는 방법은 responsive와 maintainAspectRatio를 false로 하는 것이라는데, 실제로 해당 옵션을 false 값으로 바꾸고 나니 이상하게 차트 모양이 일그러졌다. https://www.chartjs.org/docs/latest/configuration/responsive.html Responsive Charts | Chart.js Responsive Charts When it comes to changing the chart size based on t..

Next.js에서 이미지를 사용할 때는 태그를 쓰지말고 next/image의 Image를 사용하라고 권고한다. 이 때 이미지를 비율을 유지하면서 크기를 조절하고 싶을 때는 layout="fill"을 사용하면 된다. import Image from "next/image"; import styled from "@emotion/styled"; const Container = styled.div` width: '100%'; height: '100%'; position: relative; ` 그런데 특히 특정 크기로 줄이고 싶을 때는 그냥 원초적인 방법으로 아래 방법을 사용했다. 원래 이미지의 크기가 624 * 210 이라서 그 비율에 따라서 height를 구해줬다. 너무 원초적인가? 난 되기만 하면 된다. im..

Sample.getInitialProps = async () => { const { data } = await axios.get( encodeURI( `http://alb-diaas-07480.ap-northeast-2.elb.amazonaws.com:3000/왕십리` ) ); return data; }; export async function getServerSideProps() { const data = await axios .get( encodeURI( `http://alb-diaas-07480.ap-northeast-2.elb.amazonaws.com:3000/왕십리` ) ) .then((res) => { console.log("response"); return res.data.data[0]; }..

요청 URI에 한글이 들어가서 그렇다. encodeURI로 감싸준다 const res = await axios.get( encodeURI( `http://alb-diaas-dev-1190.ap-northeast-2.elb.amazonaws.com:3000/왕십리` ) );

const xAxisTickColor = (c: any) => { switch (getDow(date[c.index])) { case "일": return "#FF0000"; case "토": return "#000080"; default: return theme.colors.gray6e; } }; const options = { scales: { xAxes: { ticks: { autoSkip: false, labelOffset: 4, padding: 4, font: { size: 16, }, color: xAxisTickColor, }, grid: { display: false, //뒷배경 라인 없애기 }, }, x: { display: false, //하단 라인을 없애기 ticks: { displa..

✔️ 필요성 Chart.js에서 y축이나 x축에 label을 기입하고 싶을 때가 있다 ✔️ 문제 해결 Chart.js는 옵션이 왜이렇게 다양할까..? 심지어 documnet가 잘 안되어 있는 것이 문제다..... title을 이용해서 만들어줄 수 있다 const options = { scales: { y: { type: "linear" as const, display: true, position: "left" as const, title: { display: true, text: "probability", font: { size: 15, }, }, grid: { drawOnChartArea: false, }, ticks: { font: { size: 14, }, }, }, y1: { type: "line..