Translate

2023년 9월 2일 토요일

[Figma][CSS] Figma의 Text와 퍼블리싱된 HTML Text 의 모습이 다르게 나타나는 경우

 

Figma의 모습이 퍼블리싱 되었을 때 모습이 조금 달라보이는데..
그럴 수 있는건가? 라는 질문을 받았다.

그게 말이되나.. 생각했었는데 말이 되네..ㅋㅋㅋ


아래의 캡쳐 모습을 보면 미묘하게 다르다.


피그마 모습


https://www.figma.com/file/6TJcaHCKpURRyqUgLY0VQ5/Blog?type=design&node-id=0%3A1&mode=design&t=AxANBhcYjmy6FJQh-1



HTML 모습


1004lucifer

1004lucifer



[ 500% 확대한 모습 ]

피그마



HTML




일부러 간단한 페이지를 만들어서 테스트를 했는데 확실히 다르다는걸 알 수 있었다.

피그마에서 canvas 태그에 렌더링 할때 글자에 안티앨리어싱(Anti-Aliasing) 처리가 되어있는것을 알 수 있다.

글자크기가 큰 경우에는 크게 티가 안나지만 글자 크기가 작을수록 더 티가 난다.
폰트에 따라 피그마가 더 두꺼워 보이거나 얇아보일 수 있다고 생각이든다



다르다는게 확실히 검증하고나서 다시 구글 검색을 해보니 해당 이슈에 대한 글을 찾아볼 수 있었다.;;

[ figma의 폰트가 더 얇아보이는 이유 ]
  (https://jodnddus.blog/why-diff-btwn-figma-browser)

[ Figma의 글꼴 두께가 브라우저의 동일한 두께보다 가벼워 보이는 이유는 무엇입니까? ]
  (https://forum.figma.com/t/why-does-a-font-weight-in-figma-seem-lighter-than-the-same-weight-in-the-browser/2207)



2023년 1월 29일 일요일

[Kafka] Consumer Group Rebalancing 및 LAG 수치 증가 - 원인분석 및 조치사항

 


[ 이슈 사항 ]

- 카프카의 특정 레코드가 많이 쌓이는 특정 토픽에 대해서 레코드가 제대로 처리되지 못하고 적체됨.

- Consumer Group LAG(미처리 토픽 레코드 개수) 숫자가 지속적으로 증가함

- 해당 증상은 Consumer 애플리케이션을 구동 시 바로 발생하지 않고 시간이 지나고 어떤 특정 시점부터 LAG가 쌓이는 증상이 발생함.




[ 증상 ]

- 카프카 컨슈머 그룹이 지속적으로 리밸런싱 되면서 해당 토픽과 관련된 컨슈머가 레코드를 처리하지 못함.





[ 원인 분석 ]

1. Thread Dump 분석
1004lucifer
  - 쿠버네티스 컨테이너 안에 Java Thread Dump (jstack) 생성툴이 없어서 'kill -3 pid' 명령어를 이용해 덤프를 생성하려 했으나 Log4J가 아닌 Java Output 으로 생성되는 로그가 어디에 출력되는지 알 수 없어 Thread Dump 로그 추출 실패

  - 와탭 모니터링 툴이 설치 되어있다고 전달받아 해당 웹페이지 접속하여 순간의 Thread를 모니터링 함
  - 대부분의 쓰레드가 아래의 두가지 상태를 유지함.
    1. AbstractCoordinator$HeartbeatThread.run(AbstractCoordinator.java:1397)
    2. AbstractCoordinator$HeartbeatThread.run(AbstractCoordinator.java:1354)



2. Kafka - Jar 소스 디컴파일 및 분석

  1) AbstractCoordinator.java:1397
    - "하트비트가 실패하거나 코디네이터의 연결이 끊긴 경우 재시도 백오프를 기다린 후 다시 폴링" 내용과 Thread wait 수행 시 대기 시간을 주어 TIMED_WAITING 상태로 만드므로 특별히 문제가 없어보임.


  2) AbstractCoordinator.java:1354
    - 대기시간 없는 Thread wait 가 수행됨.
    - 예상하는 것으로는 컨슈머 리밸런싱이 완료 되었을 때 notifyAll 로 깨우지 않을까 생각함.
    - 그렇게되면 해당 Thread(컨슈머)는 리밸런싱이 완료 되기 전까지 동작하지 않을 것으로 예상됨.


1004lucifer
  3) 2번의 enabled를 false로 작업하는 곳 확인
    - 백그라운드로 수행되는 하트비트 쓰레드가 비활성화 된경우로 보여짐.



3. 다시 Thread Dump 확인

  1) 위와 같은 코드인경우 컨슈머 쓰레드들이 점차 (메뉴)2-1 => 2-2 상황의 쓰레드로 변할 것으로 예상함.

  2) 와탭에서 (메뉴)2-1 과 같은 쓰레드의 상태를 갱신 시 모두 (메뉴)2-2 상황으로 변함 (서버에서는 컨슈머 리밸런싱 상태)




4. 리밸런싱 조건 확인 및 조치 가능한 사항 확인

  - 리밸런싱 조건 (아래의 기준을 봤을 때 2번의 상황이 의심됨)


  - 'max.poll.records' 의 기본값음 500이라고 함.

  - 위 값이 기본값인경우 하나의 컨슈머에서 최대 500개까지의 레코드를 수행완료 후 카프카에 오프셋 업데이트를 수행하는데 그전에 poll interval 시간이 되어 리밸런식을 할 수 있다는 가능성이 있다고 생각함.



5. 서버 리밸런싱 모니터링
1004lucifer
  1) 서버에서 watch 명령어로 컨슈머 그룹 상태를 지속적으로 확인
    - watch './kafka-consumer-groups.sh  --bootstrap-server 카프카서버 --describe --group 토픽명'

  2) 리밸런싱 상태에서 중간중간 컨슈머가 붙음그리고 LAG 개수가 적은 것은 한두번 업데이트 되다가 다시 리밸런싱 상태로 돌아감.
    - LAG 개수가 많은것은 개수가 줄지 않고 개수가 적은것만 줄어듬




[ 원인분석 결과 및 조치사항 ]

- 위의 증상을 확인 시 카프카의 max.poll.records, max.poll.interval.ms 설정의 조정으로 이슈가 해결될 수 있지 않을까 예상이 된다.

- 아래와 같은 내용이 있는 것으로 보아 max.poll.records 옵션만 줄이더라도 성능에 이슈가 해결될 수 있을것 같음 (값을 1로 변경해 보는것을 권장하는 글도 있음)


위 분석결과에 따라 max.poll.records 의 설정값을 1로 변경 후 더이상 리밸런싱 이슈가 발생하지 않음

(다만 서버 배포의 경우 컨테이너가 교체가 되면서 그때는 리밸런싱이 발생함)




PS.

이후에 시간이 좀 지나고 LAG가 적체되는 증상이 발생했었는데 증상 및 조치사항은 다음과 같았다.

 - 리밸런싱을 발생하지 않고있음

 - Consumer 애플리케이션 1건 처리속도가 40~60초 정도로 퍼포먼스가 너무 떨어짐
   (평소 1건 처리속도 0.1~0.3초 정도 걸림)

 - DB 확인 시 insert / update 하는 주 테이블이 Lock이 걸려서 발생한 이슈였음.
   (DB Lock이 풀리고 LAG는 다시 줄어들어 정상화 됨)

 - DB Lock을 최소화 하기 위해 이후 추가 조치를 수행함.



참고 URL
 - https://techblog.gccompany.co.kr/카프카-컨슈머-그룹-리밸런싱-kafka-consumer-group-rebalancing-5d3e3b916c9e
 - https://huisam.tistory.com/entry/kafka-consumer?category=849126



2022년 9월 4일 일요일

[Linux] MTU 값에 따른 Apache <=> Tomcat 통신 불량 이슈 (mtu9000)


최근에 기이한 경험을 하게 되었다.
잘 되고 있던 서버에서 갑자기 웹페이지가 뜨지 않는다는 이슈였다.

브라우저 개발자도구를 통해 확인해보니 <head> 영역에 있는 특정 css 파일이 로드가 되지 않았다.
하지만 개발하던 담당자의 PC에서는 정상적으로 보였는데 알아보니 WAS로 바로 붙으면 문제가 없지만 Apache를 통해서 웹 접근 시 특정 파일이 로드가 되지 않았다.


증상

1. 브라우저에서 Tomcat 에 직접 접속할 시 이슈 없음

2. 브라우저에서 Apache를 통해 접속 시 특정 파일(css)이 로딩이 되지 않음



환경 및 구성

- 네이버 클라우드 서버를 사용 (Linux)

- WEB1, WEB2 <=> WAS1, WAS2 구성


1004lucifer

원인 분석 및 해결

1. Apache, Tomcat 설정에 별다른 문제가 없음

2. 별다른 서버 설정 없이 이슈가 발생함.

3. WAS 에서 localhost 로 telnet 을 통해 해당 css 파일 정상적으로 로딩됨.

4. Apache 서버에서 WAS 서버로 telnet을 통해 해당 css 파일 요청 시 응답이 받다가 중간에 끊김.

5. 어플리케이션을 통한 요청이 아니라 OS 명령어인 telnet 을 통해서 테스트를 했기에 OS 또는 네트워크의 이슈라고 추측함.

6. 인프라 및 네트워크 담당자 원인분석 중 사내 OS셋팅 정책이 mtu1500 인데 해당 서버에서는 mtu9000 으로 되어있는 것을 확인

7. 모든 서버의 mtu값을 1500으로 변경 및 OS 재기동 후 Apache 서버에서 WAS 서버로 telnet으로 HTTP 요청 시 정상적으로 응답 하는 것을 확인 (이슈 해결)



결론

1. 갑작스럽게 발생한 이슈이다보니 네이버클라우드에서 VM관련이나 네트워크와 같은 어떠한 작업이 수행한 이후에 이와 같은 이슈가 발생했다고 추측이됨.


2022년 7월 3일 일요일

[IntelliJ] 30일 무료 사용 버전 (오프라인 환경)



IntelliJ가 어느순간부터 인터넷에 연결이 안되면 30일 무료사용을 할 수 없게 변경이 되었다.


오프라인에서 30일 무료로 사용이 가능한 버전은 2021.1 (2021.1.3) 버전이다.
(윈도우 버전 기준)


위 버전을 다운로드 받아서 인터넷이 안되는 PC에서 30일 Trial 기능을 이용하면 된다.


최신버전이 아닌 이전버전의 IntelliJ를 다운받으려면 아래의 링크로 이동하면 된다.
 - https://www.jetbrains.com/idea/download/other.html


PS.
30일 Trial 버전 외에도 idea.key파일을 이용해 인텔리제이 정품인증을 받을 수 있었지만..
현재 최신버전 (2022.1.3) 에서 key 파일을 이용해 정품인증을 받았더라도 JetBrains Account에 로그인을 하지 않으면 인증파일이 없어지면서 인증이 풀리는 증상이 발생하게 되었다.

결국 예전과 같이 원래 가지고 있는 라이선스를 이용하여(idea.key) 오프라인에서 작업하려 할 시 앞으로는 그냥 위 2021.1.3 버전으로 작업을 하려 한다.


2022년 2월 6일 일요일

[Windows] 윈도우 10 자동로그인 설정 (레지스트리 수정 X)

 


최근 Windows 10 자동로그인을 두어번정도 설정을 하게 되었는데 굉장히 편리한 방법이 있어서 이렇게 블로그에 정리를 한다.


대부분의 블로그에서 설명하는 방법은 사용자계정(netplwiz) 을 열어서 사용자 이름과 암호를 입력해야 이 컴퓨터를 사용할 수 있음 항목에 체크하는 방법으로 알려주고있고, 해당 항목이 없는경우 레지스트리를 수정하는 방법으로 알려주고 있다.

나도 얼마전까지 위와 같은 방법으로 하다가 오늘 해당 방법을 다시 찾기위해 검색하던 중 엄청나게 쉬운 방법이 있는걸 알게되어 기록을 남긴다.


방법

1. Autologin 프로그램 다운로드

  - 공식 링크: https://docs.microsoft.com/ko-kr/sysinternals/downloads/autologon

  - 개인저장소: https://www.mediafire.com/file/0vgofsk7fbj5qov/AutoLogon_v3.10.zip/file

1004lucifer

2. Autologin 압축 풀기 및 실행


3. 윈도우 패스워드 입력 후 Enable 버튼 선택



PS.

Autologin 프로그램 다운로드 링크 주소를 보면 알겠지만 마이크로 소프트에서 공식적으로 제공하는 툴이며 안심하고 사용할 수 있다.

Microsoft 공식 문서 Windows에서 자동 로그온을 설정하는 방법(링크) 에서도 해당 프로그램에 대한 언급이 나와 있다.



참고

 - https://coolenjoy.net/bbs/37/229554

 - https://docs.microsoft.com/ko-kr/troubleshoot/windows-server/user-profiles-and-logon/turn-on-automatic-logon

 - https://docs.microsoft.com/ko-kr/sysinternals/downloads/autologon


2022년 1월 16일 일요일

[React] 하위 컴포넌트 함수 실행하기 (Using Redux connect)



환경

 - 언어: TypeScript

 - 기타: Redux connect 를 사용하는 상황



방법

 - GitHub 예제소스: https://github.com/1004lucifer/Test-JavaScript/tree/master/React/typescript-call-child-method-using-redux-connect

 - 데모 페이지: https://1004lucifer.github.io/Test-JavaScript/React/typescript-call-child-method-using-redux-connect/build/index.html


동작 화면



App.tsx (메인 컴포넌트)


AppSubNormal.tsx (일반 하위컴포넌트)


AppSubChanged.tsx (부모 컴포넌트에서 사용 가능하도록 수정)




참고
 - https://ko.reactjs.org/docs/forwarding-refs.html
 - https://ko.reactjs.org/docs/hooks-reference.html
 - https://stackoverflow.com/questions/55180124/forwarding-ref-in-a-functional-component-with-react-redux-v-6-0-1


2022년 1월 15일 토요일

[IntelliJ] src/main/java 디렉토리 하위 java 외 다른 파일(xml, png, ttf등) 빌드 안되는 이슈 해결방법

 



이슈

 - src/main/java 디렉토리 하위의 소스에 TTF 폰트파일과 png 파일이 있는 경우가 있었는데..
   다른 이클립스 사용하는 분들은 별 문제가 없어보였지만 IntelliJ를 사용하는 나는 해당 파일이 classes 디렉토리로 빌드가 되지 않아서 한동안 resources 디렉토리로 해당 경로와 동일하게 디렉토리를 만든 후 복사해서 사용하고 있었다.


알고보니 일반적으로 많이 사용하는 java, kt(코틀린) 과 같은 개발언어 파일만 빌드 시 classes 디렉토리에 들어가는 설정이 있었다.

설정위치와 방법은 아래와 같다.
 - Settings => Build, Execution, Deployment => Compiler

!?*.확장자명   <= 구분자(;) 를 확장자 패턴 사이에 넣어줘야 한다.






참고
 - https://www.jetbrains.com/help/idea/resource-files.html