ksc-dev 님의 블로그

개요테트리스, 내기 모음, 축덕 퀴즈 세 프로젝트에 환경변수 관리를 적용하고 Netlify 배포 세팅을 하면서 겪은 삽질을 정리했다.1. GA ID, AdSense ID를 .env로 분리한 이유GA ID와 AdSense ID는 사실 빌드 후 HTML에 그대로 들어가서 누구나 볼 수 있는 값이다. 진짜 비밀 키가 아니다.그럼에도 .env로 관리하는 이유는 두 가지다.첫째, 코드에서 값을 분리해서 환경별로 다르게 쓸 수 있다. 둘째, .gitignore에 추가하면 실수로 민감한 키를 커밋하는 나쁜 습관을 처음부터 막을 수 있다.2. Vite에서 index.html에 환경변수 주입하기Vite는 index.html에서 %VITE_변수명% 문법으로 빌드 시 자동으로 값을 치환해준다. html.env 파일은 이렇..

프로젝트 소개친구들이랑 모임에서 내기할 때 쓸 게임 모음 웹사이트를 만들었다. Vite + Vue3 + Tailwind CSS v4 스택으로 제작했고, 주사위 게임 / 제비뽑기 / 스톱워치 / 사다리 타기 총 4가지 게임을 구현했다. 배포: https://lucky-games-web.vercel.app lucky-games-web lucky-games-web.vercel.app 기술 스택프론트엔드: Vue3 + Vite스타일링: Tailwind CSS v4배포: Vercel + GitHub Actions분석: Google Analytics GA4 프로젝트 구조lucky-games-web/ ├── src/ │ ├── router/index.js │ ├── views/ │ │ ├── Intro..

1. 어떤 취약점인가?단 20MB HTTP 요청 하나로 Django 서버를 1분간 마비시킬 수 있는 취약점이다. 인증 없이도 공격이 가능하다는 점에서 더 심각하다. 2. 왜 이런 일이 생겼나?Django가 multipart/form-data 요청을 처리할 때 base64 인코딩된 데이터에 공백이 많으면 내부적으로 엄청난 연산이 발생한다. 2.5MB 요청 하나가 내부적으로 86GB 메모리 복사를 유발한다고 한다. 3. 더 무서운 점인증된 엔드포인트라도 CSRF 검증 단계에서 이미 파서가 실행되기 때문에 로그인 없이도 공격이 가능하다. 일반적인 서버 환경에서 동시에 수십 개 요청만 보내도 서버가 마비된다. 4. 느낀 점아직 Django를 직접 써본 적은 없지만 이 기사를 읽으면서 느낀 점이 있다. 20년 가..

1. 배경4부는 모바일에서 터치로 블록을 조작할 수 있도록 구현한 과정이다. 2. 터치 조작 방식스와이프 방향에 따라 블록을 움직이는 방식으로 구현했다.왼쪽 스와이프 → 블록 왼쪽 이동오른쪽 스와이프 → 블록 오른쪽 이동아래 스와이프 → 하드 드롭위 스와이프 → 블록 회전제자리 탭 → 블록 회전3. 구현 코드 function handleTouchEnd(e) { const endX = e.changedTouches[0].clientX const endY = e.changedTouches[0].clientY const dx = endX - touchStartX const dy = endY - touchStartY // 탭 감지 if (Math.abs(dx) Math.abs(dy)) { ..

1. 배경3부는 모바일에서도 잘 보이도록 반응형 레이아웃을 구현한 과정이다. 2. 핵심 문제테트리스 보드는 10×20 고정 비율이라 CSS vw/vh 단위만으로는 화면에 맞추기 어렵다. 높이 기준으로 맞추면 가로로 삐져나오고, 가로 기준으로 맞추면 세로로 삐져나온다. 3. 해결 방법 — JS로 동적 셀 크기 계산 const CELL_SIZE = computed(() => { const byHeight = Math.floor((windowHeight.value * 0.75) / BOARD_ROWS) const byWidth = Math.floor((windowWidth.value * 0.62) / BOARD_COLS) return Math.max(16, Math.min(byHeight, byW..

1. 배경1부에서 충돌 감지를 구현했다. 2부는 꽉 찬 줄을 삭제하고 점수를 계산하는 로직이다. 2. 줄 삭제 구현 function clearLines() { const remainingLines = board.value.filter(row => !row.every(cell => cell !== 0) ) const deletingLines = BOARD_ROWS - remainingLines.length const emptyLines = Array.from( { length: deletingLines }, () => Array(BOARD_COLS).fill(0) ) board.value = [...emptyLines, ...remainingLines] return de..

1. 배경Claude Code로 Vue3 + Vite 기반 레트로 테트리스를 만들면서 배운 것들을 정리한다. 1부는 테트리스의 핵심인 충돌 감지(isValidPosition) 구현 과정이다. 2. 충돌 감지란?블록이 이동하거나 회전할 때 벽, 바닥, 쌓인 블록에 닿는지 확인하는 함수다. 이게 없으면 블록이 벽을 뚫고 지나간다. 3. 구현 과정 function isValidPosition(shape, offsetX, offsetY) { let valid = true // 플래그 변수 shape.forEach((row, rowIdx) => { row.forEach((cell, colIdx) => { if (cell !== 0) { const boardX = offsetX..

1. Claude Code가 뭔지 한 줄 요약터미널에서 AI와 대화하면서 코드를 짜주는 개발 도구다. 2. 왜 Claude Code를 쓰게 됐나JS 입문 개발자로서 개발 오픈채팅방에서 다들 LLM으로 코딩한다는 걸 알게 됐다. 코딩 공부 방법이랑 어떤 LLM이 좋은지 물어봤는데 Claude Code를 추천받았다. 개발 부업을 하면서 JS 및 다양한 프레임워크를 배우고, 나중에 취업 포폴까지 만드는 데 활용하기로 결정했다. 3. 설치 방법npm install -g @anthropic-ai/claude-code 1). 설치 후 확인claude --version 4. 실행 방법claude 터미널에서 claude 입력하면 바로 실행된다. 5. 처음 써본 느낌Pro 플랜이 필요하다. 무료로 사용할 수 있는 방법..

1. ref가 뭔지 한 줄 요약반응형 데이터를 만들어주는 함수다. 2. 코드 비교// Vue2 Options APIdata() { return { count: 0 }}// Vue3 refimport { ref } from 'vue'const count = ref(0) 3. 자주 하는 실수.value 를 까먹는 경우가 많다.const count = ref(0)count.value++ // 스크립트에서는 .value 필요 템플릿에서는 .value 없이 바로 쓸 수 있다. {{ count }} 4. ref vs reactive refreactive원시값✅❌객체✅✅.value 필요✅❌단순한 값은 ref, 객체는 reactive가 적합하다. 5. 마무리데이터가 바뀌어도 화면이 안 바뀌는 문제가 있었는데, ..

1. Vite가 뭔지 한 줄 요약프론트엔드 개발을 빠르게 실행하고 빌드해주는 도구. Webpack보다 훨씬 빠르다.2. 왜 Vite를 쓰나• Webpack은 프로젝트 커질수록 느려짐• Vite는 ES Module 기반이라 개발 서버 시작이 빠름• Vue3랑 궁합이 좋음3. 프로젝트 세팅npm create vite@latest my-projectcd my-projectnpm installnpm run dev4. 폴더 구조my-project/├── src/│ ├── components/│ ├── App.vue│ └── main.js├── index.html└── vite.config.js5. 마무리Vue3 쓰려고 Vite 선택했는데 Vue3 소형 프로젝트라면 Vite 세팅이 적합한 것 같다.