포도빛잇(IT)

Miniflux - Self-hosted RSS Reader

포도빛 — Sat, 2 Jul 2022 22:47:38 +0900

개인적으로 RSS 피드를 뭉쳐서 보려고 찾아본 것

https://miniflux.app/index.html

Miniflux - Minimalist and Opinionated Feed Reader

Miniflux Miniflux is a minimalist and opinionated feed reader.

miniflux.app

[ML.NET] CLI 설치하고 감정 분석 튜토리얼 따라하기

포도빛 — Tue, 14 Jun 2022 22:57:28 +0900

이번에는 마이크로소프트 ML.NET을 사용해보고자 공식 문서에 있는 튜토리얼을 따라해보고자 한다.

~~참고로 나는 인공지능, 머신러닝에 대해 아무것도 모른다...~~

사전 요구사항

1. dotNET 6 SDK

https://dotnet.microsoft.com/en-us/download/dotnet/6.0

2. Visual Studio 2022 이상

CLI를 사용할 것이기 때문에 Visual Studio는 설치하지 않을 것이다.

.NET 6 SDK를 설치했다면 아래 명령을 입력해본다.

dotnet --info

잘 설치되어있다면 아래와 같이 나올 것이다.

.NET SDK(global.json 반영):
 Version:   6.0.201
 Commit:    ef40e6aa06

런타임 환경:
 OS Name:     Windows
 OS Version:  10.0.22000
 OS Platform: Windows
 RID:         win10-x64
 Base Path:   C:\Program Files\dotnet\sdk\6.0.201\

... 생략 ...

ML.NET CLI 설치

ML.NET CLI를 설치하기 위해 아래 명령중 PC에 해당하는 아키텍처의 설치 명령어를 입력한다.

# 윈도우 64비트
dotnet tool install --global mlnet-win-x64

# 윈도우 ARM 64비트
dotnet tool install --global mlnet-win-arm64

# 맥 64비트
dotnet tool install --global mlnet-osx-x64

# 맥 ARM 64비트
dotnet tool install --global mlnet-osx-arm64

# 리눅스 64비트
dotnet tool install --global mlnet-linux-x64

# 리눅스 ARM 64비트
dotnet tool install --global mlnet-linux-arm64

잘 설치되었다면 다음과 같이 나타난다.

.NET 6.0을(를) 시작합니다.
---------------------
SDK 버전: 6.0.201

... 중략 ...
... 설치하는데 시간이 다소 걸린다 ...

다음 명령을 사용하여 도구를 호출할 수 있습니다. mlnet
'mlnet-win-x64' 도구('16.13.6' 버전)가 설치되었습니다.

위 메시지대로 mlnet 명령이 환경변수에 등록된다.

다음 명령어를 입력해본다. 잘 설치되었다면 설치된 ML.NET의 버전이 아래와 같이 표시된다.

< 명령어 >
mlnet --version

< 출력 >
16.13.6+705076eb10e594cfe27d1539a1c3f9aaae712a25

감정 분석 튜토리얼

데이터세트 준비

다음 데이터세트(DataSet)을 다운로드 받아 압축을 해제한다.

http://archive.ics.uci.edu/ml/machine-learning-databases/00331/sentiment%20labelled%20sentences.zip

The UCI Sentiment Labeled Sentences dataset zip file

압축을 해제하면 여러가지 텍스트 파일이 있는데 이 중 "yelp_labelled.txt" 파일만 사용한다.

이 텍스트 파일을 열어서 확인해보자면...

각 라인별로 "문장{\t}숫자"로 구성되어 있다.

숫자 중 1은 긍정, 0은 부정을 의미하고 앞의 문장이 긍정인지 부정인지 나타내는 데이터세트이다.

분류 학습

"yelp_labelled.txt" 파일이 있는 디렉토리로 이동하고, 분류 학습을 진행한다. 다음과 같이 명령어를 입력한다.

mlnet classification --dataset "yelp_labelled.txt" --label-col 1 --has-header false --train-time 60

* 각 인자에 대해서는 이곳에서 다루지 않는다.

60초동안 학습이 진행된 후 아래와 같이 출력된다.

Start Training
start nni training
Experiment output folder: C:\Users\js\AppData\Local\Temp\AutoML-NNI\Experiment-20PGAU
|     Trainer                              MicroAccuracy  MacroAccuracy  Duration #Iteration                     |
|0    SdcaMaximumEntropyMulti                     0.5153         0.5000       1.2          0                     |
|1    FastTreeOva                                 0.6654         0.6655       2.1          1                     |
|2    FastForestOva                               0.7263         0.7261       2.7          2                     |
... 중략 ...
------------------------------------------------------------------------------------------------------------------
|                                              Top 5 models explored                                             |
------------------------------------------------------------------------------------------------------------------
|     Trainer                              MicroAccuracy  MacroAccuracy  Duration #Iteration                     |
|9    LbfgsMaximumEntropyMulti                    0.8274         0.8267       0.5          9                     |
... 중략 ...
------------------------------------------------------------------------------------------------------------------

save SampleClassification.mbconfig to C:\Temp\sentiment labelled sentences\SampleClassification
해당 위치의 최적 파이프라인에 대한 콘솔 프로젝트를 생성하는 중 : C:\Temp\sentiment labelled sentences\SampleClassification

여러가지의 학습 방법을 시도해본 목록을 보여주고, 마지막으로 가장 좋은 모델 몇가지를 보여준다.

그리고 프로젝트가 생성되었다는 메시지와 함께 mlnet이 종료된다.

생성된 프로젝트 사용

프로젝트가 생성된 디렉토리로 이동해보면 아래와 같은 파일이 준비되어 있다.

이중 ".csproj"의 이름을 변경해야한다.

파일 이름이 없기 때문에 이름을 넣어주면 된다. 이름은 자유롭게 지정한다.

- dotnet에서는 프로젝트 파일이 이름이 곧 프로젝트 이름이다.

# 윈도우
ren .csproj first.csproj

# 리눅스
mv .csproj first.csproj

복원 및 빌드를 수행한다.

- 복원 과정에서 필요한 의존성을 설치하게 된다. (Microsoft.ML)

- 빌드 과정에서 restore를 먼저 해줄 때도 있다.

dotnet restore
dotnet build

다음과 같이 출력되는 것을 확인한다.

C:\Temp\sentiment labelled sentences\SampleClassification>dotnet restore
  복원할 프로젝트를 확인하는 중...
  C:\Temp\sentiment labelled sentences\SampleClassification\first.csproj을(를) 10.02 sec 동안 복원했습니다.

C:\Temp\sentiment labelled sentences\SampleClassification>dotnet build
.NET용 Microsoft (R) Build Engine 버전 17.1.0+ae57d105c
Copyright (C) Microsoft Corporation. All rights reserved.

  복원할 프로젝트를 확인하는 중...
  복원할 모든 프로젝트가 최신 상태입니다.
  first -> C:\Temp\sentiment labelled sentences\SampleClassification\bin\Debug\net6.0\first.dll

빌드했습니다.
    경고 0개
    오류 0개

경과 시간: 00:00:03.49

이후, 위 메시지에서 출력 디렉토리로 이동하면 실행 가능 파일이 있을 것이고 실행해본다.

C:\Temp\sentiment labelled sentences\SampleClassification>.\bin\Debug\net6.0\first.exe
Using model to make single prediction -- Comparing actual Col1 with predicted Col1 from sample data...

Col0: Wow... Loved this place.
Col1: 1

Predicted Col1: 1

=============== End of process, hit any key to finish ===============

여기서 마지막 줄의 "Predicted Col1: 1"만 보면 된다.

샘플 문장 "Wow... Loved this place."는 긍정적인 문장으로 분류된 것이다.

이제 문장을 직접 만들어서 테스트를 해보자.

프로젝트 폴더의 "Program.cs"를 열어준다.

소스코드 중 위와 같이 ModelInput 객체에 예문을 직접 입력해주고, 아래 불필요한 출력은 주석처리 한다.

위 사진의 예문은 "I am working hard." 이다.

그리고 다시 빌드하고 실행해본다.

C:\Temp\sentiment labelled sentences\SampleClassification>dotnet build
.NET용 Microsoft (R) Build Engine 버전 17.1.0+ae57d105c
Copyright (C) Microsoft Corporation. All rights reserved.

  복원할 프로젝트를 확인하는 중...
  복원할 모든 프로젝트가 최신 상태입니다.
  first -> C:\Temp\sentiment labelled sentences\SampleClassification\bin\Debug\net6.0\first.dll

빌드했습니다.
    경고 0개
    오류 0개

경과 시간: 00:00:00.90

C:\Temp\sentiment labelled sentences\SampleClassification>.\bin\Debug\net6.0\first.exe
Using model to make single prediction -- Comparing actual Col1 with predicted Col1 from sample data...

Predicted Col1: 0

=============== End of process, hit any key to finish ===============

학습된 모델은 "I am working hard."에 대해 부정이라는 결과를 내놓았다.

다른 문장을 더 테스트 해본다.

I'm interested in ML.NET.	부정
I bought iPhone 13 yesterday.	긍정
I lost mobile phone.	부정
I did it.	부정
I did it!	긍정

이제 이 프로젝트와 모델을 가지고 자유롭게 프로그램을 만들어본다.

아래에 공식 문서 링크를 남겨두었으니 자세한 정보와 활용 방법에 대해서는 공식 문서를 참고해보자.

참고 자료

마이크로소프트 공식 문서 - ML.NET CLI 설치

https://docs.microsoft.com/en-us/dotnet/machine-learning/how-to-guides/install-ml-net-cli?tabs=windows

How to install the ML.NET Command-Line Interface (CLI) tool - ML.NET

Learn how to install, upgrade, downgrade, and uninstall the ML.NET Command-Line Interface (CLI) tool.

docs.microsoft.com

마이크로소프트 공식 문서 - ML.NET CLI를 사용한 감정 분석 튜토리얼

https://docs.microsoft.com/en-us/dotnet/machine-learning/tutorials/sentiment-analysis-cli

Analyze sentiment using the ML.NET CLI - ML.NET

Automatically generate an ML model and related C# code from a sample dataset

docs.microsoft.com

Google Code Jam 2022 Qualification Round 결과

포도빛 — Mon, 4 Apr 2022 23:08:38 +0900

올해도 어김없이 Google Code Jam(구글 코드잼) 2022에 참여하였다!

예선전이 이루어졌고 30점을 넘었기에 Round 1로 진출할 수 있게되었다.

1번부터 3번까지는 쉬웠지만, 4번이 어떤 알고리즘이 요구되는지 파악하는데 시간이 꽤나 소요된 듯 싶다.

이번 Code Jam 2022 QR을 진행하며 제출한 코드는 아래에서 확인해볼 수 있다.

(4번문제에서 엄청난 시도를....)

https://codingcompetitions.withgoogle.com/codejam/submissions/0000000000876ff1/000000000053873c

Code Jam - Google’s Coding Competitions

Put your coding skills to the test as you work your way through multiple rounds of algorithmic coding puzzles for the title of Code Jam Champ and 15,000 USD.

codingcompetitions.withgoogle.com

또한 Github에도 코드를 올려두었다!

https://github.com/smartse0k/GoogleCodeJam/tree/main/2022

GitHub - smartse0k/GoogleCodeJam: Google Code Jam

Google Code Jam. Contribute to smartse0k/GoogleCodeJam development by creating an account on GitHub.

github.com

[React] Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

포도빛 — Fri, 18 Mar 2022 22:56:37 +0900

React를 하다 이런 에러가 발생했다.

원인은 컴포넌트 중 어떤 것은 ESM 문법을, 어떤 것은 CJS 문법을 사용해서 그랬다.

// ESM(ECMAScript Module)
import X from "x";

// CJS(CommonJS)
const X = require("x");

모든 컴포넌트를 ESM 또는 CJS 문법으로 통일하여 해결하였다.

npm으로 code-server 설치

포도빛 — Sat, 12 Feb 2022 09:55:56 +0900

웹 환경에서 VS Code를 사용할 수 있는 code-server를 설치하는 스크립트를 정리하였다.

환경:

장치: 라즈베리파이(Raspberry Pi) / Model 3B

OS: Raspberry Pi OS (64 bit) Lite / Debian 계열

[1] 개발환경 설치

## 루트 권한이 필요하므로 앞에 sudo를 붙이거나, 루트로 전환 후에 입력한다.

apt update
apt install build-essential pkg-config python3 gcc g++ make libx11-dev libxkbfile-dev libsecret-1-dev python-is-python3

[2] Node.JS 설치

## !!모든 명령어에 sudo가 붙어있으므로 주의!!

## code-server는 Node.js v14 이상을 권장
## nodesource repo를 사용하여 Node.js v14를 설치하도록 한다.
## https://github.com/nodesource/distributions#deb

curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt install nodejs


## 이후 npm 업그레이드.

sudo npm install -g npm

[3] Dependency 설치

## global로 설치하기 때문에 루트 권한이 필요하다. (sudo 붙이거나, 루트에서 작업)

npm install -g yauzl \
               yazl \
               minimist \
               semver-umd \
               applicationinsights \
               @coder/node-browser \
               spdlog \
               xterm \
               xterm-headless \
               native-watchdog \
               vscode-proxy-agent \
               vscode-ripgrep \
               vscode-regexpp

[4] code-server 설치

## 마찬가지로 global로 설치하기 때문에 루트 권한이 필요하다.

npm install -g code-server --unsafe-perm

[5] 첫 실행.

이어서 6을 진행하기 위해 메시지만 확인하고, 컨트롤 + C를 눌러 종료하도록 한다.

code-server

## 실행이 완료되면 아래와 같은 메시지가 출력된다.

[2022-02-12T00:20:52.756Z] info  code-server 4.0.1 735c6da829535969ff7193c79379299e4a1cb9bc
[2022-02-12T00:20:52.768Z] info  Using user-data-dir ~/.local/share/code-server
[2022-02-12T00:20:52.919Z] info  Using config file ~/.config/code-server/config.yaml
[2022-02-12T00:20:52.920Z] info  HTTP server listening on http://127.0.0.1:8080/
[2022-02-12T00:20:52.921Z] info    - Authentication is enabled
[2022-02-12T00:20:52.922Z] info      - Using password from ~/.config/code-server/config.yaml
[2022-02-12T00:20:52.922Z] info    - Not serving HTTPS

[6] config 수정

## [5]에서 출력된 메시지 중 "Using config file" 뒤에 이어서 config 파일의 경로가 나온다.
## vi를 사용하던, nano를 사용하던 본인이 편한 것을 사용하면 된다.

nano ~/.config/code-server/config.yaml


## 기본 내용은 다음과 같다.

bind-addr: 127.0.0.1:8080
auth: password
password: ~~~~~~~~~~~~~~~~~~
cert: false

## 다른 PC에서 접근해야한다면 bind-addr를 수정한다.
bind-addr: 0.0.0.0:8080


## password가 복잡하므로 적절히 변경한다.
password: myvscode


## 다른 옵션은 공식 문서를 참고하여 바꾸도록 한다.
## 최종 config

bind-addr: 0.0.0.0:8080
auth: password
password: myvscode
cert: false

[7] 다시 code-server를 실행

code-server

## 이후 출력 메시지

[2022-02-12T00:32:44.749Z] info  code-server 4.0.1 735c6da829535969ff7193c79379299e4a1cb9bc
[2022-02-12T00:32:44.761Z] info  Using user-data-dir ~/.local/share/code-server
[2022-02-12T00:32:44.907Z] info  Using config file ~/.config/code-server/config.yaml
[2022-02-12T00:32:44.908Z] info  HTTP server listening on http://0.0.0.0:8080/
[2022-02-12T00:32:44.910Z] info    - Authentication is enabled
[2022-02-12T00:32:44.910Z] info      - Using password from ~/.config/code-server/config.yaml
[2022-02-12T00:32:44.911Z] info    - Not serving HTTPS

[8] 브라우저 주소 입력 란에 http://IP주소:8080 을 입력하여 접속 및 로그인

- config에서 bind-addr에 명시된 포트 번호(기본 8080)를 바꾼 경우 맞춰서 접속해준다.

- config에서 password에 명시된 비밀번호를 입력한다.

[9] 첫 화면 등장!

[10] 코딩을 해보고 결과를 본다.

새 파일 만들기

터미널 열기

끝!

이제 여러가지 추가 설정을 한다면 태블릿으로 야외에서 코딩이 가능해진다!

참고자료

code-server github 저장소

https://github.com/coder/code-server

GitHub - coder/code-server: VS Code in the browser

VS Code in the browser. Contribute to coder/code-server development by creating an account on GitHub.

github.com

code-server 공식 설치 문서

https://coder.com/docs/code-server/latest/install#yarn-npm

Install - code-server v4.0.2 docs

How to install code-server.

coder.com

프론트앤드 컴포넌트 라이브러리

포도빛 — Wed, 2 Feb 2022 02:23:37 +0900

프론트앤드 컴포넌트 라이브러리

https://getbootstrap.com/

Bootstrap

The most popular HTML, CSS, and JS library in the world.

getbootstrap.com

https://github.com/mui-org/material-ui

GitHub - mui-org/material-ui: MUI (formerly Material-UI) is the React UI library you always wanted. Follow your own design syste

MUI (formerly Material-UI) is the React UI library you always wanted. Follow your own design system, or start with Material Design. - GitHub - mui-org/material-ui: MUI (formerly Material-UI) is the...

github.com

https://framework7.io/

Framework7 - Full Featured Framework For Building iOS, Android & Desktop Apps

Build full featured iOS, Android & Desktop apps

framework7.io

비주얼 스튜디오 인풋렉을 줄이고 싶다.

포도빛 — Wed, 2 Feb 2022 01:59:53 +0900

Visual Studio IDE의 에디터는 키보드를 누르는 순간부터 화면에 텍스트가 뿌려지는데까지 미세한 지연이 있어보인다. (10ms 아래겠지만)

하도 Visual Studio Code를 많이 써서 그런지 오랜만에 VS를 사용하면 심하게 체감되는데 강력한것도 좋지만... 너무 강력한 나머지 불평불만을 늘여놓게 되었다...

나중에 방법을 찾아보자...

2021년 구글 알고리즘 대회(Code Jam, Hash Code) 참가!

포도빛 — Fri, 10 Sep 2021 18:48:25 +0900

참가는 하였지만 올해 이직을 준비하느라(변명) 성적이 좋지 않네요.

Code Jam과 Hash Code 모두 예선에서 떨어져버렸습니다.

내년에는 반드시 Code Jam Round 2 이상 진출해보려고 합니다.

[짧은 게임 평가] 월즈 엔드 클럽

포도빛 — Mon, 12 Jul 2021 07:45:34 +0900

바닐라는 프로그래머다.

장르

퍼즐

액션

플랫폼

공식 사이트

https://deathmarchclub.com/

ワールズエンドクラブ公式サイト

ワールズエンドクラブ公式サイトです。

deathmarchclub.com

평가

개인적으로 재미있는 스토리. (단간론파를 기대하고 플레이한 유저분들은 대부분 실망감을 가졌다고 전해짐)
- 어린이용 단간론파 또는 그냥 어린이용 게임이라고 평가 하시는 분들이 많다.
- 나는 단간론파를 안 해보았다. 스팀으로 1, 2, 3 모두 구매는 했는데...
어렵지 않은 퍼즐이지만 예측하기 어려운 게임오버 발생
게임오버 발생시 체크 포인트에서 다시 시작
멀티 엔딩으로 분류되지만 모든 엔딩을 보도록 설계
일본어를 들을 줄 안다면 듣고 자막을 읽어보는 것을 추천
- 물론 자막도 품질이 나쁘진 않지만, 때때로 직역이 되었으면 더 좋지 않았을까 하는 생각이 있음
3D 그래픽은 깔끔하지만 동작(모션)의 퀄리티가 높지 않음
유치함 (유치한거 좋아함)
수집 요소 존재해서 수집하는 재미도 있음

아직도 아래 사진과 같은 느낌의 장면은 왜 존재하는지 이해 불가능

라즈베리파이 OS에서 무선랜 지역을 변경하는 방법 (Wi-Fi/무선 인터넷/와이파이)가 검색되지 않는 경우)

포도빛 — Mon, 12 Jul 2021 03:03:50 +0900

지난 시간에 라즈베리파이 OS를 설치하면서 Wi-Fi AP 목록이 나타나지 않는 현상이 있었다.

원인은 바로 지역 설정을 한국으로 했기 때문에 라즈베리파이가 올바른 주파수 대역을 찾지 못하는 것이다.

먼저 라즈베리파이의 터미널을 열고(Terminal),

아래의 명령어를 입력해준다. (라즈베리파이 설정)

$ sudo raspi-config

아래와 같은 화면을 볼 수 있을 것이다.

키보드 방향키를 사용하여 [Localisation Options]로 이동한 다음 엔터를 누른다.

그 다음은 [WLAN Country]로 이동하고 엔터를 누른다.

수 많은 지역 중 [US / United States]까지 이동 후 키보드의 [탭 / Tab]키를 눌러 커서를 아래의 [확인]에 두고 엔터를 누른다.

설정을 마치면 초기 화면으로 돌아가는데 터미널을 닫아준다.

이제 다시 네트워크 아이콘을 클릭해보면...

정상적으로 나타나는 것을 확인할 수 있다.

만약, 이 작업을 하여도 AP 목록이 나타나지 않는다면 공유기 설정에서도 국가와 채널을 라즈베리파이가 지원하는 주파수에 맞게 변경해야 한다.

라즈베리파이 OS에 한글 폰트 설치 (글자가 사각형/네모/ㅁ로 나올 때)

포도빛 — Mon, 12 Jul 2021 02:49:57 +0900

지난 시간에 라즈베리파이에 라즈베리파이 OS를 설치한 다음 한국어로 설정 후 재부팅을 하게 되면 사진처럼 한글이 표시되지 않는 현상이 있다.

이 문제는 라즈베리파이 OS에는 기본적으로 한글 폰트가 존재하지 않기 때문에 사각형에 글자 코드가 나타나게 된다.

그렇기 때문에 한글 폰트만 설치해준다면 한글이 잘 표시될 것이다.

라즈베리파이에서 터미널(Termial)을 열고

터미널 아이콘

아래의 명령어를 입력하고 엔터를 누른다.

이 명령어는 fonts-unfonts-core를 설치하는 명령어로 패키지를 설치하면 한국어 공용 폰트를 설치하게 된다.

자세한 내용은 여기(Debian 패키지 정보, https://packages.debian.org/sid/fonts/fonts-unfonts-core )를 클릭하여 알아보면 된다.

$ sudo apt install fonts-unfonts-core

그렇다면 사진처럼 설치가 될 것이다.

그 후 재부팅을 해준다.

명령어로 재부팅 하려면 아래와 같이 입력한다.

$ sudo reboot

이제 한국어가 잘 표시되는 것을 볼 수 있다.

라즈베리파이에 OS(Raspberry Pi OS) 설치하기

포도빛 — Sat, 10 Jul 2021 08:35:32 +0900

오늘은 내가 가지고 있는 라즈베리파이3에 라즈베리파이 OS를 설치해볼 것이다.

# 준비물

라즈베리파이
microSD 카드 (Lite 사용시 4 GB 이상, Desktop 또는 Recommned S/W 사용시 8 GB 이상, 모든 S/W 설치시 16 GB 이상)
microSD 리더기 (PC와 연결을 위함)
Micro USB 5 Pin 케이블과 어댑터 (5V 1A 이상, 스마트폰 충전기로 대체 가능)
HDMI 케이블
HDMI 지원 모니터
USB 키보드, 마우스

왼쪽부터 충전기, 라즈베리파이, microSD카드, 멀티 리더기, HDMI 케이블

# microSD 카드에 OS를 설치하기 위한 Raspberry Pi Imager 설치

과거엔 Win32DiskImager라는 툴로 구웠는데 이제는 자체적으로 소프트웨어를 제공한다!

https://www.raspberrypi.org/software/

Raspberry Pi OS – Raspberry Pi

The Raspberry Pi is a tiny and affordable computer that you can use to learn programming through fun, practical projects. Join the global Raspberry Pi community.

www.raspberrypi.org

다운로드 페이지에 접속한 다음, [Download for Windows] 버튼을 클릭하여 설치 프로그램을 다운로드 받은 다음에 설치를 해준다.

물론 맥이나 리눅스 사용자는 그 아래에 있는 옵션을 통해 설치를 해야한다.

설치가 완료되면 프로그램이 잘 있는지 확인해준다.

윈도우 시작메뉴에 등록된 Raspberry Pi Imager

# Raspberry Pi Imager를 사용하여 microSD 카드에 OS 설치하기

먼저 microSD 리더기에 microSD 카드를 꽂고, 컴퓨터에 연결해준다.

그 후 설치한 Raspberry Pi Imager를 실행해준다.

[CHOOSE OS] 버튼을 눌러준다.

운영체제 목록이 나타나면 설치할 운영체제를 선택한다. (프로그램이 다운로드하여 설치해준다.)

만약 자신이 외부에서 받은 운영체제가 있다면 최하단에 있는 [Use custom]을 눌러 이미지 파일을 직접 선택할 수도 있다.

* 이미지 파일을 직접 받으셨다면 꼭 이미지 파일이 맞는지 확인하자. 사진에는 .ZIP 으로 되어있지만 .IMG 등 이미지 파일이 선택되어야한다. (아래에 시행착오 있음)

사신처럼 선택한 OS 또는 파일 이름으로 버튼의 텍스트가 변경된다.

다음으로 프로그램 중앙에 위치한 [CHOOSE STORAGE] 버튼을 클릭한 다음 설치할 microSD 카드 장치를 선택한다.

스토리지 선택이 완료되었다면 [WRITE] 버튼을 누른다.

microSD 카드에 저장된 모든 데이터가 삭제된다는 경고가 나오고 [YES]를 누르면 기록이 시작된다.

준비 단계, 쓰기 단계, 검사 단계를 거친다.

다운로드가 필요한 경우 인터넷 속도 또는 microSD나 리더기의 성능에 따라 걸리는 시간이 상이하다.

준비(Preparing), 기록(Writing), 검사(Verifying)

설치가 완료된다면 아래처럼 Successful 메시지가 나타난다.

이제 microSD 카드에 운영체제 설치가 끝난 것이므로 microSD 카드를 컴퓨터와 리더기로부터 제거해도 된다.

그리고 성공 메시지가 출력됨과 동시에 간혹 윈도우에서 아래 사진과 같이 포맷을 물어보는 화면이 나올 수도 있는데 취소를 눌러야한다.

왜냐하면 microSD에 설치된 운영체제가 윈도우에서는 읽을 수 없는 형식(=Format =파일 시스템)으로 기록되기 때문에 윈도우는 자신이 읽을 수 있는 형식(Format)으로 포맷(Format)해야 한다고 알려주는 것이다.

# 시행착오 - 이미지 파일을 수동으로 적용할땐 압축을 풀자

쓰기 도중에 아래와 같은 오류가 발생했었다.

"Error writing to storage"

오류 메시지가 정확한 원인을 알려주진 않기에 다양한 생각을 할 수 밖에 없는 상황이였다.

"리더기가 불량인가?", "microSD 카드가 불량인가?", "이미지 파일이 깨졌나?" 등등...

알고보니 압축 파일(ZIP)을 그대로 골라서 그런 것이였다. (할 말을 잃어버림......)

압축을 풀고하니 잘 된다!

(위쪽 사진을 보면 ZIP으로 한 기록이....)

# 라즈베리파이 부팅

라즈베리파이에 전원, HDMI, USB 키보드/마우스, microSD 카드를 꽂아준다.

이더넷 포트(LAN 포트)가 존재하므로 유선 인터넷을 사용하고 싶다면 LAN 케이블을 연결하면 된다.

그 후 HDMI 반대편은 모니터에 꽂아주고, 전원을 꽂아준다.

전원을 꽂고 HDMI 또는 모니터를 연결하면 화면이 안 나오므로 무조건 전원은 마지막에 입력해야한다.

라즈베리파이가 처음 켜지면 아래처럼 알록달록한 색이 나타날 것이다.

그 후 최초 부팅시 "Resized root filesystem."이 나타나고 어느 정도 시간이 흐른 다음 재부팅 될 것이다.

Raspberry Pi OS Desktop 의 부팅 화면은 아래와 같다.

Raspberry Pi Lite 를 설치한 경우 또는 모니터 해상도가 낮은 경우엔 라즈베리 아이콘과 글자만 주르륵 나올 것이다.

부팅이 모두 완료되면 아래처럼 바탕화면이 나타난다.

만약 Raspberry Pi OS Lite (아무튼 Desktop이 아닌 것) 을 설치했다면 "Desktop"이 없어서 즉시 터미널만 나타날 것이다. Desktop이 필요한 경우 Lite에서 Desktop을 설치할 방법을 찾거나(많이 번거롭다.), OS를 다시 설치하도록 하자.

중앙에 나타난 창에서 [Next]를 눌러 기초 설정을 간단하게 하도록 하자.

국가설정.

새로운 비밀번호 설정.

참고로 초기 사용자 이름은 pi이고 암호는 raspberry이다.

화면 설정.

화면을 모니터에 꽉 차게 맞춰준다는 것으로 해석된다.

(모니터 가장자리에 검정 테두리가 있다면.)

무선 네트워크 (Wi-Fi, 와이파이) 설정.

3분 넘게 기다리라고만 나오면 일단 Skip을 누르고 다른 설정을 해주어야 한다. (무선이다보니 국가에 따라 주파수가 달라 검색이 안 될 수도 있다.)

업데이트.

업데이트를 하고 싶다면 [Next]를 누르고, 나중에 하려면 [Skip]을 누르자.

설정 끝.

이렇게 해서 라즈베리파이에 Raspberry Pi OS 를 설치해보았다.

나중엔 이것으로 장난감?을 하나 만들어볼 계획이다.

엄청 예전에 이용했던 Reversing.kr

포도빛 — Fri, 9 Jul 2021 08:11:19 +0900

크래킹 & 리버싱 연습을 할 수 있는 문제 사이트

http://reversing.kr/index.php

Reversing.Kr

This site tests your ability to Cracking & Reverse Code Engineering. Now Challenge a problem for each environment. (Windows, Linux, .Net, Flash, Java, Python, Mobile..) Admin E-Mail: gogil@reversing.kr

reversing.kr

엄청 오랜만에 생각나서 찾아보았다.

홈페이지가 2012년 3월 3일 오픈했는데...

오픈한 그날 바로 300점을 획득하고 끝냈었다. (닉네임은 변경한 것!)

엄청 옛~날에 프로그래밍 커뮤니티에서 당시 닉네임 ㄱㄱㄱㄱ님께서 만드신 사이트이다.

옛날 생각을 하니 많은 초고수 선배님들이 생각난다.

ㄷㄹㅅㄹㅅ라는 비공개 커뮤니티에서도 활동 했었는데 찾아보니 모두 대단한 화이트해커가 되셨었다니...

한 때 나도 정보보호에 관심이 많았던 것 같았었는데... 지금은 취미로만 하고 있다보니 많이 까먹었다.

나중에 이분들이 세미나를 개최하신다면 꼭 참가해보고 싶다.

TypeScript(타입스크립트) 설치하기

포도빛 — Fri, 9 Jul 2021 07:27:51 +0900

이번에는 TypeScript를 설치해보려고 한다.

사전에 준비해두어야 하는 것:

NPM (Node Package Manager)

그렇다. NPM만 있으면 TypeScript를 설치할 수 있다.

명령 프롬프트 또는 터미널을 열고 아래 명령어를 입력하면 설치가 끝난다.

< 현재 디렉토리(for 프로젝트)에 설치하는 경우 >
npm install typescript

< 전역(Global) 설치하는 경우 >
npm install -g typescript

타입스크립트 패키지가 설치되었고, 4.3.5 버전이 설치되었음을 알 수 있다.

그 후 아래 명령어를 통해 다시 설치가 정상적으로 되었는지 확인해보자!

tsc --version

잘 나온다!

참고로 tsc는 TypeScript Compiler의 약자라고 생각하면 된다.

TypeScript는 JavaScript와 달리 Compile을 해야하고, 컴파일에 성공하면 JavaScript(*.js) 파일을 출력한다.

샘플 TypeScript 코드를 사용하여 컴파일을 연습해보자.

아래의 코드를 작성한다.

interface User {
	name: string;
	age: number;
	site: object;
}

const user: User = {
	name: "포도빛",
	age: "20", // 오류가 발생해야 함!
	site: {
		blog: "https://phodobit.kr",
		github: "https://github.com/smartse0k",
	}
}

console.log(user);

그 후 code.ts 라는 파일명으로 저장한 다음, 아래의 명령어로 컴파일을 해보자.

tsc code.ts

그렇다면 오류가 발생할 것이다.

한 개의 오류를 찾았다고 나타난다.

user 객체는 User 인터페이스 속성을 따라야 하는데 인터페이스에서는 age가 number이길 바라지만 객체에서는 age에 string 값을 대입하였기 때문이다.

이것이 바로 "Type"을 중요시하는 TypeScript의 매력이다.

이제 오류를 수정하고, 다시 컴파일을 해보자!

// 이 코드를
age: "20",

// 이렇게 바꾸면 오류가 없을 것이다.
age: 20,

아무 메시지가 없다면 아무 문제 없이 컴파일 된 것이다.

그리고 컴파일의 결과로 나타난 JavaScript 파일(code.js)을 열어본다면....!!

var user = {
    name: "포도빛",
    age: 20,
    site: {
        blog: "https://phodobit.kr",
        github: "https://github.com/smartse0k"
    }
};
console.log(user);

이렇게 TypeScript 문법은 빠지고 순수 JavaScript 코드로 나타난다!

컴파일만 해보려는 예시 코드를 작성하다보니 큰 차이가 없다.

끝~!

나중에 알아보아야 할 것:

컴파일 오류가 발생하였는데도 js 파일이 잘 출력되었다!

참고 자료:

TypeScript Download Official Site ( https://www.typescriptlang.org/download )
TypeScript Tutorial Official Site ( https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html )

웹 사이트가 무엇으로 개발되었는지 파악하는 방법 (BuiltWith 소개)

포도빛 — Sun, 13 Jun 2021 01:27:14 +0900

간혹 웹 개발자들은 어느 웹 사이트를 방문하면 어떤 기술이 탑재되어 있는지 궁금한 경우가 있다.

그렇다면 그들은 웹 서버에서 전달해주는 HTTP 헤더, 페이지 소스 코드를 통해 찾아볼 수 있다.

요즘 대부분의 웹 브라우저는 개발자 도구(Developer Tools)를 제공하고,

개발자 도구를 연 다음 웹 사이트에 접속하면 Network 탭에서 HTTP 패킷(헤더, Request 및 Response 데이터)을 관찰 할 수 있다.

이곳에서 볼 수 있는 정보로 웹 사이트가 사용 중인 기술을 파악할 수 있는 방법이 있는데 무슨 기술인지 알려면 본인도 그 기술이 무엇인지 알아야 한다는 것이다.

구글 크롬 - 개발자 도구 - Network 탭

위 그림과 같이 웹 사이트 접속할때의 Request, Response 정보를 보면...

"X-Powered-By: PHP/7.x.x"라는 헤더를 통해 이 웹 사이트(정확히는 현재 출력되는 페이지)가 PHP로 개발되었고,

"Server: nginx" 헤더를 통해 웹 서버는 Nginx를 사용했음을 알 수 있다.

다른 사이트를 보자.

이 웹 사이트는 Apache 웹 서버를 사용하고 있음을 알 수 있고, 운영체제는 Raspbian인 것을 알 수 있다.

위와는 다르게 X-Powered-By 헤더는 제거되었지만, Set-Cookie를 통해 ci_session 쿠키를 설정하는 것을 볼 수 있다.

ci_session은 PHP의 CodeIgniter 프레임워크가 사용하는 세션 쿠키의 기본값(이름)이다.

따라서 이 웹 사이트는 PHP와 CodeIgniter 프레임워크가 사용되었음을 알 수 있다.

그런데 이러한 내용은 아는 만큼만 보인다.

많이 알수록 많이 보이는 것이다. 모르는 것들은 안 보인다.

그럼 이러한 패턴을 통해 무슨 기술인지 알려주는 서비스를 찾으면 되는 것인데

마침 그런 서비스가 있다.

바로 BuiltWith. (광고가 아니라 소개입니다...!)

https://builtwith.com/

BuiltWith

Find out what websites are BuiltWith

builtwith.com

처음 접속하면 아래와 같은 화면이 나온다.

이 화면에서 우측 상단이나 중앙에 배치된 검색 상자에 알고싶은 웹 사이트의 주소(URL)을 입력하고 [Lookup]을 눌러보자.

위 사진처럼 [Technology Profile]에 기술 프로필이 나타날 것이다.

그런데 맨 처음에 직접 알아냈던 PHP라는 정보는 없는데, 이 정보는 [Detailed Technology Profile] 탭에서 조회할 수 있다.

이렇게 말이다.

이제 BuiltWith의 서비스는 무료인지 궁금할 것이다.

BuiltWith는 일단 유료 플랜이 있다.

무료로 등록(가입)을 한다면 하루 10건의 웹 사이트를 조회할 수 있다.

등록하지 않는 경우 [Detailed Tech... Profile]은 1건만 조회할 수 있다. (기본 Tech Profile은 항상 조회 가능하다.)

이제 여러 웹 사이트를 방문하고 신기한, 처음보는, 알고싶은 기술이 있다면 사이트를 통해 파악하고 공부해보자!

현재 사용하는 알고리즘 문제 풀이 사이트

포도빛 — Fri, 11 Jun 2021 02:20:39 +0900

제목과 같이 현재 사용하는 알고리즘 문제 풀이 사이트 목록이다.

백준 알고리즘 (백준 온라인 저지, Baekjoon Online Judge)

Baekjoon Online Judge

Baekjoon Online Judge 프로그래밍 문제를 풀고 온라인으로 채점받을 수 있는 곳입니다.

www.acmicpc.net

가장 유명하고 가장 많이 사용 중인 사이트

프로필

프로그래머스 (Programmers)

프로그래머스

코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.

programmers.co.kr

[실력 체크 - 스킬 체크]에서 난이도별 알고리즘 문제를 풀어볼 수 있다.

많은 기업들이 이 플랫폼을 사용하여 코딩 테스트를 진행한다.

파이자 (Paiza)

ITエンジニア向け転職・就活・学習サービス【paiza】

ITエンジニア・プログラマ専門の総合求職・学習サイト【paiza（パイザ）】。プログラミングスキルチェックで実力を可視化し、スキルがあると認められれば書類選考不要で即面接へ進めます

paiza.jp

일본에서 사용하는 알고리즘 문제 풀이 사이트.

일본어를 몰라도 구글 번역기를 사용하면 그림 자료를 제외하고 텍스트는 한국어로 번역이 가능하여 문제를 읽을 수 있다.

[스킬 체크]에서는 난이도(C, B, A, S)별 분류가 되어 있다.

일본의 문화에 맞게 게임 방식도 있다.

닉네임에 한글(한국어)를 입력할 수 있다.

프로필(스테이터스)

오늘의 카트왕

포도빛 — Fri, 11 Jun 2021 01:37:13 +0900

오늘의 카트왕은 카트라이더 API를 사용하여 실시간으로 전적 분석후 등수에 따라 점수를 부여하여 하루 동안의 랭킹을 실시간으로 동영상 플랫폼(유튜브)에 스트리밍하는 프로젝트입니다.

● 프로젝트에 사용된 기술(도구)

● 개발 소요 시간

약 3시간...

● 구현 방식 요약

추후 작성 하겠습니다 ㅠㅅㅠ

● 2021년 6월 11일 기준 유튜브 링크 및 스크린샷

https://www.youtube.com/watch?v=8jZNnzF1OOs

카트라이더 API Wrapper for PHP

포도빛 — Fri, 11 Jun 2021 01:27:19 +0900

넥슨 개발자센터에서 제공하는 카트라이더 API를 PHP로 쉽게 사용할 수 있게 Wrapping한 오픈소스 라이브러리 프로젝트입니다.

오픈소스(GitHub) 주소:

https://github.com/smartse0k/KartRiderAPIWrapperForPHP

smartse0k/KartRiderAPIWrapperForPHP

PHP용 넥슨 카트라이더 API Wrapper. Contribute to smartse0k/KartRiderAPIWrapperForPHP development by creating an account on GitHub.

github.com

샘플코드

// 라이더명으로 유저 정보 조회 API 사용
$findUserByNickname = new \Phodobit\Kartrider\Api\Request\User\FindUserByNickname();

$apiKey = '';
$userNickname = '포도빛향기에';

// 필수 요청 정보 Setting
$findUserByNickname->setNickname($userNickname);

// API 키 설정
$findUserByNickName->setApiKey($apiKey);

// API 요청
$findUserByNickname->send();

// API 응답 가져오기
$findUserByNickNameResult = $findUserByNickname->getResult();

// 데이터 출력
echo "{$userNickname}님의 레벨은 {$findUserByNickNameResult->getLevel()}입니다.";
// => 포도빛향기에님의 레벨은 104입니다.

[링크] TDD. 테스트 주도 개발.

포도빛 — Fri, 28 May 2021 00:11:43 +0900

https://wikidocs.net/224

프로젝트 만들고 GitHub에 첫 Commit하고 Push하기

포도빛 — Sun, 25 Apr 2021 15:46:09 +0900

먼저 GitHub에서 새로운 저장소(Repository)를 만들자!

GitHub에 접속한 다음, 우측 상단에 있는 [+] 기호를 클릭하고

"New repository"를 클릭하여 새 저장소 생성 페이지로 이동한다.

새 저장소 생성 페이지가 나타나면 필요한 항목을 입력하고 [Create Repository]를 클릭한다.

저장소가 신규로 생성되면 바로 아래와 같은 빠른 설정 가이드가 나타나는데 이곳에 이미 무엇을 해야할지 명령어 목록이 나타나있다.

명령 프롬프트(cmd) 또는 터미널(Terminal)을 열어

자신이 GitHub에 등록한 프로젝트를 만들거나, 기존 프로젝트의 디렉토리로 이동한다.

$ cd "C:\MyProjects\TestProject"

만약 Git 프로젝트가 아니라면 아래 명령어를 사용하여 Git 프로젝트로 초기화를 해준다.

* Git의 초기화일뿐 프로젝트가 초기화되진 않는다.

* 만약 Git 프로젝트인데 이 명령어를 사용하면 그동안 쌓인 Git 기록이 초기화 될 수 있으니 주의한다. (프로젝트 디렉토리에 ".git"이라는 폴더가 있다면 Git 프로젝트이다. Unix/Linux 환경에서는 파일 이름 앞이 .기호로 시작된다면 숨김 파일이므로 ls -a를 사용하여 확인해야한다.)

$ git init

# 출력:
Initialized empty Git repository in /프로젝트위치/.git/

이제 이 Git 프로젝트에서 아래 명령어를 통해 원격 저장소인 GitHub를 추가해준다.

[이름]은 이 Git 프로젝트를 다루는 컴퓨터에서 사용할 원격 저장소의 이름을 지정해주는 것이고

보통 origin을 사용하고, github, firstserver 등등 아무 이름으로 지정해도 된다. 단지 자신이 어느 원격 저장소를 사용하는지만 구분할 줄 알면 된다.

* 저장소는 여러개 추가할 수 있다.

$ git remote add [이름] [HTTPS 또는 SSH 주소]

# 예시:
# git remote add origin https://github.com/smartse0k/blabla.git
# git remote add github https://github.com/smartse0k/blabla.git

첫 번째 커밋(Commit)을 하기 위해 소스코드나 아무 파일을 만들고 내용을 채워준다.

그리고 아래 명령어를 통해 상태를 본다.

$ git status

# 출력:
On branch main (현재 브런치: main)

No commits yet (아직 아무 커밋 없음)

Changes to be committed: (커밋될 변경점 = 커밋 명령어를 사용하는 경우 적용될 대상 = Stage된 변경점)
  (use "git rm --cached <file>..." to unstage)
        new file:   README.md (새 파일 README.md 생성)

Changes not staged for commit: (Stage되지 않은 변경점 = 커밋이 적용되지 않는 대상)
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   README.md (README.md의 수정)

Untracked files: (추적하지 않는 파일들)
  (use "git add <file>..." to include in what will be committed)
        .idea/
        Phodobit/

위 출력에 이미 괄호()를 사용하여 해석할 수 있게 메모해두었다.

출력 내용은 사용자의 동작 순서에 따라 변경될 수 있으므로 반드시 설명을 이해하도록 하자.

만약 이 상태 그대로 커밋한다면 "오직 README.md 생성"만 커밋된다. (내용은 반영되지 않는다.)

또 Changes to be committed에 아무 내용이 없다면 커밋할 내용이 없으므로 커밋 자체가 되지 않는다.

그렇기 때문에 현재 소스코드 또는 파일의 내용을 그대로 커밋할 내용에 반영(필자의 경우 README.md에 적힌 내용도 반영)할 필요가 있다.

아래 명령어를 통해 Stage 상태(Changes to be committed에 추가)로 만들어준다.

$ git add [파일명]

# 예시:
# git add README.md

그리고 다시 "git status" 명령어를 통해 위에서 설명한 내용대로 잘 반영 되었는지 직접 확인해보자.

이제 아래의 명령어를 입력하여 커밋을 등록한다.

$ git commit -m "커밋메시지"

# 예시:
# git commit -m "README.md 추가"

# 출력:
[main (root-commit) 504c5aa] README.md 추가
 1 file changed, 3 insertions(+)
 create mode 100644 README.md

* 만약 커밋하는데 아래와 같은 메시지가 나타나는 경우 메시지에 따라 절차를 수행해준다.

Author identity unknown

*** Please tell me who you are.

Run

git config --global user email "~"

git config --global user.name "~"

to set your account's default identity.

Omit --global to set the identity only in this repository.

fatal: unable to auto-detect email address (got 'js@JS-PC.(none)')

현재 Commit을 하는데 있어 누군지 신원을 입력하지 않았기 때문에 메시지가 요구하는대로 신원을 밝혀주어야 한다.

$ git config --global user.email "자신의 이메일"
$ git config --global user.name "자신의 이름/닉네임"

커밋(Commit)을 하면 로컬(Local: 자신의 PC 안)에서만 반영이 된다.

이제 GitHub에 Push(푸쉬 = 업로드)하기 위해 아래 명령어를 사용한다.

$ git push [저장소이름] [브런치이름]

# 예시:
# git push origin main

* 현재 Git 프로젝트에 기본 저장소를 설정해두면 `git push` 명령어만으로도 Push가 가능하다.

사용중인 Git의 버전과 저장소 Scheme에 따라 출력이 다른데 HTTPS로 한 경우엔 로그인 화면이 나타난다.

로그인 화면이 나타나면 자신의 Github 계정으로 로그인하도록 하자.

* 만약 SSH로 한 경우엔 SSH Key를 등록한 경우 즉시 Push가 완료되고, SSH Key를 등록하지 않은 경우 인증 실패가 나타나는데, SSH 인증은 나중에 알아보도록 한다.

Push가 완료되면 아래와 같은 출력이 나타난다.

이제 GitHub 저장소 페이지를 새로고침하면 자신의 코드/파일이 Push(업로드)된 것을 확인할 수 있다.

Ubuntu에 node.js, npm, npx, yarn 설치

포도빛 — Mon, 19 Apr 2021 16:08:40 +0900

각 명령어엔 sudo가 붙어있으므로 잘못된 명령어가 실행되지 않도록 주의!

1. Node.js 설치

$ sudo apt install nodejs

2. npm 설치

$ sudo apt install npm

3. npx 설치

$ sudo npm install -g npx

4. yarn 설치

$ sudo npm install -g yarn

[HTML] input, textarea에서의 자동 완성 속성 (비밀번호 자동 완성 막기)

포도빛 — Sun, 14 Mar 2021 11:06:34 +0900

부제목

[HTML] input password 자동 완성 막기

Chrome에서 자동완성된 모습.

HTML에서 회원가입 화면, 로그인 화면, 정보 수정 화면을 만들고 테스트를 하다보면 회원가입이나 로그인에서 입력한 계정 정보(비밀번호 등)가 브라우저 또는 사용자가 직접 저장해서 자동 완성되어 버리는 일이 있다.

이를 방지하기 위해 자동 완성 속성(autocomplete)을 파헤쳐보려고 한다.

먼저 아래와 같은 코드로 autocomplete 속성을 추가하면 된다.

<input type="password" name="user_password" id="user_password" autocomplete="값">

<textarea name="memo" id="memo" autocomplete="값"></textarea>

autocomplete 속성은 입력 필드에 대해 브라우저에게 어떤 항목이 자동완성 될 수 있는지 알려주고,

브라우저가 기억하고 있는 단어 중 이름이면 이름만, 비밀번호면 비밀번호만 자동완성 할 수 있도록 지정해준다.

그리고 autocomplete 속성이 주어지지 않은 경우 부모 <form>에 지정된 autocomplete 속성을 상속받으며(따라가며),

<form>에도 autocomplete가 주어지지 않은 경우엔 브라우저가 결정한다. (보통 on이 기본값)

이제 "값"에 어떤 값이 들어갈 수 있는지 간단하게 설명하려 한다.

자동완성을 금지하는 값

off

자동완성을 금지한다.

* 단, 크롬이나 사파리 등에서 나타나는 [구글/애플/삼성 계정에 이 계정 저장하기]를 통해 저장된 정보는 금지되지 않는다. 이 또한 금지시키려면 아래에 나오는 new-password 값을 사용하면 된다.

new-password

새로운 비밀번호를 입력하는 영역으로 자동완성을 금지한다.

off와 동일한 기능을 하지만 새로운 비밀번호를 입력하는 영역으로 완전한 자동완성을 금지할 수 있고, 크롬 등에서 안전한 무작위 비밀번호 추천을 요청할 수도 있게 된다.

one-time-code

OTP. 즉 인증번호(인증코드)와 같이 1회용 비밀번호를 입력하는 곳으로 new-password와 마찬가지로 자동완성을 금지할 수 있다.

자동완성을 허용하는 값

on

자동완성을 허용한다.

단순히 어떤 필드인지 구분하지 않고 오직 브라우저가 입력필드에 지정된 속성 중 "name"의 값을 보고 자동완성된다.

그리고 자동완성을 허용하는데, 어떤 입력이 오길 바라는지 기술하는 값들

이름과 관련이 있는 값들

name : 전체 이름

honorific-prefix : 호칭(Mrs. Miss. 등)

family-name : 성

given-name : 이름

additional-name : 가운데 이름

honorific-suffix : 경칭(Jr. 등)

nickname : 별칭(별명, 닉네임)

계정과 관련이 있는 값들

username : 사용자 계정 이름(아이디)

email : 이메일 주소

current-password : 현재 비밀번호

비즈니스와 관련이 있는 값들

organization : 조직 이름

organization-title : 직위

주소와 관련이 있는 값들

country : 국가코드

country-name : 국가이름

postal-code : 우편번호

address-level1~4 : 주소를 상세하게 나누는 경우 (address-level1, address-level2, address-level3, address-level4)

street-address : 도로명 주소 (전체 주소가 아닌 도로명 이하만)

address-line1~3 : 도로명 주소를 상세하게 나누는 경우 (address-line1, address-line2, address-line3)

개인과 관련이 있는 값들

bday : 생년월일

bday-year : 생년

bday-month : 생월

bday-day : 생일의 일자

sex : 성별

tel : 전체 전화번호 (82-2-1234-5678)

tel-country-code : 전화번호 중 국가코드 (82)

tel-national : 전화번호중 국가코드를 제외한 전화번호 (02-1234-5678)

tel-area-code : 전화번호를 구성하는 지역번호 (02)

tel-local : 전화번호중 지역번호까지 제외한 전화번호 (1234-5678)

tel-local-prefix : tel-local에서 나눌때 앞자리 (1234)

tel-local-suffix : tel-local에서 나눌때 뒷자리 (5678)

tel-extension : 내선번호

기타

url : URL, 주소

photo : 이미지 URL 등

더 자세히 알아보려면 아래 레퍼런스를 보면 된다!

developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

The HTML autocomplete attribute - HTML: HyperText Markup Language | MDN

The HTML autocomplete attribute The HTML autocomplete attribute is available on elements that take a text or numeric value as input, elements,

카카오톡 이모티콘 플러스 해지 방법

포도빛 — Mon, 8 Feb 2021 23:24:38 +0900

1. 카카오 My 구독 홈페이지에 접속한다.

링크 : my.kakao.com/

My 구독

카톡 정기결제 상품을 구독해 보세요.

my.kakao.com

2. 우측 상단의 로그인 버튼을 눌러 자신의 카카오(톡) 계정으로 로그인을 한다.

3. 다시 한 번 더 우측 상단의 자신의 프로필 이미지를 클릭하여 나타나는 메뉴에서

지금 구독중인 이모티콘 플러스를 누른다.

4. My 구독 정보 화면 아래에서 "구독중인 상품"에 있는 이모티콘 플러스를 누른다.

5. 구독중인 내용을 확인하고, 내용 아래에 있는 "해지하기"를 누른다.

6. 해지 안내 화면에서 내용을 잘 읽어본 다음 "해지하기"를 누른다.

누르자마자 다시 묻지 않고 해지신청된다.

7. 해지 신청되었다는 화면이 나오고, 카카오톡으로 알림톡을 받게 된다.

즉시 해지가 되지 않고 해지 예정일이 있는 것은 결제금액(무료사용일 또는 3,900원)이 1개월 분량이므로 이 1개월이 지난 날이 표시되고, 이모티콘 플러스 또한 즉시 사용이 중지되는게 아닌 남은 기간 동안은 계속해서 사용할 수 있는 것이다.

쉽게 설명하자면 놀이공원 1일 입장권을 산 것이고 당일의 마감시간까지 놀 수 있다는 것이다. 집에 일찍 간다고 남은 시간만큼 환불해 주는게 아니다.

해지 끝!

CentOS 7에 libmicrohttpd 설치하기

포도빛 — Sun, 17 Jan 2021 18:05:21 +0900

기존에 소스코드를 빌드하여 설치한 경우 반드시 제거해야한다. 제거 방법은 아래 명령어를 사용하도록 한다.

만약 소스코드 디렉토리를 삭제한 경우에는 다시 다운로드 받아 저장한 다음, 설치했던 때와 같은 configure 옵션을 준 다음에 명령어를 입력하면 된다.

$ cd "기존 소스코드 디렉토리"

$ make uninstall

EPEL Release 저장소 설치 (이미 설치했다면 건너뛴다.)

$ yum install epel-release

Git 설치 (이미 설치했다면 건너뛴다.)

yum install git

HTTPS 지원을 위한 의존성(GnuTLS) 설치 (HTTPS를 사용하지 않는다면 건너뛴다.)

$ yum install gnutls gnutls-devel

libmicrohttpd 소스코드 클론(다운로드)

# 원하는 작업 디렉토리...
$ cd ~

$ git clone https://github.com/Karlson2k/libmicrohttpd.git
$ cd libmicrohttpd
$ git checkout v0.9.71

빌드 전 구성 설정

$ autoreconf -fi
$ ./configure --prefix=/usr --libdir=/usr/lib64 --enable-https=yes

만약, HTTPS를 사용하지 않는다면 --enable-https=yes를 --enable-https=no로 변경한다.

빌드 및 설치

$ make
$ make install

Git 공식 한국어 가이드북

포도빛 — Fri, 25 Dec 2020 01:07:44 +0900

블로그에 Git 명령어를 정리하려고 했었는데 Git 홈페이지에 한국어 가이드북이 있어 링크를 공유!

띄엄띄엄 읽어보니 매우 좋게 정리되어 있어서 블로그에 따로 정리하지 않아도 될 것 같다

링크: https://git-scm.com/book/ko/v2

Git - Book

git-scm.com

1. 시작하기
1. 1.1 버전 관리란?
2. 1.2 짧게 보는 Git의 역사
3. 1.3 Git 기초
4. 1.4 CLI
5. 1.5 Git 설치
6. 1.6 Git 최초 설정
7. 1.7 도움말 보기
8. 1.8 요약
2. Git의 기초
1. 2.1 Git 저장소 만들기
2. 2.2 수정하고 저장소에 저장하기
3. 2.3 커밋 히스토리 조회하기
4. 2.4 되돌리기
5. 2.5 리모트 저장소
6. 2.6 태그
7. 2.7 Git Alias
8. 2.8 요약
3. Git 브랜치
1. 3.1 브랜치란 무엇인가
2. 3.2 브랜치와 Merge 의 기초
3. 3.3 브랜치 관리
4. 3.4 브랜치 워크플로
5. 3.5 리모트 브랜치
6. 3.6 Rebase 하기
7. 3.7 요약
4. Git 서버
1. 4.1 프로토콜
2. 4.2 서버에 Git 설치하기
3. 4.3 SSH 공개키 만들기
4. 4.4 서버 설정하기
5. 4.5 Git 데몬
6. 4.6 스마트 HTTP
7. 4.7 GitWeb
8. 4.8 GitLab
9. 4.9 또 다른 선택지, 호스팅
10. 4.10 요약
5. 분산 환경에서의 Git
1. 5.1 분산 환경에서의 워크플로
2. 5.2 프로젝트에 기여하기
3. 5.3 프로젝트 관리하기
4. 5.4 요약
6. GitHub
1. 6.1 계정 만들고 설정하기
2. 6.2 GitHub 프로젝트에 기여하기
3. 6.3 GitHub 프로젝트 관리하기
4. 6.4 Organization 관리하기
5. 6.5 GitHub 스크립팅
6. 6.6 요약
7. Git 도구
1. 7.1 리비전 조회하기
2. 7.2 대화형 명령
3. 7.3 Stashing과 Cleaning
4. 7.4 내 작업에 서명하기
5. 7.5 검색
6. 7.6 히스토리 단장하기
7. 7.7 Reset 명확히 알고 가기
8. 7.8 고급 Merge
9. 7.9 Rerere
10. 7.10 Git으로 버그 찾기
11. 7.11 서브모듈
12. 7.12 Bundle
13. 7.13 Replace
14. 7.14 Credential 저장소
15. 7.15 요약
8. Git맞춤
1. 8.1 Git 설정하기
2. 8.2 Git Attributes
3. 8.3 Git Hooks
4. 8.4 정책 구현하기
5. 8.5 요약
9. Git과 여타 버전 관리 시스템
1. 9.1 Git: 범용 Client
2. 9.2 Git으로 옮기기
3. 9.3 요약
10. Git의 내부
1. 10.1 Plumbing 명령과 Porcelain 명령
2. 10.2 Git 개체
3. 10.3 Git Refs
4. 10.4 Packfile
5. 10.5 Refspec
6. 10.6 데이터 전송 프로토콜
7. 10.7 운영 및 데이터 복구
8. 10.8 환경변수
9. 10.9 요약
A1. Appendix A: 다양한 환경에서 Git 사용하기
1. A1.1 GUI
2. A1.2 Visual Studio
3. A1.3 Eclipse
4. A1.4 Bash
5. A1.5 Zsh
6. A1.6 Git in Powershell
7. A1.7 요약
A2. Appendix B: 애플리케이션에 Git 넣기
1. A2.1 Git 명령어
2. A2.2 Libgit2
3. A2.3 JGit
4. A2.4 go-git
A3. Appendix C: Git 명령어
1. A3.1 설치와 설정
2. A3.2 프로젝트 가져오기와 생성하기
3. A3.3 스냅샷 다루기
4. A3.4 Branch와 Merge
5. A3.5 공유하고 업데이트하기
6. A3.6 보기와 비교
7. A3.7 Debugging
8. A3.8 Patch 하기
9. A3.9 Email
10. A3.10 다른 버전 관리 시스템
11. A3.11 관리
12. A3.12 Plumbing 명령어

CentOS 7에 Git을 설치해보자!

포도빛 — Fri, 25 Dec 2020 00:17:11 +0900

# 부제목

CentOS 7 Git 설치 방법

[1] 빠르게 Git 설치하기 (1.x 버전)

2.x 버전의 Git을 설치하려면 아래쪽(2번 항목)으로 넘어가세요!

먼저, CentOS 7에서의 Git 설치는 매우 간편하다.

패키지 매니저인 yum을 통해 바로 설치할 수 있는데, 터미널을 열고 아래의 명령어를 입력하여 Git을 설치해보자!

> root 계정일 경우
yum install git

> 관리자 권한을 가진 사용자 계정일 경우
sudo yum install git

> root로 전환후 설치
sudo su
yum install git

비밀번호를 묻는 경우 비밀번호를 입력 후 Enter키를 눌러준다.

Git과 Git에 필요한 의존성(Dependency) 목록이 나타난 후 설치할 것인지 물어보는데 y를 입력해준 다음, Enter키를 눌러준다.

지금 설치하려는 Git의 버전이 사진과 같이 1.8.3 버전이다.

글을 작성하는 기준으로는 2.9.5가 최신 버전인데 최신 버전을 설치하는 방법은 아래에서 다뤄볼 것이다.

설치에 필요한 GPG Key를 등록할 것인지 물어본다면 y를 입력 후 Enter를 눌러준다.

어느 인터넷의 자료를 보더라도 사용자가 신뢰할 수 있는지 확인을 하는 것이 매우 중요하다. (악성 소프트웨어의 설치와 실행을 방지하기 위해서...)

Installed 항목에 Git이 표시되고, Complete! 메시지가 나타나면 Git이 성공적으로 설치된 것이다.

아래의 명령어를 입력하여 Git이 정상적으로 설치되었는지 확인해보자.

git --version

그림과 같이 Git의 버전이 정상적으로 표시된다면 완벽하게 설치된 것이다.

[2] 2.x 버전의 Git 설치하기

그렇다고 2.x 버전의 Git을 설치하는 방법이 당장 어려운 편은 아니다.

첫 번째 방법으로는 Git 홈페이지에서 제공하는 소스코드를 다운로드 받아 직접 빌드하여 설치할 수도 있고,

두 번째 방법으로는 제3자 저장소(3rd-party Repository, 써드파티 레포지토리, 3rd-party repo)에서 제공하는 Git 바이너리를 설치할 수도 있다.

이번 글에서는 제3자 저장소를 패키지 매니저에 등록하여 Git을 설치해보려고 한다.

3rd-party repo는 반드시 신뢰할 수 있는 저장소만 설치해야한다.

예를들어 Git 소스를 빌드하는 과정에 악성코드를 삽입한 코드를 함께 빌드하고 배포할 수도 있기 때문이다.

가장 먼저 할 일은 제3자 저장소를 찾는 일이다.

3rd repo를 찾는 것은 시간이 조금 필요한데 이미 Git 홈페이지에서는 IUS repo를 소개해주고 있다.

https://git-scm.com/download/linux

Git

Download for Linux and Unix It is easiest to install Git on Linux using the preferred package manager of your Linux distribution. If you prefer to build from source, you can find tarballs on kernel.org. The latest version is 2.29.2. Debian/Ubuntu For the l

git-scm.com

그 외에 많이 사용하는 Git 설치를 위한 repo는 WANdisco인데, 두 repo 모두 설명해보고자 한다.

참고로, 오늘(2020년 12월 24일) 기준으로 각 repo에서 설치되는 Git의 버전은 아래와 같다.

IUS : 2.24.3

WANdisco : 2.8.0

[2-1] IUS Repository를 등록하고 Git 설치하기

아래는 IUS repo를 설치를 위한 페이지이다.

https://ius.io/setup

IUS - Setup

Setup To enable the IUS repository on your system, install the ius-release package. This package contains the IUS repository configuration and public package signing keys. Many IUS packages have dependencies from the EPEL repository, so install the epel-re

ius.io

repo 설치에 필요한 명령어 복사하여, 터미널에 붙여넣거나 수기로 입력한 다음 Enter키를 눌러준다.

yum install https://repo.ius.io/ius-release-el7.rpm https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm

* 한 줄에 입력

설치되는 패키지를 확인 후 y를 입력한 다음 Enter 키를 눌러준다.

IUS repo가 정상적으로 설치(등록)된 것을 확인할 수 있다.

아래의 명령어를 입력하여 설치할 수 있는 Git 목록을 검색한다.

yum search git

'git'이라는 단어가 포함된 패키지 목록이 나열될 것이고, 이 중에서 IUS가 배포하는 Git인 'git2xx.~' 항목을 찾는다.

아래 그림에 의하면 현재 시간 기준으로 git224를 사용할 수 있는 것으로 나타난다.

그냥 git은 기존의 CentOS 기본 repo(base, ... 등)에서 나타나는 것이다.

설치할 수 있는 Git을 찾았다면 아래 명령어로 Git 설치를 시작한다.

yum install git224

git224는 바로 이전 단계에서 확인된 이름을 입력하면 된다.
뒤쪽의 ".x86_64"는 아키텍처 구분자로 입력하지 않아도 된다.

Git이 설치되었다면 아래의 명령어를 입력하여 설치된 Git의 버전을 확인한다.

git --version

만약 설치 도중 아래와 같이 "... conflicts(충돌) ... with XXX"라는 오류가 나타난다면 사용중인 시스템에서 "XXX"라는 패키지와 충돌이 나는 것으로 설치할 수 없는 것이다.

필자는 [1]에서 설치한 Git 1.x 버전으로 인해 충돌이 나는 것이므로 기존 Git을 삭제해버릴 것이다.

만약 다른 패키지가 충돌이 나는 경우 무조건 지워선 안되며, 어떻게 해결하는지는 각 시스템마다 다르기 때문에 이 글에서는 다루지 않을 것이다.

기존에 설치된 Git을 삭제하는 명령어

yum remove git

[2-2] WANdisco Repository를 등록하고 Git 설치하기

WANdisco에서 제공하는 가이드 링크는 아래와 같다.

http://docs.wandisco.com/git/binaries/#_redhat_enterprise_linux

WANdisco GitMS Binaries

If you are updating to a newer version of GitMS, or rolling back to a previous one, then you need to uninstall the current C-Git binaries before installing the correct ones for your new version of GitMS. To do this use the relevant commands below. If you u

docs.wandisco.com

먼저 root 계정으로 전환한다.

sudo su

아래 명령어를 입력하여 WANdisco 저장소 정보를 기록한다.

cat > /etc/yum.repos.d/WANdisco-git.repo << EOF
[WANdisco-git]
name=WANdisco Replicated Git
baseurl=http://opensource.wandisco.com/centos/\$releasever/git/\$basearch
gpgcheck=1
gpgkey=file:///etc/pki/rpm-gpg/RPM-GPG-KEY-WANdisco
EOF

* 위 7개의 줄을 모두 입력
* 가이드의 내용과 이 곳의 baseurl이 다름에 유의할것!
** 가이드는 최신 버전 대신 사본 버전이 있음.

WANdisco의 GPG Key를 등록한다.

* KEY 파일 저장
curl -s http://opensource.wandisco.com/RPM-GPG-KEY-WANdisco > RPM-GPG-KEY-WANdisco

* KEY 파일 설치(등록)
rpm --import RPM-GPG-KEY-WANdisco

* 저장된 KEY 파일 삭제(위에서 등록하였으므로 잔여물 삭제)
rm RPM-GPG-KEY-WANdisco

이제 패키지 매니저로 git의 정보를 보는데, IUS repo와 다르게 WANdisco에서는 Git을 바로 'git'으로 제공한다.

아래 명령어를 입력하여 설치 가능한 버전을 확인한다.

yum info --showduplicates git

수 많은 목록중에 설치가 가능한 원하는 버전을 찾도록 한다.

그 이후에 아래와 같은 명령어를 통해 Git을 설치한다.

yum install git-버전

ex)
yum install git-2.8.0

설치되 패키지와 의존성, 버전을 확인 한 후 y를 입력 후 Enter 키를 누른다.

Git이 설치된 이후 아래이 명령어를 통해 설치된 버전을 다시 확인한다.

git --version

설치 도중 충돌(Error ... conflicts with ...)이 난다면 어느 패키지와 충돌인지 확인 한 후 적절한 대처를 해야한다.

아래 사진은 IUS repo에서 설치한 git과 충돌이 나는 것이므로 과감히 기존 Git을 삭제후 설치로 해결하였지만, 다른 패키지와의 충돌은 각자가 고민해볼 필요가 있다.

Windows(윈도우)에 Git을 설치해보자!

포도빛 — Wed, 23 Dec 2020 14:13:10 +0900

# 부제목

윈도우에 Git 설치하기, 윈도우 Git 설치 방법

이번 시간에는 윈도우에 Git을 설치해보려고 한다.

[1] Git 설치 프로그램 다운로드

아래의 Git 홈페이지를 방문한다.

https://git-scm.com/

Git

git-scm.com

아래 그림처럼 홈페이지가 나타나면 중앙에 배치된 [Downloads]를 클릭하여 다운로드 페이지로 이동한다.

다운로드 페이지에서 보이는 [Windows]를 클릭하여 윈도우 설치 프로그램 다운로드 페이지로 이동한다.

또는 지금 사용중인 시스템이 Windows라면 바로 오른쪽에 위치한 [Download {버전} for Windows]를 클릭해도 된다.

Windows용 Git 다운로드 페이지로 이동되면 아래 사진에서 보라색으로 밑줄 그어진 버전(현재 사용중인 시스템에 맞춰진 버전)이 자동으로 다운로드 된다.

만약, 다른 버전(32비트, 64비트)의 Git이 필요하다면 빨간색 사각형에 표시해둔 링크(청록색)를 클릭하여 다운로드 할 수 있다.

[2] Git 설치하기

[1]에서 다운로드 받은 Git 설치 프로그램 아이콘을 더블클릭하여 실행해준다.

Git의 라이선스를 표시해주는데 GPLv2 라이선스 내용이다. 사용에 동의하면 [Next]를 클릭한다.

Git이 설치될 위치를 지정해준 다음 [Next]를 클릭한다.

설치할 컴포넌트를 선택한 다음 [Next]를 클릭한다.

Additional icons	바로가기 아이콘 만들기
ㄴ On the Desktop	바탕화면에 바로가기 아이콘 만들기
Windows Explorer integration	탐색기(폴더 화면)의 바로가기 메뉴(우클릭 메뉴)에 메뉴 등록하기
ㄴ Git Bash Here	이곳에서 Git Bash 열기
ㄴ Git GUI Here	이곳에서 Git GUI 열기
Git LFS (Large File Support)	Git에서 대용량 파일을 다루어야 하는 경우. 예를들어 포토샵의 psd나 미디어 파일을 다룰때 등.
Associate .git* configuration files with the default text editor	확장자가 git으로 시작하는 파일을 기본 텍스트 편집기(메모장 등)로 연결 프로그램 지정
Associate .sh files to be run with Bash	sh 확장자 파일을 Git Bash로 연결 프로그램 지정
Use a TrueType font in all console windows	콘솔 화면(명령 프롬프트와 같은.)에 트루타입 폰트 사용
Check daily for Git for Windows updates	매일 Windows용 Git 업데이트를 확인

시작 메뉴에 생성될 폴더명을 입력한 후 [Next]를 클릭한다.

만약, 시작 메뉴를 만들지 않을 경우 아래쪽의 [Don't create a Start Menu folder]에 체크하면 된다.

Git에서 사용할 기본 편집기를 선택한 다음 [Next]를 클릭한다.

필자는 Visual Studio Code를 주로 사용하므로 Visual Studio Code를 선택하였다.

Git 저장소를 만들때 최초로 생성되는 브런치의 이름을 정한 다음 [Next]를 클릭한다.

기본 브런치 이름은 master인데, "master"라는 단어가 좋지 않다는 시각이 있어 요즘은 master 대신 main을 사용한다.

이와 관련된 내용은 아래 설치 프로그램 그림에 있는 [Intends(푸른색 링크)]를 클릭하면 볼 수 있다.

필자는 Override the...에 체크 후 main으로 변경하였다.

Let Git decide	Git이 알아서 결정한다. (현재는 master)
Override the default branch name for new repositories	새로운 저장소의 기본 브런치 이름을 오버라이딩한다.

환경변수에 등록할 옵션을 선택한 다음 [Next]를 클릭한다.

필자는 Git from the command ...에 체크하였다.

Use Git from Git Bash Only	환경변수를 변경하지 않는다. - Git 명령어는 Git Bash에서만 사용하도록 한다.
Git from the command line and also from 3rd-party software	환경변수에 Git 명령어를 등록한다. - Git Bash 뿐만이 아니라, 명령 프롬프트, 파워쉘, 다른 프로그램(vscode, android studio 등등)에서도 Git을 사용할 수 있다.
Use Git and optional Unix tool from the Command Prompt	환경변수에 Git 명령어와 다른 Unix 명령어도 등록한다. * 주의할 점은 기본 Windows의 명령어인 find나 sort등이 오버라이딩 되어 버린다.

HTTPS 연결에 사용할 SSL/TLS 라이브러리를 선택한 다음 [Next]를 클릭한다.

보통 일반적인 상황에선 OpenSSL을 사용하면 된다.

그 외에 특수한 환경에 의해 인증서가 발급되는 경우에는 Windows Secure Channel을 사용하여 HTTPS에 연결할 수 있다.

Git이 한 줄의 끝(EOL, End of Line, 줄바꿈)을 표현하는 문자를 어떻게 처리 할지 선택 후 [Next]를 클릭한다.

이것이 중요한 이유는 운영체제마다 줄바꿈 문자가 다르다보니 공동 작업시 줄바꿈 문자로 인해 코드가 엉망이 되어버리는 현상을 해결해주기 위해 Git이 소스를 가져올때(체크아웃)나 기록할때(커밋)마다 줄바꿈 문자를 변환할 수 있게 만들어준다.

본인이 줄바꿈 문자와 코딩 환경에 대해서 잘 모른다면 "Checkout Windows-style, commit Unix-style ..."를 선택하자.

Checkout Windows-style, commit Unix-style line endings	체크아웃시 Unix 스타일(LF)을 Windows 스타일(CRLF)로 변경하고, 커밋할시 Windows 스타일(CRLF)을 Unix 스타일(LF)로 변경한다.
Checkout as-is, commit Unix-style line endings	커밋시에만 Windows 스타일(CRLF)을 Unix 스타일(LF)로 변경한다.
Checkout as-is, commit as-is	원본 소스 그대로 체크아웃 및 커밋한다. (변경 없음)

Git Bash를 에뮬레이팅하기 위한 터미널 프로그램을 선택 후 [Next]를 클릭한다.

당겨오기(pull) 명령어가 수행할 기본 옵션을 선택 후 [Next]를 클릭한다.

이 옵션에 대해서는 Git 명령어를 다룰때 확인해보도록 할 것이다.

Git 인증 헬퍼를 구성할지 선택한 다음 [Next]를 클릭한다.

원격 저장소에 연결할 때 필요한 인증(HTTP(S) 및 SSH 연결후 사용자 로그인)을 구현해준다.

필요한 기타 옵션을 선택한 다음 [Next]를 클릭한다.

사용할 최첨단(?) 옵션이 필요한 경우 선택 선택한 다음 [Next]를 클릭한다.

- 해석하자면 winpty를 사용하지 않고 Git Bash에서 Node나 Python과 같은 네이티브 콘솔 프로그램 사용시 활성화된다고 한다.

- 이것에 대해 아시는 분은 댓글 남겨주세요 ㅠㅠ.

필자는 우선 사용해보기 위해 체크를 했다.

곧이어 설치가 진행된다.

설치가 끝난 모습이다. [Finish]를 클릭하여 끝낼 수 있다.

[Launch Git Bash]에 체크를 하면 Git Bash가 실행된다.

[3] 테스트

Git Bash를 실행한다.

1) 설치가 끝날때 Launch Git Bash에 체크를 했다면 자동으로 Git Bash가 열린다.

2) 시작 메뉴(설치때 만든 경우)에 Git Bash 바로가기 아이콘을 클릭하여 열 수 있다.

3) 바탕화면(설치때 만든 경우)에 Git Bash 바로가기 아이콘을 더블클릭하여 열 수 있다.

4) Git 설치 폴더에 있는 "git-bash.exe"를 더블클릭하여 열 수 있다.

Git Bash 화면에서 아래의 명령어를 입력하여 설치된 Git의 버전을 확인한다.

git --version

Git의 버전이 정상적으로 표시된다면 잘 설치된 것이다.

CentOS 7에 Janus-gateway(WebRTC media server) 설치하기

포도빛 — Sun, 15 Nov 2020 14:29:26 +0900

오늘 포스팅할 내용을 제목처럼 CentOS 7에 Janus-gateway(이하 Janus)를 설치하고 실행해볼 것이다.

* 설치 명령어와 아주 작은 설명만 다룬다.

* Janus의 transport는 RestAPI 방식으로 설치할 것이다. (다른 블로그에서는 WebSocket 방식의 가이드가 많다.)

실제 환경은 윈도우 10 WSL 기반의 CentOS 7(v7.0.1907.3)이다.

순수 CentOS 7 머신에서도, Docker와 Virtual Machine(VMWare, VirtualBox)에서도 설치가 가능한 것을 확인하였다.

Janus 공식 홈페이지는 아래와 같다.

Janus WebRTC Server: About Janus

Janus is a WebRTC Server developed by Meetecho conceived to be a general purpose one. As such, it doesn't provide any functionality per se other than implementing the means to set up a WebRTC media communication with a browser, exchanging JSON messages wit

janus.conf.meetecho.com

Janus는 WebRTC 미디어 서버이면서 자체적으로 제공하는 플러그인이 몇 가지 있고 이를 쉽게 사용할 수 있는 Wrapper 라이브러리를 제공해준다고 한다.

만약에 제공되는 플러그인보다 더 많은 기능을 사용하려면 플러그인을 직접 개발하고 붙여야한다.

이제 바로 설치에 돌입해보자!

< yum 업데이트 설치 >

Docker나 WSL환경에서는 업데이트 설치가 없다고 나오는데 정상이다.

$ yum install update

< epel-release 저장소 설치 >

$ yum install epel-release

< 유틸리티 설치 >

$ yum install \
  unzip \
  wget \
  curl
  
# Docker에서 which 명령어가 없으므로 설치
$ yum install which

< 개발툴 설치 >

$ yum install \
  git \
  gcc \
  gcc-c++ \
  libtool \
  autoconf \
  automake \
  make \
  cmake \
  python3 \
  python3-pip \
  gettext \
  gettext-autopoint \
  texinfo

< Janus의 의존성(디펜던시) 설치 >

doxygen과 graphviz는 Janus의 document(이하 doc)를 함께 빌드할때 사용된다. doc은 공식 홈페이지에서도 확인할 수 있으니 생략해도 된다.

그리고 doc을 빌드해도 doc이 빌드되지 않았다는 메시지가 나오는데 이 부분에 대해선 무슨 문제가 있는지 잘 모르겠다.

$ yum install \
  jansson-devel \
  libconfig-devel \
  openssl-devel \
  sofia-sip-devel \
  opus-devel \
  libogg-devel \
  libcurl-devel \
  glib2-devel \
  zlib-devel \
  pkgconfig \
  gengetopt
  
# document를 활성화 할 경우 아래 패키지도 설치해야한다.
$ yum install \
  doxygen \
  graphviz

< libnice 설치 >

libnice 설치에 필요한 meson과 ninja를 설치해야한다.

정석대로 하려면 export 명령어를 통해 실행파일을 shell에 등록해줘야겠지만 간편하게하기 위해 /usr/bin에 단순 복사하는 것으로 했다.

# meson 설치
$ pip3 install meson
$ ln -s /usr/local/bin/meson /usr/bin/

# ninja 설치

# 경로를 home(root)로 이동하여 작업하기 위해 `cd ~`를 수행한다. 필요한 경우 위치를 바꿔도 좋다.
$ cd ~

$ wget https://github.com/ninja-build/ninja/releases/download/v1.10.1/ninja-linux.zip
$ unzip ninja-linux.zip
$ cp ninja /usr/bin/

# libnice 빌드 및 설치

# 이 부분도 ninja와 마찬가지로 필요한 경우 원하는 작업 디렉토리로 이동해도 된다.
$ cd ~

$ git clone https://gitlab.freedesktop.org/libnice/libnice.git
$ cd libnice
$ meson --prefix=/usr build
$ ninja -C build
$ ninja -C build install

< libsrtp2 설치 >

Janus를 사용하기 위해 libsrtp가 필수인데 패키지 매니저(yum 등)으로 libsrtp를 설치하면 Janus의 요구사항(libsrtp 1.5.x)에 미치지 못하는 버전이 설치된다. 만약에 패키지 매니저로 설치했다면 삭제하자

# 원하는 작업 디렉토리
$ cd ~

$ git clone https://github.com/cisco/libsrtp.git
$ cd libsrtp
$ git checkout v2.3.0
$ ./configure --prefix=/usr --libdir=/usr/lib64 --enable-openssl
$ make shared_library
$ make install

< usrsrtp 설치 >

Data channel에 사용된다.

# 원하는 작업 디렉토리
$ cd ~

$ git clone https://github.com/sctplab/usrsctp
$ cd usrsctp
$ ./bootstrap
$ ./configure --prefix=/usr --libdir=/usr/lib64 --disable-programs --disable-inet --disable-inet6
$ make 
$ make install

< libmicrohttpd 설치 >

libmicrohttpd는 Janus의 RestAPI 서버를 동작하게 하기 위함이다.

아래 게시글을 참고하여 설치하도록 하자.

CentOS 7에 libmicrohttpd 설치하기

기존에 소스코드를 빌드하여 설치한 경우 반드시 제거해야한다. 제거 방법은 아래 명령어를 사용하도록 한다. 만약 소스코드 디렉토리를 삭제한 경우에는 다시 다운로드 받아 저장한 다음, 설

phodobit.kr

< Janus 설치 >

# 원하는 작업 디렉토리
cd ~

$ git clone https://github.com/meetecho/janus-gateway.git
$ cd janus-gateway

# git checkout을 통해 원하는 커밋으로 버전 변경. (필요한 경우에만 입력)
$ git checkout v0.10.7

$ sh autogen.sh

# doc을 설치할 경우 마지막줄에 --enable-docs를 추가. (이전에 doxygen과 graphviz 설치 우선 필요)
# 두번째 줄의 prefix는 janus가 설치될 위치를 지정. /opt는 리눅스에서 기타 응용프로그램이 설치되는 위치로 적합
$ ./configure \
  --prefix=/opt/janus \
  --disable-websockets \
  --disable-rabbitmq \
  --disable-mqtt \
  --enable-data-channels \
  --enable-rest
  
$ make
$ make install
$ make configs

여기까지 했다면 Janus가 정상적으로 설치되었을 것이다.

이제 간단하게 Janus 환경 설정을 하고 서버를 시작해보자.

< Janus 환경 설정 >

Janus 환경 설정 파일은 [Janus설치경로/etc/janus]에 위치한다. 이 위치에 존재하는 파일 중 필요한 것들을 수정해준다.

필자는 아래 내용만 수정하였다.

# Janus 환경 설정 파일이 존재하는 디렉토리로 이동
$ cd /opt/janus/etc/janus

# Janus 기본 설정 파일 편집
$ vi janus.jcfg

admin_secret : 관리자용 API 패스워드
stun_server : stun server host 변경 (stun.l.google.com)
stun_port : stun server port 변경 (19302)

# Janus RestAPI 설정 파일 편집
$ vi janus.transport.http.jcfg

admin_http : 관리 API 사용여부 변경 (true)

< Janus 서버 시작 >

$ /opt/janus/bin/janus

아래는 서버 시작 이후 출력되는 메시지.
============================================================
Janus commit: 04229be3eeceb28dbc57a70a57928aab223895a5
Compiled on:  Sun Nov 15 14:16:13 KST 2020

Logger plugins folder: /opt/janus/lib/janus/loggers
[WARN]  Couldn't access logger plugins folder...
---------------------------------------------------
  Starting Meetecho Janus (WebRTC Server) v0.10.7
---------------------------------------------------

Checking command line arguments...
Debug/log level is 4
Debug/log timestamps are disabled
Debug/log colors are enabled
Adding 'vmnet' to the ICE ignore list...
Using 192.168.0.102 as local IP...
[WARN] Token based authentication disabled
Initializing recorder code
Initializing ICE stuff (Full mode, ICE-TCP candidates disabled, half-trickle, IPv6 support disabled)
STUN server to use: stun.l.google.com:19302
  >> 172.217.211.127:19302 (IPv4)
Testing STUN server: message is of 20 bytes
  >> Our public address is [[자신의 공인 IP]]
TURN REST API backend: (disabled)
Crypto: OpenSSL pre-1.1.0
[WARN] The libsrtp installation does not support AES-GCM profiles
[WARN] No cert/key specified, autogenerating some...
Fingerprint of our certificate: F1:D6:~:8C:14
[WARN] Event handlers support disabled
Plugins folder: /opt/janus/lib/janus/plugins
Joining Janus requests handler thread
Sessions watchdog started
Loading plugin 'libjanus_audiobridge.so'...
JANUS AudioBridge plugin initialized!
Loading plugin 'libjanus_echotest.so'...
JANUS EchoTest plugin initialized!
Loading plugin 'libjanus_nosip.so'...
JANUS NoSIP plugin initialized!
Loading plugin 'libjanus_recordplay.so'...
JANUS Record&Play plugin initialized!
Loading plugin 'libjanus_streaming.so'...
JANUS Streaming plugin initialized!
Loading plugin 'libjanus_textroom.so'...
JANUS TextRoom plugin initialized!
Loading plugin 'libjanus_videocall.so'...
JANUS VideoCall plugin initialized!
Loading plugin 'libjanus_videoroom.so'...
JANUS VideoRoom plugin initialized!
Loading plugin 'libjanus_voicemail.so'...
JANUS VoiceMail plugin initialized!
Transport plugins folder: /opt/janus/lib/janus/transports
Loading transport plugin 'libjanus_http.so'...
HTTP transport timer started
HTTP webserver started (port 8088, /janus path listener)...
[WARN] HTTPS webserver disabled
Admin/monitor HTTP webserver started (port 7088, /admin path listener)...
[WARN] Admin/monitor HTTPS webserver disabled
JANUS REST (HTTP/HTTPS) transport plugin initialized!
Loading transport plugin 'libjanus_pfunix.so'...
[WARN] Unix Sockets server disabled (Janus API)
[WARN] Unix Sockets server disabled (Admin API)
[WARN] No Unix Sockets server started, giving up...
[WARN] The 'janus.transport.pfunix' plugin could not be initialized
============================================================

이렇게 Janus 서버가 실행되었음을 알 수 있다.

중간중간 나타나는 기록에서 본인이 설정한 내용이 올바르게 구성되었는지 확인해보아야 한다.

필자는 STUN 서버, REST(admin)을 활성화하였는데 잘 활성화된 것을 확인 할 수 있었다.

< 테스트 >

테스트 방법은 웹 기반의 Demo(데모)를 띄워보야아한다.

[Janus설치경로/share/janus/demos]에 데모 웹 파일이 존재한다.

(1) 웹서버를 설치하고 데모웹파일을 복사하여 웹서버로 접근하거나,

(2) GUI 환경에서 데모웹파일을 수정하여 웹브라우저로 바로 띄우는 것이다.

두 번째 방법이 간편하니 두 번째 방법으로 테스트를 해보려고 한다.

혹시 모르니 데모 웹 파일을 아래에 첨부하였다.

demos.zip

0.80MB

오디오나 비디오 테스트는 여건히 충분하지 않아(=웹캠이 없으므로) Text Room(채팅방)으로만 테스트를 해볼 것이다.

데모 파일중 [textroomtest.js] 파일을 열고 아래와 같이 수정한다.

/////////// 원본 textroomtest.js:45번줄
var server = null;
if(window.location.protocol === 'http:')
	server = "http://" + window.location.hostname + ":8088/janus";
else
	server = "https://" + window.location.hostname + ":8089/janus";

var janus = null;
var textroom = null;
var opaqueId = "textroomtest-"+Janus.randomString(12);

/////////// 수정후
var server = "http://janus서버ip:8088/janus";
// 예시 : "http://192.168.0.10:8088/janus"

var janus = null;
var textroom = null;
var opaqueId = "textroomtest-"+Janus.randomString(12);

저장한 다음, [textroomtest.html] 파일을 웹브라우저로 연다.

* header와 footer가 나타나지 않는 것은 local 파일을 직접 열었기 때문에 CORS 정책이 위반되어 그런 것으로 정상이다. 웹브라우저의 개발자 도구로 확인이 가능하다.

그 후 나타나는 화면에서 [Start] 버튼을 누르면 Janus 서버로 즉시 연결이 되고 Display name(닉네임) 설정 화면이 나타나면 서버 연결이 정상이라는 의미이다.

* 이때 Janus 서버의 콘솔 메시지를 보면 세션이 연결되었다는 메시지가 나타난다.

닉네임을 설정한 이후에 테스트 메시지를 보내고, 데모를 하나 더 열어 접속하여 서로 대화가 주고받아지는지 확인해보자.

만약에 자신이 웹캠이 있거나, OBS+VirtualCam 소프트웨어의 사용이 가능하다면 다른 데모도 테스트를 해보자.

Echo Test : 자신의 미디어를 자신에게 전송하고 수신.

Video Room : 화상대화방

- 끝 -

OpenJDK 다운로드 및 설치 방법

포도빛 — Sat, 10 Oct 2020 23:15:09 +0900

Windows(윈도우) 환경에 OpenJDK를 설치해볼 것이다.

만약 리눅스나 Mac환경이라면 과감히 뒤로가기를 눌러주자!

오늘(2020년 10월 10일) 기준으로 OpenJDK 15이 최신 버전이지만 필자는 11 버전이 필요로 하기 때문에 11버전을 설치할 것이다.

다른 버전도 설치 방법은 모두 똑같다.

< OpenJDK 다운로드 >

먼저 OpenJDK 홈페이지를 방문한다.

https://openjdk.java.net/

OpenJDK

Download and install the open-source JDK for most popular Linux distributions. Oracle's free, GPL-licensed, production-ready OpenJDK JDK 15 binaries are at jdk.java.net/15; Oracle's commercially-licensed JDK 15 binaries for Linux, macOS, and Windows, bas

openjdk.java.net

좌측의 메뉴중 [Installing]을 클릭한다.

다운로드 받으려는 버전의 사이트에 방문한다.

다운로드 사이트에는 원하는 버전이 명시되어 있지 않고, 별 다른 메뉴가 없으므로 우선 아무 버전을 클릭한다.

만약 바로 위에서 자신이 설치하고자 하는 버전이 있다면 바로 아래 사진에서 [Windows/x64] 우측의 [zip]을 클릭하여 다운로드 받는다. 그 후에 < OpenJDK 설치와 환경 구성 >으로 넘어가준다.

구버전을 받기 위해서는 왼쪽의 메뉴 중 [Archive](아카이브, 구버전들은 아카이브에서 제공)를 클릭한다.

자신에게 필요한 버전을 찾은 다음 압축 파일을 다운로드한다.

< OpenJDK 설치와 환경 구성 >

다운로드 받은 OpenJDK 압축 파일을 열고 자신이 원하는 위치에 압축을 푼다.

필자는 C:\에 압축을 풀 것이다.

- C:\ (시스템 드라이브 루트)는 폴더를 만들 수 있다. 그 폴더 내에서는 어떠한 작업도 관리자 권한을 요구하지 않는다. 아무 사용자나 읽기 및 쓰기(수정, 삭제)가 가능하다.

- C:\Program Files (프로그램 설치 루트)는 읽기는 모든 사용자가 가능하며, 쓰기는 관리자만 가능하다.

시작 버튼을 누른 다음 "환경"을 입력하고

(시작을 누른 다음 입력하는 칸이 없이 그냥 키보드로 입력하면 검색모드로 바뀐다.)

[시스템 환경 변수 편집]을 클릭한다.

만약 관리자 권한이 없는 경우 [계정의 환경 변수 편집]을 클릭한다.

간혹 환경변수 설정 창이 나타나지 않고 시스템 속성 창이 나타나는 경우 아래에 있는 [환경 변수]를 클릭한다.

환경 변수 창이 나타나면 위쪽과 아래쪽이 나뉘는데 바로 다음 설명을 참고하여 자신이 원하는 곳에서 작업할 수 있도록 한다.

위쪽(사용자 변수) : 지금 컴퓨터에 로그인된 사용자만 사용할 수 있는 변수들이다. 사용자 마다 이 내용이 다르므로 이곳을 선택한다면 자신의 사용자 계정에서만 가능하다는 점에 유의하자.

아래쪽(시스템 변수) : 위쪽과 다르게 이곳에서 설정되는 내용은 지금 컴퓨터에 있는 모든 사용자가 공통으로 사용된다. 다른 사용자 계정에서도 사용할 경우엔 이 부분에서 작업하자.

필자는 시스템 변수에서 작업할 것이다.

이제 환경 변수 화면에서 [새로 만들기]를 클릭하고, 나타나는 화면에서 아래와 같이 입력해준다.

변수 이름 : JAVA_HOME

변수 값 : 자신이 다운로드 받고 압축을 푼 OpenJDK의 경로

그리고 확인 버튼을 클릭한다.

그 다음 변수 목록 중 'Path'를 찾아 클릭한 다음 [편집]을 클릭한다.

환경 변수 편집 창이 나타나면 우측의 [새로 만들기]를 클릭하면 중간의 상자에 새로운 입력 상자가 한 줄 생긴다.

이 곳에 아래와 같이 입력해준다.

%JAVA_HOME%\bin

(띄어쓰기 없이) 퍼센트 JAVA_HOME 퍼센트 역슬래시 bin

- 역슬래시는 키보드 중 백스페이스(지우기) 버튼 근처에 있다.
또 키보드에 따라 통화기호로 표시된 경우도 있다. (한글 키보드인 경우 W에 줄이 그어져있다.)

- 물음표를 입력할때 사용하는 슬래시(/)가 아닌 것에 유의!

한글 Windows에서 이렇게 보여야 한다.

입력이 완료되었으면 열었던 창에서 모두 확인 버튼을 클릭하여 저장하면서 닫아준다.

이렇게하면 OpenJDK의 환경 구성이 끝났다.

< 검증 >

OpenJDK가 잘 설치되었는지 검증을 할 차례이다.

시작 버튼을 마우스 오른쪽 버튼으로 클릭하고, [명령 프롬프트] 또는 [PowerShell]을 실행한다.

명령 프롬프트 화면에 나타나면 아래의 명령어를 입력하여 버전이 정상적으로 표시되는지 확인한다.

java -version

이렇게 자신이 설치한 OpenJDK의 버전이 정상적으로 표시된다면 완료!!

깃허브 페이지(GitHub Pages) 만들기

포도빛 — Fri, 2 Oct 2020 13:39:57 +0900

오늘 해보려는 것은 Github를 이용해 정적(Static) 페이지(Page)를 만들어보려고 한다!

공식 가이드는 아래와 같다.

Getting started with GitHub Pages - GitHub Docs

Getting started with GitHub Pages You can set up a basic GitHub Pages site for yourself, your organization, or your project. GitHub Pages is available in public repositories with GitHub Free and GitHub Free for organizations, and in public and private repo

docs.github.com

* Creating a GitHub Pages site

웹을 구성하는 파일(HTML, CSS, JS ...)이 업로드될 저장소(Repository)를 만들어야 한다.

그림과 같이 Github에 로그인 한 후 오른쪽 상단에 위치하고 있는 [+] 기호를 클릭하여 "New repository"를 클릭한다.

저장소 정보를 입력하는 화면에는 아래 사항에 유의하여 작성한다.

Repository name:

- 반드시 <사용자이름>.github.io 또는 <조직이름>.github.io로 명명해야 한다.

- 아래 사진에 보이겠지만 블로그 주인장은 이 블로그의 이름과 맞추기 위해 phodobit을 사용했다가 낭패를 보았다.

- 반드시 <사용자이름>에는 자신의 github 사용자이름을 명확하게 넣자!

- 만약 <사용자이름>.github.com 이라는 저장소와 <사용자이름>.github.io 라는 저장소가 공존하는 경우 오직 <사용자이름.github.io 만 사이트로 배포된다. (github 가이드의 #types-of-github-pages-sites)

Description:

- 선택 사항이므로 자유롭게 기입한다.

Public 또는 Private:

- 당연히 공공연히 공개할 것이므로 Public에 체크한다.

Initialize this repo....:

- 'Add a README file' 공식 가이드에서는 체크표시를 해두라고 하지만, 체크를 하거나 안 하거나 아무 문제 없다.

- 그 외엔 자신의 프로젝트에 맞춰주자.

방금 만든 Github 저장소의 페이지에 진입한 후에 상단에 있는 [Settings]를 클릭해준다.

나타나는 화면에서 스크롤을 거의 아래쪽으로 내리다 보면 [GitHub Pages]라는 항목이 보일 것이다.

기본적으로 [None]으로 선택된 상자를 클릭하고

자신이 보여주고자하는 브랜치(Branch, 분기점)를 선택한 다음

[Save] 버튼을 클릭한다.

그리고 현재 화면이 새로고침되는데, 다시 GitHub Pages 항목을 본다면 아래와 같이

"Your site is published at http(s)://XXX.github.io" 라는 메시지가 보일 것이다.

그리고 알려준 주소로 접속해보면 아래와 같이 README.md의 내용이 표시된다.

이쯤되니 md 파일(마크다운, MarkDown)인데 이렇게 HTML로 그려질 수 있는가에 대한 궁금증이 생기는데 이 것은 나중에 알아보기로 하자.

이제 나름 HTML을 사용해서 페이지를 만들어볼까 한다.

다시 저장소의 [Code]로 돌아가서 README.md를 지우고 새로운 파일을 작성하기 위해 [Add file]을 클릭한다.

파일 이름을 [index.html]로 명명하고 HTML5의 기본 구조를 간략히 작성후 커밋을 한다.

- index.html은 보통 목적지가 html이 아닌 디렉토리(폴더)만 접근하면 나타나는 인덱스 페이지(다시 어느 링크가 있을지 가이드를 해주는 느낌의.)를 의미한다.

그리고 다시 Github site의 URL을 입력하여 접근해보면...!!

얼라리?

404 Page(File) Not Found가 나타나버렸다.

이럴때 여러가지 원인을 파악해야한다.

1. URL에 잘못 기입된 것은 없는지.

2. 최상위 또는 디렉토리 접근시 해당 위치에 index.html 파일이 존재하는지. (이름도 잘 확인해보자)

3. 저장소와 사이트간에 동기화가 아직 안 일어났는지. (GitHub 가이드에서는 커밋/푸쉬 후 최대 20분 가량 걸릴 수 있다고 안내하고 있다.)

4. 기타 등등...

1~2 모두 완벽했다. 시간도 잘 흘러갔지만 여전히 404 오류가 나타나 가이드를 다시 보았더니 Theme를 사용중이어서 그런 것이었다. (가이드의 #Static site generators 항목)

얼른 빠르게 다시 [Code]에서 [Add file] -> [Create new file]을 누른 다음...

파일 이름을 .nojekyll로 정하고, 내용은 비워둔 상태로 커밋한다.

저장소를 확인해보면 2개의 파일이 보일 것이다.

이제 나의 GitHub Sites URL로 접근을 하게 된다면!!

드디어 잘 나온다!!

이렇게 하여 GitHub Pages를 사용하여 정적 웹사이트를 만들어보게 되었다.

2020.09.10 카테고리 수정

포도빛 — Thu, 10 Sep 2020 23:01:34 +0900

카테고리가 수정됐습니다.

추가

FE (HTML & CSS)

변경 전	변경 후
프로그래밍	개발

오늘(2020년 9월 10일) 새로운 포스트(CSS 관련)를 등록하는데 있어 소분류 카테고리 "FE (HTML & CSS)"를 추가하였고,

대분류 카테고리 "프로그래밍" 이름을 "개발"로 변경했습니다.

HTML은 프로그래밍 언어가 아니다와 맞다의 논란이 있을 수 있고 필자는 아직 논란의 중점에 서있거나 어느 한쪽이 맞다고 표현할 단계가 아니라고 생각합니다.

크롬, IE 등 웹브라우저에서 인쇄할때 하이퍼링크(a 태그)에 주소(URL)가 같이 나오는 경우

포도빛 — Thu, 10 Sep 2020 22:42:01 +0900

이 사진과 같이 웹브라우저에서 페이지를 인쇄할 때 하이퍼링크(a 태그)의 주소(URL)가 붙어서 나오는 경우가 있었다.

그저 웹브라우저로 보는 화면은 위와 같은데 인쇄할때만 계속 주소가 붙어서 나오는 것이였다.

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>프린트 테스트</title>
	<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
	<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
	<style type="text/css">
		html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
		body > .container { height: 100%; background-color: #eeeeee; padding: 10px; }
	</style>
</head>
<body>
	<div class="container">
		<nav>
			<ul>
				<li>
					<a href="https://phodobit.kr">
						포도빛 블로그
					</a>
				</li>
				
				<li>
					<a href="https://www.naver.com">
						네이버
					</a>
				</li>
				
				<li>
					<a href="https://www.tistory.com">
						티스토리
					</a>
				</li>
			</ul>
		</nav>
	</div>
</body>
</html>

소스보기를 해도 URL이 표시되도록 한 것이 없는데 말이다.

그런데 알고보니 bootstrap(부트스트랩)이 문제인 것이였다.

* bootstrap 3에서만 발생하고, bootstrap 4에서는 발생하지 않는다.

CSS의 @media print를 사용해 인쇄 화면에서 a태그에 URL을 붙여주는 모습을 볼 수 있었다.

따라서 FE 개발자는 아래 3가지 방법중 하나를 택하여 페이지를 고쳐야 하고,

사이트 방문자라면 아래 4번 방법을 사용하여 일시적으로 해결할 수 있다.

방법은 더 있을 수도 있다.

< 방법1 (개발자가 고치려는 경우) >

근본적인 bootstrap 3을 사용하지 않는다.

어처구니가 없는 소리겠지만 bootstrap 3에서 4로 넘어가보는건 어떨까?

이미 프로젝트의 규모가 커졌다면 이 방법을 사용해서는 안 된다.

< 방법2 (개발자가 고치려는 경우) >

영향을 받는 페이지 또는 모든 common include(공용 포함) css 또는 style 태그에 아래와 같은 코드를 넣어준다.

@media print {
    a:after {
        content: "" !important;
    }
}

인쇄 화면에서 bootstrap 3가 만들어주는 내용물을 없애버리는 것이다.

< 방법3 (개발자가 고치려는 경우) >

bootstrap 3 css 파일에서 해당 코드를 삭제한다.

이 포스트 본문에 캡처한 css 소스코드 기준으로 205~207번 line을 삭제하는 것이다.

만약에 bootstrap 3을 CDN URL로 include 한 경우엔 이 방법을 사용할 수 없다.

만약에 자신은 FE 개발자가 아니고 단순 사이트를 방문한 사용자이면서 이 현상을 사이트 담당자가 바꿔줄 수 없는 상태라면 아래 방법을 시도해보자.

< 방법4 (방문자가 일시적으로 인쇄 화면에서 URL을 없애려는 경우) >

크롬, IE 기준으로 해당 문제가 나타나는 화면에서 키보드의 [F12]키를 누른다.

* 이때 화면은 인쇄화면이 아니라 인쇄를 하기 전에 방문자가 보고 있는 화면이어야 한다.

잠시 기다리면 나타나는 '개발자 도구(Developer Tools)' 화면 속에서 위쪽을 보면 '콘솔(Console)'이 있을텐데 클릭한다.

'콘솔' 화면 아래쪽에 입력하는 칸에 바로 밑의 문장(코드)을 복사하여 붙여넣고 엔터를 누른다.

(function(){ var s = document.createElement("style"); s.innerHTML = "@media print { a:after { content: '' !important; } }"; document.body.appendChild(s); })();

크롬의 개발자 도구 - 콘솔에서 위 코드를 입력 및 실행한 모습

이제 인쇄를 하게 되면 URL이 나타나지 않을 것이다.

참고1. 어떠한 사이트에서는 '개발자 도구'를 차단해서 열리지 않는 경우가 있다.

(결제 화면이나 은행 사이트)

참고2. 어떠한 사이트에서는 style이 위 문장(코드)이랑 관련도가 없게 만들어진 경우도 있고 그럴땐 작동하지 않는다.

(해당 웹 페이지의 속에서 다른 웹 페이지를 또 다시 불러오는 경우 등)

윈도우(Windows)에서 PHP8 (8.0.0 beta2)을 컴파일하고 빌드하는 방법을 알아보자! #php8 베타2 다운로드

포도빛 — Sat, 29 Aug 2020 15:49:46 +0900

윈도우용 php 8 beta2 다운로드만 받으러 오신분께:

이 글에 첨부한 php8은 php 8.0.0 beta2이며 실서버용으로 사용이 불가능하며 테스트용도로만 사용되는 버전입니다.

첨부파일은 글 맨 아래에 있으니 내용은 생략하셔도 되십니다.

먼저 PHP 공식 홈페이지에 있는 PHP 7.x까지는 마이크로소프트(Microsoft)가 PHP의 소스를 직접 빌드하고 나온 사전 빌드된(Prebuilt) 패키지를 PHP 공식 홈페이지에 배포해주었었다. 따라서 윈도우 사용자는 PHP 공식 다운로드 페이지에서 간편하게 내려받고 바로 실행할 수 있는 형태였었다.

PHP 공식 홈페이지에 PHP 8.0.0 베타2가 릴리즈 되었음을 알려주고 있다. 소스코드만 제공된다.

그러나 PHP8 부터는 마이크로소프트의 빌드 지원이 없어지기 때문에 윈도우에서는 앞으로 사전 빌드된 패키지가 지원되지 않기 때문에 이번 글에서는 윈도우에서 PHP8을 직접 빌드하고 사용해보는 시간을 가져보려고 한다.

(예상을 하나 하자면 굳이 직접 빌드할 필요없이 흔히 번들로 제공해주는 수많은 APM 패키지들(비트나미=bitnami, XAMPP 등)에서 자체 빌드하여 제공을 해주겠지만...)

먼저 PHP를 빌드하는 step-by-step(한단계 한단계 따라하기) 방법을 알아보기 위해 PHP 공식 홈페이지의 wiki를 참고하자.

PHP: internals:windows:stepbystepbuild_sdk_2

Build your own PHP on Windows This tutorial concerns the new PHP SDK and PHP 7.2 and later, while the described PHP SDK is compatible with at least PHP 7.0. To build PHP prior to 7.0, or if you experience issues building PHP lower than 7.2 with the new PHP

wiki.php.net

이 아래부터는 바로 위 페이지의 가이드를 직접 하나씩 따라해보며 진행할 것이다.

# 요구사항(필요한 것들)

윈도우에서 PHP를 빌드하려면 3가지 사항이 요구된다.

일부 파일은 블로그 본문에 사용했던 파일을 직접 올려두지만 가능하면 공식 홈페이지에서 직접 다운로드 받자!

1. 잘 구성된 환경(컴파일러, PHP SDK)

(1) 윈도우용 PHP 소스 컴파일에 사용되는 컴파일러는 마이크로소프트의 Visual C++ 컴파일러만 지원한다고 한다. PHP8을 git의 'master' branch로 판단하였을때 최소한 Visual Studio 2019 사용을 권장한다. 개인/비상업/비영리는 VS Community 에디션 라이선스를 사용할 수 있으므로 설치해도 무방하다. VS 공식 홈페이지( https://visualstudio.microsoft.com/ko )

vs_community.exe

1.33MB

(2) PHP SDK는 이 링크(https://github.com/Microsoft/php-sdk-binary-tools)에 접속 후 나타나는 화면의 중앙에서 상단 또는 우측에 Release가 있을 것이다. 이 Release를 클릭한 후 최신 버전을 다운로드 받은 다음 적절한 디렉토리(폴더)에 압축을 풀자.

2. PHP에서 사용되는 미리 빌드된(prebuilt) 라이브러리, 서드파티(3rd party = 외부) 라이브러리 / 종속 라이브러리

만약 우리가 리눅스를 사용하고 있다면 패키지 관리자(apt, yum, dnf 등)를 사용하여 쉽게 운영체제에 맞는 사전 빌드된 라이브러리를 설치할 수 있지만 윈도우이기 때문에 사전 빌드된 라이브러리를 찾기 어려울 것이다. 다행히도 PHP에서 사용되는 라이브러리들은 모두 PHP 공식 페이지에서 제공을 해주고 있다.

이곳에서 자신이 사용하는 버전에 맞게 접근하여 필요한 라이브러리를 다운로드 받아야 한다. 우리는 Visual Studio 2019(16.x)이니 먼저 vs16 디렉토리를 접근한 다음, 빌드를 하고 싶은 아키텍처(필자는 64비트)인 x64 디렉토리에서 모든 라이브러리를 다운로드 받자.

다운로드 받기전 알아야 할 사실: 아래에서 소개할 PHP 빌드 환경 설정 중에 라이브러리를 자동으로 다운로드 받는 방법도 있다.

링크: https://windows.php.net/downloads/php-sdk/deps/

3. PHP 소스

우리는 PHP 8.0.0 beta2를 빌드할 것이므로 PHP 8.0.0 beta2 소스코드를 다운로드 받자.

공식 다운로드 페이지 : https://downloads.php.net/~pollita/

이곳에서 tar.bz, tar.gz, tar.xz중 하나만 다운로드 받고 적절한 위치에 압축을 풀자. 필자는 php-8.0.0beta2.tar.gz을 선택하였다.

asc 파일은 다운로드 받은 파일이 올바르게 다운로드 되었는지(다운로드 중에 깨지지 않았는지, 해커가 변조하지 않았는지) 확인하기 위해 사용되는 체크섬 파일이다. 이 글에서는 asc 파일로 올바르게 받았는지 검증하는 방법은 다루지 않는다.

# 빌드 디렉토리 구성 갖추기

이제 빌드 환경을 갖춰볼 시간이 됐다. (PHP 공식 가이드의 Setup the build directory 파트)

여러분들이 위에서 다운로드 받은 SDK, 라이브러리, 소스코드를 어느 곳에 압축을 풀었는지 알 수는 없지만 필자의 경우 다음 그림과 같은 구조로 압축을 풀었다.

이제 공식 가이드처럼 따라해보자

1. PHP SDK 설정

(1) PHP SDK 디렉토리(=폴더)를 만든다. (예를들어 C:\php\phpsdk2)

(2) 위에서 만든 디렉토리에 'PHP SDK 바이너리 툴즈'의 압축을 푼다. (이 디렉토리에는 bin, lib, msys2라는 3개의 디렉토리가 존재해야 한다)

2. 명령 프롬프트(cmd)를 열고 PHP SDK 디렉토리에 접근한다.

명령어 [cd C:\php\phpsdk2]

3. starter 스크립트를 실행(invoke)한다.

주의할 것은 앞으로 나오는 모든 명령어는 이 starter 스크립트가 실행된 명령 프롬프트 안에서 입력되어야 한다.

필자는 Visual Studio 2019 64비트를 사용하므로 'phpsdk-vs16-x64.bat'을 입력할 것이다.

이렇게 나올 것이다.

4. phpsdk_buildtree 배치 스크립트를 실행하여 원하는 디렉토리 구조를 만든다.

필자는 php8dev 디렉토리 구조로 만들었다.

명령어 [phpsdk_buildtree php8dev]

5. phpsdk_buildtree 스크립트는 [2]에서 실행된 버전의 디렉토리를 새로 만들게 된다

잘 만들어졌는지 확인해보자.

6. PHP 소스 코드를 [5]에서 만들어진 디렉토리에 압축을 푼다. (이미 압축을 풀었으면 복사 or 이동하자)

PHPSDK디렉토리 ->

[4]에서 만든 이름 (= php8dev) ->

[3]에서 선택한 Visual Studio(C++) 버전 (= vs16) ->

[3]에서 선택한 아키텍쳐 (= x64)

이곳에 php 소스 디렉토리가 남겨지게끔 한다.

이런 구조로 남아야 한다.

7. [6]에서의 소스 디렉토리가 존재하는 디렉토리에 deps라는 디렉토리가 존재하는 것이 확인되는데, 아래 2가지중 하나를 선택해서 수행한다.

PHP 공식 가이드에서의 첫번째 방법이 이곳에서 두번째 방법이다.

혹시나 이 글을 보고 라이브러리를 이미 수동으로 받았을 가능성이 있어서 순서를 바꾸었다.

첫번째 방법: 라이브러리를 수동으로 다운로드 받아 설정하기

(1) 수동으로 모든 라이브러리를 모두 다운로드 받는다. (이미 위쪽에서 했을 것이다.)

(2) 다운로드 받은 라이브러리의 압축을 모두 해제한다. 반드시 [6]에서 보이는 deps 디렉토리에 압축을 풀어주자

필자의 빌드 환경 수정의 디렉토리 구조처럼 [작업디렉토리\deps\include]와 [작업디렉토리\deps\lib]같이 있도록말이다.

만약에 아래와 같은 구조면 잘못된 것이니 한 디렉토리에 뭉쳐주자.

[작업경로\deps\라이브러리1\include], [작업디렉토리\deps\라이브러리1\lib],

[작업경로\deps\라이브러리2\include], [작업디렉토리\deps\라이브러리2\lib],

...

두번째 방법: 라이브러리를 자동으로 다운로드 받아 설정하기

명령 프롬프트에서 php 소스 디렉토리로 이동한 다음, [phpsdk_deps -u] 명령어를 입력한다.

입력한 전체 명령어:

$ cd C:\php\phpsdk2\php8dev\vs16\x64\php8source

$ phpsdk_deps -u

명령어를 입력하면 이 화면과 같이 자동으로 라이브러리를 다운로드 받고 압축을 풀어준다.

여기까지 했다면 빌드 디렉토리 구성 갖추기(Setup the build directory)는 끝이났다.

# 컴파일 및 빌드

알아야 할 사실: 현재(2020년 8월 29일) PHP SDK Starter에서는 크로스 빌드를 지원하지 않는다고 한다. (한번에 x64와 x86의 빌드라던가...)

1. starter 스크립트를 실행한다. (빌드 디렉토리 구성 갗추기의 3과 같다.)

이미 실행중인 상태면 당연히 또 할 필요는 없고 반드시 starter 스크립트에서 진행되어야 하기 때문에 가이드에 있는 것 같다.

명령어:

> cd C:\php\phpsdk2

> phpsdk-vs16-x64.bat

2. php 소스코드 디렉토리로 이동한다.

명령어:

$ cd C:\php\phpsdk2\php8dev\vs16\x64\php8source

3. buildconf를 실행한다.

$ buildconf

실행하니 configure.js를 재빌드하고 configure --help를 실행할 수 있다고 알려준다.

4. 컴파일 플래그를 알기 위해서는 다음 명령어를 입력하여 알아볼 수 있다.

$ configure --help

플래그들이 많다.

5. 자신의 configure 명령어를 만든다.

[4]에서 확인한 플래그를 설정하면 해당 플래그에 맞는 내용으로 빌드를 할 수 있다.

$ configure --disable-all --enable-cli (기타등등)

(당연히 기타등등 그대로 치면 안되고 꼭 [4]에서 확인한 플래그를 붙여나가면서 해보자.

필자는 아래와 같은 명령어를 사용했다.

무슨 내용인지는 [4]에서 나타나는 내용들로 확인해보자.

$ configure --enable-snapshot-build --enable-debug-pack --disable-zts

무수히 많은 내용이 나오고 최종적으로는 이런 화면이 될 것이다. 중간에 자신이 활성화한 플래그들 정보도 나오므로 결과를 확인해보도록 하자.

6. 이제 빌드를 하기 위해 아래 명령어를 입력한다.

$ nmake

시간이 다소 소요되므로 기다려주자.

열심히 빌드를 하고 있다.

빌드가 끝나면 커서가 깜박거릴 것이다.

7. 만약에 빌드된 PHP와 확장(extension: 익스텐션)을 압축하려면 [6]이 완료된 이후에 아래 명령어를 입력한다.

$ nmake snap

이 명령어 또한 시간이 다소 소요된다.

필자는 압축을 하는 것을 추천한다. 왜냐하면 빌드 이후 디렉토리에는 컴파일 과정에서 있던 목적프로그램(.obj 파일)들은 단독적으로 실행할 수도 없고, 그 파일의 양도 많기 때문에 실행에 필요한(실행 가능 파일=EXE과 외부 라이브러리=DLL) 파일만 따로 묶어주므로 다른 곳으로의 배포에 용이하다.

8. 컴파일 및 빌드된 결과는 아래 위치에 저장된다.

32비트의 경우 (x86)

여기까지 작업한 PHP 소스코드 디렉토리 -> Release 또는 ReleaseTS

64비트의 경우 (x64)

여기까지 작업한 PHP 소스코드 디렉토리 -> x64 -> Release 또는 ReleaseTS

만약 Non-thread-safe하게 컴파일 및 빌드했다면 (configure의 플래그에 --disable-zts를 넣은 경우) Release 디렉토리이고,

Thread-safe하게 컴파일 및 빌드했다면 ReleaseTS 디렉토리이다.

그리고 [7]에서 압축한 결과물도 같은 디렉토리에 zip 파일 형식으로 저장된다.

이렇게하면 PHP 8.0.0 베타2의 컴파일 및 빌드가 완성되고 PHP 8.0.0 베타2를 바로 사용해볼 수 있다.

빌드된 파일들과 CUI 환경으로 phpinfo()를 출력한 결과. (PHP 8.0.0 beta2 NTS)

Apache 2.4와 php 8.0.0 beta2를 연동하여 phpinfo()를 출력한 결과 (PHP 8.0.0 beta2)

만약 소스에서 무언가를 수정했거나 configure를 다시 하여 재컴파일(재빌드)를 하고 싶으면 아래 명령어를 순서대로 입력하면 된다.

기존 컴파일 및 빌드된 파일 정리

$ nmake clean

buildconf 강제 재설정

$ buildconf --force

플래그 재설정

$ configure <플래그>

컴파일 및 빌드

$ nmake

여기까지 하면서 필자가 빌드한 PHP 8.0.0 베타2 바이너리를 아래에 첨부하였다.

빌드 환경은 이 글에 나타난대로 VS16(2019) x64임에 유의하고, Release.zip는 NTS(non-thread-safe), ReleaseTS.zip은 TS(thread-safe)이다.

그리고 PHP 공식 홈페이지에서는 PHP 8.0.0 베타2를 production 환경(실제 서비스 환경)에서 사용하면 안되고 반드시 테스트용으로만 사용을 권장하고 있다.

경고:

누군가가 빌드한 프로그램을 사용할때는 반드시 직접 바이러스(악성코드)를 검사한 후에,

그 사람을 신뢰할 수 있는 경우에만 사용할 것.

또 가능하면 샌드박스 환경 또는 가상머신 환경에서의 실행을 추천함.

Non-Thread-Safe (IIS 또는 Nginx에 적합. Apache에서는 cgi로만 가능)

Thread-Safe (Apache 2.4.x용 모듈이 있으며 모듈명은 'php_module'임에 유의)

코드이그나이터4(CodeIgniter4)에서 model의 escape가 이상하게 동작한다고!?

포도빛 — Sun, 23 Aug 2020 14:45:41 +0900

The wrong escape in CodeIgniter4's model!?

최근(?)에 CodeIgniter4가 출시됨에 따라 새로운 웹 프로젝트는 CodeIgniter4로 개발하게 되었다.

당연하듯이 CodeIgniter3의 문법이 거의 동일하게 작동하는줄 알고 열심히 모델을 구현하는 도중 이상한 문제에 도달했었다.

문제의 코드:

/** @var TestModel $model */
$model = model('TestModel');
try {
	$model->set('name', 'phodobit')
		->set('point', 0)
		->set('update_date', 'CURRENT_TIMESTAMP()', FALSE)
		->update();
} catch(\Exception $ex) {

}

이 코드를 실행해보면 Database Syntax Error가 발생하게 된다.

모델을 잘못 짠건가..?라는 생각에 모델을 다시 보았는데 Syntax Error가 발생할 만한 코드는 존재하지 않았다.

흠..? CI3의 코드랑 비교를 해보자

// 코드이그나이터3
$builder = $this->db
	->set('name', 'phodobit')
	->set('point', 0)
	->set('update_date', 'CURRENT_TIMESTAMP()', FALSE)
    ->update('test');

아니 이건 왜 잘되는거야 ㅠㅠ...

일단 Syntax Error이 나타나니 마지막으로 시도한 SQL 구문을 불러서 보았다.

/* 코드이그나이터4 */
UPDATE `test` SET name = phodobit, point = 0, update_date = CURRENT_TIMESTAMP()

/* 코드이그나이터3 */
UPDATE `test` SET `name` = 'phodobit', `point` = 0, update_date = CURRENT_TIMESTAMP()

뭐지 이건!? 왜 CI4에서 key(column)와 value에 escape가 되지 않은거지;;

혹시 몰라서 CI4 코드에서 set() 메소드(함수)에 있는 escape 파라미터의 값을 TRUE로 바꿔보았다.

뭐가 문제니.......?

이번엔 escape가 동작을 하긴 했는데 원치 않는 구간도 escape가 되어버렸다.

혹시 몰라 set() 구문을 $model->set('update_date', 'CURRENT_TIMESTAMP()', FALSE)->set()...->update(); 로 해보았더니 이번엔 모든 key와 value가 escape=TRUE를 한 것과 동일한 결과가 나타났다.

"아 혹시 이거 버그인가?"

라는 생각으로 바로 코드이그나이터4 github issue에 글을 남겨보았다.

Bug: A wrong escape on BaseBuilder::set() · Issue #3127 · codeigniter4/CodeIgniter4

Describe the bug I guess it is a bug that the function named BaseBuilder::set() building wrong escape character CodeIgniter 4 version 4.0.3 on master branch. Affected module(s) i don't know Exp...

github.com

(영어를 잘 못해서 끔찍한 의사소통이 이루어진다)

issue에 올렸던 예시에서는 set()을 이 글처럼 하되, [VIEW_COUNT + 1]라는 예시를 들었었다.

그러나 돌아온 답변은 "버그가 아니다"라는 답과 +1 처리는 increment()를 사용하라는 답변이었다. (이걸 원한게 아닌데 ㅠㅠ...)

"도대체 왜 안되는건가?"

CI4에서 사용하는 Model의 코드를 보면 set()을 호출할때마다 Model 객체 멤버변수에 escape를 할지 말지 결정하고 SQL을 조합할때 결국에 하나뿐인 escape 멤버변수만 바라보기 때문에 전체가 escape되거나 말거나였다.

// 코드이그나이터4 Model의 set()
public function set($key, ?string $value = '', bool $escape = null)
{
  $data = is_array($key)
    ? $key
    : [$key => $value];

  $this->tempData['escape'] = $escape; // 여기에 하필 저장을 해버리다니 ㅠㅠ..
  $this->tempData['data']   = array_merge($this->tempData['data'] ?? [], $data);

  return $this;
}

"어떻게 해결 할 수 있는가?"

이런 복합적인 데이터 처리를 할때는 Model에서 builder를 가져온 다음에 작업해야만 한다.

그러나 주의할 점은 Controller 등 외부에서 Model의 builder를 가져올 수는 없다.

왜냐하면 현재 CodeIgniter4(최신 4.0.3)에서 Model의 멤버객체인 $builder를 가져오는 메소드는 protected로 선언된 builder()메소드이므로 외부에서 $model->builder()를 호출하는 경우 __call() 메소드에서 $this(모델 객체)를 리턴해버리기 때문이다.

// 컨트롤러에서 builder와 model의 비교한 경우 같다고 나타난다.
$model = model('TestModel');
var_dump($model === $model->builder());
// 실행결과: bool(true)

결국엔 아래와 같이 모델에서 builder를 가져온 후 처리하면 되는 것이다.

// 반드시 *Model*에서 코딩되어야 한다.
public function test() {
	try {
		$this->builder() // builder를 가져와서 하는 것이 매우 중요!
			->set('name', 'phodobit')
			->set('point', 0)
			->set('update_date', 'CURRENT_TIMESTAMP()', FALSE)
			->update();
	} catch(\Exception $ex) {
	}
  
	return $this->getLastQuery();
}
// 실행결과:
// UPDATE `users` SET `name` = 'phodobit', `point` = '0', update_date = CURRENT_TIMESTAMP()

드디어 확인한 나의 구글 코드잼(Google Code jam) 2020 참여 결과 (구글 코드잼 2020 참가 후기)

포도빛 — Sat, 22 Aug 2020 23:25:38 +0900

일단은 처참쓰(?)

최종적으로 예선전을 통과했다는 인증서 (...?)

나의 경쟁 프로필에서 확인한 정보를 보니 너무 처참하다...

알고리즘 공부를 더 많이 해야하겠다.

2라운드 간적은 없지만...

코드잼에서는 내가 제출한 소스코드가 올바른 답을 출력하는지 대회가 끝날때까지 비밀로 하는 점수가 있어서(Hidden Set) 답안을 제출하면 맞거나 틀리거나 바로 점수를 준다.

(올해에 처음 참여해본 것이라 잘 몰랐는데 당연히 그대로 점수를 받는거고 남들에게만 비공개인줄 알았더니... 아니였다.)

중간중간마다 답을 제출하고 스코어보드를 찍었다.

덕분에 몇 문제 풀고나니 예선 중간에 375위를 찍고 점차 밀려나기도 했었다.

그래도 이때 너무 기뻤다. 이제 사실을 알았으니 내년엔 안 기쁘겠지.. (모르는게 약)

Windows에서 PHP 7.4.x 실행 오류 해결하기 "PHP Warning: 'vcruntime140.dll' 14.0 is not compatible with this PHP build linked with 14.16 in Unknown on line 0" 그리고 "컴퓨터에 VCRUNTIME140.dll이(가) 없어 프로그램을 시작할 수..

포도빛 — Sat, 22 Aug 2020 11:53:21 +0900

PHP Windows 빌드 다운로드 홈페이지

Windows에서 PHP 7.4.x를 설치하고 실행한다면 가장 처음에 이런 오류 메시지가 나타난다.

==============================================

컴퓨터에 VCRUNTIME140.dll이(가) 없어 프로그램을 시작할 수 없습니다.
프로그램을 다시 설치하여 이 문제를 해결하십시오.

==============================================

이 문제는 당연하게도 맨 위 홈페이지 캡처에 나타나있듯이 PHP 7.4.x가 Visual C++ 15 (Visual Studio 2017)로 빌드되었기 때문에 실행하기 위해 필요한 환경(런타임)을 갖지 못해 실행할 수 없다는 메시지이다.

이 오류 메시지만 검색하여 찾아가는 상당한 수의 블로그를 보면 중간에 나와있는 DLL 파일만 다운로드 받아 시스템 폴더에 집어넣으라는 방법이 포스팅되어 있는데 이 방법은 사실 프로그램을 실행하는데 있어서는 상관이 없지만 잘못된 설치 방법이다.

어차피 이렇게 DLL 파일을 수동으로 시스템 폴더에 넣어도 또 다른 의존성 파일(DLL)이 없다고 오류 메시지가 나타날 확률이 높다.

정확하게 이 문제를 해결하려면 VCRUNTIME140.DLL이 어떤 Visual C++ 버전에 포함이 되는지 알아보아야하는데 필자는 단순히 검색하여 이 파일이 Visual C++ 2015인줄 알고 Microsoft 공식 홈페이지에서 Visual C++ 2015 런타임 패키지를 설치하게 되었다.

그런데 다행히도 이 문제는 더 이상 나타나지 않았지만 다른 문제가 생긴 것이다.

============================

PHP Warning: 'vcruntime140.dll' 14.0 is not compatible with this PHP build linked with 14.16 in Unknown on line 0

============================

오우... 내가 설치한 파일이 호환되지 않는다고 하는 것이였다.

그래서 다시 잘 찾아보니 해답은 바로 맨 위 사진의 PHP 홈페이지에 있던 것이였다.

"최신 버전의 PHP는 Visual C++ 15 또는 Visual Studio 16으로 빌드된다." 고로, "Visual Studio 2015-2019의 Visual C++ 재배포 가능 패키지의 설치가 요구된다."

홈페이지에서 안내해주는 링크 덕분에 "Visual Studio 2015-2019의 Visual C++ 재배포 가능 패키지"를 설치하여 문제를 해결할 수 있었다.

참고로 재배포 가능 패키지는 본인의 운영체제(Windows)의 아키텍처(32비트 또는 64비트)에 따라 설치하는게 아니라 실행하려는 프로그램이 어떤 아키텍처를 대상으로 빌드되었는지에 따라 설치해야하는 것이다.

그리고 32비트는 i386, i486, i586, x86 으로 표현하고, 64비트는 amd64, ia64, x64 로 표현된다.

필자는 64비트 PHP를 사용할 예정이므로 64비트 패키지를 설치했다.

참고 링크:

Windows용 PHP 다운로드 사이트

https://windows.php.net/download/

VS2015-2019의 VC++ 재배포 가능 패키지

32비트 다운로드 링크 https://aka.ms/vs/16/release/VC_redist.x86.exe

64비트 다운로드 링크 https://aka.ms/vs/16/release/VC_redist.x64.exe

삼성 시큐리티 테크 포럼 2020 (Samsung Security Tech Forum 2020, SSTF 2020) 에 참가하게 됐다!

포도빛 — Tue, 18 Aug 2020 20:09:25 +0900

SSTF 소개. "해커놀이터에 오신걸 환영합니다!!"

오늘은 삼성에서 주최한 SSTF 2020 (<초보자의> 해킹 실력 자랑하기)에 학교 선배와 함께 2인으로 JSon이라는 팀을 결성하여 참가하게 됐습니다~!

2020년 8월 18일 오전 10시부터 오후 4시까지 6시간에 걸쳐 진행되는 대회 일정!

문제의 종류로는 pwn, crypto, reversing, forensic이고 해킹 대상 플랫폼은 android app, web, linux binary 등이 있었어요!

실시간으로 고공행진하는 똑똑한 팀들!! The Duck(더덕..?)팀이 가장 높은 점수를 받았네요.

예전부터 프로그램의 분석과 부수기(?)를 좋아했던 저로서는 도저히 이러한 팀들만큼 따라갈 실력이 되지 않더라구요.

그렇지만 이러한 대회를 참가하고 문제를 풀어보니 더욱 더 해결(해킹)하고 싶다는 욕구가 넘쳐난다랄까요? 앞으로는 이런 쪽으로도 공부를 해보아야 겠어요.

어떻게 공부해야할지는 모르겠지만, 과거에 프로그래밍 카페에서 인지도가 있으셨던 분들(현재는 모두 좋은곳을 가셨더라구요..)이랑 1~3년 정도 수다도 떨고 했었는데 이분들의 특징은 모두 저랑 같은 프로그램의 분석과 부수기시더라구요! 저는 단지 그분들보다는 덜 부순거죠!(?). 그래서 앞으로는 더 부숴볼까 합니다!

457점을 받고 31위를 차지한 JSon!!

Scoreboard(점수판)에 따르면 마지막 Rank(순위)가 1130위로 나타나있던데 총 1130개의 팀 중에서 453개의 팀은 참여를 하지 못한 것으로 보이고, 남은 677개의 팀 중 낮은 점수로 31위를 차지하게 되었어요! (순위는 높게 나오더라구요. 점수는 절대로 높은게 아니에요)

결론적으로 멘탈을 탈탈 털리고 높은 점수를 획득하지 못해서 분하지만 다음 SSTF 2021(나와주어야 하지만..)에서는 더 높은 점수를 받고 말겠어요!

그나저나 오늘 문제 풀이를 누군가 올려주시겠지?!?!?!?!?

[VB6] VB6으로 컴파일 된 프로그램의 End 함수 무력화 프로그램 소스 코드

포도빛 — Thu, 6 Jun 2013 23:50:12 +0900

vbaEnd.zip

이 프로그램은 타겟이 되는 VB6 프로그램의 End 함수를 무력화합니다.

예를들어

Private sub command1_click()

end

end sub

위와 같이 코딩된 프로그램에 이 프로그램을 적용하면 command1을 아무리 클릭해도 종료되지 않습니다.

재미있는건

If ver <> newver then

msgbox "최신 버전 다운받으세요"

end

End if

' ... 정상작동

위와 같이 코딩된 프로그램은 end가 무력화당해서 정상작동으로 넘어갑니다.

카이로소프트 DAT 조합 도구

포도빛 — Wed, 11 Apr 2012 15:54:39 +0900

카이로소프트 DAT 조합 도구 입니다.

DAT 분해 도구와 반대입니다.

KairoDATimport.zip

사용 방법:

1. DAT으로 만들어질 파일이 들어있는 폴더 경로 입력 (폴더까지만)

2. [파일 목록 표시] 버튼 클릭

3. 파일 목록이 제대로 표시되었는지 확인

4. [DAT 조합] 버튼 클릭

5. (1)에서 입력한 폴더 경로에 _LoveMomory.dat이 생성됩니다.

http://cafe.naver.com/hanapps/17957

핵심 파일 암호: lovem0ry

카이로소프트 DAT 분해 도구 b2

포도빛 — Sun, 8 Apr 2012 20:45:40 +0900

카이로소프트 DAT 분해 도구 b2

복호화된 DAT에 한해서만 가능합니다.

사용하기 전 백신으로 바이러스 검사를 꼭 해주세요.

복호화된 DAT 두 개 넣었습니다.

KairoDAT.zip

바이러스 검사 결과:

https://www.virustotal.com/file/c3fd0193ba581bd8855d4b8dd3b429f1e57bf285037e0cbe62791104ab2bbf86/analysis/1334110206/

개선된 점:

- 파일 이름에 폴더가 포함되어있을 때 폴더를 생성할 수 있음

- 분해할 시 폴더를 선택할 수 있음.

사용 방법:

1. 실행

2. [파일열기] 클릭

3. 복호화된 DAT 파일 경로 입력

4. 확인

5. 파일 리스트 확인 후 [파일분해] 클릭

6. 분해된 파일이 저장될 폴더를 선택 후 확인

http://cafe.naver.com/hanapps/17824

카이로소프트 DAT 복호화/암호화 도구

포도빛 — Sun, 8 Apr 2012 20:10:21 +0900

카이로소프트 모험던전마을 DAT 복호화/암호화 도구

모험던전마을 기준으로 작성 됨

JRE 1.7(자바 런타임 환경) 권장

kairo_dat.jar

사용방법 (암호화, 복호화 공통):

java -jar "kairo_dat.jar" "DAT파일"

http://cafe.naver.com/hanapps/17821

다른 게임용:

패독그랑프리GP :

http://cafe.naver.com/hanapps/17949

명문포켓학원2 (JPN) :

kairo_dat_a.jar

어패럴 양품점 (JPN) :

kairo_dat_b.jar

별이 된 카이로군 (JPN) :

kairo_dat_c.jar

[윈도우 7] 윈도우 업데이트 없이(하지 않고) 시스템 종료 하기

포도빛 — Thu, 1 Mar 2012 23:02:40 +0900

윈도우 7 에서는 멍청하게도 윈도우 업데이트가 설치되고 나면
시작메뉴의 시스템 종료가 무조건 "업데이트 설치 + 시스템 종"료 넘어가게 됩니다.

나중에 설치하고 시스템을 종료하는 방법은 아래와 같습니다.

1. 바탕화면을 빈 공간을 클릭합니다.
2. 키보드의 [ALT]키를 누른채 [F4]키를 누릅니다.

그럼 위와 같은 윈도우 종료 창이 나오는데..

메뉴 중에 "시스템 종료"라고만 되어 있는 것이 있습니다.
이것으로 선택한 뒤 확인하시면 시스템 종료가 됩니다.

// 물론 다른 방법도 있겠지만 수 많은 방법 중 한가지를 소개해드렸습니다.

지구별 현재 시간 플래시 (11.10.02 수정)

포도빛 — Sat, 24 Sep 2011 21:17:28 +0900

지구별에서의 낮: 1시, 5시, 9시
저녁: 2시, 6시, 10시
밤: 3시, 7시, 11시
새벽: 4시, 8시, 12시

HTML로 적용하는 방법:
<object type="application/x-shockwave-flash" data="https://t1.daumcdn.net/cfile/tistory/187C93334E88084E01" width="400" height="300">
<param name="movie" value="https://t1.daumcdn.net/cfile/tistory/187C93334E88084E01">
<param name="quality" value="high">
<embed src="https://t1.daumcdn.net/cfile/tistory/187C93334E88084E01" quality="high" width="400" height="300"></embed>
</object>

11.10.02 수정된 내용:
- 만든이가 낮에만 표시되는 문제.