프로젝트9 차트 라이브러리 종류 라이브러리 종류:chart.jsFusionChartsDygraphsvictoryChartist.jsD3.jsRechartsAmChartGoogle ChartAnyChartHighchartsBillboard.jsApex Charts.jsNVD3Vis.js내가 필요한 사항무료react에서 사용커스텀 가능필요 차트주식 or 캔들(stock or candle) 파이 or 도넛(pie or donut)바 or 칼럼( bar or column)라인(line) 현재 사용중인 차트 라이브러리D3.jshttps://observablehq.com/@d3/gallery?utm_source=d3js-org&utm_medium=hero&utm_campaign=try-observable 내가 고민하는 차트 라이브러리 ApexCh.. 2024. 12. 23. CRA(Create React App)에 CRACO(CRA Configuration Override)를? (서론)CSS 스타일링 라이브러리로 Emotion을 사용하기 위해 ui를 작성하여 실행해봤지만 어째서인지 에러메시지만 자꾸 뜬다.이를 해결하기위해 eject를 수정하거나 craco를 설치하여 해결할 수 있다고 하여 craco를 설치하여 해결하기로 했다.CRACO란?Create-React-App Configuration Override의 약어이다.CRA(Create-React-App) 프로젝트의 기본 설정을 'eject'하지 않고도 쉽게 재정의(override)할 수 있게 해주는 도구이다. CRACO를 통해 CRA를 기반으로 하면서도 사용자 정의가 필요한 요구사항을 충족할 수 있다.https://craco.js.org/ Configure CRA without ejecting. | CRACOCreate Re.. 2024. 12. 17. React에 idb설치하여 IndexdDB 사용하기(idb, mui사용) IndexedDB란, 브라우저에 내장된 NoSQL데이터 베이스로, 많은 양의 구조화된 데이터를 클라이언트에 저장하기 위한 로우 레벨 API이다. 주로 오프라인 데이터 저장소나 캐시로 사용된다. IndexedDB API는 인덱스를 사용해 데이터를 고성능으로 탐색할 수 있다. 그러나 기본 API는 복잡하기 때문에 idb를 사용하여 간단하게 작업할 예정이다. IndexedDB문서https://developer.mozilla.org/ko/docs/Web/API/IndexedDB_API IndexedDB API - Web API | MDNIndexedDB는 파일이나 블롭 등 많은 양의 구조화된 데이터를 클라이언트에 저장하기 위한 로우 레벨 API입니다. IndexedDB API는 인덱스를 사용해 데이터를 고성능으.. 2024. 12. 15. vscode 자동완성 안될 때 컴포넌트 이름을 바꿔보자.나같은 경우에는 컴포넌트 이름이 Sidebar.js였는데 SideMenuBar.js로 바꾸니까 자동완성이 잘 되었다.아마 컴포넌트 이름이 자동완성되는 어떤한것과 연관이 있는게 아닐까,,,좀 더 명확한 이름으로 바꾸면 됨. 2024. 11. 21. 프로젝트 시작 마음가짐 및 기대 가계부 웹 애플리케이션을 만들 예정.가계부로 한 이유는 여태까지 가계부 작성없이 살아왔다.자금 흐름도 알아야하고 어디에 돈을 많이 쓰는지 어렴풋이 아는것보다 확실히 알고 싶고 줄이고 싶기 때문이다.그리고 그래프로 흐름을 쉽게 간파할 수 있다는게 매력이지 않을까. 이번 프로젝트에는 '나' 중심의 가계부와 '공동' 자산의 가계부를 같이 사용할 수 있게 할 것이다.예를들어 가족공동생활비의 자금흐름이나 곗돈의 자금흐름등을 가계부에 같이 적을 수 있다. 되게 당연한 기능이다.나는 내가 실제로 사용하고싶은걸 만드는거니까! 당연한거는 들어가야지! 전체 기능1. 이 달의 목표 문구와 목표 금액 설정.2. 목표 금액에 따른 퍼센테이지를 설정하여 각 퍼센테이지마다 문구가 나타남.3. 카테고리 추가 가능 나 중심 자산, 공.. 2024. 11. 20. vscode 라인 삭제, 줄 삭제 단축키(ctrl+shift+k) 안 될 때 단축키는 손이 기억하고 있어서 자연스럽게 ctrl+shift+k 단축키를 사용해서 코드 라인 한 줄을 삭제하려는데 자꾸 노션이 켜진다.. 그것도 노션과 함께 환경설정이 켜진다. 보니까 '명령어 검색 사용'이 활성화 되어있어서 그런거였다.활성화가 되면서 '활성화 검색 단축 사용키'에 ' ctrl+shift+k' 명령어가 자동 설정 되어있어서 그런거였다. 바로 비활성화 돌리니까 vscode에서 ' ctrl+shift+k'단축키 사용이 잘 된다! + 아니면 작업표시줄 우측을 보면 노션에서 우클릭 -> 시작 설정 -> 빠른 검색 활성화가 체크표시가 되어있다면 클릭해서 체크를 풀어주자! 2024. 11. 13. 역시 모든 고난의 시작은 환경설정 세팅이다. 부제: emotion의 css prop을 사용하기 위한 craco설치 늘 하던것처럼 create-react-app(이하 cra)로 react프로젝트를 만들었다.css라이브러리로 mui와 emotion을 사용할 예정이다(세부 조정은 emotion css prop을 사용).mui와 emotion설치까지는 순조로웠다.emotion의 css prop이 작동을 하는지 확인하기 위해 'Hello Emotion!' 이라는 문구의 폰트컬러를 red로 설정했지만 적용되지 않아서 알아보기 시작했다.(해결한 방법은 하단에 있습니다.) 1. @jsxImportSource 주석코드 최상단에 아래 주석을 입력한다./** @jsxImportSource @emotion/react */이 주석은 babel이 jsx를 변환할 때 Re.. 2024. 11. 11. 이렇게 다 까먹을수가 있나! 있다....충격ㅋㅋㅋ카테고리 구조나 라이브러리 설치등 기본적인 것들이 바로바로 생각이 안나서 너무 충격이였다.그래도 하다보니 하나씩 생각나서 떠듬떠듬하고 있긴하지만 알고있었던걸 모르는 상태로 돌아가서 다시 시작한다는게 얼마나 답답한지 모른다ㅋㅋㅋ그만큼 많이 놓았다는거겠지.다시 시작한다는 마음으로 하는거라 힘들거나 속상하지는 않다. 오히려 좋아!더 잘 익힐 기회인거야! 내가 설정한 emmetrfc -> js파일 기본 문법fc -> ts파일 기본 문법 2024. 11. 11. 다시 시작하는 코딩 1년 넘게 코딩을 놓았다. 개발자가 되기위한 어떠한 일도 하지 않았다.그동안 마트 알바를 하면서 지냈다. 바쁘니 좋았다.매일매일 출근을 할 수 있음에 감사했고, 동료들과의 인연들에도 감사함을 느꼈다.그렇게 1년이 지나고 다시 개발자가 되기위해 프로젝트를 시작하려고 한다. 내 길이 이게 맞는지는 이제 중요하지 않다.이제 내 길은 이것뿐이다. 지금 나에게 중요한거는 개발자로 취업하기 위한 방향성, 목표설정이다. 멘토링을 신청하고 조언을 얻자. 2024. 11. 8. 이전 1 다음