Who I really am
삽질을 오랫동안 했다... vite로 구축한 사이트를 vercel로 배포했는데, index페이지가 아닌 다른 라우팅에서 새로고침할 때 404 에러가 뜨는 문제가 있었다. 여러 문서들을 찾아보니, 아래와 같은 코드를 vercel.json 파일에 넣으라는 말들이 있었는데 해결이 되지 않았었다... { "routes": [{ "src": "/[^.]+", "dest": "/", "status": 200 }] } 문제는 vercel.json 파일의 위치!! 였다... 최상단(package.json파일과 같은 위치) 디렉토리에 vercel.json 파일을 만들고 저 내용을 넣어줘야 했었는데, 엄한 src 폴더 안에서 저러고 있었던 것... + 최상단 폴더에서 json 파일을 만드니까 아래와 같은 에러가 떴었는데...
**개인의 경험과 기억이 강하게 반영된 매우 주관적인 후기임! 그 때의 조명, 온도, 습도... 20살 때부터 1년에 한 두번씩은 제주도에 가다보니, 언제부턴가 따로 시간을 내어 관광지를 찾지 않게 되었다. 그 대신 몇 해 전부터는 마을(리) 단위로 며칠씩 머무르며 천천히 걸어보고,그 동네의 분위기를 온전히 느끼는 여행을 하고있는 것 같다. 언젠가 할 한달살이의 동네를 미리 물색해보는 과정이라 해야 하려나.. 예전에 스쿠터를 타고 슉 지나면서 '이 동네 느낌 좋은데?' 하면서 뒤돌아본 동네 등을 적어놨다가 기회 있을 때 1~3일을 묵어보는 식이다. 그 과정에서 느낀 건, 각 공간에 맞는 적절한 속도가 있단 거다. 스쿠터의 속도로 봤을 땐 좀 더 보고싶어서 아쉬운 동네였는데, 막상 걸으며 둘러보니 그 정도..
매일 카페가는 것도 약간 질리고.. 또 한 2시간 앉아있으면 눈치보여서 일어나고 이러는게 조금 지쳐서 노트북을 들고 남산도서관을 찾았다. 노트북실은 5층에 위치해있는데, 뭔가 새로 꾸민지 얼마 안되어보이는 2층 디지털라운지에서도 노트북 사용이 가능하다. 2층 창가자리는 깨끗하고 밝아서인지 들를 때마다 자리가 꽉 차있다. 아마 자리 경쟁이 치열한가보다. 2층 디지털 라운지는 평일 18시까지 운영하는데, 16시쯤 내려갔더니 몇 자리가 남아있어서 한 번 앉아봤다. 5층 노트북실 좌석에는 콘센트 1개와 칸막이가 준비되어있다. 왠지 중학교 때 다니던 독서실 분위기.. 4층 자연과학실에서 프로그래밍 도서 빌려가지고 바로 올라와서 책보며 코딩하기에는 좋겠다. ** 재대출 관련해서 새로 알게된 것 ** 해당 도서 예약..
기본 구조
막대그래프를 가로로 보여줘야 하는 상황! {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