ksc-dev 님의 블로그

개인 프로젝트에서 왜 모노레포를 선택했는가최근 축덕 퀴즈 프로젝트를 관리하면서 프론트와 백엔드를 분리 운영하다가 모노레포 구조로 정리했다.처음에는 “굳이?”라는 생각이 있었는데, 실제로 적용해 보니 생각보다 관리가 편해진 부분이 있었다.이번 글에서는 왜 전환했고, 어떤 점이 좋아졌고, 무엇이 불편했는지 정리해 봤다.기존 구조 — 프런트/백엔드 분리처음 구조는 단순했다.football-quiz-webfootball-quiz-api 프론트와 백엔드를 각각 관리했다.장점:이해하기 쉬움배포 단위 분리하지만 개발하면서 조금씩 불편해졌다.예시:API 변경↓프론트 타입 수정↓각각 커밋↓버전 안 맞음 특히 DTO나 API 응답 구조가 자주 바뀌면서 관리 비용이 생겼다.모노레포 구조로 전환정리 후 구조:football-..

버그 수정부터 TDD, Redis 캐시, 기록 시스템 개선까지최근 축덕 퀴즈를 다듬으면서 단순히 기능을 추가하기보다 실제 서비스에서 발생하는 문제를 수정하고 구조를 개선하는 작업을 많이 했다.이번에는 버그 수정, 캐시 최적화, TDD, 프론트·백엔드 연결까지 정리해 봤다.1. CORS 오류 수정 — origin 문자열 하나의 차이배포 후 랭킹 조회 요청에서 브라우저가 요청을 차단했다.원인을 확인해 보니 백엔드 허용 origin에 /가 하나 더 붙어 있었다.브라우저 Originhttps://football-quiz-web.vercel.app서버 허용 Originhttps://football-quiz-web.vercel.app/ 눈에 잘 안 보이는 차이였지만 CORS는 문자열 기준이라 완전히 다른 origi..

최근 간단한 웹 프로젝트를 만들면서 입력 → 결과 → 저장 → 배포 흐름을 직접 구성해 봤다.처음에는 AI 연동까지 고려했지만, 현재는 기능 범위를 줄여 총운 중심의 운세 웹앱으로 정리했다.프로젝트명도 정리하면서 배포와 운영 관점까지 같이 적용했다.프로젝트 개요이름과 생년월일을 입력하면 오늘의 총운을 보여주는 간단한 웹앱.현재 구현 범위:이름 입력생년월일 입력총운 결과 표시입력값 저장 옵션결과 저장반응형 대응개인정보 안내About 페이지배포 및 분석 도구 연결기술 스택FrontendVue 3TypeScriptViteTailwind CSSVue RouterDay 1 — 입력 폼과 타입 설계운세 입력 화면부터 구성했다.입력 항목:이름생년월일입력 완료 시 부모 컴포넌트로 전달하는 구조로 구현했다.예시: con..

🚀 프로젝트 개요엑셀 파일 업로드와 Google Sheets 연동을 하나의 웹앱에서 처리하는 자동화 도구를 만들고 있다.목표는 단순하다:“엑셀을 업로드하면 자동으로 정리되고, 필요하면 구글 시트까지 연결되는 시스템”🧱 기술 스택FrontendVue 3 (Composition API)ViteTailwindCSSSheetJS (xlsx 처리)Backend (예정)ExpressGoogle Sheets APITypeScript1️⃣ 엑셀 파일 업로드 및 파싱 (FileReader + SheetJS)브라우저에서 엑셀 파일을 직접 읽고 JSON으로 변환하는 구조를 사용했다.핵심 흐름은 다음과 같다:File → ArrayBuffer → SheetJS → JSON Array 구현 구조 const handleFile..

최근 개인 프로젝트들을 만들면서 React와 Vue를 둘 다 사용해봤다.특히 작은 MVP 서비스부터 구조 확장, 컴포넌트화, API 모듈화, lazy loading까지 직접 구성해보면서 두 프레임워크의 차이를 꽤 체감하게 되었다.이번 글은 “어느 게 더 좋다”보다는,실제로 프로젝트를 만들며 느낀 차이점을 개발자 관점에서 정리해본 글이다.처음 느낀 차이처음 접했을 때 가장 크게 느낀 차이는 이것이었다.React는 자유도가 높다Vue는 구조가 비교적 직관적이다React는 JavaScript 중심 느낌이 강했다.JSX 기반이라 JavaScript 안에서 UI를 조립하는 감각이 들었고, “프론트엔드 라이브러리”라는 말이 왜 나오는지 이해가 갔다.반대로 Vue.js는 template, script, style 구..

📎 참고 레딧 원문https://www.reddit.com/r/ClaudeAI/comments/1sbbtv6/can_my_organizations_admin_see_my_chats_and/ Reddit의 ClaudeAI 커뮤니티ClaudeAI 커뮤니티에서 이 게시물을 비롯한 다양한 콘텐츠를 살펴보세요www.reddit.com Claude를 회사나 팀(Organization) 계정으로 사용할 때 자주 나오는 질문이 있다.“관리자가 내가 Claude에서 한 대화를 볼 수 있는가?”결론부터 말하면실시간 감시는 없지만, 데이터 접근 가능성은 존재한다.🧠 1. 핵심 결론Claude 조직 계정 기준으로 정리하면 다음과 같다.❌ 관리자가 내 채팅을 실시간으로 보는 구조는 아님❌ 평소에 대화를 직접 열람하는 기능..

읽은 글:Codex CLI 커맨드 스킬 완벽 가이드 코덱스 CLI 완벽 가이드: 설치 방법부터 커맨드·스킬·AGENTS.md까지 총정리코덱스 CLI 완벽 가이드! Codex App과 CLI 차이부터 설치 방법, 코덱스 커맨드, 코덱스 스킬, AGENTS.md, 실제 후기까지 한 번에 정리했습니다.litmers.com Codex CLI 개요처음에는 단순히 “AI가 코드를 대신 짜주는 도구” 정도로 생각했는데,글을 읽어보니 Codex CLI는 오히려 운영·유지보수·반복 작업에 강한 도구에 가까웠다.특히 터미널 기반 workflow에서 다음과 같은 작업 흐름이 자연스럽게 연결된다:파일 수정반복 리팩토링프로젝트 문맥 유지repository 기반 작업Claude Code와 비교Claude Code현재 Claude..

OpenAI 및 Gemini 기반 LLM 활용 경험을 실제 개발 관점에서 정리한 내용이다.💡 시작하며 (느낀 점)LLM 최적화 가이드를 읽기 전까지는“내가 LLM을 잘못 쓰고 있는 건가?”라는 고민이 있었다.프롬프트를 어떻게 써야 할지도 감이 잘 안 잡혔고,결과도 들쭉날쭉해서 일관성이 없었다.특히 축덕 퀴즈 같은 프로젝트에서데이터가 반복되거나 구조가 깨지는 문제를 보면서“이건 그냥 운인가?”라는 느낌도 있었다.하지만 문서를 읽고 나서 방향이 완전히 바뀌었다.LLM은 질문을 잘하는 도구가 아니라 구조를 설계하는 시스템결과 품질은 모델이 아니라 입력 설계가 결정비용, 중복, 안정성 모두 “프롬프트 구조 문제”이후 생각이 이렇게 바뀌었다:“어떻게 질문할까?” → “어떤 구조로 설계할까?” 🧠 전체 구조1...

축구 선수의 인생 스토리를 읽고 이름을 맞히는 퀴즈 게임을 만들었다.단순한 퀴즈 앱이 아니라, 글로벌 랭킹·다국어·익명 인증·보안까지 직접 설계해보는 것이 목표였다.프론트엔드는 React + TypeScript, 백엔드는 NestJS + Prisma로 구성했다.배포는 Vercel(프론트) + Railway(백엔드).📌 프로젝트 소개축구 선수의 인생 스토리를 읽고 이름을 맞히는 웹 퀴즈 게임.주요 기능일반 퀴즈 모드 (10문제)무한 퀴즈 모드글로벌 랭킹 시스템오답노트다국어 지원 (10개 언어)익명 유저 코드 기반 기록 관리🗓️ Day 1 — 4/20 | 아이디어 → 프로토타입처음엔 “축구 관련으로 재미있는 걸 만들어보자” 정도였다.Football-Data.org와 Wikidata API를 붙여 선수 데..

기존에 만들었던 “축덕 퀴즈”는 단순히 축구 선수 이름을 맞히는 작은 프로젝트로 시작했다.처음에는 가볍게 만들어본 프로젝트였지만, 주변 반응이 생각보다 정말 좋았다.“생각보다 재밌다.”“은근 중독성 있다.”“다음 문제 또 하고 싶어진다.”“심심할 때 하기 좋다.”이런 반응들을 들으면서 단순한 미니 프로젝트로 끝내기보다, 제대로 확장해서 서비스 형태로 만들어보고 싶다는 생각이 들었다.특히 단순 퀴즈를 넘어서:글로벌 랭킹무한 퀴즈 모드기록 저장다국어 대응보안 및 인증실시간 경쟁 요소같은 기능들을 붙이면 훨씬 재미있는 서비스가 될 수 있다고 느꼈다.그래서 이번에는 단순 HTML/JS 수준이 아니라, 실제 서비스 구조처럼 프론트엔드와 백엔드를 분리해서 제대로 개발하기로 했다. 기술 스택 선정 이유이번 확장 버전..