Why Wijmo
왜 Next.js App에서 Wijmo를 선택해야 할까요?
Quick Start
Next.js에서 Wijmo 시작하기 🚀
* 아래 가이드에서는 Next.js 14.2.5를 사용합니다.
1. Next.js 앱 폴더로 이동 후, Wijmo 라이브러리를 설치합니다.
Next.js에서 Wijmo를 사용하는 경우, React 용 Wijmo 컴포넌트를 사용합니다.
npm install @mescius/wijmo.react.all
2. Wijmo 라이브러리를 불러오기 위한 폴더와 파일을 생성합니다.
여기서는 Wijmo의 FlexGrid 컨트롤을 설정하는 방법에 대해 설명합니다.
다른 컨트롤을 추가하고 싶은 경우, 아래에서 각 컨트롤 별 상세한 코드 샘플을 확인해 주세요.
프로젝트의 루트 폴더에 "components" 폴더를 생성한 후, 해당 폴더에 FlexGrid.tsx 파일을 생성합니다.
3. Wijmo는 서버 사이드 렌더링(SSR)을 지원하지 않으므로, 컴포넌트가 클라이언트 측에서만 렌더링되도록 설정합니다.
components/FlexGrid.tsx 파일에 아래와 같이 지시어를 추가합니다.
'use client';
4. Wijmo 스타일 적용을 위한 css 파일을 추가합니다.
components/FlexGrid.tsx
파일에 Wijmo css 파일을 추가합니다.
import '@mescius/wijmo.styles/wijmo.css';
5. 사용할 Wijmo 모듈을 추가합니다.
아래와 같이 Wijmo 모듈을 추가합니다.
각 컨트롤 별 상세한 코드는 아래 샘플에서 확인해 주세요.
import
*
as
{ 네임스페이스 }
from
'@mescius/wijmo.react.{컨트롤명}'
;
6. Wijmo 컨트롤을 초기화하고, 화면에 추가합니다.
Wijmo 컨트롤을 초기화하고 샘플 데이터를 생성한 후, 화면에 Wijmo 컨트롤을 표시할 수 있도록 코드를 작성합니다.
아래 샘플에서 각 컨트롤 별 상세한 코드를 확인해 주세요.
-
아래는 FlexGrid 모듈을 추가하는 코드입니다.
import * as wjGrid from '@mescius/wijmo.react.grid';<결과 화면 미리보기>
전체 코드는 아래 버튼을 클릭하여 샘플에서 확인해 주세요.
온라인 샘플 실행하기 🖥️
-
아래는 FlexChart 모듈을 추가하는 코드입니다.
import * as wjChart from '@mescius/wijmo.react.chart';<결과 화면 미리보기>
전체 코드는 아래 버튼을 클릭하여 샘플에서 확인해 주세요.
온라인 샘플 실행하기 🖥️
-
아래는 FlexMap 모듈을 추가하는 코드입니다.
import * as wjcMap from '@mescius/wijmo.react.chart.map';<결과 화면 미리보기>
전체 코드는 아래 버튼을 클릭하여 샘플에서 확인해 주세요.
온라인 샘플 실행하기 🖥️
-
아래는 OLAP 모듈을 추가하는 코드입니다.
import * as Olap from '@mescius/wijmo.react.olap';<결과 화면 미리보기>
전체 코드는 아래 버튼을 클릭하여 샘플에서 확인해 주세요.
온라인 샘플 실행하기 🖥️
-
아래는 Input 모듈을 추가하는 코드입니다.
import * as wjInput from '@mescius/wijmo.react.input';<결과 화면 미리보기>
전체 코드는 아래 버튼을 클릭하여 샘플에서 확인해 주세요.
온라인 샘플 실행하기 🖥️
7. Next.js 앱을 실행하여 결과를 확인합니다.
npm run dev
Next.js & React Starter Template
커스터마이징이 가능한 Next.js & React 샘플과 템플릿을 통해서
빠르게 개발을 시작해보세요.
Wijmo를 활용한 다양한 템플릿과 샘플입니다. 실제 데모를 확인하실 수 있으며, 소스 코드를 다운로드하여 직접 커스터마이징하여 사용하실 수 있습니다.
Next.js & React UI Control Designer
Wijmo 컨트롤을 쉽게 커스터마이즈해 보세요!
Wijmo 컨트롤 속성 편집기를 통해 Wijmo 컨트롤들의 설정을 쉽게 변경해보세요. 20가지 이상의 컨트롤들의 설정 값을 수정하고 확인해 볼 수 있습니다. 별도의 코딩 작업 없이도, 해당 설정을 다운로드 받아 여러분의 웹에 쉽고 빠르게 바로 적용이 가능합니다.
무엇이든 물어보세요!
MESCIUS의 전문가 그룹에게 Wijmo에 대한 막연한 고민과 궁금증을 들려주세요.
여러분들의 고민을 함께 공감하고 도움을 드리겠습니다.
Next.js & React UI Control Online Study
Wijmo Next & React UI 컨트롤의 다양한 적용 방법을 확인해 보세요.
-
React 함수형 컴포넌트 기반 그리드를 생성하는 방법 (Feat.NPM)
함수형 컴포넌트를 사용해야 하는 이유와 Wijmo를 활용하여 React 함수형 컴포넌트 기반의 그리드를 생성하는 방법에 대해 단계적으로 설명합니다.
-
Next.js에서 Wijmo DataGrid 사용하기
사용 편의성과 확장성이 뛰어난 Next.js에서 Wijmo 데이터 그리드를 생성하는 방법에 대해 설명합니다.
-
Axios로 데이터를 가져와 React 그리드를 생성하는 방법
Axios를 활용하여 데이터를 가져오고, Wijmo의 데이터 그리드를 활용해 해당 데이터를 시각화하는 방법에 대해 설명합니다.
