반응형 전체 글306 [Nextra] Mermaid Gantt 차트 반응형 적용 📊 Mermaid Gantt 차트 반응형 적용기 (with clientMermaid)📌 Mermaid 공식 플러그인 사용 배경1. botbox 프로젝트 문서에 타임라인 시각화를 위해 Mermaid의 Gantt 차트를 도입함2. Nextra에서 기본적으로 지원하는 ```mermaid 코드 블록 형식에는 Gantt가 포함되어 있지 않음3. Mermaid 공식 플러그인을 직접 설치하여 Gantt를 사용🧩 문제점botbox 문서에 Gantt 타임라인 차트를 도입했는데, 레이아웃이 작아지면 오히려 막대와 텍스트가 커지고, 레이아웃이 커지면 작아지는 비정상적인 반응을 보임"화면이 작아지면 너무 큰 막대와 글씨가 생겨 스크롤이 생기고, 큰 화면에서는 글씨가 너무 작아서 읽을 수 없는 상태"내가 원하는대로 화면이.. 2025. 4. 10. [Nextra] Mermaid 플러그인에서 발생하는 렌더링 충돌 오류 해결 하나의 .mdx파일에서 Mermaid 2개 사용시 렌더링 오류Nextra에서 하나의 .mdx파일에서 Mermaid 다이어그램을 2개 사용했을 때 마지막 하나만 출력되는 오류가 발생 ※ Mermaid란?2023.06.20 - [문서 정리 프레임워크/Nextra] - [Nextra] FileTree, Steps, Mermaid사용 [Nextra] FileTree, Steps, Mermaid사용Nextra에서 FileTree, Steps, Mermaid사용FileTree 컴포넌트의 사용방법import { FileTree } from "nextra-theme-docs"; 출력결과Steps 컴포넌트의 사용방법import { Steps } from "nextra-theme-docs"; ### Step1Step1의.. 2025. 4. 9. VisualStudioCode에서 이모지 저장 및 사용 📝 VSC에서 Commit할 때 편하게 이모지 사용하기커밋 메시지 작성 시 템플릿과 이모지를 자동 완성하기 위한 Commit Message Editor 설정 예시1. settings.json에 추가할 설정 코드1. F1을 누르고 사용자 설정 열기(json)에 들어가 아래 설정 코드와 같이 작성설정 코드 보기"commit-message-editor.dynamicTemplate": [ "{emogi} {type}{scope}: {description}", "", "{body}", "", "{breaking_change}{footer}"],"commit-message-editor.tokens": [ { "label": "Type", "name": "type", "type": "en.. 2025. 4. 8. [Git, Github] ssh 연결 총 정리 🔐 Git SSH SettingsSSH 키를 생성하여 GitHub의 레포지토리에 접근하는 방법에 대한 안내🔧 SSH 키 생성 및 GitHub 등록1. SSH 키 생성🔹 Mac 에서 SSH 키 생성1. 터미널에서 SSH키 생성ssh-keygen -t ed25519 -C "your_email@example.com"ed25519: 최신 암호화 방식"your_email@example.com"은 GitHub 계정 이메일로 교체2. 저장 경로 확인 및 설정Enter file in which to save the key (/Users/you/.ssh/id_ed25519): [Enter] 패스프레이즈 설정 (선택 사항)Enter passphrase (empty for no passphrase): [Type a .. 2025. 4. 7. 마크다운 문법 정리 📄 마크다운 문법 정리README.md와 같은 마크다운 파일 작성 시 필요한 문법 정리1. 헤더 (Header)문서 구조를 나누기 위한 제목 스타일. #의 개수로 깊이 설정1~6단계의 헤더를 지원# H1## H2### H3#### H4##### H5###### H6예시 출력H1H2H3H4H5H6 2. 목록 (List)✔ 순서 있는 목록1. 첫번째 1. 하위 항목 1. 하위의 하위 항목 1. 하위 항목-22. 두번째결과첫번째하위 항목하위의 하위 항목하위 항목-2두번째✔ 순서 없는 목록- 첫번째 - 하위 항목 - 하위의 하위 항목 - 하위 항목-2* 두번째결과첫번째하위 항목하위의 하위 항목하위 항목-2두번째 3. 코드 블록 (Code Block)```jsconsole.log("He.. 2025. 4. 6. Emoji 모음 📝 EmojisCommit Message Convention, 문서 정리에 필요한 Emoji들 모음📜 커밋 이모지커밋 메시지 작성 시 참고하거나 문서 작성 시 섹션 구분용으로 활용하기 좋음🎯 기능 및 구조 관련이모지의미 (한글)🎉초기 커밋 – 프로젝트의 기본 구조 및 필수 파일을 세팅한 최초 커밋✨새로운 기능 추가 – 프로젝트에 새로운 기능 또는 기능 단위 코드 추가💥호환성 깨짐 (Breaking change) – 이전 버전과 호환되지 않는 변경 포함🚑긴급 수정 (Hotfix) – 즉시 처리되어야 하는 중요한 버그나 장애 수정🐛버그 수정 – 기존 코드의 버그 해결⚡️일반 업데이트 – 정리, 의존성 업데이트 등 전반적인 개선 사항🐎성능 개선 – 실행 속도, 리소스 최적화 등 성능 향상 작업♻.. 2025. 4. 3. [FreeRTOS] log파일 출력 FreeRTOS에서 log파일 출력하는 방법 env의 monitor_filters 영역에서 time뿐만아니라 log2file으로 설정해줘야 한다.아래는 platformio.ini의 한 예시이다.[env:your_environment]platform = espressif32 ; 사용 중인 플랫폼에 따라 변경board = esp32dev ; 사용 중인 보드에 따라 변경framework = arduino ; 사용 중인 프레임워크 (예: freertos, arduino 등)monitor_speed = 115200 ; 모니터링 속도 설정monitor_filters = time, log2file주요 설정monitor_filters - time: 각 로그 메시지 앞에 타임스탬프를 추가한다. -.. 2024. 11. 29. Raspberry Pi Pico 저전력 모드 함수 정리 Raspberry Pi Pico 저전력 모드 함수 정리1. Raspberry Pi Pico는 다양한 저전력 모드를 지원해 배터리 수명 연장에 유리함2. 아래는 라즈베리 파이 피코의 RP2040 SDK 내에서 사용할 수 있는 주요 전력 관리 함수들이다.1. sleep_ms(uint32_t ms) 함수#include "pico/stdlib.h"sleep_ms(1000); // 1초 동안 슬립설명: 지정된 밀리초 동안 시스템을 슬립 상태로 전환함용도: 짧은 대기 시간을 줄 때 주로 사용하며, 특정 작업 대기 시 전력 소모를 줄이는 데 유용함 2. sleep_us(uint32_t us) 함수#include "pico/stdlib.h"sleep_us(100); // 100 마이크로초 동안 슬립 설명: 지정된 마.. 2024. 11. 10. 라즈베리파이 피코(Raspberry Pi Pico)에서의 딥슬립 라즈베리파이 피코(Raspberry Pi Pico)에서의 딥슬립라즈베리파이 피코(Raspberry Pi Pico)는 RP2040 마이크로컨트롤러 칩을 사용전력 절감을 위한 다양한 기능을 지원하지만 딥슬립 모드는 없음RP2040은 라이트슬립이나 아이들 상태와 같이 전력을 줄이는 저전력 모드를 제공함1. 라즈베리파이 피코에서는 다음과 같은 전력 절감 기능을 주로 사용함 1. 라이트슬립 (lightsleep)CPU와 주변 장치 일부가 중지되며, 타이머나 인터럽트를 통해 깨어날 수 있음저전력 상태에서 빠르게 깨어나야 할 때 주로 사용 2. 아이들 모드 (idle)CPU가 유휴 상태로 진입해 전력 소모를 줄임프로세서가 필요할 때 즉시 다시 활성화됨반복 대기나 짧은 대기 시간에 적합 3. 클럭 및 주변 장치 제어필.. 2024. 11. 9. [GitHub] GitHub Actions 정리 GitHub Actions란?1. GitHub Actions는 코드의 자동화된 워크플로우를 생성하고 관리할 수 있는 기능으로, 주로 CI/CD(Continuous Integration and Continuous Deployment) 파이프라인에 사용한다. 2. GitHub Actions는 코드 작성부터 배포까지 자동화할 수 있는 강력한 도구로 코드 품질향과 배포 효율성을 높이는데 유용하게 사용한다. 1. GitHub Actions 기본 개념1. GitHub Actions는 코드 저장소에서 발생하는 이벤트(예. push, pull request, schedule 등)을 트리거로 하여 특정 작업(Job)을 자동으로 수행하도록 구성할 수 있다. 2. 일반적인 사용 예로는 자동 테스트, 빌드 배포 등이 있다... 2024. 11. 6. 이전 1 2 3 4 ··· 31 다음 반응형
