[IT] 클로드 코드와 함께: 어드민 셋업 & 로그인 페이지 개발기
[IT] 클로드 코드와 함께: 어드민 셋업 & 로그인 페이지 개발기
안녕하세요, 가야태자 @talkit 입니다. ^^
오늘은 어제의 Hello World에 이어, 클로드 코드와 함께 어드민 셋업 및 로그인 과정을 개발해 보았습니다.
이때 데이터베이스에 어드민 아이디·패스워드가 없으면, 새로운 어드민을 생성하도록 페이지를 띄우도록 했습니다. 그리고 작업 전에 GitHub에 프라이빗(private) 프로젝트를 만들고 커밋부터 하고 시작했습니다.
이제 뼈대(3계층 통신)가 잡혔으니, 진짜 프로그램처럼 "문 앞에 자물쇠"를 다는 첫 단계인 셈이네요. 그 과정을 차근차근 적어보겠습니다.
🐙 먼저 GitHub 프라이빗 저장소부터
본격적인 개발에 앞서, 소스를 안전하게 보관할 GitHub 저장소부터 만들었습니다. 클로드 코드가 gh 명령으로 뚝딱 처리해 주더군요.
- 저장소를 private 으로 생성
node_modules같은 불필요한 파일은.gitignore로 제외- 로컬 전용 설정 파일도 저장소에서 빼고 첫 커밋
"코드는 만들기 전에 저장소부터"라는 습관을 지킬 수 있어서 마음이 편했습니다. ^^
🎨 개발 전에 "설계"부터 보여주기
바로 코딩에 들어가지 않고, 클로드 코드에게 먼저 ① DB 스키마, ② 넣을 데이터, ③ 화면 시안을 보여달라고 했습니다. 승인하고 나서 개발하는 방식이죠.
특히 좋았던 점은 로그인의 핵심인 사용자 테이블(users) 설계였습니다.
| 컬럼 | 타입 | 설명 |
|---|---|---|
id | INTEGER (PK) | 자동 증가 |
username | VARCHAR(50) | 로그인 아이디 (중복 방지) |
password_hash | VARCHAR(255) | bcrypt 해시 (평문 저장 금지!) |
role | VARCHAR(20) | 권한 (기본 admin) |
is_active | BOOLEAN | 계정 활성 여부 |
created_at / updated_at / last_login_at | TIMESTAMP | 시각 기록 |
지금은 1인용 서버라 아이디가 하나면 충분하지만, 나중에 다중 사용자로 확장할 수 있도록 role 컬럼을 미리 넣어 두었습니다.
🔑 핵심 아이디어: "어드민이 없으면 만들게 하자"
이번 개발의 가장 중요한 발상입니다. 흔히 설치형 프로그램을 처음 켜면 "관리자 계정을 만드세요" 화면이 뜨잖아요? 그걸 구현했습니다.
원리는 아주 단순합니다. 별도의 플래그 없이 users 테이블이 비어 있는지만 확인합니다.
- 계정이 하나도 없으면 → 최초 설정 화면 (운영자 계정 생성)
- 계정이 하나라도 있으면 → 로그인 화면
그래서 프로그램을 처음 설치해 실행하면 자연스럽게 "운영자 계정 만들기"가 뜨고, 한 번 만들고 나면 그 다음부터는 로그인 화면이 뜨게 됩니다.
🖥️ 두 개의 화면
클로드 코드가 어제 만든 Hello World 화면과 톤을 맞춰서 두 화면을 영어 UI로 만들어 주었습니다.
① 최초 설정 (Create admin account)
- 아이디 / 비밀번호 / 비밀번호 확인
- 8자 이상, 비밀번호 일치 검증
- 주황색 "Create admin account" 버튼
② 로그인 (Sign in)
- 아이디 / 비밀번호
- "로그인 상태 유지" 체크박스
- 검은색 "Sign in" 버튼
디자인 시안을 먼저 이미지로 보여주고, "훌륭하다" 하고 승인하니 그대로 실제 동작하는 화면으로 만들어 주더군요. ^^
🔒 비밀번호와 로그인, 이렇게 안전하게
로그인 기능은 "보안"이 생명이라, 아래 원칙을 지켰습니다.
- 비밀번호는 절대 평문 저장 금지 —
bcrypt로 해시해서 저장합니다. 설령 DB가 통째로 유출돼도 원래 비밀번호는 알 수 없습니다. - 로그인 성공 시 JWT 토큰 발급 — 이후 요청은 이 토큰으로 인증합니다. ("로그인 상태 유지"를 체크하면 30일, 아니면 12시간)
- 틀렸을 때 친절하지 않게 — "아이디가 틀렸는지, 비번이 틀렸는지" 알려주지 않고 동일한 메시지만 줍니다. (공격자에게 힌트를 주지 않기 위해)
백엔드에는 아래 4개의 API를 만들었습니다.
| 경로 | 설명 |
|---|---|
GET /api/auth/status | 최초 설정이 필요한지(계정이 없는지) |
POST /api/auth/setup | 운영자 계정 최초 1회 생성 |
POST /api/auth/login | 로그인 → 토큰 발급 |
GET /api/auth/me | 토큰으로 본인 확인 |
클로드 코드가 개발만 하는 게 아니라, curl 로 직접 시나리오 테스트까지 돌려서 보여줬습니다. 계정 생성 → 상태 전환 → 중복 생성 거부 → 정상 로그인 → 틀린 비번 401 → 토큰 없이 접근 401… 전부 통과하는 걸 확인하고 나니 안심이 되더군요.
🐳 그리고 도커로 한 방에 배포
어제는 프론트엔드를 로컬에서 따로 띄웠는데, 오늘은 프론트엔드도 컨테이너로 묶었습니다. Vue를 빌드해서 nginx 로 서빙하고, nginx가 /api 요청을 백엔드로 넘겨주도록 했습니다.
그 덕분에 이제 docker compose up 한 번이면 DB·백엔드·프론트가 모두 뜨고, 사용자는 딱 하나의 주소로만 접속하면 됩니다.
🐛 오늘의 삽질: 8080 포트를 누가 쓰고 있어?
배포하고 접속했더니 엉뚱한 "Authentication required" 페이지가 떴습니다. 알고 보니 제 맥에서 Jenkins가 이미 8080 포트를 쓰고 있었더군요. 클로드 코드가 포트를 조사해서 원인을 찾아내고, 비어 있는 8090 포트로 바꿔서 해결했습니다. 이런 건 혼자였으면 한참 헤맸을 텐데 말이죠. ^^;
📝 마치며
오늘로 "문 앞의 자물쇠"가 완성되었습니다.
- 처음 설치하면 → 운영자 계정 생성
- 그 다음부터 → 로그인
- 비밀번호는 bcrypt 해시, 세션은 JWT
- 전부 도커 한 번으로 배포
새 아이디를 만드는 것부터 로그인까지 직접 눌러보며 확인했는데, 잘 동작해서 뿌듯했습니다. 마지막으로 오늘 작업을 README에 깔끔하게 정리하고 커밋·푸시까지 마쳤습니다.
다음 단계는 드디어 로그인 후에 만나게 될 진짜 마크다운 에디터 화면입니다. 이제 정말 "에디터"다워지겠네요.
차근차근 완성되어 가는 제 프로젝트에 많은 관심과 응원 부탁드립니다!
감사합니다. ^^