본문 바로가기

I LOVE WHAT I DO

0과 1 사이, 새로운 시작!

코드 한 줄이 세상을 바꾼다.

부족하지만 최선을 다하면 된다.

전체 글

총 36개

0과 1 사이에서

🧠 VS Code도 좋지만, 이제는 Void? 2025. 6. 5. 10:22 🚀 Void? 이게 뭐야?Void는 최근에 오픈소스로 공개된 AI 기반 코드 에디터예요.쉽게 말하면 VS Code처럼 생긴 에디터인데,여기에 로컬에서 실행되는 AI 코딩 어시스턴트가 붙어 있다고 보면 됩니다.GPT처럼 AI한테 코드 수정해 달라고 하고, 문서 요약해 달라고도 하고,근데 그걸 클라우드 말고 내 컴퓨터에서 바로 처리한다는 거죠.Cursor, Copilot 같은 상용 AI 코딩툴을 써봤다면 익숙한 느낌일 거예요. 🔄 Cursor랑 뭐가 달라? 항목VoidCursor모델 실행 방식로컬에서 직접 실행 (ex. Ollama, Mistral 등)클라우드 기반 OpenAI API 사용보안/프라이버시로컬 처리, 외부 전송 없음OpenAI 서버로 코드 전송 가능성 있음비용완전 무료 (자체 모델)Ope..
[HTML/CSS/JS] 로드셀 스타일 SVG 게이지 UI 만들기 (디지털 계기판 디자인) 2025. 3. 28. 14:36 안녕하세요 😎이번 포스팅에서는 SVG + JavaScript를 활용하여 만든 로드셀 스타일의 디지털 게이지 UI를 소개합니다.스마트 계기판, IoT 센서 시각화, 스마트팩토리 대시보드 등에 활용할 수 있는 멋진 디자인입니다!🔧 주요 특징SVG 기반 부드러운 곡선 게이지실시간으로 숫자와 포인터 동기화JavaScript로 원하는 수치만큼 게이지 반영 가능Gradient & Shadow를 활용한 고급스러운 디자인디지털 숫자 표시 + kg 단위 텍스트🎨 디자인 예시게이지는 중심 좌표 (112, 112)을 기준으로-140° ~ 140° 범위의 각도에 따라 움직입니다.게이지 수치 입력 → 호(Arc) + 포인터 회전중앙에는 실시간으로 디지털 숫자 표시로드셀, 저울, 계기판 등 UI에 활용 가능📦 주요 Jav..
Chart.js 그래프에 여백 넣는 방법 (깔끔한 디자인 만들기) 2025. 3. 20. 16:50 Chart.js로 그래프를 만들다 보면 그래프 요소들이 너무 붙어 있어 답답해 보일 때가 있습니다.막대와 축이 너무 가까워서 가독성이 떨어지는 경우도 있고요.이럴 때 적절한 여백을 추가하면 훨씬 보기 좋은 그래프를 만들 수 있습니다.아래에서 축과 숫자 간격 조절, 막대 간격 조정, 격자선 스타일 변경, 테두리 정리, 배경 바 추가 등 다양한 방법을 자세히 설명해 드리겠습니다.🛠️ 1. ticks.padding으로 축과 숫자 사이 여백 추가✅ 문제 상황X축과 Y축의 숫자가 그래프와 너무 가까워 가독성이 떨어지는 문제 발생숫자와 막대 사이에 적절한 간격을 두면 더 깔끔한 디자인이 될 수 있음✅ 해결 방법ticks.padding 옵션을 사용하면 축과 숫자 사이의 간격을 조정할 수 있습니다.📌 적용 코드sc..
처음 만나는 Manus AI, 이렇게 사용하세요! 2025. 3. 12. 17:22 Manus AI 설치 및 사용법1. Anaconda 다운로드Manus AI를 설치하기 전에 Python 환경을 설정해야 합니다. 가장 쉬운 방법은 Anaconda를 사용하는 것입니다.Anaconda 설치 방법Anaconda 공식 웹사이트에 접속합니다.본인의 운영체제에 맞는 최신 버전의 Anaconda를 다운로드합니다.설치 파일을 실행하고 안내에 따라 설치를 완료합니다.설치가 완료되면 터미널(또는 명령 프롬프트)에서 Anaconda가 정상적으로 설치되었는지 확인하세요.conda --version2. Manus AI 설치 방법Manus AI는 두 가지 방법으로 설치할 수 있습니다. **방법 2 (uv 사용)**이 더 빠르고 안정적인 설치를 제공하므로 권장됩니다.방법 1: Conda 사용새로운 Conda 환경..
React 디버깅 끝판왕: 문제를 뿌리부터 뽑는 법 2025. 3. 10. 12:00 프로그래밍을 하면서 내가 만든 웹 사이트가 전부 정상적으로 도아간다면 너무나 좋겠지만, 만들어진 사이트를 운영하다보면 무수히 많은 불청객들이 찾아온다.바로 버그인데. 간단한 오탈자, UI 오동작부터 원인을 찾기 힘든 여러가지 버그들이 발생한다. 이 같은 버그들을 미연에 방지하거나 해결하기 위해 이루어지는 작업을 디버깅이라고 한다. 프론트엔드에서 사용할 수 있는 디버깅 방법에는 어떤것들이 있을까? 여기 찾아오신 모든 분과 함께 보도록 하겠다. 1. React 디버깅 기본기1-1. 콘솔 로그 활용 (console.log)가장 기본적인 방법이지만 여전히 강력하게 사용되는 디버깅 방법이야.const fetchData = async () => { try { console.log("🚀 Fetching da..
[React] 리액트의 <a>태그 <Link> 2024. 11. 12. 17:25 Link 컴포넌트Link 컴포넌트는 React에서 사용하는 태그라고 설명할 수 있다.는 주소로 이동하여 전체를 새로고침 하는 것이 아니라 필요한 부분만 재랜더링 하도록 하는 컴포넌트이다.리액트에서는 페이지 이동 시 태그의 href 대신, 를 사용한다. 왜냐면...태그의 href로 이동하면 상태 값을 잃고 속도가 저하된다.리액트는 단일 url을 가지고 SPA(Single Page Application)으로 사이트를 표현하는 프레임워크.하나의 HTML 페이지와 애플리케이션에 필요한 JS와 CSS같은 모든 자산을 로드하는 애플리케이션이다.따라서 페이지를 새로 불러오면 앱이 지니고 있는 상태가 초기화되고, 렌더링 된 컴포넌트도 모두 새로 렌더링 해야 한다.상태 유지와 속도의 효율성을 위해 새로운 페이지를 불러오..
[JavaScript] window.scrollY 값이 변하지 않는 버그 2024. 10. 24. 17:43 스크롤을 움직여도 console.log 를 출력했을 때 아무런 값이 표출 되지 않는 부분이 있었다.Google에 검색을 해서 찾아 보있을 때 body 및 html이 아닌 다른 main 태그 등등에 overflow hidden을 주면 스크롤 값이 생기지 않는다고 한다. body{overflow-x:hidden;} 이러한 형태로 바디에 두는것이 안전하다  참고자료https://stackoverflow.com/questions/17665080/overflow-x-hidden-is-breaking-jquery-scroll-event
[리액트] Redux 2024. 10. 22. 14:39 Redux란 무엇인가?Redux(리덕스)란 JavaScript(자바스트립트) 상태관리 라이브러리이다.Redux(리덕스)의 본질은 Node.js 모듈이다. Redux를 사용하는 이유 먼저 상태란?React에서 State는 component 안에서 관리되는 것이다.자식 컴포넌트들 간의 다이렉트 데이터 전달은 불가능 하다.자식 컴포넌트들 간의 데이터를 주고 받을 때는 상태를 관리하는 부모 컴포넌트를 통해서 주고 받는다.그런데 자식이 많아진다면 상태 관리가 매우 복잡해진다.상태를 관리하는 상위 컴포넌트에서 계속 내려 받아야한다. => Props drilling 이슈 Redux의 사용의 좋은 예는 props즉 상태를 전이 할 때 한 단계식 내리는것이 아닌 store를 통해 밖에서 상태를 전달해줄 수가 있다. St..