카테고리 Data & Dev

데이터 및 개발

React 퀴즈 앱 (웹에서 바로 실행)

이 페이지는 React와 Vite를 사용해 제작한 퀴즈 웹앱입니다.별도의 설치 없이 브라우저에서 바로 실행할 수 있으며,간단한 문제 풀이를 통해 결과를 확인할 수 있도록 구성했습니다.개인 프로젝트 및 웹앱 실험용으로 제작되었습니다.

추가로 새 앱을 GitHub에 푸시해서 배포하는 방법

추가로 다른 앱을 깃허브에 푸시해서 웹에 배포하려고 합니다.리포지토리부터 새로 만들어서 진행해야할 것 같은데, 조금만 달라져도 응용이 힘드네요.자주 반복하면 어떻게 몸에 익혀지지 않을까 해서 새로 할때마다 이렇게 포스팅으로 정리해가며 반복하고 있습니다. GitHub에 새 저장소 만들기 GitHub 접속 → New repository 생성 후 나오는 repo 주소 복사 로컬 프로젝트 폴더로 이동 Git…

[혼공바이브코딩] 4주차 -1_단계별 프롬프트와 할 일 관리 앱

[혼공바이브코딩] 1주차_나의 첫 바이브코딩[혼공바이브코딩] 2주차_마케팅 포트폴리오 제작[혼공바이브코딩] 3주차_클로드 코드 시작하기[혼공바이브코딩] 4주차 -1_단계별 프롬프트와 할 일 관리 앱[혼공바이브코딩] 4주차 -2_게임 제작으로 배우는 체계적인 개발과 관리[혼공바이브코딩] 5주차-1_클로드 코드에 API 날개 달기[혼공바이브코딩] 5주차-2_클로드 코드 AI 에이전트로 개발팀 구성하기[혼공바이브코딩] 6주차_MCP로 클로드 코드의 한계 넘어서기 단계별 프롬프트 전략 바이브코딩의 핵심은 ‘생각의 설계’와 ‘실제 구현’을 분리하는…

GitHub Push 로 수정본 반영하기

고생고생하며 게시한 앱이 실은 다 만든것이 아니었다?아니 강의를 따라하며 한걸음한걸음 쫒아가서 끝났다고 생각했더니 뒷내용이 더 있었네요?따라서 배포한 앱이 최종이 아니었고 수정사항이 발생했습니다.이미 폴더에 수정본이 저장돼 있는 상태로 GitHub에 반영하여 재배포하겠어요. 수정 폴더 위치 확인 터미널에서 수정된 프로젝트 폴더로 이동 package.json / index.html / src 보이는지 확인 Git 상태 확인 변경사항…

Claude AI로 30분 만에 퀴즈 앱 만들기 바이브 코딩 실전 프로젝트

코딩을 한 번도 해본 적 없어도 웹 앱을 만들 수 있다면 믿으시겠어요? 저는 Claude AI의 바이브 코딩 기능을 활용해서 단 30분 만에 완성도 높은 퀴즈 게임 앱을 만들었습니다. 별도의 개발 환경 설정 없이, 그저 대화하듯 원하는 기능을 설명하기만 하면 됩니다. 🎮 퀴즈 앱 직접 체험하기 1. 프로젝트 개요 왜 이…

클로드로 만든 앱 워드프레스에 게시하기

혼공학습단 강의의 진도에는 포함되지 않지만 클로드로 만든 앱을 블로그에 게시하고 싶었습니다.워드프레스 자체에 올릴려고 해보니 제가 만든 앱 형식이 HTML이 아니라서 불가능했습니다.dist 폴더를 FileXilla로 직접 업로드를 하니 빈 화면만 뜨더군요.순수 프론트엔드(HTML/CSS/JS) 이면서 서버 API 호출이 없을 때만 직접 업로드 방식이 괜찮다고 하네요. 또한 수익형 블로그의 관점에서 보자면 검색은 워드프레스 글에서 일어나야…

[SQL] 데이터베이스 입문 1일차_데이터베이스 시작하기

데이터베이스란 데이터베이스의 개념 데이터베이스(DataBase, DB)란 구조화된 데이터의 집합으로, 방대한 정보를 체계적으로 저장하고 관리하는 데이터 저장소입니다. 다양한 정보를 디지털 형태로 정리하여 보관함으로써, 사용자가 필요한 데이터를 빠르고 효율적으로 조회·활용할 수 있도록 합니다. 데이터베이스는 단순한 저장을 넘어 데이터의 검색, 수정, 삭제, 보안까지 포함하는 핵심 정보 관리 시스템입니다. DBMS란 DBMS(DataBase Management System)란 데이터베이스를 효율적으로…

[혼공바이브코딩] 3주차_클로드 코드 시작하기

[혼공바이브코딩] 1주차_나의 첫 바이브코딩[혼공바이브코딩] 2주차_마케팅 포트폴리오 제작[혼공바이브코딩] 3주차_클로드 코드 시작하기[혼공바이브코딩] 4주차 -1_단계별 프롬프트와 할 일 관리 앱[혼공바이브코딩] 4주차 -2_게임 제작으로 배우는 체계적인 개발과 관리[혼공바이브코딩] 5주차-1_클로드 코드에 API 날개 달기[혼공바이브코딩] 5주차-2_클로드 코드 AI 에이전트로 개발팀 구성하기[혼공바이브코딩] 6주차_MCP로 클로드 코드의 한계 넘어서기 클로드 코드 설치하기 : 개발 환경 구축부터 첫 실행까지 실습…

[혼공바이브코딩] 2주차_마케팅 포트폴리오 제작

[혼공바이브코딩] 1주차_나의 첫 바이브코딩[혼공바이브코딩] 2주차_마케팅 포트폴리오 제작[혼공바이브코딩] 3주차_클로드 코드 시작하기[혼공바이브코딩] 4주차 -1_단계별 프롬프트와 할 일 관리 앱[혼공바이브코딩] 4주차 -2_게임 제작으로 배우는 체계적인 개발과 관리[혼공바이브코딩] 5주차-1_클로드 코드에 API 날개 달기[혼공바이브코딩] 5주차-2_클로드 코드 AI 에이전트로 개발팀 구성하기[혼공바이브코딩] 6주차_MCP로 클로드 코드의 한계 넘어서기 클로드로 마케팅 포트폴리오 제작하기 포트폴리오 웹페이지를 만들려고 해. 주요 기능은…

[혼공바이브코딩] 1주차_나의 첫 바이브코딩

[혼공바이브코딩] 1주차_나의 첫 바이브코딩[혼공바이브코딩] 2주차_마케팅 포트폴리오 제작[혼공바이브코딩] 3주차_클로드 코드 시작하기[혼공바이브코딩] 4주차 -1_단계별 프롬프트와 할 일 관리 앱[혼공바이브코딩] 4주차 -2_게임 제작으로 배우는 체계적인 개발과 관리[혼공바이브코딩] 5주차-1_클로드 코드에 API 날개 달기[혼공바이브코딩] 5주차-2_클로드 코드 AI 에이전트로 개발팀 구성하기[혼공바이브코딩] 6주차_MCP로 클로드 코드의 한계 넘어서기 방학에는 뭐다? 혼공학습단이다!이번에도 모집공고 뜨자마자 신청했습니다.다만 이번에는 바이브코딩만 단독 진행한다고…

[혼공머신] 6주차_인공신경망

07-1 인공신경망 패션 MNIST 머신러닝에서는 붓꽃 데이터셋이 유명하고, 딥러닝에서는 MNIST 데이터셋이 유명합니다. 이 데이터는 손으로 쓴 0~9까지의 숫자로 이루어져 있습니다. MNIST와 크기, 개수가 동일하지만 숫자 대신 패션 아이템으로 이루어진 데이터가 바로 패션 MNIST입니다.   axs[i].axis(‘off’) : i번째 이미지에 좌표축과 테두리를 없애서 순수한 이미지만 보이게 합니다.     로지스틱 회귀로 패션…

[혼공머신] 5주차-2_비지도학습

06-2 k-평균 클러스터 중심 KMeans 클래스가 최종적으로 찾은 클러스터 중심은 cluster_centers_ 속성에 저장되어 있습니다. 이 배열은 fruits_2d 샘플의 클러스터 중심이기 때문에 각 중심을 이미지로 출력하려면 100×100 크기의 2차원 배열로 바꿔야 합니다.   KMeans 클래스는 훈련 데이터 샘플에서 클러스터 중심까지 거리로 변환해 주는 transform() 메서드를 가지고 있습니다. transform() 메서드가 있다는 것은…

[혼공머신] 5주차-1_비지도학습 갑자기 난이도 급상승?!

06-1 군집 알고리즘 타깃을 모르는 비지도 학습 비지도 학습(unsupervised learning) : 타깃이 없을 때 사용하는 머신러닝 알고리즘   과일 사진 데이터 준비하기 Jupyter Notebook이나 Google Colab 같은 환경에서 사용되는 shell 명령어 ! : Jupyter Notebook에서 셸 명령어를 실행하기 위한 접두사 -O : 저장할 파일 이름을 지정   이 배열의 첫…

[혼공머신] 4주차_휴가중인데 벌써 이틀까먹음

05-1 결정 트리 로지스틱 회귀로 와인 분류하기     알코올 도수와 당도, pH 값의 스케일이 다릅니다. → 사이킷런의 StandardScaler 클래스를 사용해 특성을 표준화     결정트리 결정트리(Decision Tree) : 이유를 설명하기 쉽다   결정트리는 위에서부터 아래로 거꾸로 자라납니다. 루트 노드(root node) : 맨 위의 노드 리프 노드(leaf node) : 맨…