frontend elmélet

Frontend_ppt/react_js/build_deploy.tex

@@ -0,0 +1,38 @@
+\section{Build \& Deploy}
+
+\begin{frame}{Mi történik a build folyamatban?}
+  \begin{block}{Build = el�'készítés az éles kiadásra}
+    Fejlesztés közben a kód sokszor nem optimális formában van --- sok fájl, olvasható változónevek, fejlesztői segédletek. A build folyamat ezeket átalakítja böngészőbarát, gyors formára.
+  \end{block}
+  \vspace{0.5em}
+  \begin{itemize}
+    \item \textbf{Minifikálás:} felesleges szóközök, kommentek eltávolítása, változónevek rövidítése --- kisebb fájlméret.
+    \item \textbf{Tree-shaking:} a nem használt kód kiszűrése a végleges csomagból.
+    \item \textbf{Kódfelosztás:} az alkalmazás több kisebb fájlra bontva töltődik --- csak ami kell, töltődik le.
+  \end{itemize}
+\end{frame}
+
+\begin{frame}{Környezeti változók}
+  \begin{itemize}
+    \item Az alkalmazásnak fejlesztési és éles környezetben más beállításokra van szüksége (API URL, kulcsok stb.).
+    \item Ezeket \textbf{.env fájlokban} tároljuk --- a \texttt{.env.local} soha nem kerül Git-be (érzékeny adatok).
+    \item Vite-ban a \texttt{VITE\_} előtagú változók kerülnek a kliensoldali kódba --- a többi csak szerveroldalon érhető el.
+    \item \textbf{Figyelem:} titkos kulcsokat soha ne tegyük a kliensoldali kódba --- bárki láthatja!
+  \end{itemize}
+\end{frame}
+
+\begin{frame}{Deploy lehet�'ségek}
+  \begin{itemize}
+    \item \textbf{Vercel, Netlify:} egy Git push-ra automatikusan deployol, ingyen elérhető próbaprojektekhez --- a legegyszerűbb indulás.
+    \item \textbf{GitHub Pages:} statikus oldalakhoz, nyílt forráskódú projektekhez kényelmes.
+    \item \textbf{Saját szerver / CDN:} Nginx-szel statikus fájlokat tálalunk; fontos az SPA fallback beállítása (minden URL-t az \texttt{index.html}-re irányítunk, a React Router veszi át).
+  \end{itemize}
+\end{frame}
+
+\begin{frame}{Biztonsági alapok}
+  \begin{itemize}
+    \item \textbf{XSS (Cross-Site Scripting) elleni védelem:} a React alapból escape-eli a JSX-ben megjelenített szövegeket --- a \texttt{dangerouslySetInnerHTML} viszont kikerüli ezt, csak tisztított adattal szabad használni.
+    \item \textbf{Auth token kezelés:} a JWT-t ne \texttt{localStorage}-ban tároljuk --- JavaScript elérheti. HTTP-only cookie biztonságosabb, mert JavaScriptből nem olvasható.
+    \item \textbf{Hibamonitorozás:} éles alkalmazásban szükséges eszköz (pl. Sentry), hogy a felhasználóknál fellépő hibákról értesüljünk.
+  \end{itemize}
+\end{frame}