개발/토막난 상식(241)
-
노드 자바 성능 비교
사실상 차이가 없긴 합니다. 간단한 경우 ' 실제로 둘의 비교 그래프를 봐도 처리량, 실행시간, 메모리 사용량 모든 부분에서 Node.js + typescript가 우세한 것을 볼 수 있습니다. 물론 위 그래프는 CPU 사용량이 적은 간단한 I/O 요청의 경우입니다. ' 복잡한 경우 위 그림은 동일한 처리를 하는데 걸리는 수행 시간을 비교한 그래프로써 CPU를 사용하는 연산이 많아질수록 Node.js의 처리 수행 시간이 급격히 증가하는 것을 볼 수 있습니다. 즉, CPU 연산이 많을수록 Spring이 유리하며, 간단한 I/O가 많은 경우에는 Node.js가 유리한 것입니다.
2024.04.03 -
[React] 리액트 차트 라이브러리 추천 비교 분석 (무료, 유료) 19 + 6 종
조건! 영어를 지원하고(중국어만 있는거는 패스) JS 혹은 Ts 로 만들어져서 도입이 쉬운 리액트 차트들로 목록화 했습니다. 무료의 경우 깃허브 stars or 사용해본 지인 추천 ------------------------무료------------------------ 1. FL 차트 https://app.flchart.dev/#/line FL Chart App app.flchart.dev 2. react-chartjs-2 https://react-chartjs-2.js.org/ react-chartjs-2 | react-chartjs-2 React components for Chart.js react-chartjs-2.js.org 3. recharts https://recharts.org/en-US ..
2024.04.03 -
react 차트 라이브러리 종류 비교 14종!
리액트에서 이악물고 쓸수 있는것들 위주로 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..
2024.03.29 -
10만건 이상의 데이터 in front (테이블 개선)
사건개요 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/..
2024.03.28 -
2개의 map vs 1개의 reduce 속도 비교
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..
2024.03.25 -
윈도우 호스트 파일
C:\Windows\System32\drivers\etc 경로에 있는 호스트 파일은 인터넷에서 컴퓨터 이름을 IP 주소로 매핑하는 역할을 합니다. 간단히 말해서, 인터넷이나 네트워크 상에서 컴퓨터나 서버를 찾을 때 사용하는 '주소록'과 같은 역할을 해요. 예를 들어, 웹사이트의 주소(도메인 이름)를 웹 브라우저에 입력하면, 일반적으로 DNS(Domain Name System) 서버가 해당 도메인 이름을 실제 IP 주소로 변환하여 해당 웹사이트에 접속할 수 있도록 도와줍니다. 그런데 컴퓨터의 호스트 파일에 특정 도메인 이름과 IP 주소를 미리 지정해 두면, 브라우저는 DNS 서버에 요청을 보내지 않고 바로 호스트 파일에서 매핑 정보를 찾아 해당 IP 주소로 접속하게 됩니다. 이 기능은 네트워크 테스트나 개..
2024.03.15 -
배포순서
배포는 파일을 다 옴기고 뒷단부터 천처니
2024.03.15 -
useLayoutEffect를 언제 사용해야 할까?
요소의 실제 크기에 따라 UI를 조정해야하기 때문에 발생하는 시각적 "결함"을 제거해야하는 경우에만 useLayoutEffect를 사용하세요. 다른 모든 경우에는 useEffect를 사용하세요. 그리고 이펙트가 필요하지 않을 수 있습니다. 출처: https://velog.io/@tap_kim/no-more-flickering-ui?utm_source=substack&utm_medium=email (번역) "깜빡이는" UI를 거부하세요. useLayoutEffect, 페인팅 그리고 브라우저 이야기 DOM 측정값을 기반으로 요소를 변경하는 방법에 대해 살펴봅니다. useEffect의 문제는 무엇이며, 그 문제를 useLayoutEffect로 어떻게 해결하는지, 브라우저 페인팅이 무엇이며, 여기서 SSR은 어..
2024.03.15 -
sql 반복문으로 년도 만들기
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
2024.03.12 -
그래프 비교하기
년도별 스택차트 옆에 일반 바 차트 만들기 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 이걸로 결정
2024.03.12