Hari Ke-9/200: Perjalanan Full Stack – Tantangan, Kemenangan, dan Pembelajaran
Selamat datang di hari ke-9 dari perjalanan 200 hari saya untuk menjadi seorang pengembang full stack! Blog ini adalah catatan perjalanan, dokumentasi pertumbuhan, dan kumpulan pelajaran yang saya pelajari di sepanjang jalan. Hari ini, kita akan membahas kemajuan, tantangan, dan momen-momen penting yang menandai hari ke-9 dalam petualangan full stack ini. Mari selami!
Daftar Isi
- Ringkasan Hari Ke-9
- Fokus Utama Hari Ini
- Tantangan yang Dihadapi
- Solusi dan Pemecahan Masalah
- Pelajaran yang Dipetik
- Sumber Daya yang Digunakan
- Kemajuan Proyek
- Cuplikan Kode Penting
- Refleksi dan Perbaikan
- Rencana untuk Hari Berikutnya
- Interaksi Komunitas
- Menjaga Motivasi
- Kesimpulan
1. Ringkasan Hari Ke-9
Hari ke-9 ini berfokus pada pendalaman konsep-konsep penting di JavaScript dan pemecahan masalah pada proyek front-end yang sedang berjalan. Saya juga menghabiskan waktu untuk memahami lebih dalam tentang API RESTful dan bagaimana mengintegrasikannya dengan aplikasi yang saya buat. Hari ini terasa produktif dengan banyak pembelajaran baru dan beberapa kemajuan signifikan.
2. Fokus Utama Hari Ini
Berikut adalah daftar fokus utama pada hari ke-9:
- JavaScript: Mendalami konsep closures dan prototypes.
- API RESTful: Memahami cara kerja GET, POST, PUT, DELETE.
- React: Memperbaiki bug pada komponen formulir dan peningkatan validasi.
- Pemecahan Masalah: Mengatasi masalah sinkronisasi data antara front-end dan back-end.
3. Tantangan yang Dihadapi
Tantangan adalah bagian tak terhindarkan dari setiap perjalanan belajar. Berikut adalah beberapa tantangan yang saya hadapi hari ini:
- Memahami Closures: Konsep closures di JavaScript awalnya membingungkan. Saya kesulitan memahami bagaimana scope bekerja dan bagaimana closures menyimpan referensi ke variabel dari outer scope.
- Masalah CORS: Saat mencoba mengirim permintaan dari front-end ke back-end, saya menghadapi masalah CORS. Ini menghalangi saya untuk mengambil data dari API.
- Validasi Formulir: Validasi formulir di React ternyata lebih kompleks dari yang saya kira. Saya perlu memastikan bahwa semua input pengguna valid sebelum mengirimkan data ke server.
4. Solusi dan Pemecahan Masalah
Setiap tantangan adalah kesempatan untuk belajar dan tumbuh. Berikut adalah solusi yang saya terapkan untuk mengatasi tantangan di atas:
- Memahami Closures: Saya menonton beberapa video penjelasan di YouTube dan membaca artikel di MDN Web Docs tentang closures. Saya juga membuat beberapa contoh kode sederhana untuk menguji pemahaman saya. Akhirnya, saya mulai memahami bagaimana closures bekerja dan mengapa mereka berguna.
- Masalah CORS: Untuk mengatasi masalah CORS, saya mengkonfigurasi back-end untuk mengizinkan permintaan dari origin front-end saya. Ini melibatkan penambahan header
Access-Control-Allow-Originke respons HTTP. Saya juga memastikan bahwa preflight request ditangani dengan benar. - Validasi Formulir: Saya menggunakan pustaka
react-hook-formuntuk menyederhanakan proses validasi formulir. Pustaka ini menyediakan API yang mudah digunakan untuk mendefinisikan aturan validasi dan menampilkan pesan kesalahan kepada pengguna.
5. Pelajaran yang Dipetik
Setiap hari dalam perjalanan ini adalah pelajaran berharga. Berikut adalah beberapa pelajaran yang saya petik pada hari ke-9:
- Closures Itu Penting: Closures adalah konsep penting di JavaScript yang memungkinkan kita untuk membuat fungsi yang menyimpan referensi ke variabel dari outer scope. Ini berguna untuk membuat fungsi yang memiliki status dan perilaku yang terenkapsulasi.
- CORS Itu Rumit: Masalah CORS bisa sangat membingungkan, tetapi penting untuk memahami bagaimana mereka bekerja agar kita dapat membuat aplikasi web yang aman dan berfungsi dengan benar.
- Validasi Itu Penting: Validasi formulir adalah bagian penting dari pengembangan web yang membantu kita untuk memastikan bahwa data yang kita terima dari pengguna valid dan konsisten.
- Pustaka Itu Membantu: Menggunakan pustaka seperti
react-hook-formdapat menyederhanakan tugas-tugas kompleks dan membuat kita lebih produktif.
6. Sumber Daya yang Digunakan
Berikut adalah daftar sumber daya yang saya gunakan untuk belajar dan memecahkan masalah pada hari ke-9:
- MDN Web Docs: Sumber daya yang sangat baik untuk dokumentasi JavaScript dan web.
- YouTube: Banyak tutorial dan penjelasan video tentang JavaScript, React, dan API.
- Stack Overflow: Forum yang sangat membantu untuk memecahkan masalah pemrograman.
- React Hook Form Documentation: Dokumentasi resmi untuk pustaka
react-hook-form. - CORS Documentation: Dokumentasi tentang Cross-Origin Resource Sharing (CORS).
7. Kemajuan Proyek
Berikut adalah kemajuan yang saya capai pada proyek saya hari ini:
- Komponen Formulir: Memperbaiki bug pada komponen formulir dan menambahkan validasi yang lebih ketat.
- Integrasi API: Berhasil mengirim permintaan dari front-end ke back-end untuk membuat dan mengambil data.
- Tampilan Daftar: Meningkatkan tampilan daftar data dengan menambahkan pagination dan filtering.
8. Cuplikan Kode Penting
Berikut adalah beberapa cuplikan kode penting yang saya gunakan hari ini:
Contoh Closures di JavaScript:
“`javascript
function outerFunction() {
let outerVar = "Hello";
function innerFunction() {
console.log(outerVar); // Inner function memiliki akses ke outerVar
}
return innerFunction;
}
const myClosure = outerFunction();
myClosure(); // Output: Hello
“`
Contoh Validasi Formulir dengan React Hook Form:
“`javascript
import { useForm } from "react-hook-form";
function MyForm() {
const { register, handleSubmit, formState: { errors } } = useForm();
const onSubmit = data => console.log(data);
return (
);
}
“`
Contoh Konfigurasi CORS di Back-End (Node.js dengan Express):
“`javascript
const express = require('express');
const cors = require('cors');
const app = express();
// Izinkan permintaan dari origin tertentu
const corsOptions = {
origin: 'http://localhost:3000' // Ganti dengan URL front-end Anda
};
app.use(cors(corsOptions));
// Rute API
app.get('/api/data', (req, res) => {
res.json({ message: 'Data dari API' });
});
app.listen(5000, () => console.log('Server berjalan di port 5000'));
“`
9. Refleksi dan Perbaikan
Setelah menyelesaikan hari ke-9, saya merenungkan apa yang telah saya pelajari dan apa yang dapat saya tingkatkan. Berikut adalah beberapa poin penting:
- Perdalam Pemahaman Konsep Dasar: Saya perlu terus memperdalam pemahaman saya tentang konsep-konsep dasar JavaScript, seperti closures, prototypes, dan scope. Ini akan membantu saya untuk menulis kode yang lebih bersih, lebih efisien, dan lebih mudah dipelihara.
- Latih Pemecahan Masalah: Saya perlu terus melatih keterampilan pemecahan masalah saya. Ini melibatkan belajar bagaimana cara mendiagnosis masalah dengan cepat dan efektif, serta bagaimana cara menemukan solusi yang tepat.
- Gunakan Alat yang Tepat: Saya perlu memastikan bahwa saya menggunakan alat yang tepat untuk pekerjaan itu. Ini berarti memilih pustaka dan framework yang sesuai untuk proyek yang saya kerjakan, serta belajar bagaimana cara menggunakan alat-alat tersebut secara efektif.
- Berkolaborasi dengan Orang Lain: Saya perlu mencari kesempatan untuk berkolaborasi dengan pengembang lain. Ini akan membantu saya untuk belajar dari pengalaman mereka, serta untuk mendapatkan umpan balik tentang kode saya.
10. Rencana untuk Hari Berikutnya
Berikut adalah rencana saya untuk hari ke-10:
- Back-End dengan Node.js: Memulai proyek baru menggunakan Node.js dan Express untuk membangun API RESTful.
- Database: Mempelajari cara mengintegrasikan database (MongoDB atau PostgreSQL) dengan API saya.
- Autentikasi: Menerapkan autentikasi pengguna dengan JWT (JSON Web Tokens).
11. Interaksi Komunitas
Berinteraksi dengan komunitas adalah bagian penting dari proses belajar. Hari ini, saya menghabiskan waktu di:
- Stack Overflow: Menjawab beberapa pertanyaan tentang JavaScript dan React.
- Discord: Berpartisipasi dalam diskusi dengan pengembang lain tentang tantangan dan solusi yang mereka hadapi.
- Twitter: Membagikan kemajuan saya dan belajar dari orang lain yang juga sedang belajar pengembangan full stack.
12. Menjaga Motivasi
Perjalanan 200 hari ini adalah maraton, bukan sprint. Penting untuk menjaga motivasi tetap tinggi. Saya melakukan ini dengan:
- Merayakan Kemenangan Kecil: Setiap kali saya menyelesaikan tugas atau memecahkan masalah, saya meluangkan waktu untuk merayakannya.
- Beristirahat: Penting untuk beristirahat secara teratur agar tidak kelelahan.
- Mengingat Tujuan: Saya terus mengingatkan diri sendiri tentang tujuan akhir saya, yaitu menjadi seorang pengembang full stack yang kompeten.
- Belajar dari Orang Lain: Melihat kemajuan orang lain di komunitas memotivasi saya untuk terus belajar dan tumbuh.
13. Kesimpulan
Hari ke-9 adalah hari yang produktif dan penuh pembelajaran. Saya mengatasi beberapa tantangan, memperdalam pemahaman saya tentang konsep-konsep penting, dan membuat kemajuan signifikan pada proyek saya. Saya merasa termotivasi dan bersemangat untuk terus belajar dan tumbuh dalam perjalanan ini.
Terima kasih telah membaca! Jangan ragu untuk meninggalkan komentar di bawah jika Anda memiliki pertanyaan atau saran. Sampai jumpa di hari ke-10!
#fullstack #development #javascript #react #nodejs #coding #programming #100daysofcode #webdev #learning #challenge
“`
