본문 바로가기

분류 전체보기

 (82)
개발자 할로윈 이벤트: 프론트엔드에서 소름 돋는 ‘공포’ 사례 모음 🎃👻 가볍게 웃고, 다시는 당하지 않도록 체크까지! 유명·전형적인 프론트엔드 “공포 사례”들만 뽑았어요. 바로 복붙해 재현도 가능한 미니 스니펫 포함.1) 0.1 + 0.2 !== 0.3 — 부동소수점 악령JS의 IEEE 754 덕분에 대표적인 놀람 포인트.0.1 + 0.2 // 0.30000000000000004 (0.1 + 0.2) === 0.3 // false대응: 반올림 비교(ε), 정수 변환해서 계산.const eq = (a, b, e = 1e-10) => Math.abs(a - b) 2) NaN은 자기 자신과 같지 않다에러 지표 집계하다가 조건 누락되는 공포.NaN === NaN // false Number.isNaN(NaN) // true ← 이걸 쓰자3) React의 key 지옥 — 상태가 엉뚱..
자바스크립트 OLAP 내보내기 - Wijmo 대시보드에서 요약된 데이터를 그대로 뽑아야 할 때가 많습니다. Wijmo는 PivotGrid 결과를 바로 Excel/CSV로 내보낼 수 있어요. // XLSX 내보내기 wijmo.grid.xlsx.FlexGridXlsxConverter.saveAsync(grid, null, 'Report.xlsx'); // CSV 내보내기 const rng = new CellRange(0, 0, pivotGrid.rows.length - 1, pivotGrid.columns.length - 1);let csv = pivotGrid.getClipString(rng, true, true, true);wijmo.saveFile(csv, 'PivotGrid.csv');👉 체감 포인트회의 자료, 보고서 만들 때 버튼 하나로 해..
OLAP 슬라이서 기능 - Wijmo 슬라이서 (Slicers)PivotPanel에 있는 필드에 필터를 걸면 특정 데이터만 볼 수 있는데, 그걸 조금 더 시각적으로 할 수 있는 게 슬라이서입니다.버튼 형태로 필터 항목이 나와서 클릭만 해도 PivotGrid가 같이 바뀌어요 var ng = new wijmo.olap.PivotEngine({ itemsSource: getData(1000), valueFields: ['Amount'], rowFields: ['Buyer'], filterFields: ['Date'] // filter }); // 슬라이서 표시 var slicer = new wijmo.olap.Slicer('#slicer', { field: n..
개발자 인생 편해지는 VS Code 꿀 플러그인 추천 ✨ 코딩할 때 VS Code 안 쓰는 사람 거의 없죠?플러그인 맛집이라는 걸 알고 나면, 생산성이 진짜 두 배는 뛸 수 있어요. 제가 써보고 “이건 못 끊겠다” 싶은 플러그인들을 캐주얼하게 정리해봤습니다. 1. Prettier – 코드 자동 정리 요정코드 스타일 통일의 끝판왕. 저장만 하면 들여쓰기/세미콜론/따옴표 전부 자동으로 맞춰줍니다.👉 Prettier - Code formatter2. ESLint – 코드 스타일 잡기문법 에러, 버그 패턴, 이상한 코드 스타일을 바로 잡아줘요. 장기적으로 코드 퀄리티를 지켜주는 든든한 동료.👉 ESLint3. GitLens – 깃로그 추적“이 코드 누가 짰지?” → 바로 알려줍니다. 변경 이력 추적, blame, 커밋 비교 등 Git 활용도 확 올라가요.👉 G..
웹 브라우저에 OLAP 구현하기 - Wijmo 대시보드에서 “월별/국가별로 묶어서 보고 싶다”, “합계·평균·건수 같은 요약을 빨리 보고 싶다”는 요구가 있었습니다. 엑셀 피벗 테이블은 익숙하지만, 웹에서 처음부터 구현하려면 그룹핑/집계/필드 UI/차트 연동까지 일거리가 크더라구요 😭😭그래서 Wijmo OLAP을 Pure JS로 테스트해봤습니다.Wijmo 파일 설치/로딩 아래 방법 중 하나로 시작하면 됩니다CDN 로컬 파일 npm 설치 체험용으론 CDN이 간편했음. (A) 로컬 파일 예시 (B) npm 예시(Vue 기준)npm install @mescius/wijmo.vue2.all OLAP 모듈 가져오기import * as wjOlap from '@mescius/wijmo.olap';자바스크립트 OLAP 예제 아래는 프레임워크 없이 HTML..
자바스크립트 성능 최적화 5가지 방법 웹 애플리케이션이 점점 커지면서 성능은 사용자 경험을 좌우하는 중요한 요소가 되었어요. 특히 자바스크립트는 브라우저에서 직접 실행되기 때문에 최적화를 신경 쓰지 않으면 렉, 느린 로딩, 잦은 멈춤 현상이 생기죠. 오늘은 실무에서 바로 적용할 수 있는 자바스크립트 성능 최적화 5가지 방법을 정리해봤습니다.1. 불필요한 DOM 조작 줄이기DOM 조작은 비싼 연산입니다. 매번 document.querySelector로 엘리먼트를 찾고 innerHTML을 바꾸면 브라우저가 계속해서 렌더링을 다시 해야 해요.👉 해결 방법:DOM 엘리먼트는 캐싱해서 재사용하기여러 변경은 DocumentFragment를 활용해서 한 번에 추가하기innerHTML += 대신 appendChild/insertAdjacentHTML 등..
개발자가 참고하면 좋은 국내 기업 기술 블로그 & 커뮤니티 모음 개발하다 막힐 때? 인사이트가 필요할 때? chatgpt 이전에 구글신에게 검색하는 방법도 있지만 국내 대형 테크 블로그들이 노하우를 꽤 잘 풀어놨어요. 커뮤니티까지 같이 돌면 실무감이 훨씬 빨리 올라갑니다. 아래 리스트, 그냥 즐겨찾기 박아두고 가볍게 한 바퀴씩 도는 걸 추천!📌 국내 주요 기업 기술 블로그1. 카카오 테크 블로그주소: tech.kakao.com카카오 개발자들의 다양한 경험을 공유하는 공간입니다. AI, 클라우드, 백엔드, 프론트엔드, 오픈소스 등 거의 모든 영역을 다룹니다.2. 네이버 D2 (NAVER D2)주소: d2.naver.com“Developers, Developers, Developers!”라는 모토로 운영 중. 개발자 친화적인 글과 오픈소스 프로젝트 소개, 기술 발표 자..
퍼포먼스 좋은 데이터 그리드 UI - Wijmo Vue로 프로젝트하다가 대용량 데이터를 보여줄 수 있는 데이터 그리드 니즈가 있었습니다.처음에는 그냥 v-for로 테이블 만들어서 정렬/필터 같은 기능 붙일까 했는데… 막상 하려니까 귀찮고 😅 유지보수까지 생각하면 답이 안 보이더라고요무엇보다 대량의 데이터를 한 번에 보여줘야 해서 성능이 가장 최우선이었고요 그래서 Wijmo라는 라이브러리가 있길래 같이 써봤습니다. Wijmo 설치Wijmo는 CDN이나 로컬 파일 또는 npm으로 바로 설치할 수 있고 전 Vue에서 이용할려구 Vue 전용 패키지를 설치했습니다.npm install @mescius/wijmo.vue2.all 이후에 App.vue에 FlexGrid 컴포넌트 가져온 뒤 그리드 마크업 및 데이터를 설정해줍니다. ..

티스토리툴바