Phoenix LiveView 영수증 관리 앱 개발 가이드

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

Phoenix LiveView 초보 개발자 및 Elixir 프레임워크 사용자

난이도: 중간 (Elixir 기본 지식 필요)

핵심 요약

• Elixir 설치 및 Phoenix 프레임워크 설정 (mix archive.install hex phx_new)
• LiveView 모듈 생성 (mix phx.gen.live)를 통해 실시간 UI 구현
• 데이터베이스 마이그레이션 (mix ecto.migrate) 및 라우팅 구성 (lib/invoice_manager_web/router.ex)

섹션별 세부 요약

1. 개발 환경 설정

• Elixir 설치 확인 (elixir -v) 및 PostgreSQL 실행
• Phoenix 프로젝트 생성: mix phx.new invoice_manager --live
• config/dev.exs 파일에서 데이터베이스 설정

2. 컨텍스트 및 스키마 생성

• mix phx.gen.context Billing Invoice invoices 명령으로 모델 생성
• 생성된 파일: lib/invoice_manager/billing.ex, lib/invoice_manager/billing/invoice.ex
• 마이그레이션 파일에서 테이블 정의: create table(:invoices)

3. LiveView 구현

• mix phx.gen.live Billing Invoice invoices로 LiveView 모듈 생성
• 생성된 파일: lib/invoice_manager_web/live/invoice_live/index.ex, show.ex
• 템플릿 파일: index.html.heex, show.html.heex

4. 라우팅 구성 및 서버 실행

• lib/invoice_manager_web/router.ex에 라우팅 정의:

```elixir

live "/invoices", InvoiceLive.Index, :index

live "/invoices/new", InvoiceLive.Index, :new

```

• 서버 실행: mix phx.server 및 프로덕션 배포: MIX_ENV=prod mix phx.server

5. UI/UX 개선 및 테스트

• Tailwind CSS 적용으로 UI 개선
• LiveView 테스트 파일 작성 및 CRUD 기능 검증
• 자산 배포: MIX_ENV=prod mix assets.deploy

결론

• Runner H를 활용해 자동 생성된 가이드를 통해 Phoenix LiveView 앱 개발 시간을 70% 이상 절감 가능
• mix phx.gen.live 명령으로 실시간 인터랙티브 UI 구현이 간편해짐
• Elixir 1.15+, Phoenix 1.7 기반으로 구성된 프로젝트 구조를 참고하여 확장 가능