40주 중 5주 차, 첫 AI‑like 엔드포인트 추가

Source: Dev.to

Week 5 – Learning by Getting Stuck (and Unstuck)

Objective

이번 주 목표는 기존 풀스택 애플리케이션에 AI‑스타일 기능을 처음으로 추가하고, 더 중요한 것은 프론트엔드, 백엔드, 개발 환경이 실제로 어떻게 상호작용하는지를 이해하는 것이었습니다.

복잡한 모델에 집중하기보다 통합 패턴을 배우는 것이 목표였습니다: API 계약 정의, 새로운 엔드포인트 공개, UI에서 호출, 결과 렌더링.

What I built

Learning Log 애플리케이션에 백엔드에 새로운 analysis 엔드포인트를, 프론트엔드에 Analyze 버튼을 추가했습니다.

• 백엔드는 이제 텍스트를 받아 구조화된 응답(요약, 태그, 감성)을 반환합니다.
• 프론트엔드는 각 항목에 대해 이 분석을 트리거하고 결과를 아이템 바로 아래에 표시합니다.

분석 자체는 간단하지만, 아키텍처는 실제 AI‑기반 기능이 구축되고 통합되는 방식을 그대로 반영합니다.

What happened

첫 번째 “AI‑like” 엔드포인트를 추가하고 프론트엔드와 통합하는 과정에서 일련의 문제에 부딪혔으며, 모든 문제는 환경 및 프로세스 관리와 관련되었습니다.

다음과 같은 질문이 생겼습니다:

• uvicorn이 “address already in use” 라고 말하는 이유는?
• 같은 포트를 두 개의 프로세스가 듣고 있는 이유는?
• 백엔드만 재시작하려는데 npm이 package.json을 문제 삼는 이유는?
• 프론트엔드가 실제로 어디서 실행되고 있는지, URL을 어떻게 찾을 수 있는가?
• Codespaces에서 “프론트엔드 재시작”이란 정확히 무엇을 의미하는가?

What I learned

• uvicorn --reload는 두 개의 프로세스(워처 + 워커)를 시작하며, 때때로 두 프로세스 모두를 종료해야 합니다.
• 포트는 자동으로 해제되지 않으며, 프로세스를 검사하고 종료하는 방법을 알아야 합니다.
• Codespaces에서는 내 직관과 달리 “로컬”이라는 개념이 없으며, 포트를 노출하고 URL을 찾아야 합니다.

가장 중요한 점: 어려운 부분은 코드를 작성하는 것이 아니라, 어디서 무엇이 실행되는지에 대한 올바른 멘탈 모델을 구축하는 것이었습니다.

Reflection

이번 주는 느리고 가끔은 답답했지만, 매우 가치 있었습니다. “왜 이게 안 되는가?”라는 질문 하나하나가 앞으로 계속 재사용할 기본 지식 조각이 되었습니다.

진전은 더 많은 기능이 추가된 것이 아니라, 미스터리가 줄어든 것이었습니다.

다음 주를 기대합니다.