🔀
1. Git & GitHub Workflow
Git berperan sebagai Version Control System (VCS) lokal untuk mencatat setiap perubahan kode dasar (*commit history*). Alur kerja yang diterapkan pada tugas ini meliputi:
- Branching: Memisah pengembangan fitur baru dari branch
main ke branch fitur seperti feature-fitur-baru agar kode produksi tetap stabil.
- Pull Request (PR): Pengajuan penggabungan kode dari branch fitur menuju
main di GitHub untuk ditinjau.
- Merge Conflict: Terjadi ketika ada perombakan pada baris kode yang sama di dua branch berbeda. Dipicu secara sengaja pada berkas
README.md.
- Conflict Resolution: Penyelesaian bentrokan baris kode melalui editor GitHub Web / VS Code dengan membuang marker bentrok (
<<<<<<<, =======, >>>>>>>) sebelum dilakukan commit merge akhir.
📦
2. Package Manager (npm)
npm (Node Package Manager) mengelola instalasi modul dan pustaka (*dependencies*) eksternal JavaScript/TypeScript:
package.json: Menampung metadata proyek beserta daftar pustaka yang dipakai (seperti react, lucide-react, dan vite).package-lock.json: Mengunci versi spesifik dari setiap dependensi berserta sub-dependensinya agar hasil instalasi konsisten di semua lingkungan komputer pengembang.node_modules/: Folder penyimpanan seluruh kode pustaka hasil unduhan npm.
📘
3. TypeScript & Peran Transpiler
TypeScript menambahkan sistem pengetikan statis (*static typing*) opsional di atas bahasa JavaScript untuk menangkap kesalahan tipe (*type errors*) sejak tahap penulisan kode (*development time*).
- Peran Transpiler: Browser web native hanya mampu mengeksekusi JavaScript standar. Transpiler (seperti modul kompilator TypeScript
tsc atau Esbuild) bertugas mentransformasikan kode TypeScript (.ts / .tsx) menjadi kode JavaScript murni (.js) yang valid secara sintaksis untuk dijalankan di browser.
⚡
4. Vite (Dev Server & Bundler)
Vite adalah instrumen pembangun (*build tool*) frontend generasi baru yang menawarkan performa pengembangan jauh lebih cepat dibanding alat tradisional:
- Development Server & HMR: Menggunakan Native ES Modules (ESM) untuk pemuatan modul secara instan. Fitur Hot Module Replacement (HMR) memperbarui tampilan browser secara real-time saat kode diubah tanpa memuat ulang seluruh halaman.
- Peran Bundler: Saat proses produksi (
npm run build), Vite menggunakan bundler Rollup untuk menggabungkan (*bundle*), meminifikasi (*minify*), dan membagi kode (*code splitting*) menjadi berkas-berkas statis teroptimasi yang siap di-deploy.
🔑
5. Environment Variables (.env)
Variabel lingkungan memisahkan nilai konfigurasi dinamis atau data sensitif dari basis kode aplikasi:
- Prefix
VITE_: Di framework Vite, hanya variabel dengan awalan VITE_ (contoh: VITE_APP_NAME) yang dipaparkan secara aman ke sisi frontend client via objek import.meta.env.
- Platform Deployment: Nilai variabel dimasukkan pada pengaturan dashboard Vercel tanpa perlu menyertakan berkas rahasia
.env ke repository publik GitHub.