반응형
[WPF] Event Notifier 사용 방법
Frontend/WPF2022. 9. 15. 10:10[WPF] Event Notifier 사용 방법

컴포넌트 간의 데이터를 주고받을 경우 Prism의 EventAggregator를 사용하면 편리하지만 WPF 만을 사용할 경우 아래 코드와 같이 구성하여 사용하였습니다. Event Manager // EventManager.cs namespace Tool.Event { public class EventManager { public delegate void EventHandler(); event EventHandler event; public void Subscribe(EventHandler handler) { event += handler; } public void UnSubscribe(EventHandler handler) { event -= handler; } public void Publish() {..

[Web Design] Canvas
Frontend/HTML, CSS2022. 9. 14. 11:18[Web Design] Canvas

HTML 템플릿 회사 홈페이지 및 블로그 형태의 사이트 제작 요청이 있어 디자인 템플릿을 찾아보던 중 심플하기도 하고 이쁜 HTML 템플릿을 찾게 되었습니다. Canvas The Multi-Purpose HTML5 Template Canvas는 Mulit-Page 및 One-Page 사이트를 제공하고 반응형을 지원하는 다목적 HTML5 템플릿입니다. 비즈니스, 의료, SEO, 여행, 건설, 부동산, 요가, 뷰티, 기사, 사진, 뉴스, 대여, 이력서, 블로그, 웨딩, 음악, 앱 쇼케이스, 애완 동물, 스토어 등 120개 이상의 즉시 사용 가능한 홈페이지 템플릿을 제공합니다. 유료 이지만 가격도 저렴해서 가성비가 좋습니다. 빠르게 개발을 해야 하거나 디자인 비용을 절감해야 할 때 사용하면 좋은 사이트를 제작..

[Eclipse RCP] 폴더안의 파일 리스트 읽기
Frontend/Eclipse RCP2022. 9. 12. 21:48[Eclipse RCP] 폴더안의 파일 리스트 읽기

SWT의 DirectoryDialog를 이용하여 폴더를 읽고 폴더의 파일들을 읽어서 원하는 List의 형식으로 만듭니다. Shell shell = GUIUtil.getShell(); shell.getDisplay().asyncExec(() -> { DirectoryDialog dialog = new DirectoryDialog(shell); dialog.setMessage("Please select a directory and click OK"); String dir = dialog.open(); if (dir != null) { List mapImages = null; try { mapImages = Files.list(new File(dir).toPath()) .filter(file -> file.t..

[Eclipse RCP] SWT에서의 GC, Drawable, Canvas 사용
Frontend/Eclipse RCP2022. 9. 11. 23:59[Eclipse RCP] SWT에서의 GC, Drawable, Canvas 사용

addPaintListener() Control 객체가 그 객체의 paintEvent를 통하여 그림을 그릴 수 있지만, 이보다는 Control 클래스를 상속받아 그래픽 작업을 위해 설계된 특별한 클래스인 Canvas 클래스를 사용하여 그림을 그리는 것이 더욱 좋습니다. Canvas 클래스를 생성한 후 addPaintListener()를 통하여 paintListener를 추가하거나, 사용자가 직접 정의한 Control을 상속받음으로써 그림을 그릴 수 있습니다. Canvas 클래스는 그림을 그릴 때 사용할 수 있는 다양한 종류의 스타일 비트를 가지고 있습니다. SWT.NO_BACKGROUND Canvas의 기본적인 동작은 다음과 같습니다. 객체의 할당영역을 그리기 앞서, 객체에 할당된 전체 영역을 현재 배경..

[CSS] 그라데이션 효과
Frontend/HTML, CSS2022. 9. 10. 22:43[CSS] 그라데이션 효과

linear-gradient : CSS3에서 추가된 것으로, 선형 그라데이션 효과를 만들 수 있습니다. linear-gradient( direction, color1, color2, …, color3 ); direction에는 그라데이션 방향을 입력합니다. to bottom : 위에서 아래로 그라데이션을 만듭니다. (기본값) to top : 아래에서 위로 그라데이션을 만듭니다. to left : 오른쪽에서 왼쪽으로 그라데이션을 만듭니다. to right : 왼쪽에서 오른쪽으로 그라데이션을 만듭니다. ndeg : n 도의 방향으로 그라데이션을 만듭니다. 예시 .gradation_bar { width: 100%; background: linear-gradient(to right, #ff0000, orange..

[Eclipse RCP] 개발 팁
Frontend/Eclipse RCP2022. 8. 31. 22:17[Eclipse RCP] 개발 팁

RCP 배포 시 필수사항 build.properties 에 javacDefaultEncoding..=UTF-8 추가하기 추가하지 않을 시 한글이 깨지거나 다른 클래스를 참조할 수 없는 문제로 인해 배포된 프로그램이 실행이 되지 않을 수 있습니다. Spring Bean 사용 방법 RCP에서 Spring 빈 생성 방법 서비스 인터페이스 설정 파일의 Runtime에 관련 라이브러리 Export 합니다. String : core, beans, cglib, scheduling Log : slf4f, logback 빈 설정 정보를 담고 있는 클래스 인 AppConfig를 생성하고, AppConfig 클래스에 서비스 빈등록을 하고, SpringBeanFinder 클래스를 생성하여, 애플리케이션 컨텍스트를 로딩하고, ..

[React] UI 추천
Frontend/React2022. 8. 30. 23:13[React] UI 추천

React로 개발 시 기본적인 디자인을 적용하기 위해 고민이 많이 됩니다. 유료 템플릿 프로젝트를 구매해서 사용할 수 있지만 매번 사는 게 부담이기 때문에 디자인을 하기 무척 힘듭니다. 그래서 검색하던 중에 편리하게 디자인 할 수 있도록 지원해 주는 것들을 몇 가지 찾을 수 있었습니다. Ant Design 리액트와 타입스크립트(Typescript) 기반으로 제작된 UI 라이브러리 중국 회사에서 오픈소스화한 라이브러리 코드가 리액트 기반이기 때문에 사용하기 편리함 앤트 디자인의 10가지 디자인 원칙 Proximity (근접성) Alignment (정렬) Contrast (대조) Repetition (반복) Make it Direct (직관적으로 만들어라) Stay on the Page (화면에 머물러라) ..

React Study(2)
Frontend/React2022. 8. 29. 22:44React Study(2)

Project Setup Requirements 먼저 Node.js가 설치되어 있어야 합니다. Node.js 공식 다운로드 페이지(https://nodejs.org/ko/download/)에서 Window Installer를 다운로드하고 설치합니다. $ node -v $ npm -v 에디터로는 MS에서 제공하는 Visual Studio Code(VS Code)를 사용합니다. vscode는 크로스 플랫폼 에디터로 다양한 언어를 서포트 하며, IntelliSense와 Git 기능, 그리고 Extension을 이용한 확장 기능을 제공하고 있습니다. 설치방법은 https://code.visualstudio.com/ 에 접속하여 다운로드 후 설치하면 됩니다. React 개발에 좋은 Extension는 ESLint..

React Study(1)
Frontend/React2022. 8. 29. 21:09React Study(1)

최근 React를 다시 공부하게 되면서 올해 초에 회사에서 세미나를 하게 되었습니다. 물론 기초이지만 React에 관심을 다시 가지게 되는 계기가 되었습니다. React란? React는 페이스북에서 제공해 주는 프런트엔드 라이브러리입니다. 사용자 인터페이스(User Interface)에 집중하며, Virtual DOM을 통해 속도와 편의를 높이고, 단방향 데이터 플로우를 지원하여 보일러플레이트 코드를 감소 시켜줍니다. React는 싱글 페이지 애플리케이션(SPA)이나 모바일 애플리케이션을 개발할 때 사용할 수 있습니다. 특징 컴포넌트 기반 아키텍처 템플릿 언어가 아닌 자바스크립트로 컴포넌트 작성 특정 관심사에 집중된 기능 블록 (관심사의 분리) One Way Data flow(단방향 데이터 흐름 지향) ..

[WPF] Prism Library 사용 방법
Frontend/WPF2022. 8. 28. 21:47[WPF] Prism Library 사용 방법

최근 WPF 기반으로 응용 애플리케이션을 개발하고 있습니다. C#을 처음 하는 거라 처음에는 익숙하지 않았지만 자바와 비슷한 면이 많아 금방 적응하였습니다. WPF 개발을 하는데 Prism Library를 적용하였습니다. Prism은 WPF를 통해 풍부하고 유연하고 유지보수가 쉬운 설계를 할 수 있게 도와준다고 합니다. 그리고 MVVM 패턴, Dependency Inejction, CompositeView, Event Aggregator들을 이용하여 독립적인 컴포넌트들 간의 느슨한 결합들을 이용한 설계 중심의 애플리케이션 제작에도 도움을 준다고 합니다. 즉, WPF 어플리케이션을 만들 시 MVVM 디자인 패턴으로 개발하고 이에 추가적으로 Prism이 제공하는 CompositeView 제작방식과 Event..

반응형
image