반응형 개발 팁 정리18 STM32 CMake 프로젝트 템플릿화 STM32 CMake 프로젝트 템플릿화1. 현업에서 바로 적용 가능한 **STM32 + CMake + Ninja + VSCode** 기반 템플릿을 소개2. CubeMX로 생성한 코드에 이 템플릿을 입히면, 즉시 빌드/업로드/디버깅 가능한 환경을 만들 수 있음1. 디렉토리 구조 (템플릿 예시)stm32-cmake-template/├── CMakeLists.txt├── toolchain-arm-none-eabi.cmake├── .vscode/│ ├── c_cpp_properties.json # 인텔리센스/컴파일러 경로 자동 완성│ └── tasks.json # 빌드&업로드 통합 태스크├── Core/│ ├── Inc/│ └── Src/├── Drivers/├── Mi.. 2025. 7. 15. 삼성 인터넷 브라우저에서 다크모드/회색 배경, Lottie 색상 깨짐 현상 정리 삼성인터넷 “어둡게 보기” 옵션이 웹 색상·Lottie에 미치는 영향모든 프론트엔드 개발자가 한 번쯤 겪는 삼성인터넷 회색/어둡게 보기 트랩PC/카카오톡 인앱 브라우저/크롬 등에서는 의도한 대로 나오지만삼성인터넷(특히 어둡게 보기, 스마트 다크모드 켤 때)만 색상이 회색/탁하게 나오는 현상 많음📲 카카오톡 인앱 vs 삼성인터넷 기본 브라우저 차이카카오톡 인앱 브라우저크롬(WebView) 기반, 시스템 다크모드/필터 영향 적음Tailwind, Nextra, Lottie 등 밝은 색상 CSS 그대로 반영삼성인터넷 브라우저자체 라이트/다크모드, 스마트 다크모드, 배경 최적화 등웹 CSS를 무시하고 필터·회색·반전 오버레이 강제 적용특히 Canvas, SVG, Lottie는 더 강하게 색상 변환됨→ 라이트모드.. 2025. 7. 7. SSH로 접속한 터미널에서 컴퓨팅 보드 Wi-Fi 변경하는 방법 SSH로 Jetson Nano Orin, Rasberry Pi와 같은 컴퓨팅 보드에서 Wi-Fi 변경하는 방법1. Jetson Nano, Raspberry Pi, 기타 리눅스 보드(Ubuntu 기반) 모두 동일하게 사용2. 직접 모니터나 키보드 없이 SSH로 접속한 터미널에서 아래 명령으로 Wi-Fi를 변경할 수 있음 💡 nmcli가 없을 경우 아래와 같이 설치sudo apt updatesudo apt install network-manager✅ 1. 현재 Wi-Fi 목록 확인nmcli device wifi list해당 명령어를 통해 주변의 SSID 목록(와이파이 이름)을 확인할 수 있음✅ 2. Wi-Fi 연결 시도nmcli device wifi connect "SSID명" password "비밀번호.. 2025. 5. 5. 윈도우 PC 속도 올리기 윈도우 PC를 빠르게 만드는 가장 실질적인 방법(캐시 정리 등)1. 포맷 이전 할 수 있는 가장 실질적인 방법 모음2. 불필요한 파일/프로세스 정리, 자동 실행 관리와 시스템 최적화✅ 1. 디스크 정리 및 캐시 삭제디스크 정리 실행윈도우키 + S → 디스크 정리 검색 → C 드라이브 선택 →임시 파일, 시스템 생성 Windows 오류 보고서, 미리 보기 이미지, 캐시된 파일 등 체크 → 삭제고급 시스템 정리디스크 정리 → 시스템 파일 정리 클릭 후 다시 수행✅ 2. Temp 폴더 정리 (임시파일 삭제)윈도우키 + R → temp 입력 → 전체 선택 후 삭제 (Ctrl + A, Shift + Delete)다시 윈도우키 + R → %temp% 입력 → 동일하게 삭제윈도우키 + R → prefetch 입력 →.. 2025. 5. 4. [CSS] 스타일 우선순위 적용 !important CSS에서 !important를 사용하여 스타일 우선순위 적용하기1. !importatnt란?!important는 CSS에서 특정 스타일 규칙의 우선순위를 높이기 위해 사요되는 키워드이다.이 키워드가 붙은 스타일 규칙은 동일한 속성에 대해 다른 규칙이 적용될 때 가장 높은 우선순위를 가지게 된다.즉 다른 규칙들이 동일한 요소에 적용되더라고 !important가 붙은 규칙이 최종적으로 적용된다. 아래 코드는 !important를 사용한 예제이다./* 일반적인 CSS 규칙 */p { color: blue;}/* !important가 붙은 규칙 */p { color: red !important;}/* 인라인 스타일 */!important 테스트 위의 예제에서 p태그 요소의 텍스트 색상은 gleen이 아니.. 2024. 8. 16. [CSS] 작은 레이아웃에서 스크롤이 없어지는 현상 해결 웹사이트 개발 시 작은 화면에서 스크롤이 없어지는 현상이 발생했을 때 해결1. 주로 CSS 스타일링이나 레이아웃 설정과 관련이 있다.2. 이러한 문제는 웹페이지의 콘텐츠가 의도치 않게 오버플로우되거나, 스크롤바가 비활성화되어 발생할 수 있다.3. 이를 해결하기 위해 고려할 수 있는 몇 가지 사항은 다음과 같다. 1. CSS에서 overflow 속성 확인- overflow 속성은 컨테이너의 크기를 초과하는 콘텐츠에 대한 스크롤 동작을 제어한다.- 이를 해결하기 위해 overflow 속성을 적절하게 해결한다.body { overflow: auto; /* 또는 overflow-y: scroll; */}- overflow: auto; 는 콘텐츠가 컨테이너의 크기를 초과할 때만 스크롤를 표시한다.- overf.. 2024. 8. 15. [CSS] Tailwind CSS purge관련 경고 해결 Tailwind CSS에서 purge관련 경고 해결warn - The `purge`/`content` options have changed in Tailwind CSS v3.0.warn - Update your configuration file to eliminate this warning.warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources오랫만에 Tailwind CSS를 사용하려 하는데 위와 같은 경고메시지가 출력된다. 이는 Tailwind CSS v3.0에서는 purge옵션이 content옵션으로 변경되었다는 점을 알려준다.기존 설정 파일을 업데이트하여 이 경고를 해결할 수 있다.기존 Tailwind CSS 설정파일.. 2024. 8. 10. [크롬 개발자 도구] 센서(위치정보 설정, 기기 방향 변경, 터치 이벤트 발생, 유휴상태 만들기) 크롬 브라우저를 사용하여 모바일 웹 개발을 할 경우 센서탭 활용1. 크롬에서 위치관련 정보를 사용하여 테스트할 때 사용하는 위치정보 설정2. 기기 방향에 따른 값을 테스트 해볼 때 사용하는 기기 방향 시뮬레이션3. 터치 이벤트 발생을 확인하여 테스트 해볼 때 사용하는 강제 터치4. 사용자 유휴상태 혹은 화면 잠금에 따른 테스트를 할때 사용하는 유휴상태 만들기 1. 위치정보 설정하기 1. 위 사진처럼 위치정보를 사용하기 위해 F12를 눌러 개발자도구로 들어가 설정 > More tools > Sensors를 차례대로 클릭한다. 2. 위 화면에 Locaation에 나오는 나라를 선택하면 해당 나라의 임의의 좌표가 나온다.아쉽게 한국위치는 프리셋 데이터에 없기때문에 Manage를 선택한 후에 아래 사진처럼 .. 2024. 7. 22. [정규식] 빈 줄 제거, 특정문자 이후 및 이전 모두 선택 Regex, 정규식 빈 줄 선택, 특정문자 이후 및 이전 모두 선택 1. 빈 줄 선택 ( ^$\n )^$\nex) VSC에서 ctrl+H 이후 정규식 활성화하고 위 정규식 입력후 [공백]과 교체하면 빈줄이 전부 제거된다. 2. 특정문자 이후 모두 선택 ( [특정문자].*$ )ex. > 이후 모두 선택 >.*$ 3. 특정문자 이전 모두 선택 ( ^.*[특정문자] )ex. ^.* 2024. 4. 29. [크롬 개발자 도구] Device Mode 사용하기 모바일 웹 개발 시 웹사이트, 앱 반응형 확인할 때 도움이 되는 크롬 Device Mode 사용하는 법 1. F12를 눌러 크롬 개발자 도구를 킨다.2. Window, Linux이라면 Ctrl + Shift + M를 누르기Mac이라면 Command + Shift + M를 누르기 3. 개발자 도구 좌측 위에 아래 아이콘 클릭Device Mode 아이콘이 파란색이면 OnDevice Mode 아이콘이 검정색이면 Off 4. 왼쪽 위 부분에서 원하는 디바이스로 설정 후 웹사이트 확인 2024. 4. 23. 이전 1 2 다음 반응형
