리액트에서 이악물고 쓸수 있는것들 위주로 1. FL 차트 https://app.flchart.dev/#/line FL Chart App app.flchart.dev 2. 차트js 2 https://react-chartjs-2.js.org/examples/stacked-bar-chart Stacked Bar Chart | react-chartjs-2 Example of stacked bar chart in react-chartjs-2. react-chartjs-2.js.org 3. recharts https://recharts.org/en-US 4. nivo https://nivo.rocks/ Home | nivo nivo.rocks Bar chart | nivo Bar chart which can dis..

사건개요 antd table 사용중 클라이언트: 개발자님 이거 스크롤로 보고싶어요 >> 인피니티 스크롤 적용시 버버버버버벅 대는 화면을 발견 원인 너무 많은 div가 있으면 보여줄 수 가 없다 가상화 도입!!! 여기서부터 맨탈 와르르 antd 4.0 은 가상화 직접 구현 추천받은 라이브러리 https://github.com/bvaughn/react-virtualized GitHub - bvaughn/react-virtualized: React components for efficiently rendering large lists and tabular data React components for efficiently rendering large lists and tabular data - bvaughn/..

[당근 Software Engineer(FE)] 하조은 님 - 주제 : 함께 일하고 싶은 개발자가 되기 위한 7가지 습관 면접관 - 조직의 수문장 (개발자를 찾는 사람) 습관 = 특징 1. 작은 일부터 시작하기 -분할 정복 하는 사람 낯선 환경 낯선 코드 > 항상 겪는 일 프로젝트가 계속 바뀌게 된다 레거시 코드에 기여해야 하는 경우가 많다 누구나 할 수 있지만 아무도 하지 않는 일부터 1. 관찰하기 -프로그램의 구조는 조직의 구조를 반영한다. (콘웨이의 법칙) 체계적이다 = 시스템이 잘되어있다 = 조금 느리다 2. 질문을 하자 - 누구나 할수 있는 일을 제시하고 개선방법을 제시하고 직접 해보자 ex 주석달기, 디자인 시스템 바꾸기, 등등 3. 기여하기 - 작게 시작하고 빠르게 공유하자 - 리뷰어를 배려..

console.time() const updatedEntireKeyList = data.map((value, index) => { return index + 1 }) setEntireKeyList(updatedEntireKeyList) const keyUpdatedData = data.map((value, index) => ({ ...value, key: index + 1, })) setKeySetData(keyUpdatedData) console.timeEnd() console.time() const result = data.reduce( (acc, value, index) => { const newItem = { ...value, key: index + 1 } acc.keyUpdatedData.pus..

C:\Windows\System32\drivers\etc 경로에 있는 호스트 파일은 인터넷에서 컴퓨터 이름을 IP 주소로 매핑하는 역할을 합니다. 간단히 말해서, 인터넷이나 네트워크 상에서 컴퓨터나 서버를 찾을 때 사용하는 '주소록'과 같은 역할을 해요. 예를 들어, 웹사이트의 주소(도메인 이름)를 웹 브라우저에 입력하면, 일반적으로 DNS(Domain Name System) 서버가 해당 도메인 이름을 실제 IP 주소로 변환하여 해당 웹사이트에 접속할 수 있도록 도와줍니다. 그런데 컴퓨터의 호스트 파일에 특정 도메인 이름과 IP 주소를 미리 지정해 두면, 브라우저는 DNS 서버에 요청을 보내지 않고 바로 호스트 파일에서 매핑 정보를 찾아 해당 IP 주소로 접속하게 됩니다. 이 기능은 네트워크 테스트나 개..

배포는 파일을 다 옴기고 뒷단부터 천처니

요소의 실제 크기에 따라 UI를 조정해야하기 때문에 발생하는 시각적 "결함"을 제거해야하는 경우에만 useLayoutEffect를 사용하세요. 다른 모든 경우에는 useEffect를 사용하세요. 그리고 이펙트가 필요하지 않을 수 있습니다. 출처: https://velog.io/@tap_kim/no-more-flickering-ui?utm_source=substack&utm_medium=email (번역) "깜빡이는" UI를 거부하세요. useLayoutEffect, 페인팅 그리고 브라우저 이야기 DOM 측정값을 기반으로 요소를 변경하는 방법에 대해 살펴봅니다. useEffect의 문제는 무엇이며, 그 문제를 useLayoutEffect로 어떻게 해결하는지, 브라우저 페인팅이 무엇이며, 여기서 SSR은 어..

sql 에서 join을 위해 년도 테이블을 읨의로 만드는 방법 SELECT T.date AS 'year', COUNT(r.issue_de) AS year_count FROM ( SELECT DATE_FORMAT(DATE_SUB(CURDATE(), INTERVAL seq - 1 YEAR), '%Y') AS date FROM ( SELECT @num := @num + 1 AS seq FROM information_schema.tables a , information_schema.tables b , (SELECT @num := 0) c ) seq_table WHERE seq

년도별 스택차트 옆에 일반 바 차트 만들기 https://www.amcharts.com/ JavaScript Charts & Maps - amCharts JavaScript charts and maps data-viz libraries for web, dashboards, and applications. Fast and flexible. React/Angular compatible. Since 2006. www.amcharts.com https://nivo.rocks/ Home | nivo nivo.rocks https://plotly.com/javascript/ Plotly A plotly.com 다 원하는 구현이 쉽게 안된어서 최종적으로 https://recharts.org/en-US 이걸로 결정

Map이란? Map은 key-value 형태로 데이터를 저장하는 자료구조이며, key 값을 통해서 데이터를 검색, 저장, 삭제한다. 이 때, map은 중복된 key 값은 허용되지 않는다. 예를 들어, 전화번호부의 경우 같은 전화번호에 여러 이름은 저장되지 않는다. 따라서 전화번호를 key 값으로, 이름을 value로 map에 저장하면 된다. Dictionary란? Dictionary는 기본적으로 map과 같이 key-value 형태로 데이터를 저장하지만, map과 달리 중복된 key 값이 허용된다. 예를 들어 단어 사전의 경우 하나의 단어에 여러 가지 뜻이 있을 수 있다. 따라서 단어를 key 값으로, 단어의 뜻을 value로 dictionary에 저장하면 된다. 성능도 일반적으로 Map 이 더 좋다. ..