Digital Dynamics

Droop 개념

Amazon Lightsale 사용법

mRemoteNG에서 잘 안되면, Putty를 최신 버전으로 사용해야 함. 그리고 Putty를 mRemoteNG가 아닌 설치한 Putty를 사용하도록 설정해야 함.

- Putty Configuration -> Connection -> SSH -> Auth -> Credentials 에서

- Private Key file for authentication에 priv.pem.ppk 파일을 세팅

pem 파일을 ppk로 변환하기

- Putty Key Generator (puttygen.exe) 설치 및 실행 (c:\Program Files\Putty)

- Conversions -> Import Key 하여 Lightsale pem 파일을 로드

- Save private key 버튼 눌러 PPK 생성

cross-env 활용

npm run build 할 때, GENERATE_SOURCEMAP 관련 에러날 때.

MacOS에서는 잘 빌드되는데, Windows 에서 다음과 같은 에러가 날 수 있다.

GENERATE_SOURCEMAP’은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.

이는 package.json에 정의된 build 스크립트의 GENERATE_SOURCEMAP 부분이 Windows와 맞지 않기 때문이다. 따로 set 명령을 써야 한다.

"scripts": {
  "start": "react-scripts start",
  "build": "GENERATE_SOURCEMAP=false react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "format": "prettier --write \"src/**/*.{js,ts,tsx}\""
},

간단하게 해결하려면 cross-env 를 사용하면 된다. npm install cross-env 한 다음, 위 스크립트를 다음과 같이 수정한다.

"scripts": {
  "start": "react-scripts start",
  "build": "cross-env GENERATE_SOURCEMAP=false react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "format": "prettier --write \"src/**/*.{js,ts,tsx}\""
},

npm start 를 0.0.0.0 으로 bind 하기

npm start는 localhost 를 바인드하기 때문에, 외부에서 접속을 하지 못한다. 이를 0.0.0.0 으로 바인드하려면 HOST=0.0.0.0 이라고 환경변수를 설정해야 한다.
이를 위해 cross-env를 활용할 수 있다.

"scripts": {
  "start": "cross-env HOST=0.0.0.0 react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "format": "prettier --write \"src/**/*.{js,ts,tsx}\""
},

Written with StackEdit.

PrimeReact + Formik

PrimeReact에서 Formik 으로 Form 개발하는 법 정리.

	import React, {useEffect, useState, useContext, useRef} from 'react';
	import { Dialog } from 'primereact/dialog';
	import { Button } from 'primereact/button';
	import { InputText } from 'primereact/inputtext';
	import { useFormik } from 'formik';
	import { classNames } from 'primereact/utils';

	export function FormDemo(props) {
	const [editMode, setEditMode] = useState(true); // 한 Dialog를 공유하기 위해, true이면 편집모드, false이면 Add New Mode
	const [showNew, setShowNew] = useState(false);
	const [initialData, setInitialData] = useState({
	sid: null,
	name: "",
	address: "",
	description: "",
	owner: ""
	});

	const formik = useFormik({
	initialValues: initialData,
	enableReinitialize: true,
	validate: (data) => {
	let errors = {};
	if (!data.name) {
	errors.name = "이름을 입력하세요";
	}
	if (!data.address) {
	errors.address = "주소를 입력하세요";
	}
	return errors;
	},
	onSubmit: (data) => {
	console.log("formik onSubmit");
	console.dir(data);
	/* Do the real thing here */
	/*
	if (editMode === true) {
	onUpdateSite();
	} else {
	onCreateSite();
	}
	*/
	}
	});

	const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]); // !! 는 truethy, falsey 값을 true, false로 정규화함.
	const getFormErrorMessage = (name) => {
	return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error"> </small>;
	}

	const renderDialogFooter = () => {
	return (
	<div>
	<Button label="Cancel" icon="pi pi-times" onClick={() => setShowNew(false)} className="p-button-text" />
	<Button label={editMode===true ? "수정하기" : "만들기"} icon="pi pi-check" onClick={formik.handleSubmit} type="button" autoFocus />
	</div>
	);
	}

	return (
	<div>
	<Dialog header={editMode ? `사이트 수정: ID=${sid}` : "새 사이트 등록"} visible={showNew} style={{ width: '500px' }} footer={renderDialogFooter} onHide={() => setShowNew(false)}>
	<form onSubmit={formik.handleSubmit} onReset={formik.handleReset}>
	<div className="grid mt-4">
	<div className="col-12">
	<span className="p-float-label">
	<InputText id="name" value={formik.values.name} onChange={(e) => formik.setFieldValue('name', e.target.value)}
	className={classNames('width-100', {'p-invalid': isFormFieldInvalid('name')})} size={60}/>
	<label htmlFor="name">사이트 이름</label>
	</span>
	{getFormErrorMessage('name')}
	</div>
	<div className="col-12">
	<span className="p-float-label">
	<InputText id="owner" value={formik.values.owner} onChange={(e) => formik.setFieldValue('owner', e.target.value)}
	className={classNames("width-100", {"p-invalid": isFormFieldInvalid('owner')})} size={60}/>
	<label htmlFor="owner">소유자 ID</label>
	</span>
	{getFormErrorMessage('owner')}
	</div>
	<div className="col-12">
	<span className="p-float-label">
	<InputText id="address" value={formik.values.address} onChange={(e) => formik.setFieldValue('address', e.target.value)}
	className={classNames("width-100", {'p-invalid': isFormFieldInvalid('address')})} size={60}/>
	<label htmlFor="address">사이트 주소</label>
	</span>
	{getFormErrorMessage('address')}
	</div>
	<div className="col-12">
	<span className="p-float-label">
	<InputText id="description" value={formik.values.description} onChange={(e) => formik.setFieldValue('description', e.target.value)}
	className={classNames("width-100", {'p-invalid': isFormFieldInvalid('description')})} size={60}/>
	<label htmlFor="description">사이트 설명</label>
	</span>
	{getFormErrorMessage('description')}
	</div>
	</div>
	</form>
	</Dialog>
	</div>
	);
	}

view raw form.js hosted with ❤ by GitHub

이미지를 PDF로 만들기 & PDF 합치기 등

1. Image를 pdf로 변환하기

- 온라인에서 image를 pdf로 변환하는 툴은 많으나, 사용하지 말길 권한다. 중요한 정보가 인터넷에 누출될 가능성이 있다.

- 예전에는 ImageMagick 으로 이미지를 pdf로 변환할 수 있었으나, 이제 더 편리한 도구가 나왔다.

- Python에서 동작 가능한 img2pdf 가 그것이다.

- 설치 (Python이 설치되어 있다고 가정하면)

$ pip install img2pdf

- 실행

$ img2pdf 1.jpg 2.jpg 3.jpg --pagesize A4 -o out.pdf

2. PDF 병합/분할/회전하기

- pdfsam 이라는 툴을 사용하면 된다. 무료버전도 있으므로 유용하다.

- 다운로드: https://pdfsam.org/ko/

nmcli: Network Manager의 CLI 명령 요약

Network Manager의 CLI 명령어인 nmcli의 주요 사용예를 정리함.

1. 네트워크 인터페이스 보기

$ nmcli con show

NAME UUID TYPE DEVICE

Wired connection 1 8e2a801b-6074-30bc-9039-8f90d51ad28d ethernet eno2

tun0 d0a9ab3e-5373-44e4-8312-ee088c35cdae tun tun0

2. 고정 IP로 변경하기

$ nmcli con mod "Wired connection 1" connection.autoconnect yes

$ nmcli con mod "Wired connection 1" ipv4.address 192.168.1.206/24 ipv4.gateway 192.168.1.1 ipv4.dns "8.8.8.8 1.1.1.1" ipv4.method manual

$ systemctl restart NetworkManager.service

3. Wifi 상태 확인

# wifi 상태 확인
$ nmcli radio wifi

# wifi 켜기
$ nmcli radio wifi on

# AP 리스트 보기
$ nmcli device wifi list
# AP 연결
$ nmcli device wifi connect <My_AP> password <Some_Password>

4. nmtui 를 이용하면 복잡한 명령어를 외우지 않아도 됨.

설치

$ sudo apt install nmtui

$ nmtui

OpenVPN 세팅하기

OpenVPN 네트워크를 구축한 경험을 정리했다.

OpenVPN은 VPN(Virtual Private Network) 솔루션 중에서 가장 많이 사용되고 있다. OpenVPN은 상업용 제품도 팔고, 클라우드 서비스도 제공하지만, 오픈소스인 Community Edition도 제공한다.

이 글은 OpenVPN Community Edition의 설치와 운용에 대한 내용이다.