40주 중 4주 – React, TypeScript, Python을 사용한 첫 풀스택 앱

Source: Dev.to

이번 주 목표

이번 주 목표는 풀스택 개발을 향한 실제적인 다음 단계를 밟는 것이었습니다.

지금까지는 모든 것이 정적 페이지에 있거나 전부 프론트엔드에만 존재했습니다. 이번 주에 저는 다음을 하고 싶었습니다:

• Python을 사용해 첫 번째 백엔드 API 만들기
• React + TypeScript 프론트엔드를 해당 API와 연결하기
• 프론트엔드와 백엔드가 서로 통신하도록 만들기
• GitHub Codespaces와 터미널 사용 기본 익히기

만든 것

프론트엔드와 백엔드가 명확히 분리된 작은 Learning Log 애플리케이션을 만들었습니다.

백엔드

• Python + FastAPI
• 엔드포인트:
  • 항목 생성
  • 항목 목록 조회
  • “즐겨찾기” 플래그 토글
• Swagger를 통한 자동 API 문서화

프론트엔드

• React + TypeScript
• 백엔드 API에서 데이터 가져오기
• 항목 표시
• 새 항목 생성 및 즐겨찾기 지정 기능 제공

이번 챌린지에서 처음으로 다음 조건을 만족하는 프로젝트입니다:

• 프론트엔드가 백엔드에 의존하고,
• 데이터가 HTTP를 통해 흐르고,
• URL, 포트, 환경 설정이 잘못되면 오류가 발생합니다.

배운 점

이번 주는 제가 잊어버렸거나 제대로 배우지 못했던 기본 개념들로 가득했습니다:

• 터미널 기본: 폴더 탐색, 가상 환경 활성화, 서버 실행
• GitHub Codespaces 기본: 클라우드상의 실제 Linux 머신, 창을 닫으면 프로세스가 중단, 포트를 명시적으로 노출해야 함
• FastAPI 작동 방식: 요청·응답 모델 정의, 자동 Swagger 문서화
• 프론트엔드가 백엔드와 통신하는 방법: fetch, JSON, 환경 변수 활용
• 프론트엔드 앱에 API 기본 URL을 설정해야 하는 이유

전체적으로 현대 개발은 문법보다 시스템 전체를 이해하는 것에 더 가깝습니다.

어려웠던 점 / 놀라웠던 점 / 혼란스러웠던 점

몇 가지가 있었어요 😅 — 바로 그래서 이번 주가 의미가 있었습니다.

• requirements.txt에 있는 항목들을 터미널 명령어처럼 다뤘음
• 파이썬 가상 환경을 활성화하는 것을 반복해서 잊음
• uvicorn: command not found 오류를 통해 환경이 실제로 어떻게 동작하는지 많이 배움
• 코드가 실행되는 위치와 브라우저가 실행되는 위치를 구분하는 데 시간이 걸림
• Codespaces에서 포트를 포워딩하는 개념이 처음엔 직관적이지 않음
• 프론트엔드가 호출해야 할 URL이 무엇인지(그리고 왜 localhost가 안 되는지) 혼란스러웠음
• .env 파일을 수정한 뒤 프론트엔드를 재시작하지 않아 많은 고민을 함

가장 어려웠던 부분은 코딩 자체가 아니라 정신 모델이었습니다:

• 어디서 무엇이 실행되는지,
• 무엇이 무엇과 통신하는지,
• 무언가 바뀔 때 무엇을 재시작해야 하는지.

다음 주 계획

5주 차에는 이번에 만든 아키텍처를 기반으로 확장하고 싶습니다:

• 프론트엔드: React + TypeScript 유지
• 백엔드: Python 유지
• 첫 번째 “스마트” 기능 추가 – 텍스트를 처리·분석·요약하거나 항목을 풍부하게 만드는 기능

이는 이번 주에 다진 기반 위에 AI‑연관 기능을 구현하기 위한 첫 걸음이 될 것입니다.

4주 차는 이전보다 느리고, 더 좌절감도 있었지만, 교육적인 면이 가장 컸습니다 – 이는 아마도 좋은 신호일 겁니다.