2026. 7. 30. 09:09ㆍAI 기반 프론트엔드 웹개발자 양성과정
[프로젝트 3일차] 컨벤션 병합 · 레포 설정
+ 기획서·WBS·요구사항·ERD 작성
2026.07.29 · 오전 팀 회의(협업 규칙 확정) + 개인 산출물(기획 문서 4종)
📋 오늘 다룬 것들
오늘 오전엔 협업 규칙을 실제로 확정했다. 1차로 병합한 CLAUDE.md를 함께 검토해 코드 컨벤션을 정하고, GitHub 레포를 백엔드/프론트로 분리하기로 했다. 오후엔 개인적으로 팀 기획서 마무리 + WBS + 요구사항 명세서 + 데이터 ERD까지 프로젝트의 뼈대 문서 4종을 작성했다. 회의로 "규칙"을 맞추고, 문서로 "설계"를 잡은 하루였다.
🗣 오전 회의 — 협업 규칙 확정
참석자 전원. 안건은 주간 미션 공유 · CLAUDE.md 병합 협의 · GitHub 레포 기본 설정 · 프로젝트 기획서 네 가지였다.
주간 미션 공유
회의록 시스템 관련 사항을 공유하고, 플러그인 개발과 기획서 제출을 완료했다.
CLAUDE.md 병합 협의
각자 만든 규칙을 1차로 병합한 CLAUDE.md를 함께 확인하고, 아래를 확정했다.
| 항목 | 결정 |
|---|---|
| import 정렬 도구 | eslint-plugin-import 사용 |
| CSS 방법론 | TailwindCSS 사용 (shadcn/ui 같은 라이브러리는 미사용) |
| 백엔드 호스팅 | Render vs AWS 프리티어 트레이드오프 확인 후 백엔드 담당이 결정 |
GitHub 레포 기본 설정
프로젝트 기획서
월 단위 기획서 제출 기한은 ~7/31. 정해진 서식이 없어, 내가 만든 노션 템플릿을 팀 공통 서식으로 쓰기로 했고, 팀원 전원이 그 페이지에서 공동 편집으로 작성하기로 했다.
📌 결정 사항 · 액션 아이템
| 결정 사항 |
|---|
import 정렬 도구 = eslint-plugin-import |
| CSS = TailwindCSS (shadcn/ui 등 미사용) |
| 백엔드 호스팅 = 담당자가 트레이드오프 확인 후 결정 |
| 월 단위 기획서 = 내가 만든 노션 템플릿 사용 |
| 기획서 = 전원 노션 공동 편집으로 작성 |
📝 내가 한 일 — 기획 문서 4종
오늘은 팀의 설계 뼈대를 세우는 문서들을 집중적으로 작성했다.
🧑💻 오늘의 코드 리뷰 — 폼 값은 name 이 있어야 전송된다 (HTML 2일차)
2일차 코드 리뷰 주제는 "제출되는 건 name이 붙은 컨트롤의 값뿐". 로그인 폼에서 아이디·비밀번호를 다 채우고 눌러도 서버엔 빈 값이 도착하는 게 문제였다. 화면상 제출(새로고침)은 멀쩡히 일어나서 더 헷갈린다.
❌ 문제 코드 (전체)
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>로그인</title> </head> <body> <h1>로그인</h1> <form> <label for="userId">아이디</label> <input type="text" id="userId"> <!-- ❌ name 없음 → 전송 안 됨 --> <label for="userPw">비밀번호</label> <input type="password" id="userPw"> <!-- ❌ 여기도 name 없음 --> <button type="submit">로그인</button> </form> </body> </html>
✅ 정답 (수정 부분)
<!-- 전송이 필요한 입력마다 name 추가 → 서버가 읽는 키가 곧 이 name --> <input type="text" id="userId" name="userId"> <input type="password" id="userPw" name="userPw">
name 속성이 있는 컨트롤만 직렬화한다. id만 있고 name이 없으면 그 값은 제출 데이터에 안 담긴다. id는 label 연결(for)·CSS·JS 선택자용일 뿐 전송과는 무관. 그래서 "입력은 했는데 서버엔 안 온다"가 된다.확인 방법
| 방법 | 문제(name 없음) | 정답(name 있음) |
|---|---|---|
| 채우고 로그인 → 주소창(URL) | ...? 쿼리 비어 있음 | ...?userId=...&userPw=... |
Console [...new FormData(document.querySelector('form'))] | [] (빈 배열) | [['userId','...'],['userPw','...']] |
| DevTools Elements | input에 id만 | name="userId"·name="userPw" |
FormData는 name이 있는 컨트롤만 담으므로, 값이 안 실리는 직접 증거가 된다. (file://로 열면 쿼리가 안 보일 수 있어 Live Server 권장 — 콘솔 확인은 어느 쪽에서도 확실)req.query.userId/req.body.userId가 계속 undefined. 프론트는 "분명히 입력했는데" 서버는 빈 값이라 원인을 한참 못 찾는다. name 오타(user_id↔userId)는 더 악질 — 렌더·제출은 되는데 서버가 기대하는 키와만 안 맞아 조용히, 에러 없이 실패한다.id로 값이 전송된다고 착각(전송은 오직 name), ② name을 서버 기대 키와 다르게(오타·대소문자·스네이크/카멜 혼용), ③ 로그인 폼을 GET(기본값) 그대로 두기 → 비밀번호가 URL·기록에 남으므로 실무는 method="post", ④ checkbox·radio는 name이 없으면 값은커녕 그룹조차 안 묶인다.✍️ 마치며
오늘은 "손으로 코드를 짜는" 날이 아니라 "프로젝트의 뼈대를 세우는" 날이었다. 컨벤션(eslint·Tailwind)과 레포 구조(BE/FE 분리)를 팀이 합의하고, 나는 기획서·WBS·요구사항·ERD로 설계의 밑그림을 그렸다. 규칙과 설계를 먼저 맞춰두면 나중에 각자 병렬로 달릴 때 충돌이 줄어든다는 걸 다시 느꼈다. 내일부터는 이 문서들을 기준으로 실제 구현에 들어간다.
🏷️ 포트폴리오 | 팀 프로젝트 | CLAUDE.md | WBS | 요구사항 명세 | ERD
'AI 기반 프론트엔드 웹개발자 양성과정' 카테고리의 다른 글
| [260731 24일차] 프로젝트 #5 (0) | 2026.08.03 |
|---|---|
| [260730 23일차] 프로젝트 #4 (0) | 2026.07.31 |
| [260728 21일차] 프로젝트 #2 (0) | 2026.07.28 |
| [260727 20일차] 프로젝트 #1 (0) | 2026.07.28 |
| [260724 19일차] Claude Code 심화 (0) | 2026.07.28 |