🚩백엔드 코드 맛보기
✨ 백엔드 프레임워크의 핵심 역할
- '주방 매니저' - Controller (컨트롤러)
- 손님(클라이언트)이 요청한 POST/items, GET/items과 같은 API 엔드포인트가 도착하는 진입점이자, 요리한 음식을 다시 손님에게 응답하기 위한 출발점을 하는 역할
- 손님의 요청의 유효한지 검사
- 실제 일은 서비스에게 시키고, 자기는 '주문 받기/ 서빙하기'만 함 - '메인 셰프' - Service (서비스)
- 실제 비즈니스 로직을 담당
- 리포지토리에게 '데이터 저장/조회'를 시킴 - '음식' - Entity (엔티티)
- 서비스가 처리하는 상품(서버 자원)을 의미한다
- 손님의 주문한 음식 자체 - '저장소' - Repository (리포지토리)
- 오직 '데이터베이스'와 통신하는 역할
- 서비스가 "상품 줘"라고 하면, DB에서 상품을 꺼내 준다
- 서비스가 "상품 저장해"라고 하면 DB에 상품을 저장한다
이 구조를 레이어트 아키텍처(계층형 아키텍처)라고 한다 이 구조의 최대 장점은 부품 교체!
🚩데이터베이스 맛보기
- 데이터베이스(database)는 식당의 초대형 냉장고이자 창고와 같다. 단순히 데이터를 저장하는 것을 넘어, 데이터를 관리하기 위한 전문 시스템(프로그램)
- 영속성(Durability)
- 가게 문을 닫았다 열어도(서버 재시작) 데이터가 안전하게 보관 - 구조화(Structure)
- 데이터를 체계적으로 분류하고 저장 - 동시성(Concurrency)
- 여러 셰프(Service)나 주방 매니저(Controller)가 '동시에' 재료를 꺼내거나 넣어도(읽기/쓰기) 데이터가 꼬이지 않게 관리해 준다 - 무결정/일관성(Integrity/Consistency)
- 재고가 0인데 구매를 허용하지 않거나 동일한 ID를 가진 상품을 저장하지 못하게 할 수 있다 - 질의(Query)
- A-3 구역의 닭고기 5개만 줘처럼, 데이터베이스마다 고유한 방식에 질의를 통해 데이터를 조작 가능
🔥Firebase?
BaaS(Backend as a Service) - 서비스형 백엔드
- 백엔드 서버가 운영하는 데 필요한 거의 모든 기능(데이터베이스, 사용자 인증, 파일 저장 등을 Firebase가 API 형태로 제공
- 개발자는 복잡한 인프라를 직접 구축할 필요 없이 Firebase가 제공하는 기능들을 '레고블록'처럼 조립해서 쓰기만 하면 됨
🚩넓게 보는 웹 프로젝트
🔑 AI 활용하는 법
- AI를 '목발'이 아닌 '학습 코치'로 활용해라!
- 목발은 내가 약할 때 잠시 의지하는 도구이다 그런데 여기에만 의존하면 AI 없이는 한 걸음도 뗄 수 없게 되고 AI에게 달려가 "이거 안 돼! 고쳐 줘"라고만 외치면 맥락을 알지 못한다 처음에는 괜찮을지 몰라도 나중에는 상황이 점점 더 통제 불능이 된다. AI는 다른 부분을 망가뜨리는 수정을 제안할 수도 있고 자기 모순적인 답변을 내놓는 환각 현상을 일으킬 수도 있다. 디버깅 지옥이 될 수도...... 그러니 AI는 능동적으로 묻고 그 답을 이해하며, 선택적으로 수용해서, 궁극적으로 내 것으로 만들어야 한다. AI를 학습 코치로 삼아 더 깊게 성장할 수 있는지 그 전략을 익혀야 된다. - '스마트 드라이버'가 되세요!
- GPS가 아무리 발달해도 운전석에 앉아 최종적으로 주행을 결정하는 책임 주체는 운전자.
- AI가 옳은 길을 안내하는지 판단하고 막다른 길을 만났을 때 수정할 수 있는 기본기는 반드시 필요하다. - 복사 붙여넣기를 하기 직전에 멈추고 스스로에게 물어봐라
- "나는 이 코드가 무엇을 하는지, 왜 이렇게 작동하는지 이해했나?"
- "나는 이것을 동료 개발자에게 설명할 수 있나?"
- "나는 이 도움 없이 다음 번에 스스로 이것을 다시 해낼 수 있나?"
📚 AI 코치에게 통찰을 얻어내는 질문법
- 명령 (Task): AI에게 무엇을 할지 명확히 지시하기
- 맥락 (Context): AI가 오해하지 않도록 배경상황 설명하기
- 페르소나 (Persona): AI에게 '10년 차 시니어 개발자' 같은 전문가 역할을 부여하기
- 예시 (Example): AI에게 모범 답안을 보여 주어 따라하게 만들기
- 포맷 (Format): AI가 어떤 형식(예: 표, 리스트)으로 답해야 할지 지정하기
- 어조 (Tone): AI가 어떤 말투(예: 전문가처럼, 친절하게)로 답해야 할지 지정하기
기술 1: '단순 정보' ➡️ '개념 이해' (비유와 맥락 요청)
- 👎 Bad: "ArrayList랑 HashMap 차이점 알려줘."
- 👍 Good: "너는 [페르소나: Java를 10년 이상 가르친 튜터]야. [맥락: 나는 이제 막 컬렉션을 배우기 시작한 학생]이야. [명령: ArrayList와 HashMap의 차이점]을 [포맷: '식당의 순서대로 줄 서는 것'과 '예약자 명단']에 비유해서 설명해 줘. 그리고 [각각 어떤 상황(예: 데이터 조회, 순차 입력)에서 사용하는 것이 가장 효율적인지] 알려줘."
기술 2: '요청' ➡️ '리뷰' (원인 분석 요청)
- 👎 Bad: "이 에러 고쳐줘. [에러 로그 복붙]"
- 👍 Good: "너는 [페르소나: 10년 차 시니어 백엔드 개발자]야. [맥락: 내가 로그인 기능]을 만들다가 아래 에러를 만났어. [예시: 내 코드와 에러 로그는 다음과 같아...] [명령: 이 에러가 발생한 근본적인 원인]을 설명해 줘. [포맷: 내가 고쳐야 할 부분]을 알려줘."
기술 3: '생성' ➡️ '학습' (리팩토링 및 설명 요청)
- 👎 Bad: "찜 목록 UI 만들어 줘."
- 👍 Good: "[맥락: 아래는 내가 '찜 목록' 기능을 위해 작성한 코드]야. 이 코드를 [명령: 최신 문법을 사용]하도록 리팩토링해 줘. 그리고 [포맷: 1) 리팩토링된 코드, 2) 코드가 어떻게 변경되었는지, 3) 왜 최신 방식이 기존 방식보다 더 나은지] 그 이유를 [어조: 초보자도 이해하기 쉽게 단계별로 설명]해 줘."
나쁜 질문을 좋은 질문으로 진화시키기 그리고 챗지피티한테 실습해 보자
- ✅ [실습] 프론트엔드 구현 묻기"chatGPT로 아이디, 비밀번호 입력창과 로그인 버튼이 있는 폼을 만들어 줘."
- [1단계] 나쁜 질문으로 뼈대 얻기
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>로그인</title>
<style>
body {
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
background: #f6f7fb;
}
.card {
width: min(360px, 92vw);
background: white;
border: 1px solid #e7e9ef;
border-radius: 14px;
padding: 20px;
box-shadow: 0 6px 20px rgba(0,0,0,.06);
}
h1 { font-size: 18px; margin: 0 0 14px; }
label { display: block; font-size: 13px; margin: 12px 0 6px; color: #333; }
input {
width: 100%;
box-sizing: border-box;
padding: 10px 12px;
border: 1px solid #cfd6e4;
border-radius: 10px;
outline: none;
font-size: 14px;
}
input:focus { border-color: #6a7cff; box-shadow: 0 0 0 3px rgba(106,124,255,.18); }
button {
width: 100%;
margin-top: 14px;
padding: 10px 12px;
border: 0;
border-radius: 10px;
background: #2f49ff;
color: white;
font-size: 14px;
cursor: pointer;
}
button:disabled { opacity: .6; cursor: not-allowed; }
.msg { margin-top: 10px; font-size: 13px; color: #555; }
.error { color: #d62d20; }
</style>
</head>
<body>
<form class="card" id="loginForm">
<h1>로그인</h1>
<label for="userId">아이디</label>
<input id="userId" name="userId" type="text" autocomplete="username" required />
<label for="password">비밀번호</label>
<input id="password" name="password" type="password" autocomplete="current-password" required />
<button type="submit" id="loginBtn">로그인</button>
<div class="msg" id="msg"></div>
</form>
<script>
const form = document.getElementById("loginForm");
const msg = document.getElementById("msg");
const btn = document.getElementById("loginBtn");
form.addEventListener("submit", (e) => {
e.preventDefault();
const userId = form.userId.value.trim();
const password = form.password.value;
msg.classList.remove("error");
msg.textContent = "";
if (!userId || !password) {
msg.classList.add("error");
msg.textContent = "아이디와 비밀번호를 모두 입력해 주세요.";
return;
}
// 데모: 실제 로그인 API 요청은 여기서 fetch로 처리
btn.disabled = true;
msg.textContent = "로그인 시도 중...";
setTimeout(() => {
btn.disabled = false;
msg.textContent = `입력됨 → 아이디: ${userId}, 비밀번호: ${"*".repeat(password.length)}`;
}, 600);
});
</script>
</body>
</html>- [2단계] 뼈대 코드를 좋은 질문으로 분해하기
이때까지 내가 막연하게 배우면서도 불안함을 느끼고 있었던 이유가 뭔지 계속 이걸 배워도 되는 건지에 대한 해답을 던져 주는 강의였다.
AI를 막연하게 다른 일 할 때도 쓴 적이 많은데 항상 딱 안 좋은 예시 정도로 질문을 던졌다. 어차피 AI는 이제 우리 생활에서 뗄래야 뗄 수 없는 상황이고 잘 활용하는 게 중요하다는 건 알고 있었지만, 막연하게 생각만 하고 있었다. 이 강의로 어떻게 써야 잘 쓰는 건지 감을 잡을 수 있었다. 아직 어떻게 써야 되는지 완벽하게 내 것으로 만든 건 아니지만, 계속 쓰면서 감을 잡아야겠다는 생각을 했다.
'IL > TIL' 카테고리의 다른 글
| 20260107 [TIL] - 협업을 위한 git 활용 팀 과제 (0) | 2026.01.06 |
|---|---|
| 20260105 [TIL] 5 - Java 기초 문법(변수, 입출력, 연산자, 조건문, 반복문, 배열, 메서드) (0) | 2026.01.05 |
| 20260102 [TIL] 4 - 웹개발 기초 과제(맛집 관리 API 설계하기) (0) | 2026.01.02 |
| 20251230 [TIL] 2 - 웹개발 기초(REST API, Postman, 프로젝트 맛보기) (0) | 2025.12.30 |
| 20251229 [TIL] 1 - 웹개발 기초 (0) | 2025.12.30 |