benscript 님의 블로그

Vue로 프로젝트하다가 대용량 데이터를 보여줄 수 있는 데이터 그리드 니즈가 있었습니다.처음에는 그냥 v-for로 테이블 만들어서 정렬/필터 같은 기능 붙일까 했는데… 막상 하려니까 귀찮고 😅 유지보수까지 생각하면 답이 안 보이더라고요무엇보다 대량의 데이터를 한 번에 보여줘야 해서 성능이 가장 최우선이었고요 그래서 Wijmo라는 라이브러리가 있길래 같이 써봤습니다. Wijmo 설치Wijmo는 CDN이나 로컬 파일 또는 npm으로 바로 설치할 수 있고 전 Vue에서 이용할려구 Vue 전용 패키지를 설치했습니다.npm install @mescius/wijmo.vue2.all 이후에 App.vue에 FlexGrid 컴포넌트 가져온 뒤 그리드 마크업 및 데이터를 설정해줍니다. ..

브라우저에서 엑셀과 같은 기능 구현에 대한 니즈가 있어 찾던 중 SpreadJS에 대해 알게 되어 공부해보았습니다. 처음에는 엑셀 기능을 JS로 구현할 수 있다는 말에 과연이라는 생각이 들었는데 막상 써보니까 나쁘지 않더라구요 공식 홈페이지를 보니 그냥 엑셀 웹버전이고 필터, 차트, 수식 설정도 있구요 공식 문서에 기본 예제에 그냥 복붙하니 금방 구현 가능했어요 ㅋㅋ 단순하게 html 에 호스팅할 div 태그 설정해주고 WorkBook 인스턴스 생성하면 워크북이 만들어집니다setValue 는 데이터 할당해주는 메서드인 거 같습니당https://demo.mescius.co.kr/spreadjs/learn-spreadjs/features/workbook/initialization/purejs Spread ..

웹 애플리케이션을 개발할 때 중요한 결정 중 하나는 렌더링 방식을 선택하는 것입니다. 최근에는 서버 사이드 렌더링(SSR, Server-Side Rendering)이 각광받고 있으며 SSR 트렌드 이전에는 클라이언트 사이드 렌더링(CSR, Client-Side Rendering)이 있었습니다. 이번 글에서는 이 두 가지 렌더링 방식의 차이점, 장단점, 그리고 어떤 상황에서 적합한지에 대해 알아보겠습니다.1. 서버 사이드 렌더링(SSR)란?서버 사이드 렌더링(SSR)은 웹 페이지의 HTML을 서버에서 생성한 후, 클라이언트(브라우저)로 전송하는 방식입니다.📌 SSR 동작 방식사용자가 웹사이트에 접속하면 요청을 서버로 보냅니다.서버에서 HTML을 완전히 구성한 후 클라이언트에게 반환합니다.브라우저가 받은 ..

최근 프런트엔드 개발에서 Next.js가 큰 주목을 받고 있습니다. 이번 글에서는 Next.js의 등장 배경부터 개념, 설치 방법, 주요 특징, 그리고 최신 버전인 Next.js 15에서 추가된 기능까지 한 번에 정리해 보겠습니다. Next.js의 등장 배경과거 웹 개발은 주로 서버 측에서 이루어졌지만, 인터랙션이 많은 웹 환경이 증가하면서 클라이언트 측 처리가 중요해졌습니다. 이에 등장한 Client Side Rendering(CSR)은 성능과 SEO 측면에서 한계를 보였고, 이를 보완하기 위해 서버에서 페이지를 만들어 보내는 Server Side Rendering(SSR)이 필요해졌습니다. 이런 요구사항을 충족하기 위해 등장한 것이 바로 Next.js입니다. Next.js란?Next.js는 풀스택 웹..