모두 이루지리라 얍!

맥에서 Dock을 자동 숨기기로 설정했는데, 커서를 화면 하단에 가져가도 Dock이 나타나지 않는 문제가 발생할 수 있습니다. 이 문제는 종종 macOS의 Dock 프로세스가 일시적으로 오작동할 때 생깁니다. 처음 이런 현상이 생기면 내가 새로운 방법으로 업데이트가 된건 아닌가 하고 한참을 다른 방법을 시도 했었습니다.하지만 시간 낭비일 뿐이 였어요.문제 증상Dock 자동 숨기기 설정이 되어 있음커서를 화면 하단(또는 Dock이 위치한 곳)으로 가져가도 Dock이 나타나지 않음시스템 설정을 껐다 켜도 변화 없음해결 방법아래 방법으로 간단히 해결할 수 있습니다.1. Dock 프로세스 재시작터미널을 열고 다음 명령어를 입력합니다:killall Dock이 명령어는 Dock 프로세스를 강제로 종료하고 자동으로 ..

1. 캔들 차트 기본 설정chart = createChart(chartContainerRef.current, { width: chartContainerRef.current.clientWidth, height: 500, layout: { background: { color: '#ffffff' }, textColor: '#000' }, timeScale: { timeVisible: true, secondsVisible: false, rightOffset: 3, barSpacing: 5 }, crosshair: { mode: 1, horzLine: { visible: true }, vertLine: { visible: true } }, grid:..

기존에 Create React App(CRA)로 개발해온 프로젝트를 Vite로 마이그레이션하면서 겪은 삽질과 해결 과정을 정리했습니다. 실제 에러 메시지와 해결 과정을 그대로 담았기 때문에, 비슷한 작업을 하려는 분들에게 도움이 될 수 있을 겁니다.1. CRA에서 Vite로 전환 이유CRA 빌드 속도에 불만HMR이 느림config override가 귀찮음최신 생태계는 Vite를 지향하는 추세2. 초기 설정npm create vite@latest템플릿은 react + javascript 선택기존 CRA 구조와 맞추기 위해 디렉토리 구조는 유지기존 public/, src/ 그대로 복사 후 시작3. entry 파일 변경 (main.js → main.jsx)CRA에서는 index.js 또는 main.js 를 e..

1. nvm이란?nvm(Node Version Manager)은 여러 버전의 Node.js를 한 시스템에서 쉽게 설치하고 전환할 수 있는 도구입니다.2. 설치 방법 (macOS, Linux)2-1. nvm 설치curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash2-2. 설치 적용 (터미널 재시작 또는 아래 명령 실행)export NVM_DIR="$HOME/.nvm"[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"2-3. 설치 확인nvm --version3. Node.js 설치 및 사용법3-1. Node.js 특정 버전 설치nvm install 20.19.03-2. 설치한 버전 사..

숫자를 테이블이나 리스트로 화면에 보여줄 때, 특히 가격이나 수익률 같은 데이터를 다룰 때, "정렬이 이상하게 보인다"는 느낌을 받은 적이 있다면 그 원인은 폰트일 가능성이 크다. 문제 상황: 가변폭 폰트의 한계일반적인 웹 폰트는 대부분 가변폭(font-proportional) 폰트다.이는 글자마다 가로 폭이 다르다는 뜻이다.예를 들어 다음 숫자를 보자:123,000 99,100 6,200겉보기엔 오른쪽 정렬을 했지만 숫자 자릿수가 다르고 각 글자의 폭도 달라서 들쭉날쭉해 보인다.특히 1은 좁고 0은 넓기 때문에 숫자가 시각적으로 밀려 보이는 문제가 생긴다.해결책: 고정폭 폰트(monospace)고정폭 폰트는 모든 문자(숫자 포함)의 너비가 동일하다.즉, 1이나 0이나 동일한 간격으로 표현된다. 이 ..

마크다운(Markdown)은 문서나 글을 작성할 때 사용하는 가볍고 쉬운 문법 체계로, 블로그, 깃허브, 워드프레스 등 다양한 플랫폼에서 널리 사용됩니다. 마크다운을 잘 활용하면 문서를 훨씬 깔끔하게 구성할 수 있어요. 마크다운 기본 문법 요약1. 제목 (Heading)# 제목1## 제목2### 제목32. 강조 (Emphasis)*기울임***굵게**~~취소선~~3. 링크와 이미지[링크텍스트](https://example.com)4. 목록 (List)- 순서 없는 목록 - 하위 항목1. 순서 있는 목록2. 순서 있는 항목5. 코드`인라인 코드`코드 블록 여러 줄6. 인용문 (Quote)> 여기는 인용문입니다.7. 수평선 (Divid..

워드프레스에서 직접 만든 프로그램을 페이지나 글에서 실행하고 싶을 때,PHP와 shortcode 기능을 활용하면 아주 간단하게 구현할 수 있다.✅ 목표워드프레스 내부에서 사용자 정의 프로그램 실행shortcode로 페이지나 글에 삽입input 박스와 버튼을 클릭하면 메시지를 띄우는 간단한 예제🛠️ 구현 코드 (functions.php에 추가)function my_custom_program_viewer() { ob_start(); ?> 확인 ✅ 사용 방법워드프레스 테마의 functions.php에 위 코드 추가페이지나 글에 아래처럼 작성[my_program]페이지를 미리보기 또는 발행하면→ input 박스와 버튼이 표시되고,→ 값을 입력 후..

리액트로 개발할 때 직접 컴포넌트를 하나하나 만들지 않고,이미 잘 만들어진 컴포넌트를 가져다 쓰는 것도 좋은 선택입니다.이번 글에서는 리액트 컴포넌트를 쉽게 가져올 수 있는 추천 사이트 7곳을 정리해봤습니다.1. Tailwind UITailwind CSS 기반의 고품질 컴포넌트 모음유료이지만 실무에서 자주 사용됨반응형, 다크모드, 접근성 모두 우수React, Vue, HTML 코드 제공실무 프로젝트에서 바로 가져다 쓰기 좋습니다.2. FlowbiteTailwind 기반의 무료 UI 라이브러리Modal, Table, Form 등 기본 컴포넌트 다수react-flowbite 패키지로 리액트에서 바로 사용 가능무료 + Tailwind 조합이면 매우 유용합니다.3. MUI (Material UI)구글 머터리얼 ..

서비스 운영 중 매일 또는 매분 실행되는 작업을 crontab으로 관리하다 보면, 다음과 같은 문제점이 생길 수 있다크론탭의 작업이 죽었는지 알 수 없다스케줄 수정 시 매번 crontab을 수정해야 한다실패/성공 여부를 기록하거나 통제하기 어렵다이 글에서는 "DB에 스케줄을 저장하고, 이를 파이썬에서 실시간으로 실행하며, **크론탭은 감시만 담당하는 구조"를 소개한다.목표 아키텍처[crontab] └─ every 1 min → [scheduler_watchdog.sh] └─ if run_scheduler.py not running → start it[run_scheduler.py] └─ DB 가 접속 유지 └─ 매초 SELECT └..

WebSocket은 웹 브라우저와 서버 간의 양방향 통신을 가능하게 해주는 프로토콜이다. HTTP 기반의 전통적인 통신 방식과 달리, WebSocket은 실시간 데이터 전송이 필요한 애플리케이션에 적합하다. 이 글에서는 WebSocket의 개념, 동작 방식, HTTP와의 차이점, 활용 예제를 설명한다.1. WebSocket 개요WebSocket은 하나의 TCP 연결을 통해 클라이언트와 서버가 지속적으로 통신할 수 있도록 해주는 전이중(Full-Duplex) 통신 프로토콜이다.RFC 6455로 표준화되었으며, 초기 연결은 HTTP로 시작되지만, 이후에는 프로토콜이 WebSocket으로 업그레이드된다.2. WebSocket vs HTTP항목HTTPWebSocket연결 방식요청마다 새 연결최초 연결 이후 지속..