쿠...sal

[컴][웹] css 와 js 로 만든 loader 관련 link

css 와 js 로 만든 loader

Loaders and Spinners - a Collection by Tim Holman on CodePen

[컴][웹] Medium Editor 사용해 보기

medium editor

medium site 에서 사용하는 editor 와 같은 기능을 제공한다.

GitHub - yabwe/medium-editor: Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution.

장점

화면에서 버튼을 이용해서 바로 추가적인 tag 를 넣을 수 있다. (underline, bold 등)

버튼bar 가 아닌 bubble tip 버튼을 이용해서 편집을 하기에 좀 더 직관적인다.

다양하게 확장이 가능하다.(extension)[ref. 1]

image insert

image 는 그냥 끌어다 놓으면 된다. 다만 이경우에 data:image/png 등의 모습으로 insert 된다. 이녀석은 server 단에서 image 로 변환하면 된다. 자세한 것은 아래 글을 참고하자.

php - Uploading image (as data:image/png:base64) to webserver - Stack Overflow

local 에서 사용해보기

아래 4개의 파일을 경로에 맞춰서 local 에 넣자. 그리고 absoulte-container.html 을 실행하면 medium editor 를 사용해 볼 수 있다. 직접 demo 를 확인하고 싶다면 여기로 가자

<medium-editor>/dist/css/medium-editor.css
<medium-editor>/dist/css/themes/default.css
<medium-editor>/dist/js/medium-editor.js
<medium-editor>/demo/absolute-container.html

버튼 기능 확장

medium editor 의 버튼을 확장할 수 있다. 즉, 버튼을 추가하고, 원하는 기능을 넣을 수 있다. 자세한 사항은 아래 글에서 확인하자.

Walkthrough - Building a Button

예제

아래처럼 editor의 toolbar 에 highlighter 를 추가할 수 있다.

var editor = new MediumEditor('.editable', {
    toolbar: {
        buttons: ['bold', 'italic', 'underline', 'highlighter']
    },
    extensions: {
        'highlighter': new HighlighterButton(),
        ...
    }
});

HighlighterButton class 는 위 글에서 code 를 옮겨왔다. 아래 처럼 자신이 원하는 버튼 기능을 만들면 된다.(자세한 것은 위링크를 확인하자)

rangy.init();
var HighlighterButton = MediumEditor.Extension.extend({
  name: 'highlighter',

  init: function () {
    this.classApplier = rangy.createClassApplier('highlight', {
        elementTagName: 'mark',
        normalize: true
    });

    this.button = this.document.createElement('button');
    this.button.classList.add('medium-editor-action');
    this.button.innerHTML = '<b>H</b>';
    this.button.title = 'Highlight';

    this.on(this.button, 'click', this.handleClick.bind(this));
  },

  getButton: function () {
    return this.button;
  },

  handleClick: function (event) {
    this.classApplier.toggleSelection();

    // Ensure the editor knows about an html change so watchers are notified
    // ie: <textarea> elements depend on the editableInput event to stay synchronized
    this.base.checkContentChanged();
  },

  // 파란색 함수는 이미 효과가 적용된 text 를 select 했을 때 
  // 버튼이 눌러진 모습을 표현하기 위한 것이다.
  isAlreadyApplied: function (node) {
    return node.nodeName.toLowerCase() === 'mark';
  },

  isActive: function () {
    return this.button.classList.contains('medium-editor-button-active');
  },

  setInactive: function () {
    this.button.classList.remove('medium-editor-button-active');
  },

  setActive: function () {
    this.button.classList.add('medium-editor-button-active');
  }
});

References

[컴][웹] jquery 를 사용하지 않는 markdown editor

마크다운 에디터 / js editor

jquery 를 사용하지 않는 markdown editor

JavaScript Markdown Editor - SimpleMDE : 괜찮은 markdown Wysiwyg editor 이다. preview 기능도 제공한다.
Medium Editor : GitHub - yabwe/medium-editor: Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution.

demo: http://yabwe.github.io/medium-editor/
다양한 extension 을 지원한다. 그리고 화면에서 바로 편집이 가능한 button 을 제공한다. html/markdown 로 편집이 가능하다.

Server-Side Event(SSE)

여기서는 ref. 2 에 있는 이야기의 일부를 다룬다. 되도록 ref. 2 내용 전체를 보는 것이 더 도움이 될 듯 하다.

대략적으로 이야기하면, 이녀석은 기본적으로 ajax 로 했던 polling 을 browser 가 대신해준다고 생각하면 된다. 즉, polling 을 사용했어야 하는 모든 경우에 사용할 수 있다. 그리고 polling 이 끊겼을때등에 대한 처리에 관한 설정(id 같은, ref. 2를 참고) 도 가능하기 때문에 훨씬 편리하고 좋다.

그리고 ref.2 에 보면 SSE 는 http protocol 로 만들어졌다고 한다. 그래서 이것을 실행하는 주체는 browser 안에서 layer 가 좀 다를 수는 있지만, js script 내에서 polling 을 구현한 것이랑 거의 다를 바가 없을 듯 하다. 여하튼 ref. 2 에서는 이것을 event streaming 이라고 부른다.

event streaming 을 close 하는 법

이렇게 주기적으로 browser 가 server로 부터 event 를 받아오는데, 이것을 close 하는 방법이 2가지 있다.

서버에서 close 하는 법 :

Content-Type 이 text/event-stream 가 아닌 response 를 보내거나
200 이외의 HTTP status 를 보낸다.

client 에서 close 하는 법

source.close();

다만 이런 방법으로 Event streaming 을 끝내지 않고, 만약 network 가 끊어진 상황, 즉 browser 가 아예통신을 못하거나 한 상황에 의해 event streaming 이 끊긴 경우라면, browser 가 알아서 주기적으로 연결을 위해 시도를 한다.

message event

기본적으로 발생시키는 event 는 message event 이다. 하지만, server 의 응답에 "event" 를 정의해서 browser 로 하여금 새로운 event 를 발생시키도록 할 수 있다.

event: servertime
data: The server time...

source.addEventListener('servertime', function(event) {
    document.getElementById("result").innerHTML += event.data + "<br>";
});

Response

header 조건

Content-Type: text/event-stream
Cache-Control: no-cache

body

data: data_you_want_to_put

reponse body 이 딱 data 만 있으면 된다. 다른 option 들도 존재한다.(ref. 2 참고)

data: The server time...

Security

보안상의 이슈로 client 에서 event handler 를 구현할 때 event 의 origin 을 check 하라고 한다.[ref. 2]

source.addEventListener('message', function(e) {
  if (e.origin != 'http://example.com') {
    alert('Origin was not http://example.com');
    return;
  }
  ...
}, false);

References

[컴][DB] MySQL 에서 transaction 과 isolation level

mysql / mysql race condition / read shadow read /lock

MySQL 에서 transaction 과 isolation level

아래는 정리되지 않은 글이다. 정리는 추후에...

mysql 의 default isolation level

MySql 의 InnoDB 는 Repeatable-read 가 기본 isolation level 이다.

기본 sql standard

sql에서 Repeatable-read 는 아래 3가지를 만족한다.

dirty reads (non committed data)
non repeatable reads (executing the same query twice should return the same values)
allows phantom reads (new rows are visible).

MY SQL 의 default isolation 변경법

실행시에 --transaction-isolation=level option 을 사용하면 된다.(참고)

현재 isolation level 확인방법

-- to check the current isolation level
SHOW variables like 'tx_isolation'

isolation levels

SQL Server 트랜잭션 잠금 및 행 버전 관리 지침 | Microsoft Docs
SERIALIZABLE : REPEATABLE READ 보다 더 엄격 하다. XA transactions 이나 concurrency 와 deadlocks의 troubleshooting 을 위해서
REPEATABLE READ : 가장 높은 수준의 consistency(일관성)
READ COMMITTED : locking 에 대한 overhead 가 더 중요해서 precise consistency 와 반복적인 결과들이 덜 중요할때 사용할 수 있다.
READ UNCOMMITTED : READ COMMITTED 와 같다. 단 dirty read(select 가 nonlocking 된 상태로 수행된다.) 가 허용된다.(consistency 를 보장하지 않는다.)

격리 수준	커밋되지 않은 읽기	반복되지 않는 읽기	가상
READ UNCOMMITTED	예	예	예
READ COMMITTED	아니요	예	예
REPEATABLE READ	아니요	아니요	예
스냅숏	아니요	아니요	아니요
직렬화 가능	아니요	아니요	아니요

가상읽기(Phantom read)가 가능하기 때문에 만약 아래와 같은 2개의 transaction 이 동시에 실행되는 경우 transaction 1 의 첫 SELECT 와 두번째 SELECT 가 다른 결과를 같게 된다. (두번째 select 의 결과 row 가 더 많을 것이다.)

-- Transaction 1
SELECT * FROM table1
SELECT * FROM table1

-- Transaction 2
INSERT INTO table1 ...

아래와 같은 transaction 이 동시에 일어나는 경우, INSERT 가 2번 된다. 이를 막기 위해 insert 시에 index 를 지정해서 넣어주면, 같은 index 에 insert 를 피할 수 있다. 하지만 문제는 끝부분에서 중복이슈는 없지만, 중복 이슈와 상관없는 경우에도 insert 가 실패하기 때문에 문제가 될 수 있다.

그리고 상품이 2개이상이 동시에 열리는 경우 2개의 상품의 마지막투자가 같은 순간에 이뤄지면, 둘다 같은 index 를 next 로 잡아서 insert 를 할 것이고, 그것이 충돌을 일으킬 수 있다.

해결책

결국 queue 를 두는 방식으로, 즉 worker 로 넘기는 방식을 쓰기로 했다. 아무래도 그래야만 consistency 가 유지될 수 있다고 본다.

-- Transaction 3
SELECT * FROM table1 ...
-- insert depending on the result of the select
INSERT INTO table1 ...

References

[컴][하드웨어] GPU 의 memory bandwidth 와 VRAM

GPU 의 memory bandwidth 와 VRAM

다음은 ref. 1 의 "Memory Bandwidth, Memory Capacity" 부분을 의역한 내용이다.

----

메모리 대역폭(memory bandwidth) 는 GPU 의 VRAM 에 한번에 얼마나 많은 양을 넣고(copy to), 뺄수(copy from) 있는 지를 알려준다. 당연한 이야기지만, 같은 해상도(resolution)에서 시각효과(visual effects) 가 많을 수록 더 높은 memory bandwidth 가 필요하다.(더 많은 data 를 한 번에 옮겨야 하니.)

VRAM 의 총용량은 GPU 의 다른 중요한 요소다. 필요한 VRAM 의 양이 현재 가능한 리소스를 넘어선다면, 게임은 계속 돌겠지만, 이 부족한 memory 부분만큼 CPU 의 main memory 를 이용하게 된다.

이것은 GPU 가 DRAM 에서 data 를 가져오게 돼서, GPU 의 VRAM 에서 가져오는 시간보다 더 오래 걸리게 된다. 결국 이것이 게임화면의 버벅임을 만들게 된다.

그래서 VRAM 의 양이 중요하긴 하지만, 일부 low-end 그래픽카드는 쓸데없이 VRAM 이 많은 경우가 있다. 즉, VRAM 이 부족해 지기 전에 다른 부분에서 bottleneck 이 걸릴 수가 있다. 그러므로 이런 경우를 방지하기 위해 benchmark 결과등을 잘 살펴서 구매를 할 필요가 있다.

---

Memory Bandwidth Specification

GPU 와 VRAM 간의 memory bandwidth 는 GDDR 의 spec. 을 확인해 보면 된다. GDDR6가 요즘 나오고 있다. 고대역폭을 위해 새롭게 만든 HBM(High bandwidth memory) 이라는 스펙도 있다. 이녀석은 GDDR6가 나오고는 경쟁력이 확실히 많이 떨어졌다.

GDDR6의 데이터 전송 속도는 최대 18Gbps로 고성능 GPU의 384비트 메모리 버스에선 864GB/s의 대역폭((18Gbps * 384bit )/ 8bit = 864GB/s)이 나온다.

References

How Graphics Cards Work - ExtremeTech

[컴][웹][보안] KISA 웹 취약점 점검 요청

무료 취약점 점검 / 웹 취약점 점검 요청

KISA 웹 취약점 점검 요청방법

필요한 요소

중소기업 확인서
신청서(신청서 다운로드)
공문

공문에는 아래의 내용이 포함되어 있어야 합니다.
1. 한국인터넷진흥원으로부터 웹취약점 점검 시 발생할 수 있는
홈페이지 접속 중단, 서버 장애 등 위험성에 대해서 고지를 받았고 인지하였음
2. 웹취약점 점검 시 홈페이지 접속 중단, 서버 장애로 인한 고객 손실 피해 등
어떠한 경우에도 한국인터넷진흥원에 민사,형사상 책임을 묻지 않겠음

3. 한국인터넷진흥원에서 점검한 내용은 증빙자료, 홍보 등의 수단으로 사용하지 않겠음

자세한 사항은 여기에서 전화번호 또는 이메일로 문의하면 답변해 준다.

css 와 js 로 만든 loader

medium editor

장점

image insert

local 에서 사용해보기

버튼 기능 확장

예제

See Also

References

jquery 를 사용하지 않는 markdown editor

See Also

Server-Side Event(SSE)

event streaming 을 close 하는 법

message event

Response

header 조건

body

Security

References

MySQL 에서 transaction 과 isolation level

mysql 의 default isolation level

기본 sql standard

MY SQL 의 default isolation 변경법

현재 isolation level 확인방법

isolation levels

해결책

See Also

References

GPU 의 memory bandwidth 와 VRAM

Memory Bandwidth Specification

References

KISA 웹 취약점 점검 요청방법

필요한 요소