1. 개발 환경 설정: Docker와 Dev Container
- Docker 기본 이해: Docker의 역할(라이브러리 패키징, 배포, 격리된 환경 제공)과 개발 시 발생하는 라이브러리 충돌 및 환경 불일치 문제 해결 방안을 학습합니다. Docker Hub의 이미지와 컨테이너 개념을 소개하며,
docker build,docker run,docker images,docker ps등 핵심 Docker 명령어를 실습합니다. - Docker Compose 활용: 다중 컨테이너 환경(예: Rails, PostgreSQL, Redis) 관리를 위해
docker-compose.yml파일 작성법을 다룹니다. Nginx와 HTML 페이지 예시를 통해 서비스 정의, 볼륨 마운트, 포트 매핑 등을 설정하고docker-compose up명령어로 실행하는 방법을 시연합니다. 특히 로컬 파일 변경 사항이 컨테이너에 즉시 반영되도록 볼륨 마운트의 중요성을 강조합니다. - Dev Container로 일관된 개발 환경 구축: VS Code Dev Container 확장을 사용하여 프로젝트를 위한 격리되고 일관된 개발 환경을 설정하는 방법을 설명합니다.
devcontainer.json,Dockerfile,docker-compose.yml,init.sh파일의 역할과 커스터마이징 방법을 상세히 다루며, Ruby on Rails 프로젝트를 Dev Container 내에서 생성하고 데이터베이스를 연동하는 과정을 실습합니다. 이를 통해 개발 환경의 재현성과 이식성을 확보하는 이점을 강조합니다.
2. Hotwire Turbo를 활용한 동적 웹 애플리케이션 구현
- Hotwire 개요 및 Turbo의 구성 요소: Hotwire가 JavaScript 사용을 최소화하면서 현대적인 웹 애플리케이션을 구축하는 대안임을 소개합니다. Hotwire의 핵심인 Turbo Drive, Turbo Frames, Turbo Streams의 개념과 각각의 역할 및 장점을 설명합니다.
- Turbo Drive: 페이지 간 부드러운 전환을 제공하여 단일 페이지 애플리케이션(SPA)과 유사한 사용자 경험을 구현합니다. 전체 페이지 대신
<body>태그만 교체하는 방식, 스크롤 위치 유지,turbo:before-visit와 같은 이벤트 리스너,data-turbo-confirm,data-turbo="false",data-turbo-prefetch="false"등의 데이터 속성 활용법을 시연합니다. - Turbo Frames: 웹 페이지의 특정 영역을 독립적인 컴포넌트처럼 동적으로 업데이트하거나 교체하는 기능을 제공합니다.
turbo-frame태그를 사용하여 테이블 섹션을 편집 폼으로 교체하는 예시,src속성을 활용한 컴포넌트 로딩,loading="lazy"를 통한 지연 로딩,data-turbo-morph="true"를 통한 깜빡임 방지 기능을 설명합니다. - Turbo Streams: 서버에서 HTML 조각을 직접 스트리밍하여 실시간으로 DOM을 업데이트하는 강력한 기능을 제공합니다.
append,remove,replace등 9가지 주요 액션을 통해 CRUD 작업 시 UI를 부드럽게 변경하는 방법을 설명합니다. 특히 Action Cable을 내부적으로 활용하여 여러 브라우저 간에 실시간 업데이트(Broadcasting)를 구현하는 방법을broadcast_to와turbo_stream_from을 통해 시연합니다.
- Turbo Drive: 페이지 간 부드러운 전환을 제공하여 단일 페이지 애플리케이션(SPA)과 유사한 사용자 경험을 구현합니다. 전체 페이지 대신
3. To-Do 리스트 애플리케이션에 Turbo 적용
- Dev Container 환경에서 Rails 스캐폴딩을 통해 To-Do 리스트 애플리케이션의 기본 CRUD 기능을 구현합니다.
- Bootstrap 5를 CDN 방식으로 적용하여 애플리케이션의 UI를 개선하고,
button_to를 사용하여 삭제 기능을 구현하는 등 기본적인 스타일링 작업을 진행합니다. rails importmap install및rails turbo install명령어를 통해 Turbo를 설치하고, To-Do 리스트 애플리케이션에 Turbo Drive, Turbo Frames, Turbo Streams를 통합합니다. 새로운 To-Do 추가 시 폼을 동적으로 추가/제거하고, 항목 편집 및 삭제 시 해당 영역만 실시간으로 업데이트하며,broadcast_to및turbo_stream_from을 활용하여 여러 사용자가 동시에 변경 사항을 확인할 수 있는 실시간 동기화 기능을 구현합니다.