[컴] kafka 개발용, docker

디버깅 / debug / dev / 개발 할 때 손쉽게 카프카 사용

kafka 개발용, docker

• bitnami/kafka - Docker Image | Docker Hub –> ‘Apache Kafka development setup example’

간단하게 docker compose up 으로 kafka 를 실행해서, 개발시 사용할 수 있다. kafka-ui 는 browser 에서 'http://localhost:8980' 로 접근하면 사용할 수 있다.

# compose.yml
version: '3'

# https://hub.docker.com/r/bitnami/kafka 
# --> Apache Kafka development setup example

networks:
  app-tier:
    driver: bridge

services:
  zookeeper:
    image: 'bitnami/zookeeper:latest'
    ports:
      - '2181:2181'
    environment:
      - ALLOW_ANONYMOUS_LOGIN=yes
    networks:
      - app-tier
  kafka:
    # https://hub.docker.com/r/bitnami/kafka
    image: 'bitnami/kafka:latest'
    hostname: kafkah0
    container_name: kafka0
    ports:
      - '9092:9092'
    environment:
      - KAFKA_BROKER_ID=1
      - KAFKA_CFG_LISTENERS=PLAINTEXT://kafkah0:9092
      - KAFKA_CFG_ADVERTISED_LISTENERS=PLAINTEXT://kafkah0:9092
      - KAFKA_CFG_ZOOKEEPER_CONNECT=zookeeper:2181
      - ALLOW_PLAINTEXT_LISTENER=yes
    depends_on:
      - zookeeper
    networks:
      - app-tier
  kafka-ui:
    image: provectuslabs/kafka-ui
    container_name: kafka-ui-0
    ports:
      - "8980:8080"
    # restart: always
    environment:
      - KAFKA_CLUSTERS_0_NAME=local
      - KAFKA_CLUSTERS_0_BOOTSTRAPSERVERS=kafkah0:9092
      - KAFKA_CLUSTERS_0_READONLY=true
    depends_on:
      - kafka
    networks:
      - app-tier

[컴] 안드로이드 파이어폭스에서 ‘설치(install)’ 대시 ‘홈화면에 추가(Add to Home screen)’ 사용법

 

install 대신 / 설치 안하고/ 홈에 url 바로가기 / 단축 url 방법  / android firefox

안드로이드 파이어폭스에서 ‘설치(install)’ 대시 ‘홈화면에 추가(Add to Home screen)’ 사용법

‘설치’ 가 보이는 이유

website 가 자신의 website 가 Progressive Web App(PWA) 로 load 될 수 있다고 브라우저로 신호를 보낼 수 있다. 즉, site 가 installed app 처럼 보이도록 동작하게 할 수 있다라고 browser에게 알려주는 것이다.[ref. 1]

‘설치’대신 ’홈화면에추가’ 를 보이게 하려면

1. 비행기 모드(airplane mode) 로 변경한다.
2. 해당 site 에 접속한다. 당연히 사이트가 접속이 안된다고 나올 것이다. 괜찮다.
3. 그 상태에서 menu 를 보면 ‘설치’ 대신, 홈화면에 추가’ 메뉴가 보일 것이다.

Reference

1. Firefox for Android: Here is how to force “Add to Home screen” when all it gives you is “Install” : firefox

[컴][툴] PowerToys v0.66.0 의 소감

파워토이즈 팁, tips / power toys tips / how to restrict search indexing / 서치  / 검색 인덱싱 설정 방법 / 줄이는 법 / 메모리 줄이기 / 빠르게 하기 / 최적화 / 윈도우즈10 / 빠르게 / alternatives / OCR / windows 에서 OCR 사용법

PowerToys v0.66.0 의 소감

결론은 파워토이즈가 메모리를 너무 많이 먹는다. 물론 이것은 상대적인 이야기다. 기본 시작하면 60MB정도를 잡아먹는데, 이정도가 적다고 생각할 수도 있는 사이즈이긴 하다. 메모리는 당연히 powertoys 의 기능을 사용할 때마다 늘었다 줄었다 한다.

물론 여러개의 sw를 하나하나 까는 것보다는 귀찮음이 덜해서 통합팩으로서의 장점은 있다고 본다. 하지만 편리성은 있지만 개인적으로 아주 빠르다는 느낌은 적다.

개인적으로 가장 쓸모있다고 여기는 기능은 ’텍스트 추출기’이다. 계속 띄워놓지 않고 필요할때만 켜서 사용해도 나쁘지 않다. 단축키는 원하는대로 설정할 수 있으나, 기본값은 win_key + shift + T 이다.

지원하는 기능들

• 항상 위
• 절전 모드 해제
• Color Picker
• FancyZones
• 파일 Locksmith
• 파일 탐색기 추가 기능
• 호스트 파일 편집기
• Image Resizer
• Keyboard Manager
• 마우스 유틸리티
• PowerRename
• PoerToys Run
• 빠른 강조
• 화면 눈금자
• Shortcut Guide
• 텍스트 추출기
• 화상회의 음소거

일부 기능의 비교

PowerToys.PowerLauncher(PowerToys Run) vs Launchy

기능의 차이는 있지만, launchy 가 훨씬 나아보인다.

• Launchy: The Open Source Keystroke Launcher

file LockSmith vs LockHunter

개인적으로는 이전부터 LockHunter 를 써왔다. 그래서 비교를 대충 했다.

file Locksmith 와 LockHunter 의 메모리를 비교해보면, file locksmith 는 메모리를 36MB 정도 사용한다. LockHunter 는 6MB정도 사용한다. 화면이 뜨는 속도도 LockHunter가 훨씬 빠르다.

그래서 내 의견은 power toys 의 locksmith 는 끄고, lockhunter 를 사용하는 것이 나아 보인다.

file Locksmith 와 LockHunter 의 메모리 비교

See Also

1. windows 10 에서 검색에서 start menu 의 결과가 표시 되지 않을 때
2. windows 에서 launchy 대신 사용할 수 있는 program

[컴][툴] lite-xl text editor

 

텍스트 에디터 / 서브라임텍스트 대체재 / alternatives / sublime /

lite-xl text editor

요즘 많이 쓰는 text editor 는 sublimeText 이다. 아직은 대체재를 찾지 못하고 있는데, lite-xl 을 보았다. 이것은 어떨까 싶다.

잠깐 사용해본 느낌은 아직 view는 덜 다듬어졌다. 다만 사용성은 나쁘지 않다. 조금씩 사용해봐야 겠다.

처음 app을 열때의 속도도 좋다

• GitHub - lite-xl/lite-xl: A lightweight text editor written in Lua

[컴] Spring 의 ErrorController

 

/error page / 스프링 / 에러 처리 / 왜

Spring 의 ErrorController

기본적으로 set 이 되어 있다. 그 class 가 BasicErrorController 이다.

• 코드 참고 : spring-boot/ErrorMvcAutoConfiguration.java

따로 ErrorHandler 를 정의하지 않으면 BasicErrorController 가 사용된다. 이 controller 는 /error page 에 mapping 되어 있다. 즉, spring 으로 요청이 들어오고, error 가 발생하면 /error 로 redirect 시켜서 static page 가 보이게 된다.

만약 ErrorController 를 implement 한 controller 가 존재하면 그것이 BasicErrorController를 대체하게 된다.

ref. 1에 @ControllerAdvice, ResponseEntityExceptionHandler 등의 이야기들이 더 나온다.

Reference

1. java - Using Spring Boot’s ErrorController and Spring’s ResponseEntityExceptionHandler correctly - Stack Overflow

[컴][웹] vuejs2 unit test 에 jest 사용법

unittest / unit test / jest / js unittest / vuejs unit test

vuejs2 unit test 에 jest 사용법

• 예시: Vue Template - CodeSandbox
• Testing — Vue.js

절차

1. npm i -D jest
2. *.spec.js 생성, *.test.js 도 가능
3. npm run test 생성, package.json
4. npm run test

*.spec.js 생성

아래처럼 apis.js 가 있을때, apis.spec.js 를 만들고, jest 를 run 하면 jest 가 .spec.js 들을 가져다 실행하게 된다.

- <myproj>/
    - apis.js
    - apis.spec.js

npm run test

// package.json
{
  ...
  "scripts": {
    "test": "jest",
...

npm run test

mock 사용

• Mock Functions · Jest

Reference

1. Getting Started · Jest
2. How to Unit Test a Method in a Vue.js Component using jest - Stack Overflow

[컴] js에서 BOM(byte order marker) 검사

 

자바스크립트에서 BOM 검사 / js 에서 bom 검사 / bom 체크 / check /

js에서 BOM(byte order marker) 검사

다음 코드는 앞의 10 byte 만 가져와서 BOM 을 확인하는 code이다.

• Byte order mark - Globalization | Microsoft Learn

function _isUtf8(file, callback) {
  const slice = file.slice(0, 10)
  const fr = new FileReader()
  
  fr.onload = (e) => {
    // e.target.result : ArrayBuffer
    const view = new Uint8Array(e.target.result)
    // EF BB BF
    // 0xef, 0xbb, 0xbf
    let isUtf = false
    if (view[0] === 239 && view[1] === 187 && view[2] === 191) {
      isUtf = true
    } else {
      // do nothing
      isUtf = false
      // console.error('File has byte order mark (BOM)')
    }
    callback(isUtf)
  }
  
  fr.readAsArrayBuffer(slice)
}

async/await version

// asyn/await version
function _isUtf8(file, callback) {
  const slice = file.slice(0, 10)
  const fr = new FileReader()

  const promise = new Promise(function (resolve, reject) {
    fr.onload = (e) => {
      // e.target.result : ArrayBuffer
      const view = new Uint8Array(e.target.result)
      // EF BB BF
      // 0xef, 0xbb, 0xbf
      let isUtf = false
      if (view[0] === 239 && view[1] === 187 && view[2] === 191) {
        isUtf = true
      } else {
        // do nothing
        isUtf = false
        // console.error('File has byte order mark (BOM)')
      }
      resolve(isUtf)
    }
  })
  fr.readAsArrayBuffer(slice)
  return promise
}

See Also

1. 쿠…sal: [컴][웹] browser에서 파일로 csv file 을 읽어서, 화면에 뿌려주는 js 코드