Hyper-V 와 VirtualBox 쉽게 변경하기 

VirtualBox 를 충돌없이 사용하기 위해서는 윈도우에서 내장된 가상 시뮬레이터 기능인 Hyper-V를 꺼야만 하는데

처음부터 윈도우즈 부팅메뉴에서 선택할수 있게 설정이 가능해서 소개한다 (역시 구글신)

간단하게 BCDEDIT 를 변경하여 하는 방법인데 아래 스크립트를 간단하게 복붙만하는 것으로 가능합니다. 

아래 명령어를 차레대로 설정하자

bcdedit /copy {current} /d "No Hyper-V" 
위 명령어를 실행하면 시리얼 넘버 비슷한 것이 나오는데 그걸 아래 명령어에 그대로 적용하도록 하자

bcdedit /set {serial-number} hypervisorlaunchtype off 

참고: 

1. http://www.hanselman.com/blog/SwitchEasilyBetweenVirtualBoxAndHyperVWithABCDEditBootEntryInWindows81.aspx

2. https://derekgusoff.wordpress.com/2012/09/05/run-hyper-v-and-virtualbox-on-the-same-machine/

기존 JavaScript 코드베이스를 TypeScript로 통합하기

기존 순수 JavaScript 코드베이스를 TypeScript로 옮길 때 발생할 수 있는 주요 문제 중 하나는 모듈 경로를 찾지 못하는 문제입니다. 이 문제를 해결하기 위해 설정 및 모듈 사용 방법에 대해 정리했습니다.

TypeScript 설정 추가

tsconfig.json에서 다음 두 옵션을 설정하여 기존 JavaScript 파일을 TypeScript 프로젝트에 포함할 수 있습니다.

{
  "compilerOptions": {
    "allowJs": true,  // JavaScript 파일을 포함
    "checkJs": false  // JavaScript 파일의 타입 검사 비활성화
  }
}

주요 효과

• allowJs: TypeScript 프로젝트에 JavaScript 파일을 포함할 수 있습니다.
• checkJs: JavaScript 파일에 대해 타입 검사를 하지 않습니다.

기존 모듈의 사용

만약 a.js 파일이 아래와 같이 정의되어 있다면:

a.js

function hey() {
    console.log("hey");
}
export { hey };

이를 TypeScript에서 사용하는 방법은 다음과 같습니다.

main.ts

1. ES 모듈 방식

import * as moduleA from './a'; // 또는 명시적으로 상대 경로 작성
moduleA.hey();

2. CommonJS 스타일

const moduleA = require('./a');
moduleA.hey();

더 TypeScript스러운 방법으로 사용하기

1. .d.ts 파일로 타입 정의 추가

JavaScript 모듈의 타입을 정의하면 TypeScript 코드에서 안전하게 사용할 수 있습니다.

a.d.ts

declare module './a' {
    export function hey(): void;
}

이렇게 하면 TypeScript는 a.js를 사용할 때 타입 정보를 제공합니다.

2. 타입 정의가 포함된 라이브러리 사용

써드파티 JavaScript 라이브러리를 사용할 때는 이미 제공된 타입 정의를 활용할 수 있습니다. 타입 정의는 @types/ 패키지를 통해 설치 가능합니다.

npm install --save-dev @types/library-name

이후 TypeScript에서 바로 타입 정보를 활용할 수 있습니다.

3. ES 모듈로 변환

기존 JavaScript 코드를 TypeScript와 자연스럽게 동작하도록 리팩토링할 수도 있습니다.

기존 JavaScript (a.js)

export function hey() {
    console.log("hey");
}

TypeScript에서 사용 (main.ts)

import { hey } from './a';
hey();

추가 참고 자료

1. 공식 TypeScript 문서 - JavaScript 파일 포함하기
2. TypeScript에서 JavaScript 모듈 사용하기
3. TypeScript 공식 문서 - Declaration Files

마무리

위 방법들을 활용하면 기존 JavaScript 코드베이스를 TypeScript로 점진적으로 통합할 수 있습니다.
다음 단계로는:

1. 타입 정의를 작성하거나
2. @types 패키지를 활용해 써드파티 라이브러리를 더 TypeScript스럽게 사용할 수 있습니다.

PHP 프레임워크계를 평정하고 있는 Laravel 

MVC 기반의 프레임 워크로 현재 많은 프로젝트들에 쓰이고 있다. 

라라벨 개발환경을 구성하는 방법은 두가지 방법이 있다.

1.  필요프로그램 설치

먼저 라라벨 개발환경이 미리 설정된 가상 머신 이미지 파일을 다운로드 받는 방법이 이다. 

A. https://www.vagrantup.com/ 에서 다운후 설치

B 가상 머신 설치 

vagrant 는 가상 에뮬레이터를 사용하므로 가상의 머신을 돌릴 에뮬레이터를 설치해야한다.

vmware 와  virtualbox 둘중에 선택하도록한다. 

virtualbox가 오픈소스이면서 무료이면서 이 글에서는 virtualbox를 사용한다. 

C. GIT 설치

git.org 에서 설치파일 다운로드 

Mac osx 같은 경우에는 brew 혹은 macports 를 이용해서 설치 가능

D. laravel/homestead 박스 추가 

설치를 완료했다면

vagrant box add laravel/homestead

2. 설정

MAC의 사용자 같은 경우는 terminal을 구동하고 

Windows 같은 경우는 방금 설치한 Git bash 를 활용해서 설치 

(Windows 10 같은 경우는 ubuntu bash 로도 가능) 

home folder로 가서 Homestead 파일을 다운받자

$ cd ~

$ git clone https://github.com/laravel/homestead.git Homestead

Homestead 폴더로 들어가서 초기 설정 파일 설치

bash init.sh 

명령어 실행후 .homestead 폴더가 생성된다. 

위부터 차근 차근 살펴보면

ip

memory

cpus: 

provider: 

Homestead.yaml 파일안에 아래 folders 항목이 있는 것을 볼수 있다.

folders:

    - map: ~/Code

      to: /home/vagrant/Code

folders 자신의 라라벨 파일이 있을곳의 document base 로 설정하자.

나중에 Code가 루트 폴더로 인식되어 

Code/public 에서 laravel 프로젝트의 public 역할을 한다. 

아래쪽을 

sites:

    - map: homestead.app

      to: /home/vagrant/Code/Laravel/public

hosts 파일 설정 ( 개발 컴퓨터에서 특정 주소를 칠경우 강제적으로 라우팅할수 있도록 해야한다 )

hosts 파일에 대한 자세한 내용은 여기를 참조

/etc/hosts

C:\Windows\System32\drivers\etc\hosts

192.168.10.10  homestead.app

가상환경에 연결할 ssh 키를 생성하자

ssh-keygen -t rsa -C "you@homestead"

ssh 키를 이용하여 homestead 환경에 접속해보자

Linux 환경이나 mac osx 환경에서는 이미 ssh 클라이언트가 설치되어 있을것이다.

Windows 에서는 putty 를 사용하자. 

참고:

1. https://laravel.com/docs/5.3/homestead

2. https://laravel.com/docs/5.3/installation

해당 div에 아래 항목을 추가

transform: translate(-50%, -50%);

HTML에서 이미지 버튼을 수동으로 삽입하는 방법을 알아보겠습니다. CSS의 background-image 속성을 활용하여 버튼에 이미지를 추가할 수 있습니다.

예제 코드

HTML

CSS

설명

• background-image: 버튼의 배경에 이미지를 삽입합니다.

• background-color: 버튼 배경색을 투명하게 만들어 이미지가 선명하게 보이도록 합니다.

• background-repeat: 배경 이미지가 반복되지 않도록 설정하여 이미지를 한 번만 표시합니다.

• background-position: 배경 이미지의 위치를 조정합니다. 0 0은 좌상단을 의미합니다.

• border: 버튼의 기본 테두리를 제거하여 깔끔한 디자인을 만듭니다.

• cursor: 마우스 오버 시 포인터 커서로 변경하여 클릭 가능한 요소임을 나타냅니다.

• height: 버튼의 높이를 이미지의 높이와 일치시켜 일관성을 유지합니다.

• padding-left: 이미지와 텍스트 사이에 간격을 두어 가독성을 높입니다.

• vertical-align: 텍스트를 수직으로 중앙 정렬하여 버튼 내부의 요소들이 균형 있게 배치되도록 합니다

추가 팁

• 이미지 크기 조정: 이미지의 크기에 맞게 height와 padding-left 값을 조정해야 합니다.

• 반응형 디자인: 다양한 화면 크기에 대응하려면 미디어 쿼리를 사용하여 스타일을 조정할 수 있습니다.

• 접근성 고려: aria-label 등을 사용하여 스크린 리더 사용자에게도 버튼의 기능을 명확히 전달합니다.

참고 자료

• Stack Overflow: HTML/CSS - How to add image/icon to input type=“button”?

http://stackoverflow.com/questions/2920076/html-css-how-to-add-image-icon-to-input-type-button

Cordova로 갑작스럽게 Build 에러가 나서 원인을 찾지 못한채 삽질을 해보다가 검색을 해보니

Resource 파일명이 아스키코드가 아니면 나는 에러이다. 그림파일중 일부가 한글파일인 상태로 그대로이기때문에 일어나는 문제였다.

Error: cmd: Command failed with exit code 1 Error output:

FAILURE: Build failed with an exception.

* What went wrong:

Execution failed for task ':processDebugResources'.

> com.android.ide.common.process.ProcessException: org.gradle.process.internal.ExecException: Process 'command 'C:\andsdk\build-tools\24.0.1\aapt.exe'' finished with non-zero exit value 1

* Try:

Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

파일명을 한글에서 영문으로 바꾸어주니 잘해결되었다. 

참고: 

http://stackoverflow.com/questions/38690348/ionic-build-failed-find-the-line-where-the-error-occurs