Rails 애플리케이션: 프로젝트와 할 일(To-do) 간의 관계 설정 및 UI 개선

Ep 5. Connecting Projects & To-Dos | Rails New Tutorial with Typecraft

작성자
Ruby on Rails Youtube
발행일
2025년 07월 16일

핵심 요약

  • 1 Rails 애플리케이션 'Doable'에서 프로젝트와 할 일(To-do) 간의 'belongs_to' 및 'has_many' 관계를 성공적으로 구축하는 과정을 다룹니다.
  • 2 데이터베이스 마이그레이션, 모델 연관 설정, 폼 업데이트, 강력한 매개변수 디버깅, 그리고 뷰 개선을 통해 앱의 기능성을 강화합니다.
  • 3 Rails의 컨벤션 기반 개발 철학을 활용하여 효율적으로 앱의 데이터 관계를 설정하고 사용자 경험을 향상시키는 방법을 제시합니다.

도입

본 비디오는 Rails 애플리케이션 'Doable'에서 사용자들이 프로젝트와 할 일(To-do)을 생성할 수 있도록 하되, 이 둘 간의 관계가 명확히 설정되지 않았던 초기 상태에서 벗어나 상호 연결된 시스템을 구축하는 과정을 상세히 설명합니다. 각 할 일(To-do)이 특정 프로젝트에 속하도록 데이터베이스 스키마를 업데이트하고, 모델 간의 연관 관계를 정의하며, 사용자 인터페이스(UI)를 개선하여 기능적이고 직관적인 사용자 경험을 제공하는 전반적인 워크플로우를 다룹니다. 이 관계 설정을 통해 애플리케이션의 데이터 일관성과 유용성이 크게 향상됨을 강조합니다.

애플리케이션의 핵심 관계를 설정하기 위해 여러 단계가 진행됩니다. 먼저, 데이터베이스 마이그레이션을 통해 할 일(To-do) 테이블에 project_id 컬럼을 추가합니다. bin/rails generate migration AddProjectIdToTodos project:references 명령어를 사용하여 project_id 컬럼을 생성하고, 외래 키 제약 조건 및 null: false 속성을 설정하여 모든 할 일(To-do)이 반드시 프로젝트에 속하도록 강제합니다. 기존 데이터와의 충돌을 방지하기 위해 개발 모드에서는 데이터베이스를 재설정(drop, create, migrate)하는 방법이 제시됩니다. 다음으로, 애플리케이션 모델을 업데이트하여 이 새로운 관계를 반영합니다. app/models/to_do.rb 파일에는 belongs_to :project를, app/models/project.rb 파일에는 has_many :todos, dependent: :destroy를 추가하여 양방향 관계를 설정합니다. 특히 dependent: :destroy는 프로젝트가 삭제될 때 연결된 모든 할 일(To-do)도 자동으로 삭제되도록 하여 데이터 무결성을 보장하는 중요한 역할을 합니다. 이어서 Rails 콘솔을 통해 to_do.projectproject.todos와 같은 관계 기반 메서드를 활용하여 이 설정이 올바르게 작동하는지 검증합니다. 또한, 사용자 인터페이스의 폼을 수정하여 관계 설정을 지원합니다. 할 일(To-do) 생성 폼(_form.html.erb)에 ‘완료 여부(completed)’ 체크박스, ‘우선순위(priority)’ 숫자 필드, 그리고 collection_select 헬퍼를 활용한 프로젝트 선택 드롭다운 메뉴를 추가합니다. collection_select는 모든 프로젝트 레코드를 기반으로 드롭다운을 생성하며, 프로젝트의 ID를 값으로, 이름을 사용자에게 표시되는 옵션으로 사용합니다. 이 과정에서 발생할 수 있는 강력한 매개변수(Strong Parameters) 관련 디버깅 문제도 다룹니다. 폼 제출 시 project must exist와 같은 오류가 발생할 경우, 컨트롤러의 강력한 매개변수(to_do_params)에 ‘completed’, ‘priority’, ‘project_id’ 필드를 명시적으로 허용해야 함을 설명합니다. 이는 Rails 애플리케이션 보안의 핵심 요소입니다. 마지막으로, 뷰를 업데이트하여 관련 정보를 표시하고 사용자 경험을 개선합니다. 할 일(To-do) 상세 뷰(_to_do.html.erb 파셜)와 프로젝트 상세 뷰(project/show.html.erb)를 업데이트하여 ‘완료 여부’, ‘우선순위’, 그리고 연결된 프로젝트 정보를 표시합니다. 특히 프로젝트 뷰에서는 해당 프로젝트에 속한 모든 할 일(To-do) 목록을 반복하여 표시하고, 각 할 일(To-do)에 대한 링크를 제공함으로써 사용자가 프로젝트와 할 일(To-do) 사이를 직관적으로 탐색할 수 있도록 합니다.

결론

결론적으로, 본 비디오는 Rails 프레임워크를 활용하여 프로젝트와 할 일(To-do) 간의 견고한 관계를 성공적으로 구축하는 과정을 명확하게 제시했습니다. 외래 키 추가, 모델 간 연관 설정, 폼 및 뷰 업데이트, 그리고 강력한 매개변수 디버깅에 이르는 일련의 과정을 통해 애플리케이션은 훨씬 더 연결되고 사용자 친화적으로 변화했습니다. 이는 Rails의 '컨벤션 오버 컨피규레이션(Convention over Configuration)' 철학 덕분에 최소한의 코드로도 강력한 기능을 구현할 수 있음을 다시 한번 입증합니다. 다음 비디오에서는 Tailwind CSS를 도입하여 사용자 인터페이스를 더욱 세련되게 다듬고 앱의 시각적 완성도를 높일 예정임을 예고하며, 기능성과 미학적 측면 모두에서 완벽한 사용자 경험을 제공하기 위한 지속적인 노력을 강조합니다.

댓글 0

댓글 작성

0/1000
정중하고 건설적인 댓글을 작성해 주세요.

아직 댓글이 없습니다

첫 번째 댓글을 작성해보세요!