Nested Routes는 route 안에 있는 또 다른 route입니다. React Router 가 v6로 바뀌면서 Nested Routes 만 아니라 Route 사용하는 방법이 바뀌었습니다. 전 5 버전과 현재 6 버전 사용법을 비교하였습니다. React Router v5 nested routes를 구현하는 방법은 자식 route를 부모 route의 element 내부에 작성하는 것입니다. // Router.tsx import { BrowserRouter, Switch, Route } from 'react-router-dom'; import Coin from './routes/Coin'; import Coins from './routes/Coins'; function Router() { return ..

React에서 TypeScript를 적용하고 사용 방법에 대해 알아보겠습니다. 설치 create-react-app 명령어에 typescript 옵션을 추가합니다. $ npx create-react-app typescript --template typescript Typescript를 추가하지 않은 기존 프로젝트가 있다면 다음 명령어를 실행하여 설치합니다. $ npm install --save typescript @types/node @types/react @types/react-dom @types/jest Typescript 사용 시 styled-components 부분에서 에러가 날 경우 다음 명령어를 실행하여 설치합니다. $ npm i --save-dev @types/styled-components ..

React에서 Styled Components를 사용하는 방법에 대해 알아보겠습니다. 설치 Visual Studio Code를 사용 시 Styled-Component 자동 완성을 위해 vscode-styled-components 플러그인을 설치합니다. $ npm i styled-components https://styled-components.com/ 사용 예 import styled from 'styled-components'; const Father = styled.div` display: flex; `; const BoxOne = styled.div` background-color: teal; width: 100px; height: 100px; `; const BoxTwo = styled.div` ..

FFmpeg Build 다운로드하기 https://ffmpeg.org/download.html#build-windows 사이트에서 Windows EXE Files 항목의 원하는 형식으로 다운로드를 합니다. 다운로드한 후 압축해제 합니다. 프로젝트의 ffmpeg 폴더를 생성 후 실행에 사용되는 exe, dll 파일들을 복사합니다. Bitmap들을 동영상으로 만들기 FFmpegLoader ffmpeg를 사용하기 위해 FFMediaToolkit 패키지를 Nuget을 이용하여 설치합니다. FFmpegLoader를 사용하여 Path를 지정합니다. // 예 FFmpegLoader.FFmpegPath = @".\ffmpeg"; 동영상에 프레임 추가 아래는 예제코드입니다. StartRecordVideo 함수에 저장될 ..

사각형, 타원, 삼각형으로 이미지를 자르기 위해 아래처럼 정의합니다. public enum ShapeType { Rectangle, Ellipse, Triangle, } 이미지 자르기 기존 비트맵 이미지에서 주어진 위치과 크기, 도형을 통해 이미지를 자릅니다. public Bitmap CreateCroppedImage(Bitmap image, double left, double top, double width, double height, ShapeType shapeType) { Bitmap result = new Bitmap(image.Width, image.Height); using (Graphics g = Graphics.FromImage(result)) { RectangleF srcRect = ne..

이미지 로드 이미지 파일 경로를 통해 이미지를 로드합니다. using System.Drawing.Imaging; public Bitmap LoadImage(string path) { using (Bitmap bitmap = new Bitmap(path)) { return bitmap.Clone(new Rectangle(0, 0, bitmap.Width, bitmap.Height), PixelFormat.Format32bppArgb); } } BitmapSource 변환 주어진 비트맵을 WPF 이미징 프레임워크에서 사용 가능한 BitmapSource 형식으로 변환합니다. using System.Drawing.Imaging; using System.Windows; using System.Windows.Med..

Devexpress GridControl 의 TableView에서 행이 추가될 때마다 컬럼의 숫자가 자동 증가하도록 구현한 코드입니다. Converter 생성 IValueConverter 인터페이스를 상속받아 IndexFromOneConverter 클래스를 생성합니다. using System; using System.Globalization; using System.Windows.Data; /// /// GridControl의 자동 생성 인덱스를 1 부터로 변환하는 컨버터 /// namespace IVM.Studio.Utils { public class IndexFromOneConverter : IValueConverter { /// /// 자동 증가되도록 1을 더해준다. /// public object..

Vue 쓰는 이유 Web app(Single Page Application) 만들 때 사용합니다. 코드 작성할 때 방법이 정해져 있습니다. React는 방법이 다양한 방면 Vue는 v-for, v-if, v-else 등 방법이 하나로 정해져 있어 개발 초보에게도 쉽습니다. 물론 Vue 도 React처럼 자유도 높은 개발도 가능합니다. HTML 렌더링이 React 보다 빠르다고 합니다.(크게 영향을 주지 않음) 업데이트가 잘 됩니다. 결론은 React 보다 학습 곡선이 낮아 쉽고, 가볍고 빠르며, 누구나 빨리 배울 수 있어 접근성이 뛰어나 많이 쓰이고 있습니다. 설치하기 Nodejs 설치 Node.js 공식 다운로드 페이지에서 운영체제에 맞게 다운로드하고 설치합니다. 현재 최신 버전은 16.17.1 입니다..

WPF 기본 Slider Stlye에서 Thumb을 드래그할 때마다 박스 안에 숫자가 표시되도록 Style을 하였습니다. Slider 모양 Style 추가 App.xaml 에 추가하거나 Resource.xaml 파일을 생성하여 Style 을 추가합니다. Slider Style 적용 아래와 같이 Slider 에 Style을 지정합니다.

WPF에서 Prism을 사용하여 ViewModel을 구현할 때 필요에 따라 Container, EventAggregator, RegionManager, Logger 등의 서비스를 사용합니다. 서비스를 각각 ViewModel 에 정의해서 사용하는 것이 아닌 공통으로 작성하여 편리하게 사용할 수 있는 추상 클래스를 작성하였습니다. ViewModelBase Class using Prism.Events; using Prism.Logging; using Prism.Ioc; using Prism.Mvvm; using Unity; namespace Prism.Project.Common.Mvvm { public abstract class ViewModelBase : BindableBase { private string..