[컴] github 는 어떻게 ssh:// 를 지원할까?

git repository deploy key / private key / ssh login in git

github 는 어떻게 ssh:// 를 지원할까?

github 의 deploy key

github 에서 deploy key 를 설정할 수 있다.

이 key 를 설정하면, 관련된 private key 를 갖고 ssh:// 를 이용해서 public key 를 갖고 있는 repository 에 접근할 수 있다. 자세한 내용은 위 link 를 확인하자.

github 는 이 ssh server를 가지고 있는가?

ssh 접근을 위해 ssh server 가 필요할 것이라 생각했는데, github 가 ssh server를 가지고 있는지가 궁금했다. github 자체는 공개된 source 가 아니기에 gogs 를 통해 확인해 봤다.

/conf/app.ini 에서 START_SSH_SERVER = false 을 설정하면, gogs 가 자체적으로 갖고있는 ssh server 가 아닌 외부의 ssh server를 사용하게 된다.

START_SSH_SERVER = false

즉, gogs(github 라고 보면 될듯)는 자체적으로 ssh server 를 가지고 있으며, 이것 대신에 외부 ssh server 를 사용할 수도 있다.

package route

import (
    ...
    // https://github.com/gogs/gogs/blob/b5d47b969258f3d644ad797b29901eb607f6b94f/internal/ssh/ssh.go
    "gogs.io/gogs/internal/ssh"
    ...
)
...
func GlobalInit(customConf string) error {
    ...
    // https://github.com/gogs/gogs/blob/b5d47b969258f3d644ad797b29901eb607f6b94f/internal/route/install.go
    if conf.SSH.StartBuiltinServer {
        ssh.Listen(conf.SSH.ListenHost, conf.SSH.ListenPort, conf.SSH.ServerCiphers, conf.SSH.ServerMACs)
        log.Info("SSH server started on %s:%v", conf.SSH.ListenHost, conf.SSH.ListenPort)
        log.Trace("SSH server cipher list: %v", conf.SSH.ServerCiphers)
        log.Trace("SSH server MAC list: %v", conf.SSH.ServerMACs)
    }

[컴] flow 자동화 해주는 tool

automation / 자동화 / workflow / work flow / webhook / 자동 메시지 전송 / 워크플로우 자동화

flow 자동화 해주는 tool

automatisch 는 좋은 tool로 보인다. 일단 이곳에서 제공하는 여러 web service 들을 묶어서 하나의 flow 를 구성하는 데 유용할 듯 하다.

local 에서 docker 로 서버를 띄우고 flow 를 설정할 수 있다.

예를 들면, github 에 commit event 가 오면, telegram 으로 message 를 날려라 등의 flow 를 지정할 수 있을 듯 하다.

Reference

  1. GitHub - automatisch/automatisch: The open source Zapier alternative. Build workflow automation without spending time and money.

[컴][웹] css 관련 알아두면 좋은 이야기

 

css 최적화 / inline style 을 쓰면 안되는 이유 / css design / 아키텍쳐 / 테일윈드

css 관련 알아두면 좋은 이야기

ref. 1 의 글에서 개인적으로 궁금했던 내용만 정리했다. 전체내용은 ref.1 을 통해 파악하자.

인라인 스타일의 주요 문제

  • 보다 강력한 CSS 기능에 접근하기 어렵다는 것 : 의사 선택자(pseudo selector) 및 미디어 쿼리와 같은
  • 다음을 leveraging 하기 어렵다
    • 공유된 디자인 토큰
    • 캐싱
    • 정적 분석
    • 전처리

CSS in JS

  1. Styled Components, Emotion등:
    • 서버 사이드 렌더링의 효율성 문제
    • 캐싱 문제
    • 클라이언트 런타임 비용
  2. 컴파일 단계의 컴포넌트에서 스타일시트를 추출하도록 변화함: Vanilla extract, Linaria 및 Compiled와 같은 도구

tailwind 의 부상

me: tailwind 는 처음은 아주 적은 단위로 쪼개서 css 를 생성하고, 나중에 묶을 필요가 있을 때 묶는 방식이라고 보면 될 듯 하다. 예를 들어 color: rgb(254 242 242); 같은 1개의 style 도 tailwind 에서는 text-red-50 로 만들어놨다.(참고: Tailwind CSS Cheat Sheet)

  • 지속해서 이름을 지정할 필요가 없다
  • 적당한 시점에 추상화할 수 있는 두 가지 기법을 제공
    • 첫 번째는 블록(OOCSS와 유사)을 나타내는 공유된 CSS 클래스를 만드는 방법
    • 컴포넌트 기반 프레임워크를 사용할 때 추천되는 방법인 중복된 클래스를 재사용할 수 있는(React, Vue, Solid, Svelte 등) 컴포넌트로 추출하여 공유하는 것

Reference

  1. The evolution of scalable CSS
  2. (번역) 확장 가능한 CSS의 진화 | Ykss

[컴][웹] 여러나라에서 사용하는 client 에서 서버로 date 값을 보내야 하는 경우

웹브라우저(web browser) javascript 에서 utc 값을 얻는 법

여러나라에서 사용하는 client 에서 서버로 date 값을 보내야 하는 경우

만약 client(web browser) 에서 여러나라에서 같은 ui 에 접속해서 date를 선택하고, 이 date 값을 server 로 전송하는 경우 문제가 있다.

예를 들어 “‘2022-12-25’ 에 대한 정보를 보여줘”라고 하는 경우다. 이 경우 2022-12-25 에 대해서 각 나라마다 unix-timestamp 값은 다르게 된다.

예를 들어 한국(KST)에서 ‘2022-12-25T00:00:00’ 이라면, 1671926400000 ms 값이 나온다. 그런데 UTC 인 경우 1671894000000 ms 값을 갖게 된다.

utc 로 통일

그래서 명확하게 하려고, 무조건 UTC date 로 던지게 한다. ‘2022-12-25’ 를 보내야 하는 경우라면, ‘2022-12-25T00:00:00Z’ 를 보내거나, 1671894000000 를 보내도록 한다.

아래처럼 간단히 할 수 있다.

var d = new Date('2022-12-25')

주의 참고 : Date() constructor - JavaScript | MDN

date-only string 을 argument로 넣으면, 이 값을 UTC 로 다뤄서, Date instance 를 만든다. 예를 들면, “2022-12-25”. 그러나 “2022-12-25T11:00” 를 하면 이것은 local 값으로 처리한다.

new Date('2022-12-25')
Sun Dec 25 2022 09:00:00 GMT+0900 (한국 표준시)
new Date('2022-12-25T00:00')
Sun Dec 25 2022 00:00:00 GMT+0900 (한국 표준시)

js 에서 타임존을 얻는 법

[컴] mysql 에서 db 의 timezone 과 다른 timezone 에서 요청하는 경우

 

mariadb / timezone 이슈 / db database

mysql 에서 db 의 timezone 과 다른 timezone 에서 요청하는 경우

만약 특정 일자가 ‘KST’ 로 Timestamp 값으로 저장되어 있는 경우, 이것을 ’영국’에서 누군가 조회를 하는 경우를 생각해보자.

+---------------+
| 서울(+09:00)  |   <--- 영국(00:00)
+---------------+

database 의 time_zone 사용

timezone 이 다른 경우 timezone 을 넣은 query 사용법

  • https://medium.com/@kenny_7143/timestamp-comparison-with-time-zone-in-mysql-6c8eadd8cf24
-- @@SESSION.time_zone 설정
SET time_zone='UTC';
SELECT * FROM time_test_2 WHERE log_time between '2020-03-12 13:30:00' AND '2020-03-12 14:30:00';

-- CONVERT_TZ 의 사용
SELECT CONVERT_TZ(log_time, @@SESSION.time_zone, 'UTC') AS log_time, log_message FROM time_test_2 WHERE log_time between CONVERT_TZ('2020-03-12 13:30:00', 'UTC', @@SESSION.time_zone) AND CONVERT_TZ('2020-03-12 14:30:00', 'UTC', @@SESSION.time_zone);

UNIX_TIMESTAMP

  • https://dev.mysql.com/doc/refman/8.0/en/date-and-time-functions.html#function_unix-timestamp

를 보면, timestamp 에 대해서 저장된 값 그대로 return 해준다고 한다.

UNIX_TIMESTAMP([date]) … When the date argument is a TIMESTAMP column, UNIX_TIMESTAMP() returns the internal timestamp value directly, with no implicit “string-to-Unix-timestamp” conversion.

-- server 의 time_zone 은 UTC 라고 가정한다.
SELECT * FROM time_test_2 WHERE log_time between UNIT_TIMESTAMP('2020-03-12 13:30:00') AND UNIT_TIMESTAMP('2020-03-12 14:30:00');

기타

개인적으로 가장 명확한 방법은

  • client 에서 utc 로 보내게 하고,
  • server 에서는 무조건 utc 로 저장하고, 처리하는 것
  • client – 서버 사이에서는 timestamp 를 보내던지 아니면 ms 값으로 보내면 될 듯 하다.

[컴][웹] vendure 설치 및 개발용 서버 실행

/ vendure/create myapp

vendure 설치 및 개발용 서버 실행

  1. npx @vendure/create myapp
  2. cd myapp && npm run dev

windows-build-tools 설치

windows-build-tools 은 이제 node js 에 들어가 있어서 따로 설치는 필요없다.

vendure 생성 및 실행

  • npx @vendure/create myapp
  • cd myapp
  • npm run dev

database 를 선택할 때 참고

npm run build && npm run start 하는 경우

  • mariaDB 는 문제가 있다.
    • create table 을 보면 auto_increment 가 설정되어 있지 않는다.
    • 그래서 db record를 insert하는 경우에 실패한다.
  • postgresql 은 잘 동작한다.
d:\venduretest>npx @vendure/create myapp
Need to install the following packages:
  @vendure/create
Ok to proceed? (y) y

Welcome to @vendure/create v1.9.2!

Let's configure a new Vendure project. First a few questions:

√ Which database are you using? » SQLite
√ What identifier do you want to use for the superadmin user? ... superadmin
√ What password do you want to use for the superadmin user? ... superadmin
√ Populate with some sample product data? ... no / yes

Setting up your new Vendure project in d:\venduretest\myapp
This may take a few minutes...

  √ Installing dependencies
  √ Installing dependencies
  √ Generating app scaffold
  √ Initializing server

Success! Created a new Vendure server at d:\venduretest\myapp

We suggest that you start by typing:

    cd myapp
    yarn dev

Happy hacking!

d:\venduretest>cd myapp

d:\venduretest\myapp>npm run dev

> myapp@0.1.0 dev
> concurrently yarn:dev:*

yarn run v1.22.19
yarn run v1.22.19
$ ts-node ./src/index.ts
$ ts-node ./src/index-worker.ts
[worker] info 23. 1. 30. 오후 10:29 - [Vendure Worker] Bootstrapping Vendure Worker (pid: 8888)...
[server] info 23. 1. 30. 오후 10:29 - [Vendure Server] Bootstrapping Vendure Server (pid: 12072)...
[worker] info 23. 1. 30. 오후 10:29 - [Vendure Worker] Vendure Worker is ready
[worker] info 23. 1. 30. 오후 10:29 - [JobQueue] Starting queue: apply-collection-filters
[worker] info 23. 1. 30. 오후 10:29 - [JobQueue] Starting queue: send-email
[worker] info 23. 1. 30. 오후 10:29 - [JobQueue] Starting queue: update-search-index
[server] info 23. 1. 30. 오후 10:29 - [AssetServerPlugin] Creating asset server middleware
[server] info 23. 1. 30. 오후 10:29 - [EmailPlugin] Creating dev mailbox middleware
[server] info 23. 1. 30. 오후 10:29 - [AdminUiPlugin] Creating admin ui middleware (prod mode)
[server] info 23. 1. 30. 오후 10:29 - [RoutesResolver] HealthController {/health}:
[server] info 23. 1. 30. 오후 10:29 - [RouterExplorer] Mapped {/health, GET} route
[server] info 23. 1. 30. 오후 10:29 - [NestApplication] Nest application successfully started
[server] info 23. 1. 30. 오후 10:29 - [Vendure Server] ================================================
[server] info 23. 1. 30. 오후 10:29 - [Vendure Server] Vendure server (v1.9.2) now running on port 3000
[server] info 23. 1. 30. 오후 10:29 - [Vendure Server] ------------------------------------------------
[server] info 23. 1. 30. 오후 10:29 - [Vendure Server] Shop API:     http://localhost:3000/shop-api
[server] info 23. 1. 30. 오후 10:29 - [Vendure Server] Admin API:    http://localhost:3000/admin-api
[server] info 23. 1. 30. 오후 10:29 - [Vendure Server] Asset server: http://localhost:3000/assets
[server] info 23. 1. 30. 오후 10:29 - [Vendure Server] Dev mailbox:  http://localhost:3000/mailbox
[server] info 23. 1. 30. 오후 10:29 - [Vendure Server] Admin UI:     http://localhost:3000/admin
[server] info 23. 1. 30. 오후 10:29 - [Vendure Server] ================================================

See Also

  1. 쿠…sal: [컴] vendure 의 admin ui extension 만들기
  2. 쿠...sal: [컴][웹] next.js commerce + vendure 서버 실행
  3. 쿠...sal: [컴][웹] vendure 사용해 보기 : vendure의 source 로 build 해서 run 
  4. 쿠...sal: [컴] vendure server 실행하기

Reference

  1. Getting Started | Vendure docs

[컴] vendure 의 admin ui extension 만들기

reactjs / admin ui / 어드민 확장 /

vendure 의 admin ui extension 만들기

여기서는 react 를 이용해서 admin ui extension 을 만들어 보려 한다. 참고로, vendure 의 admin ui 는 angular 로 되어 있다.

동작 방법

다음 내용은 How It Works의 내용의 번역이다.

UI extension 은 Angular module 이다. 이것이 compile 된 후 compileUiExtensions function 에 의해 Admin UI application 이랑 같이 묶이게 된다. 이 compileUiExtensions function 은 @vendure/ui-devkit package에 의해 export 된다.

내부적으로 ui-devkit package는 javascript 번들들(이 번들에 당신의 extension 들도 포함된다.)의 최적화된 집합을 compile 하기 위해서 Angular CLI 를 이용한다.

Prerequisite

여기선 아래 source를 기본으로 설명한다.

여기서는 vendure source 를 직접 사용하지 않는다. 위 real-world-vendure 에서 vendure 의 source 는 node_modules 안에 들어있게 된다.

ui extension

이것은 admin ui 의 확장을 위한 것이다. Admin UI 를 extend 한 Vendure plugin 의 전체 source code 는 아래에 있다.

아래같은 구조로 파일을 추가한다.

- src/
  - ui-extensions/
    - modules/
    - my-app/
      - <react files>
    - ui-extensions.ts
  1. @vendure/ui-devkit 설치

    npm install @vendure/ui-devkit
  2. react app 생성

    여기서 이름은 my-app으로 한다.

    npx create-react-app my-app --template typescript
  3. package.json안에 homepage: "/admin/assets/react-app/" 추가

    React app 은 다음에 지정된 대로 하위 디렉터리에 복사되기 때문이다.

    // package.json
    {
        ...
        "homepage" : "/admin/assets/react-app/"
    }
  4. my-app folder에서 .env 를 생성

    port를 변경하는 이유는 Vendure server 와 충돌하지 않게 하기 위해서이다.

    # .env file
    SKIP_PREFLIGHT_CHECK=true
    PORT=3080
  5. <root>/modules/react-extension.module.ts 를 추가한다.

  6. ui-extensions.ts 을 추가

  7. /src/ui-extensions/shared-ui-extension.module.ts 는 navigation menu 를 위해 추가

  8. react app 을 build : /src/ui-extensions/my-app 에서 yarn 실행후, yarn build

  9. / 에서 yarn build 를 한다.

Reference

  1. Extending the Admin UI | Vendure docs