Uji Kompetensi Feature-Based Structure
Membuktikan kesiapan merapikan satu feature frontend menjadi boundary yang mudah diubah dan dijelaskan.
Yang dicek
- Menyusun feature boundary untuk component, service, type, dan content yang terkait
- Membedakan shared primitive dari component domain
- Menghindari dependency lintas feature yang tidak sehat
- Menulis note refactor yang menjelaskan keputusan tanpa architecture buzzwords
Isi lesson
6 blok- 1.Checkpoint: buat perubahan course lebih mudah ditemukan dan lebih amanBelum selesaiWajib
- 2.QuizBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Writing practiceBelum selesaiWajib
- 5.Gunakan docs untuk memilih convention, lalu pertahankan ownership yang sederhanaBelum selesaiWajib
- 6.RingkasanBelum selesaiWajib
Checkpoint: buat perubahan course lebih mudah ditemukan dan lebih aman
WajibProject memiliki route courses, CourseCard di components global, CourseFilter di halaman, fetch langsung di component, CourseFilter type di types global, dan import ProfileAvatar internal. Tim ingin menambah saved courses tanpa membuat page semakin sulit dibaca. Pada checkpoint ini, fokus pada boundary yang menyelesaikan masalah tersebut: kumpulkan code course yang berubah bersama, gunakan Button atau Avatar shared hanya jika contract generic, pindahkan operation data ke service, simpan type/content di owner yang tepat, dan hapus import lintas feature yang mengambil detail profile. Tujuannya bukan membuat arsitektur sempurna; tujuannya agar engineer berikutnya memahami tempat mengubah feature dan alasan setiap import.
Bagian ini memengaruhi progres lesson.
Quiz
WajibUji Kompetensi Feature-Based Structure
Jawab pertanyaan satu per satu. Kamu bisa ulang quiz jika belum mencapai target lulus.
Target lulus
70/100
Skor terbaik
0/100
Status
Belum dikerjakan
Blok ini wajib untuk menyelesaikan lesson. Progres quiz naik setelah skor mencapai target lulus.
Pertanyaan 1 dari 7
Target lulus: 70
Tujuan utama feature folder adalah
Coding practice
WajibDibuka di workspace khususRefactor course feature boundaries checkpoint
Susun import route courses agar memakai feature entry, service, type/content owner, dan Avatar shared tanpa deep import profile.
Tujuan awal: Fokus di tab TSX.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Writing practice
WajibLatihan menulis
Tulis refactor note untuk feature courses. Jelaskan folder atau public entry yang kamu buat, component mana yang tetap feature-specific, primitive mana yang boleh shared, operation data yang dipindahkan ke service, lokasi type/content, satu dependency lintas feature yang dihilangkan, serta cara kamu memverifikasi perubahan. Sebutkan satu hal yang sengaja tidak kamu ekstrak dan alasannya.
Tulis draft dulu sebelum menandai writing practice selesai.
0/800 karakter
Checklist panduan
Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.
Documentation Bridge
WajibGunakan docs untuk memilih convention, lalu pertahankan ownership yang sederhana
Baca bagian yang membantu struktur project yang sedang kamu ubah. Framework memberi convention route dan colocation, tetapi tidak dapat memilih owner product untukmu. Jangan menyalin tree folder dari contoh besar bila feature lokalmu belum membutuhkannya.
Next.js
Project Structure and Organization
Fokus baca
- Route file convention dan bagaimana route menjadi public.
- Colocation serta pilihan menaruh project files di atau di luar app directory.
- Project organization yang konsisten tanpa mengubah URL route secara tidak sengaja.
Abaikan dulu
- Parallel routes, intercepted routes, dan multiple root layout.
React
Sharing State Between Components
Fokus baca
- Owner state pada common parent ketika beberapa component perlu sinkron.
- Props sebagai contract antara component yang berkolaborasi.
- Membuat state owner jelas tanpa memindahkan seluruh state ke global layer.
Abaikan dulu
- State management library dan abstraction global sebelum feature memerlukannya.
TypeScript
Modules Introduction
Fokus baca
- Module sebagai boundary export dan import yang eksplisit.
- Membaca dependency melalui import path yang jelas.
- Menjaga public export feature tetap kecil dan terarah.
Abaikan dulu
- Module resolution option mendalam, publishing package, dan interop toolchain kompleks.
Aksi setelah membaca
Pilih satu feature React atau Next.js lokal. Catat file yang berubah bersama, pindahkan satu operation data ke service kecil, tempatkan satu type atau content dekat owner, dan hapus satu deep import lintas feature bila ada. Jalankan typecheck serta route yang terdampak, lalu tulis note singkat tentang boundary dan satu extraction yang sengaja belum dilakukan.
Bagian ini memengaruhi progres lesson.
Ringkasan
Wajib- Feature boundary membuat area product yang berubah bersama lebih mudah ditemukan serta dirawat.
- Shared primitive memiliki contract generic yang nyata; component domain tetap dekat feature.
- Service layer menamai data operation dan memisahkan transport detail dari UI state.
- Type dan content dimulai dekat owner, lalu diekstrak ketika contract lintas feature benar-benar ada.
- Dependency lintas feature memakai public contract atau shared primitive, bukan deep import internal.
- Berikutnya, State and Data Strategy menentukan tempat state server, URL, local UI, persistence, dan error flow untuk feature yang sudah memiliki boundary lebih jelas.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian wajib checkpoint ini
Lanjutkan blok wajib berikutnya: Checkpoint: buat perubahan course lebih mudah ditemukan dan lebih aman.