Computation suite

파이썬의 특수 내장 변수 __name__, __file__  중에 __path__라는 변수가 있다. __name__의 경우 직접 파이썬 인터프리터가 단일 파일을 실행할 때 '__main__' 값을 가진다. 다른 파일에서 import를 통해 모듈을 불러오는 경우 __name__은 원래 파일명을 가진다. __path__는 단일 파일 모듈(.py)에는 존재하지 않고 하위에 __init__.py가 명시된 패키지에만 존재하는 속성이다. 때문에, 단일 파일 모듈에서 __path__에 접근하면 다음과 같은 에러가 raise된다. NameError: name '__path__' is not defined. Did you mean: '__name__'? 파이썬 인터프리터는 패키지가 포함된 폴더를 import를 통해 호출할 때, 1. __path__ 변수를 만들어 __init__.py에 삽입한다. 2. 패키지의 위치를 __path__ 변수에 리스트 형태로 저장한다. 부분적으로 패키지의 하위 모듈을 호출하고 싶을 때 pkgutils.walk_packages(__path__)를 사용하면 모듈들을 탐색할 수 있다.  

VueJS 프로젝트를 만들고나면 기초 css 파일에 #app의 max-width값이 지정되어 있는 것을 확인할 수 있다. CSS의 미디어 쿼리를 작성할 때는 보통 base가 되는 최상위 컴포넌트의 픽셀값을 따로 명시하지는 않고 HTML의 head 태그 안에 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 를 명시하여 디바이스의 디스플레이 크기에 따라 device-width가 적용되게한다.    CSS는 하드웨어 픽셀 대신 소프트웨어, 즉 , CSS 픽셀을 참조한다. 하드웨어 픽셀은 기기의 디스플레이 스펙 그 자체라고 보면 된다. 디스플레이의 해상도 글에서도 언급했듯이 같은 해상도여도 디스플레이의 크기와 작고 큼에 따라서 화질이 다르게 보인다. CSS픽셀은 DPR을 사용하여 하드웨어 픽셀이 CSS 픽셀값으로 매핑된다. DPR = Device Pixcl Ratio. 갤럭시S22의 경우 DPR값은 3이고 하드웨어 디스플레이의 가로의 픽셀 수가 1080이다. S22에서 크롬 앱 등의 브라우저 앱을 사용할 때, 브라우저는 웹사이트에 1080px 물리 픽셀 값을 DPR값 3으로 나눈 값인 370px을 전달한다. 서버는 이 값을 인식하고 적당한 미디어쿼리 값에 맞는 CSS를 Return한다. 위와 같은 경우 모바일 페이지에 적합한 CSS를 Return 할 것이다. 최종적으로 S22의 웹브라우저에서는 CSS 뷰포트의 가로 길이가 360pixel인 디자인이 페인팅된다.

Unsloth은 웹 기반 로컬 모델 개발 도구다. 자세한 설명은 아래 링크를 참고. https://unsloth.ai/ 설치  최근 AI 관련 프로젝트 전용 SSD를 추가로 장착하여 C: 경로에 있던 Unsloth를 삭제하고  E: 경로에 재설치하려고 했는데 여전히 공간을 많이 차지 하고 있었다. Unsloth docs에 나와있는 Uninstall 방법은 프로그램만 삭제되고 프로그램을 통해 다운받은 모델 파일은 삭제되지 않는다.   WSL로 설치했을 경우 {home}/.cache/huggingface/에 다운로드 받은 모델들이 저장되어있다. Uninstall 할 때 참고. 버그 2025.5.2 버전으로 업데이트하고나서 한/중/일어가 <textarea>에 입력되지 않는 현상 발생. https://github.com/unslothai/unsloth/issues/5318 일본어 입력이 안 된다고 이슈가 생겼고 같은 IME이슈라 생각해서 나도 한국어 입력 테스트와 환경 정보를 제공했다. 영자와 달리 한국어/중국어/일어의 경우 여러 영자 입력 조합으로 글자가 완성된다. 이들은 영자와 달리 키 하나에 1:1 대응이 안 되므로 먼저 buffer에 저장한 뒤 조합이 완성되면 문자를 input으로 출력한다.  한/영 전환 키를 눌렀을 때부터 입력이 되지 않았다. <한영전환> KeyboardEvent isTruste:true, key:HangulMode, code:'Lang1' <영문 입력> KeyboardEvent isTrusted:true, key: 'k', code: 'KeyK' <한글 입력> TextEvent > textinput isTrusted:true, data: 'ㅎ' key: Process   12시간도 안돼서 수정되었다. https://github.com/unslothai/unsloth/pull/5327 FE > unsloth / studio / fr...

가상 클래스 (  element: ) pseudo-class 요소에 특정한 이벤트 마다 스타일을 적용할 수 있는 키워드다. 즉, 스타일을 동적으로 입힌다. display: block display: none 처럼  가상 class show를 적용해서 조직으로 변할 때 배치 영향 받지 않게 구성한다,. 가상 요소 / 가상 Element (  element:: ) pseudo-element 요소의 특정한  부분 에 새 컨텐츠를 추가하거나, 선택하는 키워드이다. CSS1, 2 에서는 콜론 :이었으나  CSS3에서 가상 클래스와 구분하기 위해 ::로 표기한다.

구글에서 배포한 Gemma4 경량 모델을 파인튜닝하기 위해 로컬에 환경 구축을 하다가 생긴 에러를 해결하였습니다. 배경 구글에서 배포한 gemma 라이브러리는 gemma 모델을 활용할 뿐 아니라 튜닝하고, 테스트하고, 체크포인팅하는 등 연구용으로 적합하게 사용할 수 있도록 다양한 라이브러리를 포함하고 있다. gemma가 포함하고 있는 오픈소스 라이브러리 중 orbax은 모델 체크포인팅, optax는 Gradient 작업과 관련된 연산, kauldron은 머신러닝 모델을 학습시키기 위한 라이브러리다. JAX라는 파이썬 고성능 수치계산 라이브러리를 알아둘 필요가 있다. gemma가 포함하고 있는 라이브러리들이 JAX에 기반하고 있기 때문이다. 경쟁 라이브러리에는 PyTorch, Tensorflow가 있다.    orbax는 orbax-checkpoint, orbax-export 라는 orbax 네임스페이스를 가진 다른 라이브러리로 이뤄져있다. 본론 Python 버전 3.11 이상 이어야 하기 때문에  Python 3.13의 가상환경에 설치하는데 다음과 같은 에러가 발생했다. [orbax-checkpoint]ERROR: Could not install packages due to an OSError: [Errno 2] No such file or directory: 'e:\\Users\\...\gemma\\.venv\\Lib\\site-packages\\orbax\\checkpoint\\experimental\\v1\\_src\\testing\\compatibility\\checkpoints\\v0_checkpoints\\composite_checkpoint\\checkpoint_metadata_missing\\pytree_checkpointable_has_metadata\\state\\d\\ea2cd2503f2fab2439cfe73cda290980' HINT: This error might have occurred since this sy...

HTML/CSS/JS가 웹 브라우저에서 동작할 때 내 PC와 연결된 디스플레이에서는 정상적인 비율로 나오는데  다른 기기와 연결된 디스플레이에서는 멋대로 비율이 바뀐다던가, 여백 공간이 남는 등의 현상이 발생하고는 한다. 대부분 내 PC와 그 다른 기기의 브라우저 환경이 다르기 때문에 발생한다. 1. 사용자 인터페이스가 다르다. 2. 웹 브라우저 소프트웨어가 다르다. 사용자 인터페이스 차이 예를 들어, PC와 셋톱박스(STB)를 각각 동일한 모니터에 연결한다 했을 때 다음과 같은 두 쌍의 인터페이스가 생성된다. MONITOR-PC = 마우스, 키보드 (스크롤 등으로 무한히 확장 가능한 화면) MONITOR-STB = 모니터, TV (고정된 화면) 사용자 인터페이스가 다르기 때문에 뷰포트 overflow 시, pc 브라우저는 스크롤바, STB 브라우저는 ghost space를 패딩하여 보여준다. 웹 브라우저 소프트웨어 차이 때문에 셋톱박스에서 웹뷰어 프로그램을 사용하여 웹 페이지를 띄운다면 그 웹뷰어 프로그램이 어떤 프로그램의 어떤 버전 기반인지 추적해야한다. 예를 들어, 어떤 A라는 STB의 웹뷰어 프로그램은 Android System WebView는 Google Chromium 기반이며 버전은 Chromium 95.0.4638.74 임을 기록해두는 것이 좋다. 폰트 또한, 폰트 사용에도 유의해야한다. CDN 방식으로 네트워크를 타고 폰트를 다운로드 하는 프로그램이라면 네트워크 구성에 따라 CDN 주소가 막혀서 해당 기기의 기본 폰트가 나올 수도 있기 때문이다. 때문에 설정한 폰트가 제대로 렌더링 되는지 개발자 도구의 computed > rendered fonts에서 직접 확인해줘야한다. 스타일 시트에 폰트 이름이 나온다고 렌더링 되는 것이 아니다. 브라우저 자체 웹 폰트의 경우 클라이언트 프로그램에서 이미 폰트 파일을 가지고 있으므로 네트워크 트래픽이 발생하지 않는다. 서비스하고 있는 제품의 웹 서버에 폰트를 이미 다운로드 해 뒀다면 C...

옥외 디지털 광고 집행을 위한 필수 구성 요소 디스플레이의 차이에 대해 정리했습니다. 출처는 삼성 디스플레이 뉴스룸. https://news.samsungdisplay.com/ LCD = Liquid Crystal Display LCD에도 여러 타입이 있지만 아래 설명은 기본 타입으로 설명하고 '전압을 가하지 않은 상태에서 빛을 투과시키'는 타입이다. 디스플레이에 출력되는 영상은 " 밝기 "와 " 색 "으로 표현된다. Liquid Crystal, 이하 액정은 액체처럼 유동성을 가지면서 고체처럼 규칙적인 배열을 가진 물질이다. 액정 은 - 빛을 통과시킨다. - 전기 자극을 주면 상태가 변한다. 액정은 " 빛의 투과 정도 "를 조절해서 "액정 표시 장치"라고 불린다. BLU , 이하 백라이트 유닛에서 나가는 빛을 액정의 배열 방식에 따라 통과시키고 그 양을 조절해 디스플레이의 "밝기"와 "색"을 표현한다. LCD는 다음과 같은 계층으로 이루어져있다. ( BLU > 편광판 > TFT > 액정&컬러필터 > 편광판 > 윈도우 ) LCD는 LED와 달리 "스스로 빛을 발하지 않는다." BLU의 백색빛을 이용한다. 백라이트 빛이 편광필름을 통과하면 빛에 방향성 이 부여된다. 액정은 이 방향성이 있는 빛으로 필요한 만큼만 픽셀에 도달할 수 있게  투과되는 빛의 양을 조절한다. 투과된 빛은 컬러필터를 지나면서 색을 표현한다. TFT로 액정을 비트면 빛도 비틀어진다. <TFT> TFT는 박막 트랜지스터 이며 반도체로 이뤄진 전자회로 다. 전류의 흐름을 조절하는 역할을 하며 1.기판 위 전류가 흐를 수 있게 액티브 층 형성 2. 게이트 전압 조절을 통해 source -> drain 으로 전자를 이동시킨다. TFT를 통과한 전류는 LCD의 경우 "액정을 회전시킨다". 즉...