닉군의 좌충우돌 창업기 [개인사업자] [1인 창업]

Just SVG

창업닉군 — Tue, 19 Sep 2023 18:32:44 +0900

포토샵을 쓰려고 보니, 동작을 안해서(결제가 안됐나?), 이미지 에디터를 찾아보니, 설치할 필요도 없는 웹 에디터가 있어 소개해 드립니다. 한 번 쓰려고 설치하지 않아도 되니, 하드디스크가 지저분해 지지 않고, 편리하네요.

Just SVG

https://j-svg.com

처음 접속하면, Welcome 창이 뜨는데, 그냥 새작업을 선택해줍니다.

풀다운 메뉴에 튜토리얼 보며 사용방법 익힌 뒤 원하시는 그림을 마구 마구 그리시면됩니다.

기능을 써보니, Path를 이용한 드로잉 부터, 마스크, 이펙트, 그라디언트등의 기능이 있어 간단한 이미지 그리는데 아주 편리하네요.

공공데이터포털을 이용한 PHP 주식시세

창업닉군 — Sat, 7 Jan 2023 22:42:14 +0900

공공데이터 포털에서는 금융감독원에서 제공하는 주식시세의 OPEN API를 이용할 수 있습니다. 이 OPEN API를 이용해 시세를 정보를 얻어오는 샘플 코드를 만들어 보려고 합니다.

공공 데이터 포털에 접속 후 금융위원회에서 제공하는 주식시세 정보 aip 활용신청을 합니다.

그럼 아래와 같이 활용신청이 나고 사용가능한 상태가 됩니다. 페이지 내용에 들어 가면 간단히 api를 활용할 수 있는 상태가 됩니다.

REST API 이므로 아래와 같이 간단한 코드로 사용이 가능합니다. 주의할점은 http_build_query 가 자동으로 urlEncoding까지 하므로, 일반 인증키(decoding)을 사용하도록 합니다.

<?php

function get_search($serviceKey, $stdt){ // 상품검색명령

    $param = array(
        'serviceKey'=>$serviceKey,
        'stdt'=>$stdt
    );

    $url = "https://apis.data.go.kr/1160100/service/GetStockSecuritiesInfoService/getStockPriceInfo" . "?" . http_build_query($param);
    echo $url . PHP_EOL;
    $ch = curl_init();                                 //curl 초기화
    curl_setopt($ch, CURLOPT_URL, $url);               //URL 지정하기
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);    //요청 결과를 문자열로 반환 
    curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 10);      //connection timeout 10초 
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);   //원격 서버의 인증서가 유효한지 검사 안함
    
    $response = curl_exec($ch);
    curl_close($ch);
    
    return $response;

}

echo get_search([일반 인증키(Decoding)], "2023");

Ubuntu 사용자 계정 관리 명령

창업닉군 — Tue, 3 Jan 2023 01:29:31 +0900

useradd

useradd 명령으로 계정을 만들면 홈디렉토리를 만들지 않고 유저가 추가 됩니다.

useradd [옵션] [로그인ID]

adduser

adduser 명령으로 계정을 만들면 홈 디렉토리를 함께 만들어 줍니다.

adduser [옵션] [로그인ID]

usermod

사용자 계정의 정보를 수정합니다.

usermod [옵션] [로그인ID]

userdel

사용자 계정을 삭제하며, -r 옵션을 주면 홈 디렉토리도 함께 삭제 됩니다.

userdel [옵션] [로그인ID]

Ubuntu 사용자 계정 관련 파일

창업닉군 — Tue, 3 Jan 2023 01:16:58 +0900

/etc/passwd

한행에 사용자 한 명에 대한 정보가 기록며, 한 행의 구조는 다음과 같습니다.

로그인ID:x:UID:GID:설명:홈디렉토리:로그인 셀

1) 로그인ID : 로그인시 사용되는 ID 입니다. 중복되지 않는다면, ':' 와 '엔터문자'를 제외한 모든 문자를 사용할 수 있습니다. 다른 운영체제와 연동을 고려한다면, 8자로 제한하는 것이 좋습니다.

2) x : 예전에 패스워드 저장 공간으로 사용했지만, 보안상 /etc/shadow 에 저장하기 시작하며, 더 이상 사용하지 않습니다.

3) UID : 시스템의 사용자를 구분하기 위해 사용하는 번호. 일반적으로 0~999번과 65535번은 시스템 사용자를 위해 예약되어 있습니다.

4) GID : 유저가 소속된 그룹ID, 유저는 무조건 하나의 그룹에 소속되며, 지정하지 않으면, 자신의 아이디로 지정됩니다.

5) 홈디렉토리 : 사용자 계정에 할당된 홈 디렉토리 정대 경로를 기록합니다.

6) 로그인 셀 : 사용자가 로그인 시 기본적으로 동작하는 셸입니다.

/etc/shadow

한행에 사용자 암호외에 계정과 관련된 부가적인 정보도 저장되며, 구조는 다음과 같습니다.

로그인ID:암호(패스워드):최종 변경일:MIN:MAX:WARNING:INACTIVE:EXPIRE:Fag

1) 로그인ID : 사용자 계정의 이름으로 /etc/passwd 파일의 로그인 ID와 같다.

2) 암호(패스워드) : 실제 비밀번호가 암호화되어 저장된다. 비밀번호는 한방향 암호여서 복호화 할 수 없습니다.

3) 최종 변경일 : 암호가 마지막으로 변경된 날짜를 지정합니다. 일반적인 형태가 아니라, 유닉스 전통에 따라 1970년 1월 1일을 기준으로 1일에 1씩 더해가며 저장이 됩니다.

4) MIN : 암호변경 후 최소 사용해야 하는 기간 입니다. 예를 들어 7이면 7일간 변경없이 사용해야 하는 기간 입니다.

5) MAX : 암호를 사용할 수 있는 최대기간 입니다. 80이면 80일이 지나기전에 암호를 변경해야 합니다. 이 기간이 지나면 새로운 암호를 입력해야 합니다.

6) WARNING : 암호가 만료되기 전에 경고를 시작하는 날 수 입니다. 10 이면 암호가 만료되기 10일 전부터 로그인할 때 경고 메시지가 나타납니다.

7) INACTIVE : 암호가 만료된 후에도 이 항목에 지정한 날 수 동안은 로그인이 가능하며, 이 기간 동안에도 패스워드를 변경하지 않으면, 계정이 잠기게됩니다. 이럴 경우 관리자에게 문의해야 합니다.

8) EXPIRE : 사용자 계정이 만료되는 날로, 이 날짜가 지나면 해당 계정으로 로그인 할 수 없습니다. 최종변경일 처럼 1970년 1월 1일을 기준으로 한 날 수로 표시됩니다.

9) Flag : 향후 사용할 목적으로 비워둔 항목입니다.

/etc/login.defs

사용자 계정의 설정과 관련된 기본값을 정의한 파일입니다. 각 항목은 다음과 같습니다.

1) MAIL_DIR : 기본메일 디렉토리

2) PASS_MAX_DAYS, PASS_MIN_DAYS, PASS_WAN_AGE : 패스워드 에이징

3) UID_MIN, UID_MAX : 사용자 계정의 UID 범위

4) SYS_UID_MIN, SYS_UID_MAX : 시스템 계정의 UID 범위

5) GID_MIN, GID_MAX : 사용자 계정의 GID 범위

6) SYS_GID_MIN, SYS_GID_MAX : 시스템 계정의 GID 범위

7) UMASK : umask 값 설정

8) USERGROUPS_ENAB : 사용자 계정 삭제 시 그룹 삭제 여부

9) ENCRYPT_METHOD : 패스워드 암호화 기법

/etc/group

사용자 그룹의 정보를 저장한 파일로, 한 행에 그룹하나의 정보를 담고 있습니다. 행의 구조는 아래와 같습니다.

그룹이름:x:GID:그룹멤버

1) 그룹이름 : 그룹의 이름입니다.

2) x : 그룹의 암호를 저장하는 곳이었지만 현재는 /etc/gshadow 파일에 저장하고 비워 둡니다.

3) GID : 그룹을 식별하는 번호 입니다.

4) 그룹멤버 : 그룹에 속한 멤버들이 ,로 구분되어 있습니다.

/etc/gshadow

사용자 그룹의 암호를 저장한 파일로, 한 행에 하나의 그룹 파일이 저장됩니다.

그룹이름:그룹암호:관리자:그룹멤버

1) 그룹이름 : 그룹의 이름입니다.

2) 그룹암호 : 암호화된 그룹 암호입니다.

3) 관리자 : 그룹의 암호나 멤버를 바꿀 수 있는 사용자 계정으로 여러개일 경우 쉼표로 구분한다.

4) 그룹멤버 : 그룹에 속한 멤버들의 사용자 계정 이름이며, 쉼표로 구분합니다.

window 장고설치

창업닉군 — Mon, 2 Jan 2023 23:27:52 +0900

파이썬 설치

파이썬이 설치되었나를 확인하려면 터미널을 열고 python을 입력해 봅니다. 없다면 https://python.org 를 방문해 파이썬을 다운로드 후 설치해 줍니다.

아나콘다

파이썬의 여러 모듈을 한 번에 다운로드 받기 귀찮으므로, https://www.anaconda.com 아나콘다를 설치해 줍니다.

django 설치

터미널에서 아래와 같이 입력하면 django가 설치 되고 종료 됩니다.

$ pip install django

리액트 설치 및 기본

창업닉군 — Mon, 2 Jan 2023 22:14:11 +0900

공식사이트 : https://ko.reactjs.org/docs/add-react-to-a-website.html#add-react-in-one-minute

리액트 코드는 단 2줄이면 끝이 납니다.

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

그리고 기본형은 다음과 같습니다.

<meta charset="UTF-8" />
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

<div id="like_button_container"></div>

<script>

    const e = React.createElement;

    class LikeButton extends React.Component {
        constructor(props) {
            super(props);
            this.state = { liked: false };
        }

        render() {
            if (this.state.liked) {
            return 'You liked this.';
            }

            return e(
            'button',
            { onClick: () => this.setState({ liked: true }) },
            'Like'
            );
        }
    }

    const domContainer = document.querySelector('#like_button_container');
    const root = ReactDOM.createRoot(domContainer);
    root.render(e(LikeButton));

</script>

먼저 아래 문장으로 루트를 지정합니다.

const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);

그리고, 선언한 컴포넌트를 루트에 렌더링합니다.

root.render(e(LikeButton));

선언된 컴포넌트는 버튼인데 클릭시 버튼이 사라지고 'You Liked this'버튼으로 바뀝니다. 이 기능의 핵심은 'this.state = { liked: false };'의 state 값을 변경시키는데 있습니다.

PowerShell 파일 사용 명령

창업닉군 — Mon, 2 Jan 2023 19:06:05 +0900

Get-Content

파일 내용 출력

$ Get-Content [파일경로]

Get-Content -wait

파일 내용을 출력하고 대기 리눅스의 tail 처럼 사용이 가능하다.

$ Get-Content [파일경로] -wait

copy

파일을 복사

$ copy 파일경로1 파일경로2

rd

파일 삭제 (디렉토리 삭제도 가능)

$ rd 파일경로1 파일경로2

mv

파일 이동

$ mv 파일경로1 파일경로2

mklink

심볼릭 링크, 하드링크 생성

$ mklink [옵션] 원본파일명 생성될링크명

PowerShell 디렉토리 사용명령

창업닉군 — Mon, 2 Jan 2023 18:53:24 +0900

Get-Location

현재 위치 확인, 현재 디렉토리 절대 경로명 출력.

$ Get-Location

cd

디렉토리 이동

$ cd [원하는 디렉토리명]

dir

현재 디렉토리 리스트 출력.

$ dir

mkdir

디렉토리 생성

$mkdir [디렉토리명]

rd

디렉토리 삭제

$rd [디렉토리명]

Ubuntu 파일 사용 명령

창업닉군 — Mon, 2 Jan 2023 17:26:22 +0900

cat

파일 내용을 출력한다.

$ cat [옵션] 파일명

파일 내용을 화면 단위로 꾾어서 출력해 줍니다.

$ more [옵션] 파일명

less

more 명령의 보강판 파일 내용을 앞뒤로 스크롤 해 줍니다.

$ less [옵션] 파일명

tail

파일 뒷 부분의 몇 줄을 출력해 줍니다. -f 옵션을 주면 종료되지 않고 내용이 추가 될 때 마다 출력해 주므로, 프로그램의 실행 로그를 보기 좋습니다.

$ tail

cp

파일을 복사할 때 cp 명령을 사용한다. cp 명령으로 디렉토리 도 복사할 수 있다.

$ cp [옵션] 파일1(디렉토리) 파일2(디렉토리)

mv

파일을 이동한다. 하지만 목적지 파일이나 디렉토리 이름을 달리 하면 이름이 변경됩니다.

$ mv [옵션] 파일1(디렉토리) 파일2(디렉토리)

rm

파일을 삭제하는 명령, -r 옵션을 지정하면 디렉토리도 삭제할 수 있다.

$ rm [옵션] 파일명

ln

파일의 링크를 생성합니다.

$ ln [옵션] 원본파일 링크파일

touch

빈 파일을 생성합니다.

$ touch [-acm] [-r ref_file | -t time ] 파일명

grep

지정한 패턴이 포함된 행을 찾는다.

$ grep [옵션] 패턴 파일명

find

파일 검색하기

$ find [경로 검색 조건] [동작]

whereis, which

특정명령이 있는 위치를 찾아 절대 경로를 출력한다.

$ whereis [옵션] 파일

Ubuntu 디렉토리 사용명령

창업닉군 — Mon, 2 Jan 2023 17:02:39 +0900

우분투 디렉토리 사용명령을 정리해 둡니다.

pwd

현재 위치를 확인한다. 현재 디렉토리의 절대경로명 출력.

$ pwd

cd

디렉토리 이동

$ cd [원하는디렉토리명]

ls

현재 디렉토리 리스트 출력

$ ls [옵션] [디렉토리(파일)]

mkdir

디렉토리를 생성한다. (디렉토를 여러개 만들려면 띄워쓰기를 여러개 적어주면된다.)

$ mkdir [디렉토리명]

rmdir

디렉토리 삭제

$ rmdir [옵션] 디렉토리

Single-File Components vue.js

창업닉군 — Mon, 2 Jan 2023 16:12:03 +0900

SFC 는 뷰의 컴포넌트를 따로 분리하는 기법입니다.
확장자는 *.Vue 이고, script, template, style 태그로 구성되어 있습니다. script, style 태그는 흔히 알고 있겠지만, template 태그는 대체로 잘 사용되지 않는 태그 입니다.이 태그는 querySelector 로 속이 검색되지 않으며 브라우저에 바로 표시가 되지 않습니다. 주로 html 태그 조각을 담아두는 데 사용이 됩니다. template 태그 대신 div나 일반 태그에 담고 감춰두면 되지 않을까 라고 생각되시는 분들도 있으시겠지만, tr, td 같은 태그들은 template가 아니면, 넣어두고 꺼낼 수가 없습니다.

구조는 아래와 같습니다.

<script>
export default {
  data() {
    return {
      greeting: 'Hello World!'
    }
  }
}
</script>

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>

이 모듈화 된 컴포넌트를 꺼내어 쓰려면, 아래와 같이 사용하면됩니다.

import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  }
}

Vue.js install

창업닉군 — Mon, 2 Jan 2023 04:39:02 +0900

공식문서: https://vuejs.org/guide/quick-start.html

Vue.js의 인스톨은 CDN을 사용하는 경우 상당히 간단합니다. 한 줄만 추가하면됩니다.

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

그리고 가장 간단한 Hello Vue 예제 입니다. '.mount()' 메소드에 쿼리셀렉터로 적용대상을 지정함을 눈여겨 봐두면 될것 같습니다. 기본 형태는 data 메소드를 통해 message값을 던저 주는 예제 입니다.

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

그리고 아래는 ES Module Build 를 위한 예제 입니다.

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

PHP 8.2 업데이트

창업닉군 — Mon, 2 Jan 2023 02:07:32 +0900

최근 php 8.2가 업데이트 되어 글을 남깁니다.

Readonly Classes

클래스를 선언할 때 readonly 키워드를 앞에 붙여 선언할 수 있게 되었습니다. readonly로 클래스를 선언하면, type을 꼭 지정해 프로퍼티를 선언해야 하며, static property를 선언할 수 없습니다.

<?php

// 8.2 버전부터는 AllowDynamicProperties 가 Deprecated 경고가 뜬다고 합니다.
#[AllowDynamicProperties]
readonly class Foo {
}

// Fatal error: Cannot apply #[AllowDynamicProperties] to readonly class Foo
?>


<?php
readonly class Foo
{
    public $bar;
}

// Fatal error: Readonly property Foo::$bar must have type
?>


<?php
readonly class Foo
{
    public static int $bar;
}

// Fatal error: Readonly class Foo cannot declare static properties
?>

DNF

DNF 유형을 사용하면 교집합과 합집합을 결합할 수 있습니다.

stand-alone type : null, false and true

null, false, true를 int 같은 타입으로 선언해 사용할 수 있습니다. 클래스의 멤버 변수로 지정할 수 있습니다.

New "Random" extension

Random 기능이 확장되었습니다.

Constants in traits

trait 에 상수 선언이 가능해졌습니다.

Deprecate dynamic properties

dynamic properties가 지원이 중단 되었습니다.

javascript, optional, chaining

창업닉군 — Sun, 1 Jan 2023 23:02:08 +0900

아래와 같이 중첩된 값이 있다면, 각각의 단계별로 객체가 존재하나 여부를 확인하고 값을 꺼내는 코드를 작성해야 합니다. 옵셔널 체이닝 없이 꺼낸다면, 코드가 길어지고, 무엇보다 직관적이지 못합니다.

<script type="module">

    const some = {
        deeply:{
            nested:{
                value:99
            }
        },
        dialog:{
            say:"hello"
        }
    };

    const x = some && some.deeply && some.deeply.nested && some.deeply.nested.value;
    const y = some && some.dialog && some.dialog.say && some.dialog.say;
    console.log(x, y);

</script>

하지만 옵셔널 체이닝을 사용하면, 아래와 같이 코드가 간결해 지며, 중간에 null 이나 undefine을 만나면 undefine을 반환하고 코드를 수행하지 않습니다.

<script type="module">

    const some = {
        deeply:{
            nested:{
                value:99
            }
        },
        dialog:{
            say:"hello"
        }
    };

    const x = some?.deeply?.nested?.value;
    const y = some?.dialog?.say;
    console.log(x, y);

</script>

javascript, 디스트럭처링(destructuring)

창업닉군 — Sun, 1 Jan 2023 22:02:33 +0900

디스트럭처링은 객체나 배열에서 값을 쉽게 가지고 오는 방법입니다. 디스트럭처링이 없을 때는 객체나 배열에서 값을 가지고 올 때 다소 코드가 길었지만, 아래 예들 처럼 디스트럭처링을 사용한다면, 코드가 상당히 간결해 질 것 입니다.

객체

기존에는 아래와 같이 사용해 값들을 가지고 왔습니다.

<script>

    const hotel = {
        door:3,
        light:6
    };

    const door = hotel.door;
    const light = hotel.light;

    console.log(door, light);

</script>

하지만 아래와 같이 디스트럭처링을 하면 길이가 상당히 짧아 집니다. 아래 처럼 변수를 또 나눌 일은 없지만, 함수에서 결과로 객체를 받을 경우에 사용한다면 상당히 효과적입니다.

<script type="module">

    const hotel = {
        door:3,
        light:6
    };

    const {door, light} = hotel;
    console.log(door, light);

</script>

배열

기존의 방법

<script type="module">

    const soldier = ['jake', 'jun', 'jane', 'Paul'];

    const soldier_0 = soldier[0];
    const soldier_2 = soldier[2];
    console.log(soldier_0, soldier_2);

</script>

디스트럭쳐

<script type="module">

    const soldier = ['jake', 'jun', 'jane', 'Paul'];
    const [soldier_0, , soldier_2,] = soldier;
    console.log(soldier_0, soldier_2);

</script>

중첩된 디스트럭쳐

객체 속에 배열이 있는 경우 아래와 같은 방법으로 가지고 올 수 있습니다.

<script type="module">

    const jade = {
        mountain:["한라산","백두산"],
        river:["한강","낙동강"]
    };
    const {mountain:[choice_m],river:[,river_nak]} = jade;
    console.log(choice_m, river_nak);

</script>

디스트럭처와 스프래드는 궁합이 좋으므로, 같이 사용하면 매우 간결한 코딩이 가능합니다.

javascript, for-in, for-of

창업닉군 — Sun, 1 Jan 2023 20:54:08 +0900

for-of : 배열의 값을 반복해 줍니다.

for-in : 객체의 키값으로 반복을 해 줍니다.

아래 소스로 차이를 느껴보세요.

<script>

    const one = [6,8,2,4,0];
    for( let o of one ){
        console.log('o', o);
    }

    const two = {'과일':'사과','나라':'미쿡','언어':'바디랭귀지'};
    for( let key in two ){
        console.log( key, two[key] );
    }

</script>

javascript, var, let, const

창업닉군 — Sun, 1 Jan 2023 20:28:44 +0900

javascript는 다른 언어와 다르게 선언하는 방법이 var 하나만 있었습니다. c++, c# 처럼 형식을 정의하지 않았고 변수로 바로 사용하기에 하나만 밖에 필요가 없었습니다. 하지만 javascript는 눈부시게 발전해 복잡하고, 기능이 다양해 지며 아주 많은 문제를 만들어 냈습니다. 특히 promise 전까지 함수 중첩 지옥에서는 전역변수인 var는 정말 오류를 만들기 쉬웠습니다. 이를 극복하기 위해 ES2015에서는 let과 const가 도입됩니다.

var, let

var는 선언된 바깥 스코프에서도 사용이 가능합니다. 같은 function 속이 scope 입니다. let 을 실행하면 외부에서 사용이 불가능합니다. try-catch 문 같이 try 부분에 사용된 변수중 catch로 전달될 값이 있다면, var 그 외에 일반적인 경우 let을 사용하면 좋을 듯 합니다. 아래의 코드를 실행해 보세요.

<script>

    for(var i=0;i<10;i++){

    }
    console.log("i", i);

    for(let u=0;u<9;u++){

    }
    console.log("u", u);

</script>

const

const는 상수를 정의할 때 사용합니다. javascript같은 경우 언어가 유연해, override 되기 쉬온데, cosnt를 사용하면 그럴 우려는 없습니다. 하지만, const 내부의 값들은 변경이 가능합니다. 아래의 코드를 실행해 차이를 느껴보세요.

<script>

    let spr = {in:1};
    console.log('spr', spr);

    spr.in += 4;
    console.log('spr', spr);

    spr = {in:2};
    console.log('spr', spr);



    const ho = {out:1};
    console.log('ho', ho);

    ho.out+= 6;
    console.log('ho', ho);

    ho = {out:3};
    console.log('ho', ho);

</script>

python WebSocket Server

창업닉군 — Sun, 1 Jan 2023 17:49:51 +0900

WebSockets 설치

파이썬을 구현하기 위해서는 먼저, python과 pip로 websockets 를 설치하셔야합니다.

웹소켓 설치
$ pip install websockets

설치확인
$ pip list

웹소켓 서버 코딩

너무 간단해서 사실 놀랐습니다. websockets.serve 함수에 인자로 각각 '실행메소드', 'ip 혹은 주소', 'port'를 넣어주고, 응답을 대기하는 동안 종료되지 않도록. asyncio.get_event_loop().run_until_complete, asyncio.get_event_loop().run_forever를 이용해 실행해 주시면되겠습니다.

서버는 복잡하지 않도록 응답을 그대로 돌려 주는 에코 서버로 만들었습니다. 소스는 아래와 같습니다.

import asyncio;
import websockets;

port = 10000

async def accept(self, path):
    while True:
        data = await self.recv()
        print("receive:" + data)
        send_str = 'echo : ' + data
        await self.send(send_str)
        print('send => ' + send_str)

print("웹소켓 시작 포트넘버:" + str(port))
start_server = websockets.serve(accept, "localhost", port)
asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()
print("End Service!")

클라이언트 코딩

간단히 html과 javascript를 통해 예제를 만들어 봤습니다. 대체로, websocket.onopen, websocket.onclose 등의 함수를 사용하지만 저는 괄호가 중첩되는 것이 싫어 이벤트 형식으로 만들었습니다.

<title>WebSocket 테스트</title>
<style>
    .spacer {margin-bottom: 1rem;}
</style>

<div class="spacer">
    <span>상태 : </span><span id="status">접속안됨</span>
</div>
<div id="recived" class="spacer" style="height: 15rem; border: #aaa 1px solid; padding: 0.5rem; max-width: 30rem;"></div>
<div class="spacer">
    <input id="message" />
    <button id="send">보내기</button>
    <button id="close">종료</button>
</div>

<script>

    const url = 'ws://localhost:10000';
    const ws = new WebSocket(url);

    const E_Receive = document.querySelector('#recived');
    const E_Message = document.querySelector('#message');
    const E_Status = document.querySelector('#status');
    const E_Btn_Send = document.querySelector('#send');
    const E_Btn_Close = document.querySelector('#close');

    // 웹소켓 이벤트 처리.
    ws.addEventListener("open", e=>{
        E_Status.innerHTML = "접속";
    });
    ws.addEventListener("message", e=>{
        console.log("e",e);
        E_Receive.innerHTML += `<div>수신 : ${e.data}</div>`;
    })

    // ui 이벤트 처리.
    E_Btn_Send.addEventListener('click',e=>{
        if(!E_Message.value) return alert("메세지를 입력하지 않았습니다.");
        E_Receive.innerHTML += `<div>발신 : ${E_Message.value}</div>`;
        ws.send(E_Message.value);
        E_Message.value = "";
    })

    E_Btn_Close.addEventListener('click',e=>{
        ws.close();
        E_Status.innerHTML = "종료";
    });

</script>

그럼 즐거운 코딩 되시길 바랍니다.

카카오 개발자 REST API 포즈 php

창업닉군 — Sun, 1 Jan 2023 04:11:19 +0900

포즈는 사진이나 영상에서 사람이 어떤 포즈를 취하고 있나를 확인해 주는 api 입니다.

참고문서
공식문서 : https://developers.kakao.com/docs/latest/ko/pose/dev-guide

개발용으로 사용할 이미지 이므로, https://www.pexels.com/ko-kr/ 에서 무료 이미지를 하나 다운로드 받았습니다.

1. curl을 이용해 이미지 분석 요청.

이미지를 요청하는 curl은 아래와 같습니다.

curl -v -X POST "https://cv-api.kakaobrain.com/pose" \
  -H "Content-Type: multipart/form-data" \
  -H "Authorization: KakaoAK ${REST_API_KEY}" \
  -F "file=@example_pose.jpg"

이것을 php로 고치면 아래와 같이 됩니다.

function req_mutipart_post( $KakaoAK, $file_path ){

    $headers = array();
    $headers[] = "Authorization: KakaoAK {$KakaoAK}";
    $headers[] = "Content-Type: multipart/form-data";
    $url = "https://cv-api.kakaobrain.com/pose";

    $file_path = new CURLFile($file_path,'image/jpeg');
    $postvars = array("file"=>$file_path);

    $is_post = true;

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_POST, $is_post);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_POSTFIELDS, $postvars);
    curl_setopt($ch, CURLINFO_HEADER_OUT, true);
    $response = curl_exec ($ch);
    $status_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);

    curl_close ($ch);

    return $response;

}

2. 데이터 가공.

php gd를 이용해 이미지를 가공해 봤습니다. 카카오 포즈 기능 생각보다 사용하기 편리한 것 같습니다.

3 전체 소스 입니다.

<?php

    // 업로드 모듈
    function req_mutipart_post( $KakaoAK, $file_path ){ // 이미지 업로드용 메소드.

        $headers = array();
        $headers[] = "Authorization: KakaoAK {$KakaoAK}";
        $headers[] = "Content-Type: multipart/form-data";
        $url = "https://cv-api.kakaobrain.com/pose";

        $file_path = new CURLFile($file_path,'image/jpeg');
        $postvars = array("file"=>$file_path);

        $is_post = true;

        $ch = curl_init();
        curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
        curl_setopt($ch, CURLOPT_URL, $url);
        curl_setopt($ch, CURLOPT_POST, $is_post);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($ch, CURLOPT_POSTFIELDS, $postvars);
        curl_setopt($ch, CURLINFO_HEADER_OUT, true);
        $response = curl_exec ($ch);
        $status_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);

        curl_close ($ch);

        return $response;

    }

    $source_image_file = "pexels-cottonbro-studio-10675908.jpg";

    // 이미지에 대한 정보를 가지고 옵니다.
    $res = req_mutipart_post( '6907940c4e12eb2a6805a74f6bd95d83', $source_image_file );
    $resObj = json_decode($res,true);

    // 사진 속 사람 출력.
    $human = count($resObj);
    echo "사진속 사람 {$human}명" . PHP_EOL;

    // 사진속 모양에 따라 이미지를 가공해 줍니다.
    $gd = imagecreatefromjpeg($source_image_file);
    foreach($resObj as $d){

        // 라인 그리기.
        $im = @imagecreatetruecolor(4, 4);
        $line_color = imagecolorallocate($im, 255, 0, 0);

        imagerectangle(
            $gd,
            $d['bbox'][0], $d['bbox'][1], $d['bbox'][2] + $d['bbox'][0], $d['bbox'][3] + $d['bbox'][1],
            $line_color
        );

        // 점찍기
        $point_weight = @imagecreatetruecolor(8, 8);
        $point_color = imagecolorallocate($point_weight, 0, 255, 0);

        for( $i=0; $i < count($d['keypoints']) ;$i+=3 ){
            $idx_x = round($d['keypoints'][$i + 0]);
            $idx_y = round($d['keypoints'][$i + 1]);
            // print_r([$idx_x, $idx_y]);
            // imagesetpixel($gd, $idx_x, $idx_y, $point_color);
            imagefilledarc(
                $gd, $idx_x, $idx_y, 4,
                4, 0, 360, $point_color,
                IMG_ARC_PIE
            );
        }

    }

    // 가공된 이미지 출력하기.
    imagejpeg($gd, 'result_' . time() . ".jpg");

전체 소스 파일 입니다.

php - upload.zip

0.91MB

11번가 OPEN API 상품검색 node.js

창업닉군 — Sun, 1 Jan 2023 00:33:30 +0900

카테고리 조회를 실행하려면 먼저 11번가 판매자 가입 후 api 키 발급이 필요합니다. 선행하지 않았다면, 아래 링크를 참조해 먼저 완료해 주세요.

11번가 OPEN API CENTER - 서비스등록

참고 11번가 판매자 센터 참고 : https://happytownn.tistory.com/176 11번가 OPEN API CENTER : https://openapi.11st.co.kr/ 11번가 open api를 이용하려면, 먼저 판매자로 가입을 해야 합니다. 그리고, 서비스를 등록하고 o

nicgoon.tistory.com

상품검색 조회 관련 문서는 아래 링크에서 확인이 가능합니다.
https://openapi.11st.co.kr/openapi/OpenApiServiceIntroduce.tmall#info1

상품검색 > 상품검색

11번가에서 상품을 조회 했을 때의 결과를 자신의 사이트에서 활용할 수 있는 API 입니다. 실제 사용성은 낮지만 테스트용으로 해보기 좋습니다. 간단히 url을 브라우저에 붙여넣어도 결과를 확인할 수 있습니다.

http://openapi.11st.co.kr/openapi/OpenApiService.tmall?key=[key]&apiCode=ProductSearch&keyword=[keyword]

GET PARAM에 넣어야할 값은 아래와 같습니다.
key = 서비스가입 후 받은 OPEN API KEY를 넣어주세요.
apiCode = api명령인데, 현재는 상품 검색을 할 것이므로, 'ProductSearch'를 그대로 두세요.
keyword = 검색할 명령어를 입력해 주세요.

keyword '양말'로 입력하고 브라우저 주소창에 넣으면 xml 응답값을 받을 수 있습니다. 11번가에 등록되는 상품들은 매일매일 다르므로 호출할때마다 다른 응답을 받이실거에요.

브라우저에서 사용하면 편하지만, 우리는 서버환경에서 받아 대체로 가공해서 사용해야하므로, 서버 언어로 실행이 필요합니다. node.js를 사용해 서버환경에서 구현해 보겠습니다.

var http = require('http');


function get_search(rest_api_key, keyword, callback){

    var options = {
        hostname: 'openapi.11st.co.kr',
        path: `/openapi/OpenApiService.tmall?apiCode=ProductSearch&key=${rest_api_key}&keyword=${encodeURI(keyword)}`
      };
     
    function handleResponse(response) {
      var serverData = '';
      response.on('data', function (chunk) {
        serverData += chunk;
      });
      response.on('end', function () {
        // console.log("received server data:");
        // console.log(serverData);
        callback(serverData);
      });
    }
     
    http.request(options, function(response){
      handleResponse(response);
    }).end();

}
get_search([rest api key 입력], "양말", res=>{
    console.log("응답 =>", res);
});

별다른 어려움 없이 사용하시리라 믿습니다. 제가 한 번 해 보니 잘 동작합니다.

11번가 OPEN API 상품검색 php

창업닉군 — Sat, 31 Dec 2022 23:47:58 +0900

카테고리 조회를 실행하려면 먼저 11번가 판매자 가입 후 api 키 발급이 필요합니다. 선행하지 않았다면, 아래 링크를 참조해 먼저 완료해 주세요.

11번가 OPEN API CENTER - 서비스등록

nicgoon.tistory.com

상품검색 조회 관련 문서는 아래 링크에서 확인이 가능합니다.
https://openapi.11st.co.kr/openapi/OpenApiServiceIntroduce.tmall#info1

상품검색 > 상품검색

http://openapi.11st.co.kr/openapi/OpenApiService.tmall?key=[key]&apiCode=ProductSearch&keyword=[keyword]

브라우저에서 사용하면 편하지만, 우리는 서버환경에서 받아 대체로 가공해서 사용해야하므로, 서버 언어로 실행이 필요합니다. php curl을 사용해 서버환경에서 구현해 보겠습니다.

<?php

    function get_search($rest_api_key, $keyword){ // 상품검색명령

        $param = array(
            'apiCode'=>'ProductSearch',
            'key'=>$rest_api_key,
            'keyword'=>$keyword
        );

        $url = "http://openapi.11st.co.kr/openapi/OpenApiService.tmall" . "?" . http_build_query($param);

        $ch = curl_init();                                 //curl 초기화
        curl_setopt($ch, CURLOPT_URL, $url);               //URL 지정하기
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);    //요청 결과를 문자열로 반환 
        curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 10);      //connection timeout 10초 
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);   //원격 서버의 인증서가 유효한지 검사 안함
        
        $response = curl_exec($ch);
        curl_close($ch);
        
        return $response;

    }

    echo get_search([rest api key 입력], "양말");

별다른 어려움 없이 사용하시리라 믿습니다. 제가 한 번 해 보니 잘 동작합니다.

11번가 OPEN API CENTER - 서비스등록

창업닉군 — Sat, 31 Dec 2022 22:23:30 +0900

참고
11번가 판매자 센터 참고 : https://happytownn.tistory.com/176
11번가 OPEN API CENTER : https://openapi.11st.co.kr/

11번가 open api를 이용하려면, 먼저 판매자로 가입을 해야 합니다. 그리고, 서비스를 등록하고 open api를 받아야 합니다.

오픈 api 탭이 나오면, 모든 양식을 기입후 등록을 눌러주세요. 사용용도는 '상품등록 및 주문관리'정도가 적당할 것 같습니다.

모든 등록이 완료되면 아래의 api key를 복사해 두세요.

php 정규식 문제점

창업닉군 — Fri, 21 Aug 2020 19:42:39 +0900

다른 사이트 보면, preg_match 메소드를 쓰면, 한글이 잘 검색되는 것 처럼 나옵니다.

하지만 가끔 웹호스팅을 받다보면, 안되는 곳이 있습니다. (사실 preg_match를 써서 한글 정규식 검사가 제대로 된 경우를 만난적이 없습니다. 저는.)

그래서, mb_ereg_match를 쓰는데, 한글 검사가 잘됩니다.

하지만, 처음 쓸때 오류를 마구 만났습니다. 이유는 preg_match 슬래쉬 사이에 정규식패턴을 넣어줘야 하고, mb_ereg_match는 입력하면 안되기 때문입니다. 각각 아래와 같이 입력해야 합니다.

if( !mb_ereg_match( "^[가-힣]{2,16}$", $nickname ) ) return "한글 2~16자로 입력해 주세요";

if( !preg_match( "/^[a-zA-Z0-9]{2,8}$/", $id ) ) return "영어, 숫자 조합으로 2~8자로 입력해 주세요.";

사실, php 매뉴얼에 나와있지만 같겠지라고 생각하다 오류를 만날수 있습니다. (제가 그랬습니다. ㅠ,.ㅜ)

html css 7가지 단위

창업닉군 — Fri, 21 Aug 2020 07:19:27 +0900

css 7가지단위에 대해서 잘 설명 되어 있는 사이트가 있어서 링크를 걸어 둡니다.

https://webclub.tistory.com/356

CSS의 7가지 단위 - rem, vh, vw, vmin, vmax, ex, ch

CSS Unit (CSS 7가지 단위) 우리가 잘 알고 있는 CSS기술을 사용하는 것은 쉽고 간단할 수 있지만 새로운 문제에 봉착하게 되면 해결하기 어려울 수 있습니다. 웹은 항상 성장,변화하고 있고 새로운 ��

webclub.tistory.com

프로젝트 생성

창업닉군 — Wed, 15 Jul 2020 06:54:17 +0900

참고 사이트.

expo site : http://expo.io

Expo

Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.

expo.io

참고 문서.

설치 : https://docs.expo.io/

Introduction to Expo - Expo Documentation

Expo is a framework and a platform for universal React applications. It is a set of tools and services built around React Native and native platforms that help you develop, build, deploy, and quickly iterate on iOS, Android, and web apps from the same Java

docs.expo.io

앱 설치

$ npm install --global expo-cli

프로젝트 실행.

$ expo init {프로젝트 명}

바로 실행 (안드로이드, iOS, 웹 모두 실행)

$ npm start

각 플랫폼별 실행.

$ npm run android

$ npm run ios

$ npm run web

expo port 변경.

프로젝트 루트 폴더에, .exprc 파일을 만든다. 그리고 아래와 같이 입력한다.

{
"manifestPort": 8080
}

로컬 ip 입력

MySql ER Diagram 기본 사용법

창업닉군 — Wed, 24 Jun 2020 12:58:22 +0900

참고 링크.

https://m.blog.naver.com/PostView.nhn?blogId=pyj721aa&logNo=221407052438&categoryNo=48&proxyReferer=https:%2F%2Fwww.google.com%2F

[MySQL] 워크벤치로 데이터베이스(스키마) 만들기

목차 1. ER 다이어그램 만들기 2. forward engineeringMySQL 워크벤치 기본 사용법 숙지 및 잊어버리...

blog.naver.com

EER Diagram 그리는 방법.

창업닉군 — Wed, 24 Jun 2020 11:00:10 +0900

제가 EER 그릴 일이 있어 사용하고, 링크 공유해 둡니다.

https://nemew.tistory.com/20

MySQL Workbench - 모델링 다이어그램(EER Diagram) 그리기

0. 본 게시물은 MySQL, MySQL Workbench, DB Table이 추가 상태를 기준으로 작성 되었습니다. 관련 자세한 내용은 아래 게시물을 참고해 주세요. MySQL 및 MySQL Workbench 설치 ( http://nemew.tistory.com/14)..

nemew.tistory.com

작업 파일을 저장하는 방법은 해당 페이지를 열어 둔 상태에서, File > Save Model 을 선택하면됩니다.

Swoole 설치

창업닉군 — Fri, 12 Jun 2020 10:00:50 +0900

실행환경

ubuntu 18.0.4

공식 사이트들

php.net

PHP: Hypertext Preprocessor

The PHP development team announces the immediate availability of PHP 7.2.0 Release Candidate 1. This release is the first Release Candidate for 7.2.0. All users of PHP are encouraged to test this version carefully, and report any bugs and incompatibilities

www.php.net

https://www.swoole.co.uk/

PHP Coroutine Async programming framework | Swoole PHP

Compared with other async programming frameworks or softwares such as Nginx, Tornado, Node.js, Swoole has the built-in PHP coroutine and async support, multiple threads I/O modules. Developers can use sync or async, coroutine API to write the applications

www.swoole.co.uk

선행작업

apache + php 설치 https://nicgoon.tistory.com/258

우분투( ubuntu ) apache + php 설치

작업환경 제 작업환경은 mac의 parallels를 설치, ubuntu 가상 pc를 생성해 작업하였습니다. OS : ubuntu 18.04 참고문서 https://webnautes.tistory.com/1185 Ubuntu 18.04에 LAMP ( Apache2, MySQL , PHP 7) 설..

nicgoon.tistory.com

설치 공식 문서 https://www.swoole.co.uk/docs/get-started/installation

Get started | Swoole PHP

www.swoole.co.uk

설치

php-pear 설치

$ sudo apt-get update

$ sudo apt-get install php-pear

phpize 설치

$ sudo apt install php-dev

swoole 설치

$ sudo pecl install swoole

php.ini 수정

설치가 완료되면, php.ini 파일에 extension이 추가되었음을 설정하라는 메시지가 나옵니다.

수정할 곳은 2군데 입니다. 일반 웹실행환경을 위한 apache2와 콘솔실행을 위한 cli입니다. swoole은 대체로 쉘 커맨드에서 실행하므로, cli도 반드시 수정해야 합니다.

웹을 위한 php.ini 경로 : /etc/php/7.2/apache2/php.ini
cli를 위한 php.ini 경로 : /etc/php/7.2/cli/php.ini

저는 7.2를 설치해 7.2라는 서브 경로를 포함하지만, 버전에 따라 서브 경로가 틀릴 수 있습니다.
각 파일들을 열어 가장 exptension들이 있는 가장 아랫줄에, extension=swoole.so를 포함시켜 줍니다.

아파치를 재 실행해 적용해 줍니다.

$ sudo service apache2 restart

ubuntu ftp 설치하기.

창업닉군 — Fri, 12 Jun 2020 08:20:21 +0900

사용유저 추가

먼저 ftp를 사용할 유저를 생성합니다.
기본적으로 리눅스 상의 모든 유저는 ftp를 사용할 수 있습니다. 일반유저 한명만 추가하면됩니다.

$ sudo adduser newuser

저는 worker라는 유저를 추가하였습니다.

$ sudo adduser worker

설치

설치하는 방법은 매우 간단합니다. 아래 한줄을 입력하면됩니다.

$ sudo apt-get install vsftpd

접속을 위한 계정 IP 확인

호스팅이나 클라우드 서버를 사용하는 경우, 서비스 신청과 동시에 ip를 확인할 수 있지만, 저처럼 가상 pc에 사용하시는 분들은 해당 서버에 접속을 위해 ip를 확인할 필요가 있습니다.

$ sudo ifconfig

이렇게 입력하면 ip가 표시되지만, net-tools가 설치되어 있지 않은 경우, 해당 명령어를 사용할 수 없습니다. 그럴경우 net-tool을 아래와 같이 설치해 주세요.

$ sudo apt-get install net-tools

제 아이피는 아래와 같이 확인이 되었습니다.

ftp 접속해 보기

이제 ftp 접속을 해 접속이 가능한지 확인을 해봅시다. 저는 파일질라를 이용해 접속을 했습니다.

연결을 해 보면 바로 접속이 됩니다. 아무런 설정을 하지 않았는데도요.

하지만 파일을 업로드 하려면 파일이 업로드 되지 않을 것 입니다.

FTP 자체의 쓰기 권한을 주지 않아서 입니다. /etc/vsftpd.conf 파일을 열어 쓰기 권한을 허용해 주면됩니다.

먼저 콘피그 파일 복제.

$ sudo cp /etc/vsftpd.conf /etc/vsftpd.conf.old

파일 열기.

$ sudo vi /etc/vsftpd.conf

write_enable=YES 문자열을 찾아 앞의 #을 제거하고, :wq(저장후 종료)를 눌러 종료합니다.

ftp를 재 시작합니다.

$ sudo service vsftpd restart

저는 파일이 잘 올라 갑니다.

업로드 파일 권한설정

파일을 업로드 해보면, 권한이 rw------ 로 잡혀 있을 것 입니다. 이것은 파일 업로드/다운로드에서는 문제가 되지 않지만, 웹서버등을 운영하려고 하면, php 파일등이 실행되지 않거나 웹문서를 표시하지 못할 것 입니다. 콘피그 파일을 열어 local_umask=022 항목의 주석을 제거하면됩니다.

참고로, 마스크 이므로, 파일 업로드시 777 - 022 = 755 로 파일 권한이 설정됩니다.

$ sudo vi /etc/vsftpd.conf

local_umask=022 문자열을 찾아 앞의 #을 제거하고, :wq(저장후 종료)를 눌러 종료합니다.

$ sudo service vsftpd restart

우분투( ubuntu ) apache + php 설치

창업닉군 — Fri, 12 Jun 2020 07:19:44 +0900

작업환경

제 작업환경은 mac의 parallels를 설치, ubuntu 가상 pc를 생성해 작업하였습니다.

OS : ubuntu 18.04

참고문서

https://webnautes.tistory.com/1185

Ubuntu 18.04에 LAMP ( Apache2, MySQL , PHP 7) 설치하는 방법

Apache2 웹서버, MySQL 데이터베이스 서버, PHP를 Ubuntu에 설치하는 과정을 소개합니다. LAMP는 운영 체제와 오픈 소스 소프트웨어 스택의 조합으로 Linux, Apache, MySQL, PHP의 첫글자만 가지고 만든 약어��

webnautes.tistory.com

apache 설치

기본 설치.

$ sudo apt-get update

$ sudo apt-get install apache2

설치 확인.

$ apache2 -v

브라우저 접속확인

홈디렉토리는 /var/www/html 입니다.

Mysql 설치

제 작업에는 mysql이 필요가 없었습니다. 하지만, 아파치 php를 설치하며, mysql을 설치하지 않으면 섭섭하므로, 설치만 했습니다.

$ sudo apt-get install mysql-server

PHP 설치

$ sudo apt-get install php php-mysql

홈디렉터리에 phpinfo.php 파일을 만들고 php 정보를 볼수 있는 내용을 채워 넣습니다.

$ sudo vi phpinfo.php

<?php phpinfo(); ?>

:wq

그리고 아래와 같이 php 가 표시되면 성공입니다.

php.ini 수정

저처럼 서버 관리자가 아니라면, php.ini 설정을 한 군데만 고치면, 될것 같습니다. 오류시 오류 로그 표시.

display_errors = Off 를 display_errors = On 으로 바꿔 주세요.

저장후 아파치 서버를 재시작해 주면 적용됩니다.

$ sudo service apache2 restart