신규하 블로그

VSCode에서 python 개발 환경 구성 하기

신규하 — Tue, 19 Dec 2023 23:44:48 +0900

간만에 python을 개발해 보려고 vscode에 세팅을 하다가 Ruff라는 것을 알게 되어서 정리 해 봅니다.

Ruff 소개

Rust로 작성된 매우 빠른 파이썬 린터 및 코드 포매터입니다. 이전에 formatter와 linter를 쓰기 위해서 black, flake8 또는 pylint 등 이것 저것 조합해서 사용을 했었는데. 이걸 한번에 사용 할 수 있습니다.
거기다 기존 linter나 formatter보다 속도가 10~100배까지 빠르다고 합니다.

VSCode에서 설정 하기

설치 확장

Python: 파이썬 개발을 위해서 가장 기본적으로 설치 해 줘야 하는 확장입니다.
Pylance : 유용한 랭기지 서버로, Pyright를 이용해서 정적 유형 검사로 구동 되며, IntelliCode를 같이 사용 하면 코딩 시 유용한 제안을 해 주게 됩니다.
Inetellicode : 코드의 자동 완성을 도와 줍니다.
Ruff : 위에 소개한 어플

python에 필요한 패키지 설치 하기

아래 명령어를 실행 해서 ruff를 실행합니다.

pip install ruff pylance

일반적으로는 vscode에서 자동으로 설치가 되지만 설치가 되지 않았을 경우나 수동으로 설치가 필요한 경우에는 직접 설치를 해 주셔야 합니다.

ruff 설정 파일

프로젝트에서 사용하는 lint를 설정 할 수 있습니다. 현재 프로젝트의 상단에 pyproject.toml, ruff.toml, 또는 .ruff.toml 파일을 작성해 주면 됩니다.

URL : Configuring Ruff

예제 > .ruff.toml

exclude = [
    ".bzr",
    ".direnv",
    ".eggs",
    ".git",
    ".git-rewrite",
    ".hg",
    ".mypy_cache",
    ".nox",
    ".pants.d",
    ".pytype",
    ".ruff_cache",
    ".svn",
    ".tox",
    ".venv",
    "__pypackages__",
    "_build",
    "buck-out",
    "build",
    "dist",
    "node_modules",
    "venv",
]

line-length = 120
indent-width = 4

[lint]
# 기본적으로 Pyflakes('F')와 pycodestyle('E') 코드의 하위 집합을 활성화합니다.
select = ["E4", "E7", "E9", "F"]
ignore = []

# 활성화된 모든 규칙에 대한 수정 허용.
fixable = ["ALL"]
unfixable = []

# 밑줄 접두사가 붙은 경우 사용하지 않는 변수를 허용합니다.
dummy-variable-rgx = "^(_+|(_+[a-zA-Z0-9_]*[a-zA-Z0-9]+?))$"

[format]
quote-style = "double"
indent-style = "space"
skip-magic-trailing-comma = false
line-ending = "auto"
docstring-code-format = false
docstring-code-line-length = "dynamic"

VScode 설정

settings.json에 아래와 같은 코드를 추가 해 줍니다.

  "python.languageServer": "Pylance",
  "[python]": {
    "editor.defaultFormatter": "charliermarsh.ruff",
    "editor.insertSpaces": true,
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.fixAll": true,
      "source.organizeImports": true,
      "editor.insertSpaces": true
    }
  },

참고

발헤임 유니티 에디터기에서 띄워보기

신규하 — Thu, 6 Oct 2022 00:49:04 +0900

발헤임을 유니티 에디터기에서 띄워 보기를 해 봤는데..
잘 되어서 기록 해 봅니다.

그런데, 버전이 중요 합니다.
버전이 달라 지면, 잘 안 되네요 ㅜ.ㅜ

발헤임을 분석해 보고 싶거나, 모드를 만드시려는 분은 참고 하세요.

준비물

발헤임 버전 v0.209.10
- 되도록이면 위 버전이 좋습니다. 최신 버전에서는 이벤트 관련 오류가 잔뜩 발생하고, 이전 버전은 유니티 2019로 개발 되어서 테스트 해 보지 않았습니다.. 포럼에 보니.. 버전이 올라가면 다른 오류가 발생 하는 것 같더라군요... 위 버전이 트러블 없이 가장 깔끔하게 실행이 되었습니다.
AssetRipperGUI 0.2.3.0
- 다운로드를 받고 실행 하고 싶은 곳에 압축을 풀어 줍니다.
ValheimExportHelper 1.2.0
- 다운르도를 받고, 위에서 받은 AssetRipperGUI폴더에 Plugins 폴더를 만들고 복사 해 줍니다.
Unity Hub
Unity 2020.3.33
- 발헤임이 버전으로 되어 있습니다. 되도록이면 이 버전을 설치해서 실행 해 주세요.

에셋 추출

압축을 푼 AssetRipper.exe를 실행해 줍니다.
Shader Export Format을 Yaml Asset으로 설정 해 줍니다.
메뉴에서 File > Open Folder를 선택 해 주고, 발헤임이 설치된 경로를 선택해 줍니다. 터미널에서 아래와 같이 텍스트로 발헤임 글씨가 나와야 ValheimExportHelper가 정상적으로 설치가 된겁니다. 글씨가 안 나왔다면 준비물 3을 다시 진행 해 주세요.
프로젝트가 열렸으면, Export > Export all Files를 선택하고 export 할 빈 폴더를 선택해 줍니다.
완료 될 때 까지 기다리면 됩니다.

유니티에서 열기

유니티 허브를 실행합니다.
열기를 선택하고 export 한 폴더에서 valheim/Valheim 0.209.10 - [날짜]로 된 폴더를 열어 줍니다.
열다가 API Update Required 메시지 박스가 나오면 I Made a Backup. Go Ahead!를 선택 합니다.
프로젝트가 다 열리면 Assets/Scenes/loading을 열어 줍니다.
실행 버튼을 눌러주면 실행이 됩니다.

버전만 잘 맞춘다면, 무리 없이 실행이 가능 할 겁니다.

그럼~

Fontforge로 영문 폰트와 한글 폰트 합치기

신규하 — Wed, 5 Oct 2022 11:16:21 +0900

먼저 Fontforge 사이트에서 소프트웨어를 다운로드 받습니다.

https://fontforge.org/en-US/

FontForge

FontForge is a free and open-source outline font editor.

fontforge.org

설치 하고 나면, 한글이 나오는데.. 많은 부분이 깨져서 나옵니다.

영문으로 실행 하고 싶다면, C:\Program Files (x86)\FontForgeBuilds\fontforge.bat 파일에서

::set LANGUAGE=en

위 부분은 아래와 같이 변경 해 줍니다.

set LANGUAGE=en

한글이 잘 되면 좋은데.. 깨져서 나와서.. 도저히 쓸 수가 없어서.. 전 이렇게 사용 했습니다.

여기서 사용한 폰트는 JetBrains Mono Regular Nerd Font와 스포카한산스 폰트 입니다.

각각 다운로드는 아래에서 받으시면 됩니다.

https://www.nerdfonts.com/font-downloads

Nerd Fonts - Iconic font aggregator, glyphs/icons collection, & fonts patcher

Iconic font aggregator, collection, & patcher: 3,600+ glyph/icons, 40+ patched fonts: Hack, Source Code Pro, more. Popular glyph collections: Font Awesome, Octicons, Material Design Icons, and more

www.nerdfonts.com

https://spoqa.github.io/spoqa-han-sans/ko-KR/

Spoqa Han Sans Neo

Spoqa unveil the new Spoqa Han Sans Neo, which has evolved in many ways. | 여러모로 개선을 거쳐 진화한 스포카 한 산스 네오를 공개합니다. | これまでいろいろ改善して進化した新しいスポカーハンサンスネオ

spoqa.github.io

합칠 폰트가 준비 되었다면, 폰트포지에서 2개의 폰트를 각각 로딩해 주시면 됩니다.

이 때 주의 해야 할 점은 처음 로딩한 창에서 File > Open 메뉴를 통해서 Open을 해 주셔야 머지 할 때 편하게 머지 하실 있습니다.

File > Open 메뉴를 통하지 않으면 파일 단위로 머지를 하게 됩니다.

이렇게 창이 두개가 뜨면, 두 폰트의 em size를 맞춰 줘야 합니다.

상단 메뉴에서 Element > Font Info를 선택 하시고 합칠려고 하는 폰트의 Em Size와 동일하게 설정해 주시면 폰트를 변경하게 됩니다.

두 폰트의 Em Size가 동일 하다면 이 과정은 생략 하셔도 됩니다.

정보가 맞춰 졌다면 Element > Merge Fonts 를 선택 하시면

눌러 주시면 아래와 같은 다이얼로그가 나오고 OK를 눌러 주시면 됩니다.

폰트가 잘 합쳐진것을 확인 하시고, File > Generate Fonts를 통해서 폰트를 내보내기 하시면 됩니다.

아래와 같이 창에서 유형을 TrueType을 선택 하시고, 폰트 이름을 적어 주시고 Generate 버튼을 누르시면

합쳐진 폰트가 생성 됩니다.

유니티에서 BlendShape의 노멀이 깨져 보일때..

신규하 — Wed, 14 Sep 2022 11:16:51 +0900

이렇게 보이면, 해당 모델의 인스펙터에서..

Blend Shape Normals를 None 또는 Import로 변경해 주시면 됩니다.

WSL2에서 Docker Desktop을 사용하지 않고 docker 설치하기..

신규하 — Mon, 29 Aug 2022 17:46:27 +0900

Docker Desktop이 2022년 8월 31일 부터.. 250명 미만이고 년간 수익이 천만달러(약100억) 미만인 기업에서만 Docker Desktop을 무료로 사용 할 수 있다고 합니다. 개인이나 비영리는 계속 사용 가능 하고요.

그래서, Docker Desktop에서 벗어 날려고 자료를 좀 정리 해 봤습니다.

WSL에 Docker 설치하기

먼저 시스템에는 WSL2가 설치가 되어 있어야 합니다.

wsl이 설치가 되어 있지 않다면 아래 URL을 참고 해서 설치 해 주시면 됩니다.

https://docs.microsoft.com/ko-kr/windows/wsl/install

wsl의 배포판이 설치 되어 있지 않다면, 아래와 같이 wsl --list --online 이라고 하면 유효한 배포 목록이 나옵니다. 현재 우분투는 22.04가 윈도우 스토어에 있지만 여기는 20.04가 최신 입니다.

 wsl --install -d "Ubuntu-20.04"

설치가 완료 되었으면 docker를 아래와 같이 설치 해 줍니다.

sudo apt update
curl -sSL get.docker.com | sh
sudo usermod $USER -aG docker

설치 하다 보면.. 위와 같은 메시자가 나오는데.. 그냥.. 기다리시면 됩니다.

그리고, 아래와 같이 /etc/wsl.conf 파일을 열어서..

sudo vi /etc/wsl.conf

아래 내용을 입력 해 줍니다.

[boot]
command="/etc/init.d/docker start"

저장하고 닫고 나서 해당 파일에 실행 권한을 줍니다.

 sudo chmod 777 /etc/wsl.conf

그리고 exit로 쉘을 나가 줍니다.

exit

wsl을 wsl --shutdown으로 wsl을 종료 후 다시 wsl로 wsl을 시작 해 줍니다.

그러고 docker ps를 쳐 봐서.. 아래와 같은 화면이 나오면 정상 적으로 설치가 완료 된 상태 입니다.

> wsl --shutdown
> wsl
$ docker ps

Docker Compose 설치 하기

wsl 상태에서 아래와 같이 입력 해서 설치 해 줍니다.

sudo curl -SL https://github.com/docker/compose/releases/download/v2.7.0/docker-compose-linux-x86_64 -o /usr/local/bin/docker-compose
sudo ln -s /usr/local/bin/docker-compose /usr/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose

설치 확인을 아래와 같이 하시면 됩니다.

$ docker-compose version
Docker Compose version v2.7.0

PowerShell에서 docker 사용하기

단순히 명령어로 사용 하려고 하면, 아래와 같이 입력 해 주시면 사용이 가능 합니다.

wsl docker ps
wsl docker-compose --version

하지만, 간단하게 Alias만 해 주면 좀 더 편하게 docker를 사용 할 수 있습니다.

파워쉘에서 아래와 같이 입력해 줍니다.

notepad $PROFILE

메모장이 뜨고 여기에 아래의 내용을 입력해 줍니다.

Function Start-WslDocker {
    wsl docker $args
}
Function Start-WslDockerCompose {
    wsl docker-compose $args
}
Set-Alias -Name docker -Value Start-WslDocker
Set-Alias -Name docker-compose -Value Start-WslDockerCompose

이렇게 해주고 파워셀을 띄우면, 파워쉘에서 docker 명령어를 사용 할 수 있게 됩니다.

VSCODE에 Docker 설정하기

먼저 기존 docker extension이 설치가 되어 있다면 삭제를 해 주셔야 합니다.

vscode에서 extension에서 wsl을 검색 합니다.

Remote -WSL을 설치 합니다.

그리고, F1을 눌러서 remote-wsl: New WSL Window using Distro.. 를 선택 하시거나 왼쪽 밑 버튼을 눌러서 New WSL Window using Distro.. 를 선택 합니다.

그리고 현재 사용중인 WSL 이미지를 선택 합니다.

그러면, 새로운 vscode가 뜨면서 WSL 과 연결이 됩니다.

이 상태에서 Extension에서 Docker를 새로 설치를 해 줍니다.

그러면, 옆에 docker아이콘이 생기고 vscode에서 wsl의 docker가 접근이 됩니다.

이렇게만 세팅을 해 놓으면 docker desktop이 없더라도 툴까지 사용이 가능 해 집니다.

유용한 CLI

ctop

리눅스에 top과 비슷한 컨셉으로 docker의 프로세스 목록을 보여 줍니다.

wsl에서 apt 로 간단하게 설치가 가능 합니다.

sudo apt install ctop

lazydocker

서비스 부터 컨테이너 이미지, 볼륨까지 한눈에 볼 수 있고 관리가 가능 합니다.

wsl에서 설치 해 주시면 됩니다. 설치 방법은 아래와 같습니다.

curl https://raw.githubusercontent.com/jesseduffield/lazydocker/master/scripts/install_update_linux.sh | bash

참고

윈도우 10에서 Docker desktop이 포트 충돌로 실행 되지 않을 때..

신규하 — Fri, 20 Aug 2021 11:09:06 +0900

윈도우10에서 도커를 사용하면서 간혹 포트가 충돌 난다고 해서.. 도커 이미지가 뜨지 않을 때가 있습니다.

이럴때는 아래와 같이 해 보세요..

우선, 관리자 모드롤 cmd또는 powershell을 띄웁니다.

우선 하이퍼-V를 꺼 줍니다.

dism.exe /Online /Disable-Feature:Microsoft-Hyper-V

재부팅을 해 줍니다.

해당 포트를 제외해 줍니다. 여기서는 1433포트를 예제로 했습니다.

netsh int ipv4 add excludedportrange protocol=tcp startport=1433 numberofports=1

그리고 다시 파이퍼-v를 켜 줍니다.

dism.exe /Online /Enable-Feature:Microsoft-Hyper-V /All

그리고 윈도우를 다시 시작해 줍니다.

많이 버거롭긴 하지만.. 윈도우를 새로 설치하는 것 보다는 낳아서 ㅜ.ㅜ
전 이렇게 사용하고 있습니다.

혹시 다른 방법이 있다면 공유 해 주세요~

웹페이지 파비콘을 이미지로 사용하기

신규하 — Wed, 21 Apr 2021 12:51:38 +0900

link 태그에 아래와 같은 형식으로 이모지를 넣어 주면 된다.

<!DOCTYPE html>
<html>
<head>
    <link rel="icon" href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">⚡️</text></svg>'; />
    <title>Emoji</title>
</head>
<body>
Emoji
</body>
</html>

vscode에서 한번에 여러 프로젝트 한번에 불러 오기

신규하 — Wed, 10 Mar 2021 14:48:49 +0900

vscode로 작업 하면서, 프론트와 백엔드를 별도의 제작해서 사용하는 경우가 있습니다.
매번 실행 프로젝트를 띄울때 마다.. 여러개의 창을 띄워야 하는데..

이게 귀찮아서 한방에 띄우는 batch 파일을 한번 만들어 봤습니다.

@echo off
set paths[0]="C:\workspace\project-frontend\"
set paths[1]="C:\workspace\project-backend\"
set paths[2]="C:\workspace\project-cms\"

for /F "tokens=2 delims==" %%s in ('set paths[') do (
	echo run %%s
	cd %%s
	CALL code .
)

위에서 코드에서 paths의 폴더와 숫자를 신경써서 넣어 주시면 됩니다.

Typescript로 만든 react 프로젝트에서 경로 별칭 사용하기..

신규하 — Mon, 23 Nov 2020 15:56:32 +0900

react 프로젝트를 진행하다 보면 아래와 같이 경로가 복잡해 지는 경우가 있습니다.

import MyComponent from "../../../../../components/MyComponent"

이럴때 간단하게 별칭을 사용해서 아래와 같이 줄이는 방법을 소개 합니다.

import MyComponent from "@/components/MyComponent"

tsconfig.json에 아래와 같이 추가를 해 줍니다.

{
  "compilerOptions": {
    // 추가 룰
    "baseUrl": "./src",
    "paths": {
      "@/*": ["*"],
    }
  }
}

create-reacte-app으로 프로젝트를 만들었다면, npm run eject를 해 주시고 tsconfig-paths-webpack-plugin을 설치해 줍니다.

npm i -D tsconfig-paths-webpack-plugin

그리고, webpack.config.js 파일에 아래와 같은 내용을 추가해 줍니다.

const TsconfigPathsPlugin = require(‘tsconfig-paths-webpack-plugin’);

module.exports = {
  // 추가
  resolve: {
    plugins: [new TsconfigPathsPlugin()],
  }
}

eslint를 사용한다면 eslint.json에 아래의 룰을 추가해 줍니다.

{
  "rules": {
    "import/no-unresolved": "off"
  }
}

Create React App으로 만든 electron앱에서 fs 사용하기..

신규하 — Sun, 20 Sep 2020 03:11:07 +0900

fs 모듈을 쓰려고 하면 `Module not found` 라고 오류가 발생합니다.

문제는 webpack 타겟을 electron-renderer으로 잡아야 하는데, CRA(Create React App)으로 만든 프로젝트는 yarn eject를 해서 수정을 해 줘야 한다.

여기서는 eject를 하지 않고 해결하는 방법이 2가지을 소개 합니다.

craco를 사용하기

craco는 CRA로 만든 프로젝트를 eject하지 않고 간단하게 설정하게 해 주는 패키지이다.

먼저 craco를 설치해 줍니다.

$ npm i -D @craco/craco

그리고, craco.config.js 파일을 만들고 아래 내용을 입력해 줍니다.

module.exports = {
  webpack: {
    configure: {
       target: 'electron-renderer'
    }
  }
};

package.json 파일에서 start와 build 등을 아래와 같이 수정해 줍니다.

"start": "craco start",
"build": "craco build",
"test": "craco test",

마지막으로 BrowserWindow 설정에서 아래와 같이 nodeIntegration, enableRemoteModule 를 추가해 줍니다.

  mainWindow = new BrowserWindow({
    width: 900,
    height: 680,
    frame: false,
    transparent: true,
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true,
    },
  });

이렇게 설정해 주면 fs 사용이 가능해 집니다.

rescripts를 사용하기

rescripts는 CRA프로젝트를 eject하지 않고 설정해서 사용할게 있게 해 주는 패키지 입니다.

rescripts를 설치해 줍니다.

$ npm i -D @rescripts/cli @rescripts/rescript-env

package.json 파일에서 start와 build 등을 아래와 같이 수정해 줍니다.

"start": "rescripts start",
"build": "rescripts build",
"test": "rescripts test",

.rescriptsrc.js 파일을 만들고 아래와 같이 입력해 줍니다.

module.exports = [require.resolve('./.webpack.config.js')]

.webpack.config.js 파일을 만들고 아래와 같이 편집해 줍니다.

module.exports = config => {
  config.target = 'electron-renderer';
  return config;
}

마지막으로 craco와 마찬가지로 BrowserWindow 설정에서 아래와 같이 nodeIntegration, enableRemoteModule 를 추가해 줍니다.

  mainWindow = new BrowserWindow({
    width: 900,
    height: 680,
    frame: false,
    transparent: true,
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true,
    },
  });

이렇게 까지 설정해 주면 fs 사용이 가능해 집니다.

react-create-app으로 만든 typescript 프로젝트에 eslint 적용하기

신규하 — Tue, 15 Sep 2020 15:35:25 +0900

적용해 보면서 하도 고생해서 정리해 봅니다.

Create-react-app

먼저 create-react-app를 통해서 프로젝트를 생성합니다.

$ yarn create react-app my-app-name --template=typescript
$ cd my-app-name

Eslint

생성된 프로젝트 폴더로 이동한 후 eslint를 설치 해 줍니다.

$ yarn add -D eslint

이게 yarn eslint --init을 통해서 eslint를 설정해 줍니다.

$ yarn eslint --init
? How would you like to use ESLint? 
  To check syntax only 
  To check syntax and find problems 
❯ To check syntax, find problems, and enforce code style

? What type of modules does your project use? (Use arrow keys)
❯ JavaScript modules (import/export) 
  CommonJS (require/exports) 
  None of these

? Which framework does your project use? 
❯ React 
  Vue.js 
  None of these

? Does your project use TypeScript? » No / Yes

? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
√ Node

? How would you like to define a style for your project? ...
> Use a popular style guide
  Answer questions about your style
  Inspect your JavaScript file(s)

? Which style guide do you want to follow? ...
> Airbnb: https://github.com/airbnb/javascript
  Standard: https://github.com/standard/standard
  Google: https://github.com/google/eslint-config-google

? What format do you want your config file to be in? ...
  JavaScript
  YAML
> JSON

Checking peerDependencies of eslint-config-airbnb@latest
The config that you've selected requires the following dependencies:

eslint-plugin-react@^7.20.0 @typescript-eslint/eslint-plugin@latest eslint-config-airbnb@latest eslint@^5.16.0 || ^6.8.0 || ^7.2.0 eslint-plugin-import@^2.21.2 eslint-plugin-jsx-a11y@^6.3.0 eslint-plugin-react-hooks@^4 || ^3 || ^2.3.0 || ^1.7.0 @typescript-eslint/parser@latest
? Would you like to install them now with npm? » No / Yes

옵션은 위와 같이 설치해 줍니다.

그런데 마지막에 필요한 패키지가 있다고 설치 하라고 하는데, 그걸 설치하면 react-scripts가 실행이 되지 않는 문제가 현재(2020년 9월 15일) 발생합니다. 나중에 고쳐 질 것 으로 보이지만 지금은 문제가 발생합니다. 그래서 eslintrc.json만 작성하고 설치는 No를 선택합니다.

그리고 아래의 명령어로 설치해 줍니다. 위에꺼대로 설치 해서 잘 된다면 아래꺼는 하실 필요가 없습니다.

yarn add eslint-plugin-react@^7.19.0 @typescript-eslint/eslint-plugin@ˆ2.28.0 eslint-config-airbnb@latest eslint@^6.8.0 eslint-plugin-import@^2.20.1 eslint-plugin-jsx-a11y@^6.2.3 eslint-plugin-react-hooks@^2.5.0 @typescript-eslint/parser@latest -D

그리고 리엑트에서 타입 스크립트의 import를 이해 eslint-import-resolver-typescript 패키지가 필요 합니다. 아래와 같이 설치해 줍니다.

yarn add -D eslint-plugin-react@^7.19.0 @typescript-eslint/eslint-plugin@ˆ2.28.0 eslint-config-airbnb@latest eslint@^6.8.0 eslint-plugin-import@^2.20.1 eslint-plugin-jsx-a11y@^6.2.3 eslint-plugin-react-hooks@^2.5.0 @typescript-eslint/parser@latest

@typescript-eslint/eslint-plugin 패키지를 고르라고 나오는데 여기서는 4.1.1을 골랐습니다.

그리고, eslint에서 제외할 폴더를 지정하기 위해서 .eslintignore 파일을 만들고 아래와 같이 넣어 줍니다.

**/*.js
node_modules
build

그리고 아래와 같이 eslint를 실행해 봅니다.

yarn eslint ./src/**/*.tsx

그러면 es2021을 모르겠다고 나옵니다. eslint 버전을 낮춰서 설치를 해서 생긴 문제 입니다. 이건 .eslintrc.json 파일의 env 항목에서 es2021을 es6로 변경해 주면 됩니다.

그리고 다시 실행하면 eslint에 맞지 않는 파일들이 쭈욱~ 나오는 것을 확인 하 수 있습니다. eslint가 정상적으로 설치 된 것을 확인 할 수 있습니다.

요즘 react에서 hooks를 안 쓰면 react가 아니죠. eslint-plugin-react-hooks를 설치해 줍니다. 그리고 추가로 jest용 eslint도 추가해 줍니다.

$ yarn add -D eslint-plugin-react-hooks eslint-plugin-jest

그리고 eslintrc.json 파일에 아래와 같이 추가해 주면 됩니다.

{
  "plugins": [
    // ...
    "jest",
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

Prettier

이제 vscode에서 원활한 사용을 위해서 prettier를 설치해 줍니다. vscode의 prettier 확장은 꼭~ 설치해 주세요.. 정말 보물 같은 확장입니다.

그러면 아래와 같이 prettier관련 패키지를 설치해 줍니다.

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

그리고 .eslintrc.json 파일을 아래와 같이 넣어 줍니다.

{
  "env": {
    "browser": true,
    "es6": true,
    "jest": true
  },
  "extends": [
    "plugin:react/recommended",
    "airbnb",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended",
    "prettier/react"
  ],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": [
    "jest",
    "react",
    "@typescript-eslint",
    "prettier",
    "react-hooks"
  ],
  "rules": {
    "prettier/prettier": [
      "error"
    ],
    "no-console": "off",
    "react/jsx-filename-extension": [
      1,
      {
        "extensions": [
          ".js",
          ".jsx",
          ".ts",
          ".tsx"
        ]
      }
    ],
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never",
        "json": "never"
      }
    ],
    "react/jsx-props-no-spreading": "off",
    "jsx-a11y/click-events-have-key-events": 0,
    "jsx-a11y/no-static-element-interactions": 0,
    "no-plusplus": "off",
    "import/prefer-default-export": "off",
    "@typescript-eslint/no-unused-vars": "warn",
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars-experimental": "warn",
    "react/js-no-target-blank": "off",
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    "@typescript-eslint/explicit-function-return-type": "off",
    "no-use-before-define": ["off", { "variables": false }]
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [
          ".js",
          ".jsx",
          ".ts",
          ".tsx"
        ]
      }
    }
  }
}

위 내용은 제가 사용하면서 정리한 내용이라서 사용자의 편의에 따라서 수정해서 사용하시면 됩니다.

그리고, .prettierrc 파일을 만들고 아래와 같이 입력해 줍니다.

{
  "endOfLine": "auto",
  "parser": "typescript",
  "printWidth": 100,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false
}

대부분은 prettier의 기본값으로 사용하고 있으면 특별히 변경해서 사용하는 것만 기록을 해 뒀습니다. 기본 값은 아래 주소에서 확인 하시면 됩니다.

prettier.io/docs/en/options.html

Prettier · Opinionated Code Formatter

Opinionated Code Formatter

prettier.io

이제 prettier에서 제외로 할 파일 또는 폴더를 지정해 줍니다.

.pre.prettierignore 파일을 만들고 아래와 같이 입력해 줍니다.

dist
build
package.json

VSCODE

이제 마지막으로 vscode에서 파일을 저장 할 때 자동으로 포맷을 할 수 있도록 설정해 줍니다.

.vscode 폴더를 만들고 settgins.json 파일에 아래와 같이 입력해 줍니다.

파일명 : .vscode/settings.json

{
  "[typescript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javscript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

여기까지 하시면 eslint 설정은 거의 완료 됩니다.

이제 열코딩을 하시면 됩니다~

그리고, 뭔가 이상하면 하거나 불편하다면 .eslintrc.json 또는 .prettierrc 파일을 수정해 나가면서 나한테 맞는 lint 값을 찾아 가시면 됩니다.

위 내용이 적용된 소스를 아래 주소에 있습니다.

github.com/gyuha/react-create-app-eslint

gyuha/react-create-app-eslint

Contribute to gyuha/react-create-app-eslint development by creating an account on GitHub.

github.com

Typescript 기반으로 React Electron App 시작하기.

신규하 — Tue, 15 Sep 2020 01:48:48 +0900

먼저 기본적으로 node.js가 설치가 되어 있다는 가정으로 설명 합니다.

yarn이 설치 되어 있지 않다면 먼저 yarn을 설치해 줍니다. yarn은 npm과 같은 node의 패키지 매니저 입니다.

$ npm install -g yarn

그리고, create-react-app을 통해서 타입스크립트 기반의 프로젝트를 생성해 줍니다.

$ npx create-react-app my-app-name --template typescript
$ cd my-app-name

위와 같이 명령어를 넣어 주면 타입스크립트 기반으로 react와 webpack 설정이 되어 있는 프로젝트가 설정 됩니다.

이제 Electron과 실행에 필요한 패키지를 설치해 줍니다. 아래 패키지들은 개발에서만 사용되는 패키지라서 --dev를 붙여 줬습니다.

$ yarn add --dev electron electron-builder concurrently wait-on cross-env

각 패키지의 역할은 아래와 같습니다.

electron : Electron 기본 패키지
electron-builder : electron을 원하는 플랫폼으로 빌드해 줍니다.
concurrently : 한번에 여러개의 명령어를 실행할 수 있게 해 줍니다.
wait-on : 특정 포트 또는 파일이 활성화 될 때까지 대기를 해 줍니다.
cross-env : 시스템에 관계없이 환경변수 값을 설정할 수 있게 해 줍니다.

그리고 추가로 아래의 패키지를 설치해 줍니다.

$ yarn add electron-is-dev

electron-is-dev 패키지는 현재 환경이 개발 환경인지를 확인 해 주는 패키지 입니다. 이 파일을 별도로 설치한 이유는 앱 실행시 이 패키지를 통해서 실행 경로를 바꿔주기 위해서 입니다.

이게 public 폴더 안에 electron.js 파일을 아래와 같이 작성해 줍니다.

./public/electron.js

const electron = require("electron");
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const path = require("path");
const isDev = require("electron-is-dev");

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({ 
    width: 900, 
    height: 680,
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true,
      devTools: isDev,
    },
  });
  
  mainWindow.loadURL(
    isDev
      ? "http://localhost:3000"
      : `file://${path.join(__dirname, "../build/index.html")}`
  );
  
  if (isDev) {
    mainWindow.webContents.openDevTools({ mode: 'detach' });
  }
  
  mainWindow.setResizable(true);
  mainWindow.on('closed', () => (mainWindow = null));
  mainWindow.focus();
}

app.on("ready", createWindow);

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", () => {
  if (mainWindow === null) {
    createWindow();
  }
});

소스의 가운데 쯤 isDev를 보시면 http와 file로 분기하는 걸 보실 수 있습니다.

개발 환경인 경우에는 아래 그림과 같이 Webpack을 통해서 빌드 된 화면에 Electron app에서 실행되게 됩니다.

이렇게 구성을 하게 되면 소스 파일을 수정하게 되면 앱을 새로 빌드하지 않고도 바로 고친 내용을 Electron 앱에서 실행이 되게 됩니다. 덕분에 빠른 속도로 개발이 가능해 집니다.

그리고 일반적인 빌드를 하게 되면 Webpack으로 묶인 React App 파일이 Electron App에 포함해서 실행 파일로 만들어 지게 됩니다.

그리고, BrowerWindow는 Electron 앱의 다양한 실행 형태를 지정하는 옵션을 가지고 있습니다. 상세한 옵션은 아래 주소를 참고 하세요.

www.electronjs.org/docs/api/browser-window

BrowserWindow | Electron

브라우저 윈도우를 생성하고 제어합니다.

www.electronjs.org

이제 마지막 과정으로 아래 내용을 package.json 파일에 추가해 줍니다.

  "author": "My name",
  "build": {
    "appId": "com.appId"
  },
  "main": "public/electron.js",
  "homepage": "./",
  "scripts": {
    "react-start": "react-scripts start",
    "react-build": "react-scripts build",
    "react-test": "react-scripts test",
    "react-eject": "react-scripts eject",
    "start": "concurrently \"cross-env NODE_ENV=development BROWSER=none yarn react-start\" \"wait-on http://localhost:3000 && electron .\"",
    "build": "yarn react-build && electron-builder",
    "release": "yarn react-build && electron-builder --publish=always"
  },

기존의 scripts 내용은 제거하고 위 내용을 넣어 주시면 됩니다.

여기서 main과 homepage는 꼭 넣어 줘야 빌드하고 나서 실행이 됩니다.

이제 설정을 모두 마쳤습니다. 그리고 아래와 같이 실행을 하게 되면 React App 윈도우가 뜨게 됩니다.

$ yarn start

그리고 실행 파일을 만들고 싶다면 아래와 같이 입력 하시면 됩니다.

$ yarn build

package.json 파일에 배포 설정이 되어 있다면 yarn release를 통해서 배포도 가능 합니다.

vscode에서 vue 프로젝트 생성시 ESlint와 Prettier 설정해 주기

신규하 — Sun, 19 Apr 2020 03:45:44 +0900

기존에 사용하던 TSLint가 더이상 지원을 받지 못 하게 되면서, ESlint로 넘어가야 상태가 되었습니다.

여기서는 Vue 프로젝트를 생성하면서 ESlint와 Prettier를 사용하는 세팅을 간단하게 설정하려고 합니다. 사용하는 툴은 vscode입니다.

vue create myproject 형태로 기본 프로젝트를 선택 합니다.

> npx vue create myproject 

? Please pick a preset: Manually select features 
? Check the features needed for your project: 
 (*) Babel 
 (*) TypeScript 
 ( ) Progressive Web App (PWA) Support 
 ( ) Router 
 ( ) Vuex 
 (*) CSS Pre-processors 
>(*) Linter / Formatter 
 ( ) Unit Testing 
 ( ) E2E Testing      

? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) Y  

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): 
> Sass/SCSS (with dart-sass) 
  Sass/SCSS (with node-sass) 
  Less 
  Stylus       

? Pick a linter / formatter config: 
  ESLint with error prevention only 
  ESLint + Airbnb config 
  ESLint + Standard config 
>  ESLint + Prettier 
  TSLint (deprecated)     

? Pick additional lint features: (Press  to select,  to toggle all,  to invert selection) 
>(*) Lint on save 
 ( ) Lint and fix on commit  

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) 
> In dedicated config files 
  In package.json

여기서 처음 체크 박스에서 Linter / Formatter를 꼭 선택해 주시고, Linter / Formatter는 ESLint + Prettier를 선택해 줍니다.

> cd myproject 
> code .

그리고 위와 같이 vscode를 실행 해 줍니다.

만약 VSCode에는 아래와 같은 확장 프로그램을 설치가 되어 있지 않으면 설치를 해 줍니다.

ESLint
Prettier - Code formatter
Vetur

그리고, vscode의 설정에서 아래와 내용을 추가해 줍니다.

{ 
  "[typescript]": { 
    "editor.defaultFormatter": "esbenp.prettier-vscode", 
    "editor.formatOnSave": true 
  }, 
  "[vue]": { 
    "editor.defaultFormatter": "esbenp.prettier-vscode", 
    "editor.formatOnSave": true 
  } 
}

여기까지 하면 vscode에서 파일을 저장 할 때 알아서 포맷팅을 해 주고 저장을 해 주게 됩니다.

마지막으로 추가로 좀 더 상세한 설정을 하고 싶다면, 프로젝트 루트 폴더에 .prettierrc.json파일을 만들고 상세한 설정을 해 주시면 됩니다. 아래와 같은 형식으로 만들어 주시면 됩니다.

{ 
  "tabWidth": 2, 
  "semi": true, 
  "singleQuote": false, 
  "trailingComma": "es5", 
  "bracketSpacing": false, 
  "arrowParens": "always" 
}

상세한 내용은 아래 링크를 확인 하시면 됩니다.

https://prettier.io/docs/en/options.html

참고

Postman에서 응답으로 받은 변수 사용하기

신규하 — Tue, 7 Apr 2020 16:38:34 +0900

Postman을 사용하다 보면 요청한 값을 변수를 이용해서 저장하고 싶은 데이터가 있을 경우가 많습니다.
예를 들면 인증키 값이라던지, 사용자 정보 등등.. 이 있는데.. 이럴때 사용할 수 있는 유용한 기능이 있어서 소개 합니다.
Tests를 기능을 이용하는 방법입니다.
물론 테스트용도로 사용한다면 더욱 훌륭하게 사용 할 수 있을 겁니다.
먼저 사용할 요청에서 Tests 탭을 선택하고 아래와 같이 넣어 줍니다.

var jsonData = JSON.parse(responseBody); 

if (jsonData.result === true) { 
    pm.environment.set("authToken",jsonData.data.authToken); 
}

그리고 혹시 요청의 내용을 보고 싶다면 아래와 같이 console.log 사용합니다.

console.log(jsonData)

메뉴에서 View > Show Postman Console 을 선택하시면 콘솔창을 통해서 내용을 확인 해 볼 수 있습니다.
이렇게 해서 값이 잘 입력 되었는지 확인은 우측 상단의 눈 버튼을 눌러 보면 됩니다.

참고 : https://learning.postman.com/docs/postman/scripts/test-scripts/

medis를 윈도우용으로 빌드하기..

신규하 — Sat, 4 Apr 2020 01:02:20 +0900

https://github.com/luin/medis

medis는 앱스토어에서 $4.99에 판매하는 redis용 gui 어플리케이션입니다.
하지만, 소스를 직접 컴파일하면 사용이 가능 합니다.

그런데 윈도우용 컴파일 링크가 있는데.. 이상한 설치 화면이 나오고, 빌드 한지도 2년이 넘었길래 빌드 하는 스크립트를 만들어서 직접 빌드를 해 봤습니다.

https://github.com/gyuha/medis

아래 주소에서 소스를 clone 받으신 후

> npm install
> npm run packWin

이렇게 하면 .\dist\out\Medis-win32-ia32 폴더에 실행 파일이 생깁니다.

실행하면 아래와 같이 나옵니다.

https://github.com/gyuha/medis/commit/acf42bec41a2a6a624c7f7a2daf63518fa699049

변경 사항은 위 url을 확인해 보시면 됩니다.

자바스크립트 배열 메서드 정리

신규하 — Sun, 2 Feb 2020 03:23:12 +0900

Array 추가/삭제

Array.push()

배열의 마지막 요소를 추가해 줍니다.

let number_arr = [ 1, 2, 3, 4, 5 ];  
number_arr.push(6);  
console.log(number_arr);  // [ 1, 2, 3, 4, 5, 6 ]

Output :

[1, 2, 3, 4, 5, 6]

Array.unshift()

배열의 가장 첫번째 요소를 추가해 줍니다.

let number_arr = [ 1, 2, 3, 4, 5 ];  
number_arr.unshift(6);  
console.log(number_arr);  // [ 6, 1, 2, 3, 4, 5 ]

Output :

[6, 1, 2, 3, 4, 5]

Array.pop()

배열의 가장 마지막 요소를 삭제 합니다.

let number_arr = [ 1, 2, 3, 4, 5 ];  
let pop = number_arr.pop();  
console.log(number_arr);  // [ 1, 2, 3, 4 ]  
console.log(pop);  // 5

Output :

[1, 2, 3, 4]
5

Array.shift()

배열에서 가장 첫번째 요소를 삭제합니다.

let number_arr = [ 1, 2, 3, 4, 5 ];  
let shift = number_arr.shift();  
console.log(number_arr);  // [ 2, 3, 4, 5 ]  
console.log(shift);  // 1

Output :

[2, 3, 4, 5]
1

Array.slice()

기존 배열은 변하지 않고, 해당 요소를 반환 합니다.

let number_arr = [ 1, 2, 3, 4, 5 ];  
// Syntax : Array.slice(시작위치, 끝위치)  
let sp = number_arr.slice(1, 3);  // 2번째 부터 3번째 까지 반환합니다. 
console.log(number_arr);  // [1, 2, 3, 4, 5] 
console.log(sp);  // [2, 3] 
sp = number_arr.slice(2); 
console.log(sp);  // [3, 4, 5]

Output :

[1, 2, 3, 4, 5]
[2, 3]
[3, 4, 5]

Array.splice()

지정한 위치의 배열을 삭제 합니다.

let number_arr = [ 1, 2, 3, 4, 5 ];  
// Syntax : Array.splice(시작위치, 삭제할갯수, 추가_할_아이템...)  
let sp = number_arr.splice(1, 2);  // 2번째 요소부터 2개를 삭제 합니다.  
console.log(number_arr);  // [ 1, 4, 5 ]  
console.log(sp);  // [2, 3]  
let sp2 = number_arr.splice(1, 0, 7, 8, 9); // 2번재 요소 위치에 0개를 지우고 7,8,9를 추가해 줍니다.  
console.log(number_arr); // [1, 7, 8, 9, 4, 5]  
console.log(sp2); // undefined : 0개를 삭제해서 값이 없습니다.

Output :

[1, 4, 5]
[2, 3]
[1, 7, 8, 9, 4, 5]
[]

Array.concat()

배열을 합쳐 줍니다.

let num1 = [ 1, 2, 3];  
let num2 = [4,5,6];  
let combine = num1.concat(num2);  
console.log(combine); // [1, 2, 3, 4, 5, 6]  
let num3 = [7, 8, 9];  
combine = num1.concat(num2, num3);  
console.log(combine); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

Output :

[1, 2, 3, 4, 5, 6]
[1, 2, 3, 4, 5, 6, 7, 8, 9]

Array.of()

함수의 인수로 새 인스터스 배열을 만들어 줍니다.

let ar = Array.of(1, 2, 3)  
console.log(ar); // [1, 2, 3]  
let ch = Array.of("짜장", "짬뽕");  
console.log(ch); // ["짜장", "짬뽕"]

Output :

[1, 2, 3]
[ “짜장”, “짬뽕”]

Array 반복

Array.forEach()

배열의 요소를 순차적으로 반복해 줍니다.

let vl = [ 'one', 'two', 'three' ];  
vl.forEach((e) => {  
    console.log(e); // one, two, three를 차례대로 출력  
})

Output :

one
two
three

2번째 인자는 요소의 인덱스를 돌려 줍니다.

let vl = [ 'one', 'two', 'three' ];  
vl.forEach((e, i) => {  
    console.log(e, i);  
})

Output :

one 0
two 1
three 2

Array.values()

배열의 요소를 새로운 반복형 객체로 만들어 줍니다.

let vl = [ 'one', 'two', 'three' ];  
let iterator = vl.values();  

console.log(iterator.next().value);  // one  
console.log(iterator.next().value);  // two  
console.log(iterator.next().value);  // three  
console.log(iterator.next().value);  // undefined

Output :

one
two
three
undefined

let vl = [ 'one', 'two', 'three' ];  
let iterator = vl.values();  

for (let i of iterator) {  
    console.log(i);  
}  
console.log(iterator.next().value);  // undefined : 위에서 모두 반복해서 없음.

Output :

one
two
three

Array.entries()

배열의 요소를 키(key)와 값(value)로 짝지어진 반복형 객체로 만들어 줍니다.

let vl = [ 'one', 'two', 'three' ];  
let iterator = vl.values();  
for (let i of iterator) {  
    console.log(i);  
}

Output :

[0, \”one”]
[1, \”two”]
[2, \”three”]

Array 찾기

Array.some()

배열중에서 요소가 조건식에 맞는게 1개라도 있으면 true를 반환합니다.

console.log([2, 5, 8, 1, 4].some((e) => e > 5));  
console.log([2, 5, 8, 1, 4].some((e) => e > 9));

Output :

true
false

Array.every()

배열의 요소가 모두 조건식에 맞아야 true를 반환합니다.

console.log([2, 5, 8, 1, 4].every((e) => e < 9));  
console.log([2, 5, 8, 1, 4].every((e) => e > 4));

Output :

true
false

Array.find()

배열에서 조건식에 맞는 첫번째 요소를 반환합니다.

console.log([2, 5, 8, 1, 4].find((e) => e < 9));  
console.log([2, 5, 8, 1, 4].find((e) => e > 4));

Output :

2
5

2번째 값은 배열의 index, 3번째는 현재 배열을 입니다.

console.log([2, 5, 8, 1, 4].find((e, i) => e > 3  && i < 2));

Output :

5

Array.findIndex()

배열에서 조건식에 맞는 첫번째 요소의 인덱스를 반환합니다.

console.log([2, 5, 8, 1, 4].findIndex((e) => e < 9));  
console.log([2, 5, 8, 1, 4].findIndex((e) => e > 4));

Output :

0
1

Array.filter()

배열에서 조건식에 맞는 요소들을 배열로 반환합니다.

console.log([2, 5, 8, 1, 4].filter((e) => e < 9));  
console.log([2, 5, 8, 1, 4].filter((e) => e > 4));

Output :

[ 2, 5, 8, 1, 4 ]
[ 5, 8 ]

Array.indexOf()

배열에서 요소의 위치를 찾는다. 찾을수가 없으면 -1을 반환합니다.

두번째 값을 찾을 시작 위치 입니다.

console.log([2, 5, 8, 1, 4].indexOf(2));  
console.log([2, 5, 8, 1, 4].indexOf(8));  
console.log([2, 1, 8, 1, 4].indexOf(1, 3));

Output :

0
2
3

Array 변환하기

Array.fill()

배열을 요소를 채워 줍니다.

let arr = [1, 2, 3, 4];  
arr.fill(7); // 모두 7로 채워 넣는다.  
console.log(arr);

Output :

[ 7, 7, 7, 7 ]

시작 지점을 정해서 채워 줄 수 있습니다. 시작 위치는 원하는 위치의 -1을 해서 넣어 줍니다.

let arr = [1, 2, 3, 4];  
arr.fill(7, 1); // 2번째 부터 끝까지 7로 채움, 0부터 시작이다.  
console.log(arr);

Output :

[ 1, 7, 7, 7 ]

시작과 끝 지점을 지정해서 채워 줄 수 있습니다. 끝 지점은 위치를 넣어 줘야 합니다.

let arr = [1, 2, 3, 4];  
arr.fill(7, 1, 3); // 2번째 부터 3번째 까지 7로 채움  
console.log(arr);

Output :

[ 1, 7, 7, 4 ]

Array.copyWithin()

지정한 위치에 값을 복사해서 넣어 줍니다.

첫번째는 복사할 위치, 두번째는 시작위치 (기본값:0), 세번째는 끝위치(기본값: array.length))

var array = [ 1, 2, 3, 4, 5, 6, 7 ];   
console.log(array.copyWithin(1, 3, 5));

Output :

[ 1, 4, 5, 4, 5, 6, 7 ]

윈도우 터미널 프리뷰 복사/붙여 넣기 단축키 설정하기

신규하 — Tue, 28 Jan 2020 00:30:35 +0900

Windows Terminal (preview)를 기본 cmd 대신 써 볼까하고 사용중인데.. 복사/붙여넣기가 잘 동작하지 않아서 방법을 찾아서 공유 합니다.

메뉴에서 settings 또는 Ctrl + ,을 누르면 메모장에 설정값이 표시 됩니다.

여기서 keybindings에 아래와 같은 내용을 추가 하면 됩니다.


    "keybindings": [
      {
        "command": "paste",
        "keys": ["ctrl+shift+v", "shift+ins"]
      },
      {
        "command": "copy",
        "keys": ["ctrl+shift+c"]
      }
    ]

복사는 ctrl+shift+c로 가능하고 붙여 넣기는 ctrl+shift+v또는 shft+ins로 가능해 집니다.

잘 사용하세요~

vscode에서 JetBrains Mono 폰트 사용하기

신규하 — Fri, 17 Jan 2020 23:46:12 +0900

개발툴로 유명한 JetBrains에서 코딩용 새로운 고정폭폰트를 공개 했습니다. 상업적용도와 비상업적용도 모두 사용이 가능한 아파치2.0 라이센스 입니다.

그런데, 이 폰트에 보면 합자(ligature)기능이 있습니다.

이 기능은 코딩하다 보면 많이 쓰이는 ==이나 !=를 합자 형태로 표시해서 가독성을 높여주는 기능입니다.
대략적으로 보면 아래와 같이 차이가 있습니다.

그리고, vscode에서는 합자 기능을 사용할 수 있습니다.
설정하는 방법은 File > Preferense > Settings (단축키: Ctrl + ,)을 선택하고 상단에 Open Settings(JSON) 버튼을 눌러 줍니다.

그리고, 아래 내용을 추가해 주면 됩니다.

{
    "editor.fontFamily": "Jetbrains Mono",
    "editor.fontLigatures": true,
}

TypeORM 데이터베이스 자료형

신규하 — Sun, 12 Jan 2020 01:51:19 +0900

TypeORM에서 자료형이 데이터베이스 마다 약간이 다른게 지원하고 있어서.. 정리 해 본 김에 공유 합니다.

표를 다시 만들려고 했지만, 너무 번거로워서 캡쳐 본을 올립니다. 자세한 내용은 아래 링크를 봐주시면 됩니다.

https://docs.google.com/spreadsheets/d/1YqU1048fIpxxLMJ5eOxLEfxKUAN9AdVuTaL4kbPad7g/edit?usp=sharing

MediaWiki에 VisualEditor 설치하기

신규하 — Sat, 11 Jan 2020 20:05:24 +0900

어쩌다 미디어위키에 Visual Editor를 설치 할 일이 생겨서 설치 하면서 고생을 많이 해서 정리해 둡니다 ㅜ.ㅜ.

Visual Editor Extension 설치 하기

https://www.mediawiki.org/wiki/Extension:VisualEditor

우선 이 사이트에 방문해서 아무런 생각없이 사이트에서 git으로 설치 하라는 대로 설치하고 띄워 봤더니.. 하얀 화면만 나오고 아무것도 없이 먹통이 되더군요 -_-;;

뭐가 잘 못 된지도 모르고 하얀 먹통이라서 뭐가 잘 못 된지도 모르는 채 하루를 날려 버렸습니다.

결국 알아 낸것이 버전에 맞는 extension을 설치해야 하는 것이였습니다..

아래 url에 가서 내가 설치한 mediawiki와 맞는 버전을 찾아서 받아서 설치해야 합니다.

https://www.mediawiki.org/wiki/Special:ExtensionDistributor/VisualEditor

wget https://extdist.wmflabs.org/dist/extensions/VisualEditor-REL1_33-f64e411.tar.gz
tar -xzf VisualEditor-REL1_33-f64e411.tar.gz -C /var/www/mediawiki/extensions

LocalSettings.php 파일에 아래 내용을 추가해 줍니다.

wfLoadExtension( 'VisualEditor' ); 
$wgDefaultUserOptions['visualeditor-enable'] = 1; 
$wgHiddenPrefs[] = 'visualeditor-enable'; 

$wgVirtualRestConfig['modules']['parsoid'] = array( 
    'url' => 'http://mydomain.com:8000', 
);

Parsoid 설치하기

Visual Editor는 확장만 설치해서 동작하지 않고 parsoid를도 같이 설치를 해 줘야 합니다.
먼저 paroid를 사용하려면 node가 설치가 되어 있어야 합니다. 설치가 되어 있지 않다면 설치하시면 됩니다.

$ mkdir /opt/parsoid
$ cd /opt/parsoid
$ git clone https://gerrit.wikimedia.org/r/mediawiki/services/parsoid
$ cd parsoid
$ npm install
$ cp config.example.yaml config.yaml
$ cp localsettings.example.js localsettings.js

먼저 api.php의 주소를 확인 합니다. 설치된 미디어위키의 주소에서 api.php파일을 띄워서 아래와 같은 화면이 나오면 됩니다.

config.yaml에서 mwApis 부분을 아래와 같이 수정해 줍니다.

mwApis: 
- # This is the only required parameter, 
  # the URL of you MediaWiki API endpoint. 
  uri: 'http://mydomain.com/api.php'

그리고, localsettings.js파일도 아래와 같이 편집해 줍니다. domain과 prefix라는게 있는 옵션이라서 생략해도 됩니다.

'use strict'; 

exports.setup = function(parsoidConfig) { 
    parsoidConfig.setMwApi({ 
        uri: 'http://mydomain.com/api.php', 
    }); 
};

위에까지 설정이 완료 되었으면, 실행해 봅니다.

$ npm start

혹시 방화벽을 사용중이라면 방화벽을 풀어주는 것도 잊지 말아 주세요.

이제 세팅이 다 되었으니, 미디어위키에서 잘 동작하는지 테스트 해 보시면 됩니다.

pm2로 parsoid를 서비스형태로 설정해 주기..

먼저 pm2를 설치해 줍니다.

$ npm install -g pm2

그리고, parsoid가 설치된 폴더로 이동해서 실행해 줍니다.

$ cd /opt/parsoid
$ pm2 start --name parsoid npm -- start

다음부터 pm2에 방금 등록한 앱을 저장해 주고 서비스로 등록해 줍니다.

$ pm2 save
$ pm2 startup

startup을 했을경우 root권한이 아닐 경우, 아래와 같은 메시지가 나옵니다.

[PM2] Init System found: systemd 
[PM2] To setup the Startup Script, copy/paste the following command: 
sudo env PATH=$PATH:/usr/bin /usr/lib/node_modules/pm2/bin/pm2 startup systemd -u USERNAME --hp /home/USERNAME

마지막 sudo가 있는 내용을 복사해서 붙여넣기 해서 실행해 주면 다음부터 컴퓨터를 껐다키면 알아서 parsoid를 실행해 주게 됩니다.

윈도우용 패키지 매니저 Chocolatey 사용법

신규하 — Fri, 10 Jan 2020 00:14:58 +0900

Chocolatey는 윈도우용 패키지 매니저로, 설치하려는 윈도우용 소프트웨어를 일일이 웹사이트에서 찾아서 설치할 필요 없이 간단하게 커맨드 만으로 윈도우용 소프트웨어를 설치 할 수 있게 해 줍니다.

Chocolatey 설치

chocolate를 설치 하려면 관리자 권한 cmd나 PowerShell을 실행해서 설치를 해 줘야 합니다.

cmd 사용시

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

powershell 사용시

Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1')).DownloadString('https://chocolatey.org/install.ps1')))

패키지 찾기

아래 웹페이지에 접속해서 검색하시면 됩니다.

https://chocolatey.org/packages

또는 cmd에서 search 나 list 명령어로 검색을 할 수 있습니다.

> choco search googlechrome
Chocolatey v0.10.15
GoogleChrome 79.0.3945.117 [Approved] Downloads cached for licensed users
vivaldi.install 2.10.1745.23
... 생략
10 packages found.

예로 구글크롬 웹브라우저를 검색해 보면 10개의 패키지가 나옵니다. 그냥 chrome을 검색하면 백여개가 넘는 패키지가 목록이 나오게 됩니다.

여기서 정확하게 필요한 패키지만을 보기 위해서는 -e 또는 --exact 옵션을 넣어 줘야 합니다.

> choco search googlechrome -e
Chocolatey v0.10.15
GoogleChrome 79.0.3945.117 [Approved] Downloads cached for licensed users
1 packages found.

그리고, 간혹 특정 버전의 패키지를 설치 해야 할 경우가 있습니다. 그럴 경우 버전을 확인하기 위해서는 -a, --all 옵션을 넣어 주면 버전 정보를 확인 할 수 있습니다.

패키지 상세 정보 보기

info 명령어을 사용하거나 search에서 -v옵션을 추가해 주면 됩니다.

그런데 info 명령어 search에서 -e 옵션이 붙은 것처럼 동작을 하게 됩니다.

> choco info googlechrome
Chocolatey v0.10.15
GoogleChrome 79.0.3945.117 [Approved] Downloads cached for licensed users
Title: Google Chrome | Published: 2020-01-07
Package approved as a trusted package on 1 08 2020 01:22:22.
... 생략

또는

> choco search googlechrome -ev
Chocolatey v0.10.15
GoogleChrome 79.0.3945.117 [Approved] Downloads cached for licensed users
Title: Google Chrome | Published: 2020-01-07
Package approved as a trusted package on 1 08 2020 01:22:22.
... 생략

여기서 -ev 로 옵션을 줬는데, 이건 -e -v를 하나로 요약한 형식입니다.

패키지 설치 하기

install 명령을 이용해서 설치하고 싶은 패키지를 아래와 같이 설치 합니다.

> choco install bandizip
Chocolatey v0.10.15
Installing the following packages:
bandizip
... 생략
Note: If you don't run this script, the installation will fail.
Note: To confirm automatically next time, use '-y' or consider:
choco feature enable -n allowGlobalConfirmation
Do you want to run the script?([Y]es/[A]ll - yes to all/[N]o/[P]rint):

명령어 프롬프트가 나오면 y를 눌러주면 간단하게 설치가 완료 됩니다.

설치 시 자동으로 y를 누르고 싶다면 -y 옵션을 넣어 주면 됩니다. 그리고 강제로 설치하고 싶다면 -f를 넣어 주면 됩니다.

> choco install -yf bandizip

혹시 특정 버전을 설치하고 싶다면 --version 옵션을 이용해서 해당 버전을 설치 할 수 있습니다.

choco install bandizip --version=6.24

패키지 삭제 하기

chocolatey는 설치된 패키지도 uninstall 명령어를 이용해서 편하게 삭제가 가능 합니다.

> choco uninstall bandizip
Chocolatey v0.10.15
Uninstalling the following packages:
bandizip
... 생략
Do you want to run the script?([Y]es/[A]ll - yes to all/[N]o/[P]rint):

명령어 프롬프트가 나오면 y를 눌러주면 삭제가 됩니다.

y키를 누르기 귀찮다면 설치 할 때와 같이 -yf를 누르시면 바로 삭제가 가능 합니다.

> choco uninstall -yf bandizip

choco로 설치된 패키지 목록 확인하기

search 또는 list명령로 확인 가능 합니다. 뒤에 -l 옵션을 주면 로컬에 설치된 패키지의 목록을 출력 해 줍니다.

> choco search -l
bandizip 6.25
... 생략
zeal 0.6.1
zeal.install 0.6.1
62 packages installed.

또는 clist 명령어를 사용해서도 조회가 가능 합니다.

> clist -l

clist 명령은 choco search를 와 같은 역할을 합니다.

패키지 업데이트 하기

upgrade 명령어를 통해서 패키지를 최신 버전으로 업데이트가 가능 합니다.

> choco upgrade bandizip

혹시, choco를 통해서 설치한 프로그램을 모두 업데이트 하고 싶다면 패키지 이름 대신 all을 넣어 주면 됩니다.

> choco upgrade all

chocolatey 설치부터 패키지 설치까지 한방 스크립트

choco_install.bat라는 파일을 만들고 아래의 내용을 복사해서 넣어 주세요.

그리고, 뒷 부분에 설치하고 싶은 패키지를 넣어 주시면 됩니다.

@echo off
CLS
ECHO **************************************
ECHO * Start Chocolatey Batch
ECHO **************************************

:::::::::::::::::::::::::::::::::::::::::
:: 체크 및 관리자 권한 가져 오기
NET FILE 1>NUL 2>NUL
if '%errorlevel%' == '0' ( goto gotPrivileges ) else ( goto getPrivileges )

:getPrivileges
:::::::::::::::::::::::::::::::::::::::::
:: UAC를 사용해서 관리자 권한으로 전환
if '%1'=='ELEV' (shift & goto gotPrivileges)
ECHO.
ECHO **************************************
ECHO * Use UAC, switch to admin
ECHO **************************************

setlocal DisableDelayedExpansion
set "batchPath=%~0"
setlocal EnableDelayedExpansion
ECHO Set UAC = CreateObject^("Shell.Application"^) > "%temp%\OEgetPrivileges.vbs"
ECHO UAC.ShellExecute "!batchPath!", "ELEV", "", "runas", 1 >> "%temp%\OEgetPrivileges.vbs"
"%temp%\OEgetPrivileges.vbs"
exit /B

:gotPrivileges
:::::::::::::::::::::::::::::::::::::::::
:: 시작 하기
setlocal & pushd .

WHERE choco 1>NUL 2>NUL
if '%errorlevel%' == '0' ( goto chocoInstalled ) else ( goto chocoMissing )

:chocoMissing
::::::::::::::::::::::::::::
:: Chocolatey가 없을 경우 설치
::::::::::::::::::::::::::::
ECHO.
choice /M "Chocolatey not found. Install now?"
IF '%errorlevel%' == '2' exit /B
ECHO.
ECHO **************************************
ECHO * Chocolatey install
ECHO **************************************

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

:chocoInstalled
ECHO.
ECHO **************************************
ECHO * Packages install
ECHO **************************************

@echo on

:: 항상 자동으로 yes를 선택하도록 설정
choco feature enable --name=allowGlobalConfirmation

:: 먼저 기존 패키지 업데이트
choco upgrade all -y

:: 사용할 어플리케이션 설치
set choco_install=choco install -fy
%choco_install% bandizip
%choco_install% firefox
%choco_install% googlechrome
%choco_install% vcredist140
%choco_install% vcredist2012
%choco_install% directx
%choco_install% dotnetfx
%choco_install% javaruntime
%choco_install% everything
%choco_install% wox
%choco_install% qbittorrent
%choco_install% f.lux
%choco_install% typora
%choco_install% freefilesync
%choco_install% calibre
%choco_install% notion
%choco_install% vlc
%choco_install% krita
%choco_install% paint.net
%choco_install% jbs
%choco_install% ditto
%choco_install% ccleaner.portable
%choco_install% git.install --params "/GitAndUnixToolsOnPath /NoShellIntegration /NoGuiHereIntegration /WindowsTerminal"

:: 항상 자동으로 yes를 선택하는 옵션 끄기
choco feature disable --name=allowGlobalConfirmation

:: 업데이트 된 설정 다시 읽기
RefreshEnv.cmd

pause

choco_install.bat 파일을 실행했을때 관리자 권한이 아니면 관리자 권한을 부여해서 실행하게 됩니다.

컴퓨터 설치를 자주 하시게 되는 분들은 위와 같이 파일을 하나 설정해 둔다면 유용하게 사용 할 수 있을 것이라고 생각 됩니다.

타입스크립트, AWS 서버리스로 들어올리다.

신규하 — Mon, 9 Dec 2019 11:05:39 +0900

올해 초에 쓰기 시작했는데..

연말이 돼서야 겨우 완료했습니다.

실무 개발을 해 보면서 프로젝트를 진행할 때, 최소한 이런 건 알고 하면 좋겠다 싶은 것들을 넣다 보니까 페이지가 많이 늘어나 버렸습니다.

뭔가 하나를 깊게 파는 서적인 아니지만, 전체적인 흐름 파악이나 개발의 선택 과정을 파악 할 때는 도움이 될 것이라는 생각으로 글을 썼습니다.

책 소개

타입스크립트를 활용한 웹 애플리케이션 개발 가이드 북

현재 웹 애플리케이션을 개발하기 위한 많은 개발 환경과 그 환경에 맞는 다양한 방법들이 생겨나고 있다. 그래서 우리는 어떤 방법으로 개발을 시작해야 할지 선택하기를 주저하게 된다.

이 책에서는 실무에 적합한 플랫폼과 다양한 개발 프레임워크 및 라이브러리를 소개하고, 각 상황에 맞는 플랫폼 및 프레임워크를 선택하고 개발하는 과정을 안내한다. 이런 과정을 통해서 개발의 식견을 넓히고, 새로운 개발 방법을 학습하여 새로운 프로젝트가 생길 때 다양한 구현 방법을 검토하고 결정할 수 있도록 도와준다. 독자 여러분도 이 책만 있으면 어떤 프로젝트든지 훌륭하게 완료할 수 있을 것이다.

- 서버리스 및 AWS 서비스 소개

- Typescript 기본 문법

- VSCODE를 이용한 개발 환경 구성

- Typescript를 사용한 AWS 람다 서비스 구성

- Typescript를 이용한 Vue.js 개발

- Vue.js에서 UI Framework 사용하기

- Docker 기본 사용법

- Typescript를 이용한 ORM 사용

- Typescript를 이용한 GraphQL 사용

- TDD 기본 사용법

- AWS를 통한 배포

이 책의 특징

- 가장 최신의 모던한 웹 애플리케이션 개발 과정을 제공한다.

- 플랫폼 선택부터 웹 애플리케이션 개발 과정까지 다양한 선택 과정을 배울 수 있다.

- 실무 웹 개발에 필요한 다양한 방법 및 개발 환경 구성을 배울 수 있다.

이 책이 필요한 독자

- 웹 개발을 시작하시는 분

- 웹 개발 경험이 있으면서 새로운 개발 환경이 궁금하신 분

- 최신 웹 개발 트렌드에 관심이 있으신 분

독자대상

초중급

소스코드 다운로드

https://github.com/bjpublic/typescript

출처: https://bjpublic.tistory.com/346 [비제이퍼블릭]

온라인 판매

http://www.yes24.com/Product/Goods/84793216?Acode=101

타입스크립트, AWS 서버리스로 들어올리다

타입스크립트를 활용한 웹 애플리케이션 개발 가이드 북 현재 웹 애플리케이션을 개발하기 위한 많은 개발 환경과 그 환경에 맞는 다양한 방법들이 생겨나고 있다. 그래서 우리는 어떤 방법으로 개발을 시작해야 할지 선택하기를 주저하게 된다.본서에서는 실무에 적합한 플랫폼과 다양한 개발 프레임워크 및 라이브러리를 소개하고, 각 상황에 맞는 ...

www.yes24.com

https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=220420639

타입스크립트, AWS 서버리스로 들어올리다

실무에 적합한 플랫폼과 다양한 개발 프레임워크 및 라이브러리를 소개하고, 각 상황에 맞는 플랫폼 및 프레임워크를 선택하고 개발하는 과정을 안내한다. 새로운 개발 방법을 학습하여 새로운 프로젝트가 생길 때 ...

www.aladin.co.kr

http://www.kyobobook.co.kr/product/detailViewKor.laf?ejkGb=KOR&mallGb=KOR&barcode=9791190014595&orderClick=LEa&Kc=

타입스크립트, AWS 서버리스로 들어올리다

현재 웹 애플리케이션을 개발하기 위한 많은 개발 환경과...

www.kyobobook.co.kr

Typescript에서 default import 개선..

신규하 — Mon, 12 Aug 2019 12:58:09 +0900

express를 import하면 아래와 같이 import 했을 겁니다.

import * as Express from 'express';

하지만 tsconfig.json 파일에 아래 내용을 추가 하면..

{
   "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
   }
}

이렇게 import가 가능해 집니다.

import Express from 'express'

세계 국기 SVG 파일

신규하 — Fri, 12 Jul 2019 09:46:06 +0900

국제화 개발 하다 보면, 간혹 필요한 국기 이미지 입니다.
벡터인 svg 파일이라서 필요에 따라서 변환해서 사용 하세요.

flags.zip

2.02MB

웹 캐시를 지우고 리로딩하기..

신규하 — Fri, 24 May 2019 17:30:01 +0900

SPA를 개발하다 보면, 앱의 버전을 올려서 서버에 반영을 했는데, 웹은 캐시를 타버려서 업데이트가 되지 않는 경우가 빈번합니다. 웹 서버와 웹 어플리케이션의 버전이 맞지 않아서 이상하게 동작도 하고.. 대략적으로 난감한 경우가 발생해서, 캐시를 지우고 리로드 하는 코드를 간단하게 만들어 봤습니다.

caches  
    .keys()  
    .then(c => {  
    for (const i of c) {  
        caches.delete(i);  
    }  
}).then(() => {  
    location.reload(true);  
});

그리고 아래는 axios를 이용해서 버전을 확인하고 업데이트를 진행하는 코드 입니다.

import * as axios from 'axios' 

console.log('current version :', version);  
// 버전업이 되었으면 버전을 올리도록 처리  
if (process.env.NODE_ENV === 'production') {  
  console.log('version update check...');  
  axios.get(`/version.json?timestamp=${new Date().getTime()}`).then((data: any) => {  
    console.log('server version :', data.data);  
    if (data.data.app > version.app) {  
      // 캐쉬 지우기  
      caches  
        .keys()  
        .then(c => {  
          for (const i of c) {  
            caches.delete(i);  
          }  
        })  
        .then(() => {  
          location.reload(true);  
        });  
      console.log('update app...');  
    }  
  });  
}

Git에서 branch를 master로 바꾸기..

신규하 — Thu, 18 Apr 2019 14:22:46 +0900

소스를 관리 하다가.. master가 branch와 간격이 많이 버러졌는데..
branch를 master로 써야 할 경우 입니다.

git checkout newFunction
git merge -s ours master 
git checkout master 
git merge newFunction

방법은 새로운 브렌치에 master를 ours로 머지해 버리고 maser에 다시 머지하는 방법입니다.

-s ours 는 —strategy=ours 의 단축 된 표현 입니다.

bash에서 git 업데이트 체크 하기..

신규하 — Wed, 10 Apr 2019 17:47:56 +0900

git에서 업데이트 된 내용이 있으면 받는 bash 스크립트 입니다.

changed=0 
git remote update && git status -uno | grep -q 'Your branch is behind' && changed=1 

if [ $changed = 0 ]; then 
  exit 0 
fi 
git pull 
# 실행 할 코드 들...

주기적으로 업데이트가 있으면 pull을 받았으면 해서 찾아 봤습니다.

vscode에서 현재 Typescript 파일 디버깅...

신규하 — Tue, 12 Mar 2019 18:42:02 +0900

먼저 node_modules에 ts-node와 typscript를 추가해 준다.

$ npm install --save-dev ts-node typescript

.vscode/launch.json 파일에 아래와 같이 추가..

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Current ts file",
      "type": "node",
      "request": "launch",
      "program": "${workspaceRoot}/node_modules/ts-node/dist/bin.js",
      "args": ["${relativeFile}"],
      "cwd": "${workspaceRoot}",
      "protocol": "inspector",
      "env": {
        "stage": "debug"
      }
    }
  ]
}

Node.js에서 euc-kr 인코딩 하기...

신규하 — Thu, 7 Mar 2019 21:16:40 +0900

node에서 어쩌다 보니.. euc-kr을 인코딩 디코딩 할 일이 생겨서 해 보고 고생한 김에.. 메모를 남긴다.

우선 iconv-lite 패키지를 설치해야 한다.

$ npm install iconv-lite

아래는 euc-kr인 문서를 읽어서 utf-8로 바꾸고 euc-kr로 바꾸는 예제이다.

let iconv = require('iconv-lite');
let fs = require('fs');

// 처음 로딩시 enc-kr 파일
let content = fs.readFileSync('content-kr.txt');
console.log(content.toString());

let utf8Str = iconv.decode(content, 'euc-kr');
console.log(utf8Str);
// utf-8 text로 저장
fs.writeFileSync('content-utf-8.txt', utf8Str, { encoding: 'utf8' });

let euckrStr = iconv.encode(utf8Str, 'euc-kr');
console.log(euckrStr.toString());
// euc-kr text로 저장
fs.writeFileSync('content-euc-kr.txt', content, {encoding: 'binary'});

iconv-lite는 utf-8기준으로 인코딩/디코딩을 하는 라이브러리다.
그래서 euc-kr문서를 utf-8로 바꿀려고 하면..

decode => euc-kr

utf-8을 euc-kr로 바꿀려고 하면,

encode => euc-kr

-_-;; 모두 euc-kr을 써서 혼동 스러웠는데… utf-8을 기준으로 동작하는 거니..
어떻게 생각하면 편한거 같기도 하고..

그럼 끝…

추가

loverace님의 댓글을 보고 글을 수정하기 위해서 테스트를 진행해 봤습니다.
먼저 iconv-lite로 디코딩된 문자열이 utf-16으로 저장이 되나 해서 저장을 해 봤습니다.

fs.writeFileSync(‘파일명.txt’, utf8Str, { encoding: ‘ucs2 });

그런데 알 수 없는 문자열로 저장이 되었습니다.
그래서, 뭔가 잘 못 하나 싶어서.. 이것저것 확인을 진행 해 봤습니다.
그러다 문자열이 인코딩된 형태를 확인하는 detect-character-encoding 패키지를 발견 했습니다.
패키지를 설치하고

$ npm install detect-character-encoding

테스트 코드를 아래와 같이 작성했습니다.

const detectCharacterEncoding = require('detect-character-encoding');
const fs = require('fs');
const iconv = require('iconv-lite');

// 처음 로딩시 enc-kr 파일
const content = fs.readFileSync('content-kr.txt');
console.log('content', detectCharacterEncoding(content));

// euc-kr을 utf-8로 변환
const utf8 = iconv.decode(content, 'euc-kr');
console.log('euc-kr => utf8', detectCharacterEncoding(Buffer.from(utf8)));

// utf-8을 enc-kr로 변환
const euckr = iconv.encode(utf8, 'euc-kr');
console.log('utf8 => euckr', detectCharacterEncoding(Buffer.from(euckr)));

나온 결과 같은 아래와 같았습니다.

content { encoding: 'EUC-KR', confidence: 100 }
euc-kr => utf8 { encoding: 'UTF-8', confidence: 100 }
utf8 => euckr { encoding: 'EUC-KR', confidence: 100 }

아무래도.. iconv-lite로 디코딩 한 문자열은 자바스크립트 문자열이 아닌 utf-8로 나오나 봅니다.

loverace님 소중한 댓글 감사드립니다.
덕분에 iconv-lite를 좀 더 명확히 알 수 있었습니다.

추가로, detect-character-encoding 패키지는 리눅스 또는 MacOS에서만 실행이 가능 합니다. ^^*

VSCode에서 Live2d 캐릭터 띄우기..

신규하 — Wed, 23 Jan 2019 00:25:18 +0900

먼저 띄운 화면을 보고 가시죠~

캐릭터 얼굴이 마우스 움직이는 방향으로 움직입니다.

너무 귀엽죠?

그러면, 설치를 해 볼까요?

먼저, 확장프로그램에서 live2d를 검색해서 설치해 줍니다.

그리고 재실행을 해주시면, 아무것도 안 나옵니다. -_-;

F1 또는 Ctrl+Shit+P을 누르고 live2d install을 해 줍니다. 그리고 다시 VSCode를 실행 해 줍니다.

그러면, 고양이가 왼쪽 하단에 나옵니다.

그리고, 나오는 경고… 살포시 무시하기 위해서 고양이를 살짝 옮기시고, 기어 버튼을 누릅니다.

그리고 그만볼래(Don't Show Again)을 눌러 줍니다.

우리는 고양이에 만족 할 순 없으니.. 다른 캐릭터를 찾아 봅니다.

https://github.com/summerscar/live2dDemo

위 주소를 이동해서 쭈욱 보시면서 캐릭터를 선택 해 주시면 됩니다.

그리고, 그 캐릭터는 아래 주소에서 테스트 해 보시면 됩니다.

http://summerscar.me/live2dDemo/

전 위에 캐릭터를 이용해서 표시를 했습니다.

설정하는 방법은 약간 귀찮습니다.

File > Preferences > Settings를 선택 하거나 Ctrl+,으로 설정 화면을 들어 갑니다.

Live2d를 검색 하시거나 직접 입력을 하시거나, 좌측 상단에 {}버튼을 누르셔서 코드를 넣어 주시면 됩니다.

저 같은 경우는 위 기본 값에서 사이즈를 반으로 줄여서 넣어 봤습니다.

{
    "live2d.width": 150,
    "live2d.height": 200,
    "live2d.model": "33.2017.newyear",
    "live2d.headPos": 0.5,
    "live2d.scale": 1   
}

하지만, 수정한다고 해서 바로 적용 되지 않습니다.

F1 또는 Ctrl+Shit+P을 다시 누르고 live2d uninstall을 하고 다시 live2d install을 해 줘야 합니다.

꼭!!! 지웠다가 다시 설치를 해야 적용이 됩니다.

결과는 아래와 같습니다.

참.. 이쁘죠? ㅎㅎㅎ