Computation suite

Python에서 '...' 문법은 생략 부호라고 부르며 pass의 역할을 한다. pass를 써도 문제 없지만 더 표현이 간결하기 때문에 쓰임. 다음은 python의 system 패키지 __init__.pyi이다.     @ property     def dev_mode ( self ) -> bool : ...     @ property     def utf8_mode ( self ) -> int : ... 위 프로퍼티 데코레이터가 적용된 함수에서 실제 기능은 구현되지 않은 것을 볼 수 있는데 인터페이스를 정의할 때 자주 사용한다. (인터페이스는 상세적인 구현이 없다.) < .pyi 파일에 대해서 > .pyi 파일은 빌트인 모듈이고 Type Stub files를 연다. 빌트인 모듈이라하면은, python 패키지를 설치했을 때(CPython) 자동으로 딸려오게 되는 모듈을 의미한다. 이 파일들은 sys 모듈의 built-on 모듈들이고 단지 함수의 사인과, 변수들만을 표현할 뿐 실제 공식 Python 코드가 없다. (Input/ outpt) & type Hinting 실제 로직은 C에 숨겨져있다. < .py 파일과 .pyi > 그래서 .py파일과 .pyi를 비교해보면 .py는 실제 로직이 구현된 코드고 .pyi는 구현 메뉴얼이라고 보면 된다. -> Python 인터프리터는 실행하지 않는다. 타입 힌트를 적용한 코드를 .py에 구현할 수 있고 또 framework과 pydantic 유저라면 .py에 구현하는 것이 익숙하지만 C 확장 모듈이나 구형 라이브러리에 타입힌팅을 적용할 때,  직접 소스코드에 타입힌팅을 하면 오류가 많아지니까 라이브러리와 별개로 .pyi파일을 같이 제공할 수 있다. 이렇게 하면 type checker 가 .pyi 파일을 먼저 참조한다.   다른 ... syntax 사용례 1. Type hinting: Tupl...

파이썬의 특수 내장 변수 __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...