Go ve React ile Kişisel Blogunuzu Baştan Sona İnşa Edin: Kapsamlı Rehber
Birçoğumuz kendi fikirlerimizi, deneyimlerimizi veya teknik bilgilerimizi paylaşmak için bir blog sahibi olma hayalini kurarız. Hazır platformlar başlangıç için cazip görünse de, zamanla kişiselleştirme eksiklikleri, performans kısıtlamaları veya maliyet engelleriyle karşılaşabiliriz. Peki ya kendi platformunuzu, en modern ve güçlü teknolojilerle sıfırdan inşa etseniz? Go (Golang) ve React ikilisi, tam da bu noktada devreye girerek size hızlı, esnek ve tamamen kontrol edilebilir bir kişisel blog ortamı sunar. Bu makale, bu heyecan verici yolculukta size adım adım rehberlik edecek, her aşamada karşılaşabileceğiniz zorlukları aşmanıza yardımcı olacaktır.
Kişisel blogunuzu kurarken doğru teknoloji stack’ini seçmek, projenizin uzun vadeli başarısı ve sürdürülebilirliği için kritik öneme sahiptir. Piyasada birçok backend ve frontend alternatifi bulunsa da, Go ve React kombinasyonu, özellikle performans, geliştirici deneyimi ve ölçeklenebilirlik açısından benzersiz avantajlar sunar. Bu ikili, modern web uygulaması geliştirme paradigmasının temel taşlarından bazılarını temsil eder ve kişisel blogunuz için sağlam bir temel oluşturmanıza olanak tanır.
Go (Golang), Google tarafından geliştirilen, statik tipli, derlenmiş bir programlama dilidir. Temel amacı, C++’ın performansını ve Python’ın geliştirme kolaylığını birleştirmektir. Go’nun öne çıkan özellikleri arasında mükemmel eşzamanlılık desteği (goroutine’ler ve kanallar), hızlı derleme süreleri ve küçük bellek ayak izi yer alır. Bir blogun backend’i için Go kullanmak, özellikle yüksek trafikli anlarda bile hızlı yanıt süreleri ve düşük sunucu maliyetleri anlamına gelir. Go’nun sade ve anlaşılır sözdizimi, karmaşık API’ler oluşturmayı bile oldukça basit hale getirir. Örneğin, bir blog yazısı verisini veritabanından çekip JSON formatında sunmak, Go ile oldukça verimli bir şekilde gerçekleştirilebilir. Ayrıca, Go’nun güçlü standart kütüphanesi sayesinde, ek üçüncü parti paketlere olan bağımlılık minimize edilir, bu da projenin bakımını kolaylaştırır. Go’nun statik tipli yapısı, derleme zamanında birçok hatayı yakalamaya yardımcı olurken, dilin kendi araçları (gofmt gibi) kod kalitesini ve tutarlılığını sağlamaya katkıda bulunur.
React ise Facebook tarafından geliştirilen, kullanıcı arayüzleri oluşturmak için kullanılan bir JavaScript kütüphanesidir. Bileşen tabanlı mimarisi sayesinde, kullanıcı arayüzünü küçük, bağımsız ve yeniden kullanılabilir parçalara bölerek geliştirme sürecini hızlandırır ve kolaylaştırır. Bir blogda, navigasyon menüsü, yazı kartları, yorum bölümleri gibi her bir öge ayrı bir React bileşeni olarak tasarlanabilir. Bu yaklaşım, kodun daha düzenli olmasını sağlar ve gelecekteki değişiklikleri veya yeni özellik eklemelerini kolaylaştırır. React’ın sanal DOM (Virtual DOM) mekanizması, gerçek DOM üzerinde doğrudan manipülasyon yapmak yerine önce sanal bir kopyayı güncelleyip ardından yalnızca gerekli değişiklikleri gerçek DOM’a yansıtarak üstün bir performans sunar. Bu, blogunuzun sayfaları arasında gezinirken veya içerik yüklerken akıcı bir kullanıcı deneyimi sağlar. Geniş ve aktif bir topluluğa sahip olması, React için sürekli güncellenen kütüphaneler, araçlar ve bol miktarda öğrenme kaynağı anlamına gelir. Bu da herhangi bir sorunla karşılaştığınızda hızlıca çözüm bulabilmenizi sağlar.
Go ve React’ın bir araya gelmesiyle elde edilen sinerji oldukça güçlüdür. Go, blogunuzun arka ucunda verileri güvenli ve hızlı bir şekilde yönetirken (yazılar, yorumlar, kullanıcı bilgileri vb.), React bu verileri dinamik ve interaktif bir ön yüzde sergiler. Backend’iniz API endpoint’leri aracılığıyla veri sunarken, frontend’iniz bu API’leri tüketerek kullanıcıya zengin bir deneyim sunar. Bu ayrık mimari (decoupled architecture), her iki tarafın da birbirinden bağımsız olarak geliştirilmesine ve ölçeklendirilmesine olanak tanır. Örneğin, Go backend’inizi mobil uygulamalar için de kullanabilirken, React frontend’inizi farklı bir backend ile de entegre edebilirsiniz. Bu esneklik, kişisel blog projenizi sadece bir blog olmaktan çıkarıp gelecekte farklı bir uygulama platformuna dönüştürmek istediğinizde size büyük bir avantaj sağlar. Dolayısıyla, Go’nun performansı ve React’ın kullanıcı deneyimi odaklı yaklaşımı, kişisel blogunuz için modern, hızlı ve esnek bir temel oluşturmanın en iyi yollarından biridir.
Go ile Güçlü ve Hızlı Bir Blog API’si Nasıl Geliştirilir? Adım Adım Rehber
Kişisel blogunuzun kalbi, verilerinizi yöneten ve içeriği ön uca sunan Go tabanlı API’niz olacaktır. Bu bölümde, Go ile sağlam, hızlı ve güvenli bir RESTful API’yi nasıl adım adım oluşturacağınızı keşfedeceğiz. Amacımız, blog yazılarını oluşturma, okuma, güncelleme ve silme (CRUD) işlemlerini destekleyen bir yapı kurmak ve kullanıcı kimlik doğrulamasını (authentication) JWT (JSON Web Tokens) ile sağlamaktır.
İlk olarak, Go projemizi başlatmamız gerekiyor. Terminalde go mod init blog-api komutunu çalıştırarak yeni bir Go modülü oluşturabiliriz. Daha sonra, HTTP isteklerini daha kolay yönlendirmek için Gorilla Mux gibi bir router kütüphanesi kullanabiliriz. Projenizin ana dizininde main.go adında bir dosya oluşturalım:
package main
import (
"fmt"
"log"
"net/http"
"github.com/gorilla/mux" // Router kütüphanesi
)
func main() {
router := mux.NewRouter()
// Ana sayfa route'u
router.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
fmt.Fprint(w, "Merhaba, Go Blog API'sine hoş geldiniz!")
}).Methods("GET")
// API'mizi 8080 portunda dinlemeye başla
fmt.Println("Sunucu 8080 portunda başlatıldı...")
log.Fatal(http.ListenAndServe(":8080", router))
}Bu başlangıç yapısı ile temel bir Go web sunucusu kurmuş olduk. Şimdi, blog yazıları için bir veritabanı seçimi yapalım. Çoğu blog projesi için PostgreSQL mükemmel bir seçenektir; güçlü, açık kaynaklı ve güvenilirdir. Veritabanı ile etkileşim kurmak için database/sql paketini ve PostgreSQL sürücüsü olarak github.com/lib/pq'yu kullanabiliriz. Veritabanı bağlantısı ve blog yazısı yapısını tanımlayalım:
// models.go
package main
import "time"
// BlogPost veritabanındaki bir blog yazısını temsil eder
type BlogPost struct {
ID string json:"id"
Title string json:"title"
Content string json:"content"
Author string json:"author"
CreatedAt time.Time json:"created_at"
UpdatedAt time.Time json:"updated_at"
}
// User veritabanındaki bir kullanıcıyı temsil eder
type User struct {
ID string json:"id"
Username string json:"username"
Password string json:"-" // Şifrenin JSON'a dahil edilmemesi için
}Ardından, veritabanı bağlantımızı main.go dosyamızda başlatabiliriz. Gerçek dünya senaryolarında, veritabanı bağlantı bilgilerini doğrudan koda yazmak yerine ortam değişkenlerinden (environment variables) veya bir yapılandırma dosyasından okumak daha güvenlidir.
// main.go (veritabanı bağlantısı eklendi)
package main
import (
"database/sql"
"fmt"
"log"
"net/http"
"os"
"github.com/gorilla/mux"
_ "github.com/lib/pq" // PostgreSQL sürücüsü
)
var db *sql.DB // Global veritabanı bağlantısı
func init() {
// Veritabanı bağlantısını başlat
var err error
connStr := os.Getenv("DATABASE_URL") // Ortam değişkeninden oku
if connStr == "" {
// Örnek: "postgres://user:password@host:port/dbname?sslmode=disable"
log.Fatal("DATABASE_URL ortam değişkeni tanımlı değil.")
}
db, err = sql.Open("postgres", connStr)
if err != nil {
log.Fatal(err)
}
err = db.Ping()
if err != nil {
log.Fatal(err)
}
fmt.Println("Veritabanı bağlantısı başarılı!")
// Tabloları oluştur (varsa atla)
createTablesSQL := CREATE TABLE IF NOT EXISTS blog_posts (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
title VARCHAR(255) NOT NULL,
content TEXT NOT NULL,
author VARCHAR(255) NOT NULL,
created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);
CREATE TABLE IF NOT EXISTS users (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
username VARCHAR(255) UNIQUE NOT NULL,
password VARCHAR(255) NOT NULL
);
_, err = db.Exec(createTablesSQL)
if err != nil {
log.Fatalf("Tablolar oluşturulurken hata oluştu: %v", err)
}
fmt.Println("Veritabanı tabloları kontrol edildi/oluşturuldu.")
}
func main() {
router := mux.NewRouter()
// ... (route tanımları buraya gelecek)
// JWT middleware'i ve handler'lar
log.Fatal(http.ListenAndServe(":8080", router))
}Şimdi temel CRUD işlemlerini ele alalım. Örneğin, yeni bir blog yazısı oluşturmak için bir handler fonksiyonuna ihtiyacımız var. Bu handler, gelen JSON isteğini BlogPost struct'ına çözümler ve veritabanına kaydeder.
// handlers.go (main.go'dan ayrı bir dosya veya aynı dosyaya eklenebilir)
package main
import (
"encoding/json"
"fmt"
"io/ioutil"
"net/http"
"time"
"github.com/gorilla/mux"
)
// createPost yeni bir blog yazısı oluşturur
func createPost(w http.ResponseWriter, r *http.Request) {
var post BlogPost
body, err := ioutil.ReadAll(r.Body)
if err != nil {
http.Error(w, "İstek gövdesi okunamadı", http.StatusBadRequest)
return
}
err = json.Unmarshal(body, &post)
if err != nil {
http.Error(w, "JSON çözümlenirken hata oluştu", http.StatusBadRequest)
return
}
// Yazar alanını güvenlik nedeniyle, yetkilendirme sonrası kullanıcı ID'sinden almalıyız.
// Şimdilik varsayılan bir yazar atayalım.
post.Author = "Admin" // Gerçek uygulamada JWT ile gelen kullanıcıdan alınmalı
// Veritabanına kaydet
err = db.QueryRow(
"INSERT INTO blog_posts(title, content, author) VALUES($1, $2, $3) RETURNING id, created_at, updated_at",
post.Title, post.Content, post.Author,
).Scan(&post.ID, &post.CreatedAt, &post.UpdatedAt)
if err != nil {
http.Error(w, fmt.Sprintf("Veritabanına kaydederken hata oluştu: %v", err), http.StatusInternalServerError)
return
}
w.Header().Set("Content-Type", "application/json")
w.WriteHeader(http.StatusCreated)
json.NewEncoder(w).Encode(post)
}
// getPosts tüm blog yazılarını getirir
func getPosts(w http.ResponseWriter, r *http.Request) {
rows, err := db.Query("SELECT id, title, content, author, created_at, updated_at FROM blog_posts ORDER BY created_at DESC")
if err != nil {
http.Error(w, fmt.Sprintf("Yazılar çekilirken hata oluştu: %v", err), http.StatusInternalServerError)
return
}
defer rows.Close()
var posts []BlogPost
for rows.Next() {
var post BlogPost
if err := rows.Scan(&post.ID, &post.Title, &post.Content, &post.Author, &post.CreatedAt, &post.UpdatedAt); err != nil {
http.Error(w, fmt.Sprintf("Yazı taranırken hata oluştu: %v", err), http.StatusInternalServerError)
return
}
posts = append(posts, post)
}
w.Header().Set("Content-Type", "application/json")
json.NewEncoder(w).Encode(posts)
}
// main.go dosyasında route'lar:
// router.HandleFunc("/posts", createPost).Methods("POST")
// router.HandleFunc("/posts", getPosts).Methods("GET")Bu kod parçaları, Go API'nizin nasıl şekilleneceğine dair sağlam bir temel sunuyor. Güncelleme ve silme işlemleri için de benzer handler'lar yazılabilir. Gerçek dünya senaryosunda, bir blog yöneticisinin admin panelinden yeni bir yazı eklemesi veya mevcut bir yazıyı düzenlemesi, bu API endpoint'leri aracılığıyla gerçekleşir. Örneğin, yönetici blog paneline giriş yapar, "Yeni Yazı Ekle" butonuna tıklar, başlık ve içeriği girer ve "Yayınla" tuşuna basar. Bu eylem, React frontend'inden Go backend'indeki createPost endpoint'ine bir POST isteği gönderir ve yazı veritabanına kaydedilir. Yönetici daha sonra "Tüm Yazılar" sayfasında yeni yazısını görebilir, bu da getPosts endpoint'inden veri çekilerek sağlanır.
Güvenlik, herhangi bir web uygulamasının olmazsa olmazıdır. Özellikle blog yazılarını oluşturma, güncelleme ve silme gibi hassas işlemler için kimlik doğrulama gereklidir. JWT (JSON Web Tokens), durum bilgisi olmayan (stateless) bir kimlik doğrulama mekanizması sunar ve Go API'leri için popüler bir seçimdir. Kullanıcı giriş yaptığında, sunucu bir JWT oluşturur ve istemciye gönderir. İstemci, sonraki her istekte bu token'ı Authorization başlığında gönderir ve sunucu token'ı doğrulayarak kullanıcının yetkili olup olmadığını kontrol eder. Bu, blog yazıları gibi özel içeriklerin sadece yetkili kişiler tarafından yönetilebilmesini sağlar. Go'da JWT entegrasyonu için github.com/dgrijalva/jwt-go gibi kütüphaneler kullanılabilir. Bu sayede, blogunuz sadece herkese açık içerik sunmakla kalmaz, aynı zamanda içeriğinizi güvenli bir şekilde yönetmenize de olanak tanır.
Modern Bir React Frontend ile Blog Deneyimi Nasıl Tasarlanır?
Kişisel blogunuzun Go tabanlı API'si içeriği ve verileri yönetirken, React tabanlı ön yüzü, bu içeriği kullanıcılarınıza estetik ve etkileşimli bir şekilde sunar. React'ın bileşen tabanlı mimarisi sayesinde, blogunuzun her bir parçasını bağımsız ve yeniden kullanılabilir bileşenler halinde inşa edebiliriz. Bu yaklaşım, geliştirme sürecini hızlandırır, kod kalitesini artırır ve bakımını kolaylaştırır.
İlk adım, yeni bir React projesi oluşturmaktır. Modern web geliştirme ekosisteminde, proje kurulumu için Vite veya Create React App (CRA) gibi araçlar oldukça popülerdir. Vite, özellikle daha hızlı geliştirme sunucusu ve daha küçük üretim build boyutları ile öne çıkar. Terminalde şu komutla bir React projesi başlatabiliriz:
npm create vite@latest my-blog-frontend -- --template react
cd my-blog-frontend
npm install
npm run devBu komutlar, my-blog-frontend adında yeni bir React projesi oluşturacak, bağımlılıkları yükleyecek ve geliştirme sunucusunu başlatacaktır. Tarayıcınızda http://localhost:5173 (veya başka bir port) adresine giderek varsayılan React uygulamasını görebilirsiniz.
Blogunuzun ön yüzünü tasarlarken, kullanıcı arayüzünü mantıksal parçalara bölmek en iyi yaklaşımdır. Örneğin, bir blog genellikle şu temel bileşenlere sahiptir:
* Header (Başlık Alanı): Logo, blog adı, navigasyon linkleri (Anasayfa, Hakkımızda, İletişim, Yönetim Paneli).
* Footer (Alt Bilgi Alanı): Telif hakkı bilgileri, sosyal medya linkleri.
* PostCard (Yazı Kartı): Ana sayfada her bir blog yazısını özetleyen bileşen (başlık, yazar, yayın tarihi, kısa açıklama, görsel).
* SinglePost (Tek Yazı Sayfası): Tam blog yazısının içeriğini, yorumları ve belki de ilgili yazıları gösteren bileşen.
* Router: Farklı sayfalar arasında gezinmeyi sağlayan yapı (React Router DOM).
Şimdi, basit bir PostCard bileşeni ve API'den veri çekme örneğini inceleyelim. Blog yazılarını Go API'mizden çekmek için fetch API'sini veya axios gibi üçüncü parti bir kütüphaneyi kullanabiliriz. axios, hata yönetimi ve istek iptali gibi ek özellikler sunduğu için genellikle tercih edilir.
// src/components/PostCard.jsx
import React from 'react';
import { Link } from 'react-router-dom';
function PostCard({ post }) {
const formattedDate = new Date(post.created_at).toLocaleDateString('tr-TR', {
year: 'numeric',
month: 'long',
day: 'numeric'
});
return (
/posts/${post.id}}>{post.title}
Yazan: {post.author} | {formattedDate}
{post.content.substring(0, 150)}...
/posts/${post.id}} className="read-more">Devamını Oku
);
}
export default PostCard;Bu PostCard bileşeni, ana sayfada her bir blog yazısını temsil etmek için kullanılacak. Link bileşeni react-router-dom'dan gelir ve kullanıcıyı tıklanan yazının tam sayfasına yönlendirir.
Şimdi, ana sayfada tüm blog yazılarını Go API'mizden nasıl çekeceğimizi ve PostCard bileşenlerini kullanarak nasıl listeleyeceğimizi görelim:
// src/pages/HomePage.jsx
import React, { useState, useEffect } from 'react';
import PostCard from '../components/PostCard';
import axios from 'axios'; // npm install axios
function HomePage() {
const [posts, setPosts] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const fetchPosts = async () => {
try {
const response = await axios.get('http://localhost:8080/posts'); // Go API adresiniz
setPosts(response.data);
} catch (err) {
setError('Blog yazılarını yüklerken bir hata oluştu.');
console.error('API Hatası:', err);
} finally {
setLoading(false);
}
};
fetchPosts();
}, []); // Boş bağımlılık dizisi, bileşen yüklendiğinde bir kez çalışmasını sağlar
if (loading) return Yazılar yükleniyor...;
if (error) return {error};
return (
En Son Blog Yazıları
{posts.length > 0 ? (
posts.map(post => (
))
) : (
Henüz hiç blog yazısı bulunmamaktadır.
)}
);
}
export default HomePage;Bu HomePage bileşeni, React'ın useState hook'unu kullanarak bileşenin durumunu (yazılar, yüklenme durumu, hata) yönetir. useEffect hook'u ise bileşen ilk yüklendiğinde Go API'mizden http://localhost:8080/posts adresine bir GET isteği göndererek blog yazılarını çeker. Bu veri, daha sonra PostCard bileşenlerine props olarak iletilir ve sayfada listelenir. Bu, Go backend'i ile React frontend'i arasındaki temel veri akışını gösteren bir örnektir.
Routing için react-router-dom kütüphanesini kullanabiliriz. App.jsx dosyamızda farklı rotaları tanımlayarak blogunuzun farklı sayfalarını oluşturabiliriz:
// src/App.jsx
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import HomePage from './pages/HomePage';
import SinglePostPage from './pages/SinglePostPage'; // Tek bir yazıyı gösterecek sayfa
import Header from './components/Header';
import Footer from './components/Footer';
import './App.css'; // Global stiller
function App() {
return (
} />
} />
{/* Diğer rotalar buraya eklenebilir (örn. admin paneli) */}
);
}
export default App;SinglePostPage bileşeni de useParams hook'unu kullanarak URL'deki yazı ID'sini alacak ve bu ID ile Go API'sinden ilgili yazıyı çekecektir.
React'ın sunduğu bu bileşen tabanlı ve deklaratif yaklaşım, blogunuz için dinamik ve kullanıcı dostu bir arayüz oluşturmanızı sağlar. Yönetim paneli gibi daha karmaşık sayfalar için form yönetimi (Formik/React Hook Form) veya global state yönetimi (Redux Toolkit/Zustand) gibi ileri düzey kütüphaneler de entegre edilebilir. Bu sayede, blogunuz sadece içeriği görüntülemekle kalmaz, aynı zamanda zengin bir etkileşim sunar ve kullanıcının ilgisini çeker.
Go Backend ve React Frontend Entegrasyonu: İletişim Nasıl Sağlanır ve Mobil Uyumluluk Nasıl Göz Ardı Edilmez?
Go backend'iniz ve React frontend'iniz artık kendi başlarına çalışabiliyor olsa da, bir blog olarak işlev görebilmeleri için birbiriyle iletişim kurmaları gerekmektedir. Bu iletişim, genellikle HTTP istekleri aracılığıyla sağlanır ve birkaç önemli yapılandırma adımı gerektirir. Ayrıca, günümüz dünyasında mobil cihazlardan erişimin yaygınlığı göz önüne alındığında, blogunuzun her cihazda mükemmel görünmesi ve çalışması kritik öneme sahiptir.
API Endpoint'leri ve Veri Akışı:
React uygulaması, Go API'nizin sunduğu belirli URL'lere (endpoint'lere) HTTP istekleri göndererek veri alışverişinde bulunur. Örneğin, HomePage bileşeni /posts endpoint'ine bir GET isteği göndererek tüm blog yazılarını çeker. SinglePostPage ise /posts/{id} endpoint'ine bir GET isteği göndererek belirli bir yazının detaylarını alır. Yönetim panelinizdeki "Yeni Yazı Ekle" formu, /posts endpoint'ine bir POST isteği göndererek yeni bir yazı oluşturur. Tüm bu iletişim JSON formatında gerçekleşir; Go API'niz JSON yanıtları dönerken, React frontend'iniz bu JSON'ı ayrıştırarak kullanıcı arayüzünde görüntüler.
CORS (Cross-Origin Resource Sharing) Ayarları:
Frontend uygulamanız genellikle Go API'nizden farklı bir portta (örneğin React 3000/5173 portunda, Go 8080 portunda) veya farklı bir domainde çalışır. Bu durum, web tarayıcılarının güvenlik politikaları nedeniyle "Cross-Origin" (kaynaklar arası) istek olarak algılanır. Tarayıcılar, bu tür isteklere varsayılan olarak izin vermez ve bir CORS hatası alırsınız. Bu sorunu çözmek için, Go API'nizin bu kaynaklar arası isteklere izin vermesi gerekir. Go tarafında, bir CORS middleware'i kullanarak bu ayarları kolayca yapabilirsiniz. github.com/rs/cors gibi bir kütüphane bu iş için idealdir:
// main.go (CORS ayarları eklendi)
package main
import (
"fmt"
"log"
"net/http"
"os"
"github.com/gorilla/mux"
"github.com/rs/cors" // CORS kütüphanesi
_ "github.com/lib/pq"
"database/sql"
)
var db *sql.DB
func init() {
// ... (veritabanı bağlantı ve tablo oluşturma kodları)
}
func main() {
router := mux.NewRouter()
// ... (route tanımları)
// CORS ayarları
c := cors.New(cors.Options{
AllowedOrigins: []string{"http://localhost:5173", "http://localhost:3000"}, // React uygulamanızın çalıştığı adresler
AllowedMethods: []string{"GET", "POST", "PUT", "DELETE", "OPTIONS"},
AllowedHeaders: []string{"Authorization", "Content-Type"},
AllowCredentials: true,
})
handler := c.Handler(router) // CORS middleware'ini router'a uygula
fmt.Println("Sunucu 8080 portunda başlatıldı...")
log.Fatal(http.ListenAndServe(":8080", handler)) // router yerine handler kullan
}AllowedOrigins kısmına React uygulamanızın çalıştığı domain/port bilgisini eklemeniz önemlidir. Üretim ortamında, buraya blogunuzun gerçek domainini eklemelisiniz.
Ortam Değişkenleri ile Dinamik Yapılandırma:
Hem Go backend'inizde hem de React frontend'inizde API adresleri gibi hassas veya ortamdan ortama değişebilecek bilgileri doğrudan koda yazmaktan kaçınmalısınız. Bunun yerine, ortam değişkenlerini kullanın.
Go tarafında os.Getenv("DATABASE_URL") örneğini zaten görmüştük. React tarafında ise, Vite kullanıyorsanız .env dosyaları oluşturup VITE_API_URL=http://localhost:8080 gibi değişkenler tanımlayabilir ve bunları kodunuzda import.meta.env.VITE_API_URL şeklinde kullanabilirsiniz. Bu, geliştirme, test ve üretim ortamları için farklı yapılandırmalar kullanmanızı sağlar.
Mobil Uyumluluk ve Responsive Tasarım:
Blogunuzun mobil cihazlarda da harika görünmesi ve kullanılabilmesi günümüzde bir zorunluluktur. React uygulamanızın responsive olması için CSS Media Queries kullanabiliriz. Media queries, ekran boyutuna veya cihaz özelliklerine göre farklı stiller uygulamanıza olanak tanır.
/* src/App.css */
/* Temel stiller */
.main-content {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.post-card {
background-color: #fff;
border: 1px solid #eee;
padding: 15px;
margin-bottom: 20px;
border-radius: 8px;
}
/* Küçük ekranlar için (örn. mobil cihazlar) */
@media (max-width: 768px) {
.main-content {
padding: 10px; /* Daha az boşluk */
}
.post-card {
padding: 10px; /* Kart içeriğinde de daha az boşluk */
}
/* Belirli bileşenlerin düzenini değiştirebilirsiniz */
.header .nav-links {
flex-direction: column; /* Mobil menüde linkleri alt alta sırala */
}
}
/* Çok küçük ekranlar için (örn. telefonlar) */
@media (max-width: 480px) {
.post-card-title {
font-size: 1.2em;
}
}Bu örnek, CSS media query'lerinin nasıl kullanılabileceğini gösterir. Mobil öncelikli (mobile-first) bir yaklaşım benimsemek, yani önce küçük ekranlar için stilleri yazıp sonra daha büyük ekranlar için geçersiz kılmak, genellikle daha iyi sonuçlar verir. Frontend framework'leri (örneğin Bootstrap, Tailwind CSS) veya CSS-in-JS kütüphaneleri (örneğin Styled Components) responsive tasarımı daha da kolaylaştırabilir. React'ın esnekliği, bu araçlardan herhangi birini tercih etmenize olanak tanır.
/api/v1/posts). Bu, API'nizde ileriye dönük uyumsuz değişiklikler yaptığınızda eski istemcilerinizin çalışmaya devam etmesini sağlar.
Entegrasyon süreci, Go ve React'ı bir araya getirerek dinamik ve işlevsel bir blog oluşturmanın temelidir. Doğru yapılandırmalar ve responsive tasarım prensipleri ile blogunuz hem masaüstü hem de mobil cihazlarda sorunsuz bir kullanıcı deneyimi sunacaktır.
Performans ve SEO Optimizasyonu İçin İleri Düzey İpuçları Nelerdir?
Kişisel blogunuzu Go ve React ile inşa etmek, temel olarak güçlü bir platform sağlar; ancak gerçek dünya başarısı için performans ve arama motoru optimizasyonu (SEO) kritik öneme sahiptir. Blogunuz ne kadar iyi yazılmış olursa olsun, yavaş yüklenirse veya arama motorları tarafından bulunamazsa, potansiyel okuyucularınıza ulaşamaz. Bu bölümde, Go backend'iniz ve React frontend'iniz için ileri düzey performans ve SEO optimizasyon tekniklerini keşfedeceğiz.
Go Backend Performans Optimizasyonları:
1. Veritabanı İndeksleme: Veritabanınızdaki blog_posts tablosundaki id, created_at gibi sıkça sorgulanan sütunlara indeksler eklemek, sorgu sürelerini önemli ölçüde azaltır. Örneğin, CREATE INDEX idx_posts_created_at ON blog_posts (created_at DESC); komutu, en yeni yazıları çekme işlemini hızlandıracaktır.
2. Caching (Önbellekleme): Sıkça erişilen ancak nadiren değişen veriler (örneğin, ana sayfa yazıları listesi veya genel ayarlar) için bir önbellek katmanı eklemek, veritabanı yükünü azaltır ve yanıt sürelerini hızlandırır. Redis gibi in-memory bir veri yapısı sunucusu, Go ile kolayca entegre edilebilir. Bir blog yazısı çekildiğinde, önce Redis'e bakılır; yoksa veritabanından çekilir ve Redis'e kaydedilir.
3. Verimli Sorgular: N+1 sorgu sorununu önlemek için veritabanı sorgularınızı optimize edin. İlişkili verileri tek bir sorguda (JOIN kullanarak) çekmek, birden fazla küçük sorgu çalıştırmaktan daha verimlidir.
4. HTTP/2 Kullanımı: Go'nun standart kütüphanesi HTTP/2'yi destekler. HTTP/2, aynı TCP bağlantısı üzerinden birden fazla isteği eşzamanlı olarak gönderme yeteneği sayesinde performansı artırabilir.
React Frontend Performans Optimizasyonları:
1. Code Splitting ve Lazy Loading: React uygulamanızın tüm kodunu tek bir büyük JavaScript dosyasına dönüştürmek yerine, uygulamanızı mantıksal parçalara bölebilir ve yalnızca o anki sayfa için gereken kodu yükleyebilirsiniz. React.lazy() ve Suspense bileşenleri, veya route bazlı code splitting için react-router-dom ile birlikte bu teknikleri kullanabilirsiniz.
// src/App.jsx içinde Lazy Loading örneği
import React, { Suspense, lazy } from 'react';
// ... diğer importlar
const HomePage = lazy(() => import('./pages/HomePage'));
const SinglePostPage = lazy(() => import('./pages/SinglePostPage'));
function App() {
return (
Yükleniyor...