본문 바로가기

Ect./Library21

Toast UI (feat.React) 사용기 2 - Chart 기능 Toast UI Chart - Javascript 로 구현 가장 먼저 차트가 생성될 컨테이너 요소를 추가해준다. id는 chart 로 해주자. Toast UI 차트는 생성자 함수를 통해 인스턴스를 생성할 수 있다. 1. namespace 사용 const Chart = toastui.Chart; 2. CommonJS 사용 const Chart = require('@toast-ui/chart'); 3. ES6 사용 import Chart from '@toast-ui/chart'; import { BarChart } from '@toast-ui/chart'; Webpack 4는 패키지 모듈을 가져올 때 main 필드보다 module 필드에 정의된 진입점을 우선적으로 가져오므로, 프로젝트에서 웹팩4를 사용하고 .. 2023. 7. 12.
Toast UI (feat.React) 사용기 1 - 텍스트 에디터 Toast UI 시작 - 설치 npm install @toast-ui/react-editor 리액트에서 사용하기 위해 위와같이 설치해준다. 텍스트 에디터 - Editor 일반 컴포넌트처럼 사용할 수 있다. import { Editor } from '@toast-ui/react-editor'; import '@toast-ui/editor/dist/toastui-editor.css'; 위처럼 불러와줘야지 기본틀을 지정해줄 수 있고, 추가 옵션을 사용하여 여러 설정을 해줄 수 있다. previewStyle tab / vertical, 마크다운일 때 미리보기 스타일을 지정할 수 있다. 위처럼 vertical이면 세로로 나뉜다. initalEditType merkdown / wysiwyg 초기 보일 화면을 지정 .. 2023. 7. 8.
OrbitControls -Threejs 저번에 gltf 모델의 scene 에 rotation.y 값을 주어 빙글빙글 돌리는 애니메이션을 구현했었다. 참고로 모델링을 바꿨다. OrbitControls import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; addons 에서 import 해주고, new OrbitControls() 로 카메라를 지정해준다. 두번째 인자의 renderer.domElement 는 보여지는 canvas 를 가리킨다. const controls = new OrbitControls(camera, renderer.domElement); 카메라 position을 set 해준 다음 controls.update() 해주고, 애니메이션을 실행하는 animate.. 2023. 6. 21.
Three.js 라이브러리 배워보기 https://threejs.org/ Three.js 는 웹 페이지에 3D 객체를 쉽게 렌더링할 수 있도록 도와주는 자바스크립트 3D 라이브러리 WebGL 기술을 기반으로 렌더링과 카메라, 조명 등의 3D프로그래밍 기술을 간단하게 사용할 수 있도록 해준다. 설치하기 npm 을 통해 설치 (CDN도 있긴 하지만 권장은 npm) https://threejs.org/docs/index.html#manual/en/introduction/Installation npm install three npm install -D vite vite 는 실행도구이다. vite 빠르고 간결한 개발 경험에 초점을 맞춘 번들러 Webpack 과 동일한 기능을 하지만 공식문서에서 Vite 를 권장하길래 사용해보았다. 기본적으로 ES .. 2023. 6. 12.

티스토리툴바