쉽게 개발하기

VueJS 개발을 위한 Javascript ES6 문법 4개

SourceTree — Fri, 10 Dec 2021 16:53:32 +0900

1. 화살표 함수(=>)

화살표 함수안의 this는 해당 함수가 수행되는 컨텍스트를 가리킴
(기존 함수에서는 this를 사용, 화살표 함수에서는 this없이 사용)
인자 값이 1개인 경우 () 생략가능
함수 정의 로직이 1줄이면 {} 제거가능

//일반 함수(ES5)
function (인자) {
}

//화살표 함수(ES6)
(인자) => {
}

2. 템플릿 리터럴 (Template literals)

문자열을 표시할 때 사용하는 작은 따옴표(‘)나 큰 따옴표(“) 대신 백틱(`)을 사용하는 것을 의미
문자열을 여러 줄에 걸쳐 표시할 수 있습니다. (뷰 컴포넌트의 템플릿 선언 시에 유용함)
문자열과 자바스크립트 표현식을 함께 사용하기 좋습니다. (computed 속성 사용이 편함)

Vue.component({
  template: `<div>
              <h1></h1>
              <p></p>
            </div>`
});
 
hayou() {
  return `Hello, ${this.name}, how are you?`
}

3. 모듈 (Modules)

자바스크립트 파일의 객체를 다른 파일에서 로딩 하는것
ES6이 나오기 전에는 특정 객체 & 파일 로딩 기능이 제공되지 않았음.
import, export 문법으로 사용

//---기존 ES5 형태------
Vue.component('component1', { ... });
Vue.component('component2', { ... });
Vue.component('component3', { ... });
 
new Vue({ ... });


//---ES6 모듈 형태------
//component1.js
export default {
  helloVal: 'Hello VueJS'
}
 
//app.js
import comp1 from './component1.js';
console.log(comp1.helloVal);

4. 구조 분해와 확장 문법

객체 속성을 더 쉽게 정의하는 문법
할당 구조 분해 : { , }
확장 문법 : ...

//---할당 구조 분해 (Destructuring assignment)------
let obj = {
  prop1: 'Hello',
  prop2: 'VueJS'
};

//기존
const prop1 = obj.prop1;
const prop2 = obj.prop2;

//신규
const { prop1, prop2 } = obj;


//---확장 문법------
//기존
let newObj = {
  name: 'Joy',
  prop1: obj.prop1,
  prop2: obj.prop2
};
console.log(newObj.prop1); //Hello

//신규
let newObj = {
  name: 'Joy',
  ...obj
};
console.log(newObj.prop1); //Hello

VueJS 정리#5 Life Cycle, computed, methods

SourceTree — Fri, 10 Dec 2021 15:01:50 +0900

VueJS 다섯번째 정리입니다.

Life Cycle : created > mounted > updated > destoryed
참고한 값의 변경에서만 재실행 : computed
모든 상황에서 재실행 : methods

See the Pen VueJS #5 by 이상섭 (@vskfamnu) on CodePen.

VueJS 정리#4 멀티 인스턴스, 컴포넌트

SourceTree — Fri, 10 Dec 2021 14:57:23 +0900

VueJS 네번째 정리입니다.

멀티 인스턴스 : new Vue() 여러개 생성
컴포넌트 : Vue.component()

See the Pen VueJS #4 by 이상섭 (@vskfamnu) on CodePen.

VueJS 정리#3 클래스 바인딩, 스타일 바인딩

SourceTree — Fri, 10 Dec 2021 14:50:42 +0900

VueJS 세번째 정리입니다.

클래스 바인딩 : v-bind:class(v-bind 생략가능)
스타일 바인딩 : v-bind:style(v-bind 생략가능)

See the Pen VueJS #3 by 이상섭 (@vskfamnu) on CodePen.

VueJS 정리 #2 폼입력, 조건문, 반복문

SourceTree — Fri, 10 Dec 2021 14:44:01 +0900

VueJS 두번째 정리입니다.

폼입력 바인딩 : v-model
조건문 : v-if, v-else-if, v-else, v-show
반복문 : v-for

See the Pen VueJS #2 by 이상섭 (@vskfamnu) on CodePen.

VueJS 정리#1 {{}}, 변수, 함수, 지시문, 이벤트

SourceTree — Fri, 10 Dec 2021 14:32:35 +0900

VueJS 첫번째 정리입니다.

값지정 : {{}}
변수 : data
함수 : methods
지시문(directive) : v-bind, v-on, v-once, v-html
이벤트 : v-on:click, v-on:dblClick,v-on:mousemove, v-on:keyup.enter

See the Pen VueJS #1 by 이상섭 (@vskfamnu) on CodePen.

C# 가상키보드 띄운 후 위치, 크기 조정하기

SourceTree — Sun, 5 Dec 2021 17:25:12 +0900

가상키보드 띄운 후 위치, 크기 조정하기

윈도우 가상키보드(osk.exe) 띄우기
윈도우 가상키보드(osk.exe) 위치, 크기 조정하기
윈도우 가상키보드(osk.exe) 종료하기
키보드가 없는 터치스크린방식으로 동작할때 해당기능이 꼭 필요합니다.

VKeyboard.cs

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices;
using System.Text;
using System.Threading.Tasks;

namespace formsApp {
    class VKeyboard {
        [DllImport("User32.DLL")]
        public static extern Boolean PostMessage(Int32 hWnd, Int32 Msg, Int32 wParam, Int32 lParam);
        public const Int32 WM_USER = 1024;
        public const Int32 WM_CSKEYBOARD = WM_USER + 192;
        public const Int32 WM_CSKEYBOARDMOVE = WM_USER + 193;
        public const Int32 WM_CSKEYBOARDRESIZE = WM_USER + 197;

        static Process keyboardPs = null;

        public static void showKeyboard() {
            if(keyboardPs == null) {
                string filePath;
                if(Environment.Is64BitOperatingSystem) {
                    filePath = Path.Combine(Directory.GetDirectories(Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.Windows), "winsxs"),
                        "amd64_microsoft-windows-osk_*")[0],
                        "osk.exe");
                } else {
                    filePath = @"C:\windows\system32\osk.exe";
                }
                if(File.Exists(filePath)) {
                    keyboardPs = Process.Start(filePath);
                }
            }
        }
        public static void hideKeyboard() {
            if(keyboardPs != null) {
                keyboardPs.Kill();
                keyboardPs = null;
            }
        }

        public static void moveWindow(int x, int y, int w, int h) {
            if(keyboardPs.Handle != null) {
                PostMessage(keyboardPs.Handle.ToInt32(), WM_CSKEYBOARDMOVE, x, y); // Move to 0, 0
                PostMessage(keyboardPs.Handle.ToInt32(), WM_CSKEYBOARDRESIZE, w, h); // Resize to 600, 300
            }
        }
    }
}

사용하기

//TextBox 진입시에 키보드 띄우고 위치, 크기 상단으로 지정
private void text_Enter(object sender, EventArgs e) {
    VKeyboard.showKeyboard();
    VKeyboard.moveWindow(0, 0, 1024, 350);
}

//TextBox 나갈때 키모드 안보이게 처리
private void text_Leave(object sender, EventArgs e) {
    VKeyboard.hideKeyboard();
}

소스 다운↓↓↓

VKeyboard.cs

0.00MB

C# ini 사용하기

SourceTree — Sun, 5 Dec 2021 11:18:31 +0900

C# ini 사용하기

ini 데이터 저장
ini 데이터 가져오기

IniFile 클래스(유틸) 생성

using System.Runtime.InteropServices;
using System.Text;

namespace formsApp
{
    class IniFile
    {
        [DllImport("kernel32")]
        private static extern long WritePrivateProfileString(string section, string key, string val, string filePath);
        [DllImport("kernel32")]
        private static extern int GetPrivateProfileString(string section, string key, string def, StringBuilder retVal, int size, string filePath);

        public static void SetValue(string path, string Section, string Key, string Value)
        {
            WritePrivateProfileString(Section, Key, Value, path);
        }

        public static string GetValue(string path, string Section, string Key, string Default)
        {
            StringBuilder temp = new StringBuilder(255);
            int i = GetPrivateProfileString(Section, Key, Default, temp, 255, path);
            if (temp != null && temp.Length > 0) return temp.ToString();
            else return Default;
        }
    }
}

IniFile 클래스(유틸) 사용

//ini파일 경로 지정
String iniPath = Application.StartupPath + @"\config.ini";

//저장하기
IniFile.SetValue(iniPath, "Public", "Data1", "첫번째 데이터");
IniFile.SetValue(iniPath, "Public", "Data2", "두번째 데이터");
IniFile.SetValue(iniPath, "Private", "Date1", "첫 데이터");

//가져오기
String pubData1 = IniFile.GetValue(iniPath, "Public", "Data1", "기본값");
String pubData2 = IniFile.GetValue(iniPath, "Public", "Data2", "기본값");
String priData1 = IniFile.GetValue(iniPath, "Private", "Data1", "기본값");

소스 다운↓↓↓

IniFile.cs

0.00MB

Swift Target 13미만 시 UIScene, UISceneConfigration, .. Error

SourceTree — Sat, 20 Nov 2021 09:26:09 +0900

새로운 프로젝트 생성후 적용 타겟을 13미만으로 설정시 발행하는 에러를 수정하는 방법입니다.

에러내용

'ConnectionOptions' is only available in iOS 13.0 or newer
'UIScene' is only available in iOS 13.0 or newer
'UISceneConfiguration' is only available in iOS 13.0 or newer

AppDelegate.swift 수정

import UIKit
 
@main
class AppDelegate: UIResponder, UIApplicationDelegate {
    //---iOS 13미만 에러 수정------
    var window: UIWindow?
 
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        return true
    }
 
    // MARK: UISceneSession Lifecycle
    //---iOS 13미만 에러 수정------
    @available(iOS 13.0, *)
    func application(_ application: UIApplication, configurationForConnecting connectingSceneSession: UISceneSession, options: UIScene.ConnectionOptions) -> UISceneConfiguration {
        // Called when a new scene session is being created.
        // Use this method to select a configuration to create the new scene with.
        return UISceneConfiguration(name: "Default Configuration", sessionRole: connectingSceneSession.role)
    }
 
    //---iOS 13미만 에러 수정------
    @available(iOS 13.0, *)
    func application(_ application: UIApplication, didDiscardSceneSessions sceneSessions: Set<UISceneSession>) {
        // Called when the user discards a scene session.
        // If any sessions were discarded while the application was not running, this will be called shortly after application:didFinishLaunchingWithOptions.
        // Use this method to release any resources that were specific to the discarded scenes, as they will not return.
    }
}

SceneDelegate.swift 수정

import UIKit
 
//---iOS 13미만 에러 수정------
@available(iOS 13.0, *)
class SceneDelegate: UIResponder, UIWindowSceneDelegate {
 
    var window: UIWindow?
 
    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        // Use this method to optionally configure and attach the UIWindow `window` to the provided UIWindowScene `scene`.
        // If using a storyboard, the `window` property will automatically be initialized and attached to the scene.
        // This delegate does not imply the connecting scene or session are new (see `application:configurationForConnectingSceneSession` instead).
        guard let _ = (scene as? UIWindowScene) else { return }
    }
 
    func sceneDidDisconnect(_ scene: UIScene) {
        // Called as the scene is being released by the system.
        // This occurs shortly after the scene enters the background, or when its session is discarded.
        // Release any resources associated with this scene that can be re-created the next time the scene connects.
        // The scene may re-connect later, as its session was not necessarily discarded (see `application:didDiscardSceneSessions` instead).
    }
 
    func sceneDidBecomeActive(_ scene: UIScene) {
        // Called when the scene has moved from an inactive state to an active state.
        // Use this method to restart any tasks that were paused (or not yet started) when the scene was inactive.
    }
 
    func sceneWillResignActive(_ scene: UIScene) {
        // Called when the scene will move from an active state to an inactive state.
        // This may occur due to temporary interruptions (ex. an incoming phone call).
    }
 
    func sceneWillEnterForeground(_ scene: UIScene) {
        // Called as the scene transitions from the background to the foreground.
        // Use this method to undo the changes made on entering the background.
    }
 
    func sceneDidEnterBackground(_ scene: UIScene) {
        // Called as the scene transitions from the foreground to the background.
        // Use this method to save data, release shared resources, and store enough scene-specific state information
        // to restore the scene back to its current state.
    }
}

Javascript 로딩바 동적 생성후 Show/Hide

SourceTree — Sat, 20 Nov 2021 09:24:56 +0900

자바스크립트로 동적으로 로딩바를 Show, Hide하는 예제입니다.

'use strict';
function Spinner(){
	Spinner.element=document.createElementNS('http://www.w3.org/2000/svg', 'svg');
	let c=document.createElementNS('http://www.w3.org/2000/svg', 'circle');
	Spinner.element.setAttribute('width','50');
	Spinner.element.setAttribute('height','50');	
	c.setAttribute('viewBox','0 0 50 50');
	c.setAttribute('cx','25');
	c.setAttribute('cy','25');
	c.setAttribute('r','21');
	c.setAttribute('stroke-width','8');
	c.setAttribute('stroke','#2196f3');
	c.setAttribute('fill','transparent');
	Spinner.element.appendChild(c);
	Spinner.element.style.cssText='position:absolute;left:calc(50% - 25px);top:calc(50% - 25px)';
	Spinner.element.style.zIndex = 999999;
	document.body.appendChild(Spinner.element);
}
Spinner.id=null;
Spinner.element=null;
Spinner.show=function(){
	if(Spinner.element == null) Spinner();
 
	const c=264,m=15;
	Spinner.element.style.display='block';
	move1();
	function move1(){
		let i=0,o=0;
		move();
		function move(){
			if(i==c)move2();
			else{
				i+=4;o+=8;
				Spinner.element.setAttribute('stroke-dasharray',i+' '+(c-i));
				Spinner.element.setAttribute('stroke-dashoffset',o)
				Spinner.id=setTimeout(move,m)
			}
		}
	}
	function move2(){
		let i=c,o=c*2;
		move();
		function move(){
			if(i==0)move1();
			else{
				i-=4;o+=4;
				Spinner.element.setAttribute('stroke-dasharray',i+' '+(c-i));
				Spinner.element.setAttribute('stroke-dashoffset',o)
				Spinner.id=setTimeout(move,m)
			}
		}
	}
};
Spinner.hide=function(){
	Spinner.element.style.display='none';
	if(Spinner.id){
		clearTimeout(Spinner.id);
		Spinner.id=null
	}
	Spinner.element.setAttribute('stroke-dasharray','0 264');
	Spinner.element.setAttribute('stroke-dashoffset','0')
};


//사용하기 : 로딩바 보이게
Spinner.show();

//사용하기 : 로딩바 안보이게
Spinner.hide();