반응형 IT396 Mendix Widget 만들기 - 칸반보드 이번에는 위젯으로 칸반보드를 만드는 방법 입니다. https://medium.com/@joe.robertson_mx/build-widgets-in-mendix-with-react-part-3-kanban-2598aa71444d Build Widgets in Mendix with React Part 3 — Kanban Mendix is the number one low code platform, which allows makers to develop applications considerably faster than traditional coding. medium.com 1. 템플릿 작성 yo @mendix/widget kanban 옵션은 기본으로 하되, TypeScript 로 합니다! 2. Kanban... 2024. 2. 7. Mendix Widget 만들기 - Timer 저번 위젯에 이은 두번째 튜토리얼의 따라하기 요약입니다! https://medium.com/mendix/build-widgets-in-mendix-with-react-part-2-timer-b65c720b34e3 Build Widgets in Mendix with React Part 2 — Timer Mendix enables Makers to extend their application using React through the Pluggable Widgets framework. medium.com 1. 프로젝트 생성 yo @mendix/widget Timer Timer.editorPreview.tsx 파일 삭제 tests/testProject 에 멘딕스 프로젝트 생성 2. 소스 수정 Timer.xml.. 2024. 1. 29. Mendix Widget 만들기 - Colour Counter 출처https://medium.com/mendix/build-widgets-in-mendix-with-react-part-1-colour-counter-f1e400c3cdff Build widgets in Mendix with React — Part 1 — Colour CounterMendix is a low code platform that lets makers deliver value faster and build applications easily. With Mendix the frontend can be…medium.com 해당 링크에 있는 내용을 따라하며 요약한 내용입니다~! 실행 환경 노드 버전 입니다~!node -v18.17.1 1. Mendix 위젯 생성 관련 툴 설치 yeoman 설치.. 2024. 1. 26. [TS]material-Icon 추가하여 사용하기 1. 패키지 설치 ( fontsource.org 사이트에서 지원글꼴 확인해서 설치 가능!) npm i @fontsource/material-icons 2. main.tsx 에서 import import '@fontsource/material-icons` 3. className 에 materail-icons 라고 쓰고 아이콘명을 innerHTML 에 써서 원하는 아이콘을 설정하여 사용 home !! 좀더 편하게 쓰기위해 컴포넌트 형태로 바꾸자!! /src/components/Icon.tsx import type { FC, DetailedHTMLProps, HTMLAttributes } from 'react'; type ReactSpanProps = DetailedHTMLProps; export type I.. 2024. 1. 11. [TS]타입스크립트 컴파일러 설치하기 npm i -g typescript ts-node 설치확인 tsc -v ts-node -v Typescript 연습할때 이용하자! 2024. 1. 10. [TS]테일윈드 CSS 프로젝트 만들기 + 가짜데이터 생성기 1. 프로젝트 생성 npx create-react-app ch03_2 --template typescript 2. 패키지 설치 npm i -D postcss autoprefixer tailwindcss 3. 구성파일 생성 npx tailwindcss init -p 4. 패키지 추가설치 npm i -D daisyui @tailwindcss/line-clamp 5. 구성파일수정( tailwind.config.js) /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./src/**/*.{js,jsx,ts,tsx}" ], theme: { extend: {}, }, plugins: [require('@tailwindcss/line.. 2024. 1. 9. Rocky Linux9.3 VMware 에 설치 및 활용 0. 준비물 VMWare 17 Pro ( 30일 데모 ) VMware Workstation Pro 다운로드 | KR Download VMware Workstation Pro VMware Workstation Pro is the industry standard desktop hypervisor for running virtual machines on Linux or Windows PCs. Discover why. www.vmware.com Rocky Linux 9.3 Download Rocky | Rocky Linux Download Rocky | Rocky Linux Rocky Linux is an open enterprise Operating System designed to be 100% bug-fo.. 2024. 1. 5. [TS] import type 의 의미 TypeScript 에서의 import 문법에는 import type { FC, DetailedHTMLProps, HTMLAttributes } from 'react'; 와 같이 import type 으로 쓰는 경우가 있다. 이는 TypeScript -> JavaScript 로 컴파일시에, 전혀 영향이 없는 타입만을 선언한 파일을 import 할떄 쓰는 문법이다. 즉, 저기에 있는 저 import 들은 (FC, DetailedHTMLProps, HTMLAttributes) 모두 타입이다!! type FC = FunctionComponent; type DetailedHTMLProps = ClassAttributes & E; interface HTMLAttributes extends AriaAttribute.. 2024. 1. 1. chocolatey 를 이용한 nvm, nodejs 설치 Windows용 패키지 관리자 Chocolatey(choco) 설치 및 이용하기 - 단편글 - EvaNOTE (mew.kr) Windows용 패키지 관리자 Chocolatey(choco) 설치 및 이용하기 이 글에서는 Windows용 패키지 관리자인 Chocolatey(약칭: choco)를 설치하고 이용하는 방법에 대해 알아봅니다. evanote.mew.kr Chocolatey Software | NVM 1.1.12 NVM 1.1.12 A node.js version management utility for Windows. community.chocolatey.org 1. 윈도우 파워쉘을 관리자 모드로 실행 윈도우키 + x 관리자 선택 2. cholatey 설치 파워쉘 실행창에 아래 입력 [System... 2023. 12. 30. 이전 1 ··· 12 13 14 15 16 17 18 ··· 44 다음 반응형