개발 환경과 도구 메모 모음
에디터
VS Code: 같은 단어 여러 개 선택
Ctrl + D(macOS Cmd + D)를 누를 때마다 커서가 있는 단어와 같은 다음 단어가 추가로 선택된다. 여러 곳을 한 번에 고칠 때 쓴다. 전부 한 번에 선택하려면 Ctrl + Shift + L(macOS Cmd + Shift + L).
React 컴포넌트 기본 틀: rafce
ES7+ React/Redux/React-Native snippets 확장을 설치하면 rafce를 입력해 화살표 함수 컴포넌트와 export default 틀을 바로 만들 수 있다.
개발 서버
같은 네트워크의 다른 기기에서 접속
npm run dev -- --host
-- 뒤의 옵션은 npm 스크립트가 실행하는 명령(Vite)에 그대로 전달된다. --host를 주면 localhost뿐 아니라 내부 IP로도 열려서, 휴대폰에서 http://192.168.x.x:5173으로 접속할 수 있다.
특정 포트를 쓰는 프로세스 종료
# Windows
netstat -ano | findstr :3000
taskkill /PID <PID> /F
# macOS / Linux
lsof -ti tcp:3000 | xargs kill
포트 번호로 찾아서 종료한다. 이름 패턴(pkill node)으로 종료하면 다른 개발 서버까지 함께 꺼질 수 있다.
Vite에서 환경 변수 읽기
Vite는 .env 파일을 기본으로 읽으므로 dotenv 패키지를 따로 설치할 필요가 없다. VITE_ 접두사가 붙은 변수만 클라이언트 코드에 노출된다.
const apiKey = import.meta.env.VITE_API_KEY;
process.env는 Node.js(설정 파일, 서버 코드)에서 쓰는 방식이다. VITE_ 변수는 번들에 그대로 들어가 누구나 볼 수 있으므로 비밀값은 넣지 않는다.
HTTP와 보안
multipart/form-data
파일과 일반 필드를 함께 보낼 때 쓰는 요청 형식이다. FormData를 fetch나 axios에 넘기면 브라우저가 Content-Type: multipart/form-data; boundary=...를 자동으로 만든다. Content-Type을 직접 지정하지 않는다. 직접 넣으면 boundary가 빠져서 서버가 본문을 해석하지 못한다.
const formData = new FormData();
formData.append('file', file);
formData.append('title', title);
await api.post('/upload', formData);
httpOnly 쿠키와 CSRF
HttpOnly쿠키는 JavaScript(document.cookie)로 읽을 수 없어서, XSS로 토큰을 훔쳐 가는 것을 막는다.- 대신 쿠키는 요청에 자동으로 실려 가므로 CSRF에 대비해야 한다.
SameSite=Lax(또는Strict) 설정, 상태를 바꾸는 요청은 GET이 아닌 메서드로 만들기, 필요하면 CSRF 토큰을 함께 쓴다.
데이터베이스 용어: NoSQL과 SQL
| NoSQL(MongoDB) | SQL |
|---|---|
| collection | table |
| document | row |
| field | column |
자주 쓰는 사이트
- gitignore.io: 언어·도구 이름을 입력하면
.gitignore템플릿을 만들어 준다.
AI 코딩 도구
Claude Code에 MCP 서버 연결
# claude mcp add --transport http <이름> <URL>
claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp
# 제거
claude mcp remove figma-desktop
# 목록
claude mcp list
-s project를 붙이면 프로젝트의 .mcp.json에 저장되어 팀과 공유된다. URL에 토큰이나 secret이 들어 있는 서버는 project 범위로 저장하지 않는다. .mcp.json이 커밋되면서 비밀값이 저장소에 남는다. 비밀값은 환경 변수로 넘기거나 개인(local·user) 범위로 저장한다.
연결된 서버의 도구 목록은 세션 안에서 /mcp로 확인할 수 있다. Figma 데스크톱 MCP의 경우 디자인 컨텍스트 조회, 변수 정의 조회, 스크린샷, Code Connect 매핑 같은 도구를 제공한다.
Windows에서 파일 수정이 반복해서 실패할 때
Windows에서 AI 코딩 도구가 파일 경로를 /로 넘겨 편집이 실패하는 경우가 있었다. 프로젝트 지침 파일(CLAUDE.md)에 "Windows에서는 파일 경로에 백슬래시(\)를 쓴다"는 규칙을 적어 두니 해결되었다. 도구 버전에 따라 이미 고쳐졌을 수 있으므로, 같은 증상이 있을 때만 적용한다.