40 najpopularnijih pitanja i odgovora za intervju za web developere (2026.)

By: Uredništvo Uredništvo
Hours Ažurirano

Najčešća pitanja i odgovori za intervju za web developere

Priprema za intervju za poziciju web developera zahtijeva jasnoću o izazovima koji predstoje i uvidima koje poslodavci traže. Intervju za web developera očekivanja pomažu kandidatima da učinkovito iskažu relevantne snage i napreduju.

Ovo područje nudi ogromne mogućnosti jer se digitalni proizvodi šire i zahtijevaju praktične primjene koje nagrađuju tehničko iskustvo i stručnost u domeni. Stručnjaci koji rade u tom području primjenjuju vještine analize, tehničku stručnost i širok skup vještina kako bi riješili uobičajene i napredne izazove, pomažući...ping početnici, iskusni inženjeri i voditelji timova ispunjavaju rastuća očekivanja industrije. Čitaj više…

👉 Besplatno preuzimanje PDF-a: Pitanja i odgovori za intervju za web developera

Najčešća pitanja i odgovori za intervju za web developere

1) Objasnite koje su uloge HTML-a, CSS-a i JavaSkripte su u web razvoju - i kako se razlikuju po namjeni i opsegu.

HTML, CSS i JavaSkripte imaju fundamentalno različite uloge u web razvoju, a svaka se bavi zasebnim slojem korisničkog iskustva i strukture aplikacije. HTML (HyperText Markup Language) pruža strukturnu osnovu: definira elemente na stranici (naslove, odlomke, slike, poveznice, obrasce itd.). Bez HTML-a nema semantičkog sadržaja ili pristupačne strukture - ništa što bi preglednik smisleno prikazao. CSS (Cascading Style Sheets) nalazi se na vrhu HTML-a i definira prezentaciju: stiliziranje, raspored, razmak, responzivnost, tipografiju, boje i cjelokupni vizualni izgled. JavaSkripta dodaje ponašanje i interaktivnost: rukovanje događajima (klikovi, unos), dinamička ažuriranja sadržaja (bez ponovnog učitavanja stranice), animacije, validacije obrazaca, asinkrono učitavanje podataka (npr. AJAX), manipulaciju DOM-om i još mnogo toga.

Ključne razlike i opseg:

sloj Odgovornost Primjer upotrebe
HTML Struktura i semantika Definiranje obrasca s <input>, <button>i <label> oznake
CSS Prezentacija i izgled Stiliziranje forme, pozicioniranje, responzivni izgled, boja i tipografija
JavaScript Ponašanje, logika, interaktivnost Validacija unosa u obrazac, slanje putem AJAX-a, dinamički prikaz poruka o uspjehu/pogrešci

Zbog ove podjele briga, promjene u jednom sloju (stil, ponašanje, sadržaj) obično ne zahtijevaju prepisivanje ostalih. Na primjer, možete redizajnirati stranicu isključivo ažuriranjem CSS-a, bez diranja HTML-a; ili dodati validaciju na strani klijenta putem JS-a bez mijenjanja HTML strukture.

Dobar web programer mora razumjeti sva tri - kako bi stvorio stranice koje su semantički ispravne, vizualno privlačne, responzivne, interaktivne i jednostavne za održavanje.

2) Kako osigurati da je web stranica „responzivna“ i da se dobro ponaša na različitim uređajima — koje su tehnike i najbolje prakse uključene?

Osiguravanje responzivnosti web stranice znači njezino dizajniranje tako da se glatko prikazuje i funkcionira na uređajima s različitim veličinama zaslona, ​​rezolucijama i orijentacijama (stolna računala, tableti, telefoni). To zahtijeva ne samo promjenu veličine, već i prilagodbu izgleda, navigacije, slika, pa čak i funkcionalnosti.

Ključne strategije i najbolje prakse:

  • Fluidne mreže i relativne jediniceUmjesto fiksnih širina piksela, koristite postotne širine, em/rem jedinice ili CSS grid/flexbox kako bi se izgled fluidno prilagođavao.
  • Medijski upitiKoristite CSS medijske upite (@media) za prilagodbu stilova na temelju širine zaslona, ​​orijentacije, razlučivosti i vrste uređaja. Na primjer, preuredite stupce u jedan stupac na uskim zaslonima, prilagodite veličinu fonta, sakrijte ili sažmite navigacijske izbornike.
  • Fleksibilne slike i medijiKoristite CSS (npr. max-width: 100%; height: auto) ili HTML atributi (srcset, sizes) kako bi se slike skalirale na odgovarajući način; opcionalno koristite različite verzije slika za različite rezolucije (responzivne slike).
  • Dizajn na prvom mjestu za mobilne uređajeZapočnite s dizajniranjem za mobilne uređaje (najmanje zaslone) i postupno poboljšavajte za veće zaslone - osiguravajući da osnovno iskustvo funkcionira na ograničenim uređajima, a zatim dodajte poboljšanja za stolna računala.
  • Testiranje na različitim uređajima i preglednicimaRučno testiranje (stvarni uređaji ili emulatori), alati za responzivno testiranje, testiranje na više preglednika i više operativnih sustava za otkrivanje problema s izgledom, performansama i kompatibilnošću.
  • Optimizacije performansiOptimizirajte slike, učitajte ih odgođeno, minimizirajte resurse (CSS/JS), koristite učinkovit kod — brzo vrijeme učitavanja je ključno, posebno na mobilnim uređajima ili sporijim vezama.
  • Pristupačno i prilagodljivo korisničko sučeljeKoristite kontrole prilagođene dodiru; osigurajte da su veličine fonta, veličine gumba i polja za unos upotrebljive na malim zaslonima; održavajte čitljivost i upotrebljivost.

Usvajanje ovih praksi osigurava da web-mjesto pruža dosljedno i korisničko iskustvo na svim platformama. Vodiči za intervjue posebno navode "responzivni dizajn" kao ključnu kompetenciju za web developere.

3) Koje su neke učinkovite metode za optimizaciju vremena učitavanja i performansi web stranice - i zašto su važne?

Optimizacija performansi je ključna: brže vrijeme učitavanja dovodi do boljeg korisničkog iskustva, nižih stopa napuštanja stranice, boljeg angažmana i poboljšanog SEO-a. Nekoliko tehnika pomaže u postizanju ovoga:

Uobičajene metode optimizacije:

  • Minimizirajte i kombinirajte resurseKomprimiraj CSS, JavaSkripta i HTML (uklonite razmake/komentare), kombinirajte više CSS/JS datoteka kako biste smanjili HTTP zahtjeve.
  • Koristite mrežu za isporuku sadržaja (CDN)Poslužujte statičke elemente (slike, CSS, JS) sa servera geografski bližih korisnicima - smanjuje latenciju.
  • Komprimirajte slike i koristite odgovarajuće formateOptimizirajte slike (koristite komprimirane formate poput WebP-a, ispravite dimenzije), odgođeno učitavanje nekritičnih slika.
  • Omogućite predmemoriju preglednikaKoristite HTTP zaglavlja za predmemoriranje kako ponovljeni posjetitelji ne bi ponovno preuzimali nepromijenjene resurse.
  • Asinkrono učitavanje i odgađanje nekritičnih skriptiPrvo učitajte bitan sadržaj; odgodite ili asinkrono učitajte skripte koje nisu ključne za početno renderiranje.
  • Optimizirajte isporuku CSS/JS-aUčitajte kritični CSS inline ili rano, odgodite nekritični CSS; izbjegavajte resurse koji blokiraju renderiranje.
  • Smanjite HTTP zahtjeve i koristite savjete za resurseKombinirajte datoteke, pažljivo koristite fontove, koristite preload/prefetch, mali resursi u liniji.
  • Implementirajte učinkovite odgovore na strani poslužiteljaKoristite predmemoriranje, smanjite vrijeme odgovora poslužitelja, omogućite GZIP/Brotli kompresiju, optimizirajte backend upite.

Zašto su performanse važne:

  • Poboljšava korisničko iskustvo; spore stranice frustriraju korisnike, povećavajući stopu napuštanja stranice.
  • Na mobilnim ili vezama niske propusnosti, performanse su ključne.
  • Brže stranice obično se bolje rangiraju u tražilicama, što utječe na vidljivost.
  • Smanjuje potrošnju resursa (propusnost, podaci), što koristi i korisnicima i poslužiteljima.

Prilikom intervjua za poziciju web developera, često se očekuje da kandidat bude sposoban artikulirati i implementirati optimizacije performansi.

4) Kako osiguravate kompatibilnost među preglednicima - i koje alate ili prakse koristite za rješavanje razlika među preglednicima?

Kompatibilnost s više preglednika osigurava da se web stranica ispravno ponaša i izgleda dosljedno u različitim web preglednicima (Chrome, Firefox, Safari, Edge itd.) i na različitim uređajima i operativnim sustavima. Postizanje ovoga uključuje promišljenost u razvoju i sustavno testiranje.

Pristupi za osiguranje kompatibilnosti:

  • Koristite web standarde i semantički HTML/CSSDržite se standardiziranog HTML-a, CSS-a i JS-a umjesto da se oslanjate na trikove specifične za preglednik.
  • Koristite CSS resetiranje ili normalizaciju bibliotekaUblažavaju razlike u zadanim stilovima među preglednicima.
  • Prefiksi dobavljača i zamjenske opcijeZa novije CSS značajke koristite prefikse dobavljača (npr. -webkit-, -moz-) ili rezervne tehnike za podršku starijim preglednicima.
  • Progresivno poboljšanje / graciozna degradacijaIzradite osnovnu funkcionalnu verziju koristeći široko podržane značajke; zatim je poboljšajte za preglednike koji podržavaju novije značajke - osigurava osnovnu funkcionalnost svugdje.
  • Polyfills i transpileriKoristite JS transpilere (npr. Babel) za pretvaranje modernog JS-a u verzije kompatibilne s prethodnim verzijama; koristite polyfillove za nedostajuće API-je.
  • Temeljito testiranje na različitim preglednicima i uređajimaKoristite automatizirane alate (npr. BrowserStack, platforme za testiranje više preglednika) i ručno testiranje kako biste identificirali CSS/JS specifičnosti, probleme s izgledom i probleme s funkcionalnošću.
  • Izbjegavajte oslanjanje na zastarjele ili eksperimentalne značajkePreferirajte stabilne, široko podržane API-je ili značajke.

U intervjuima za web uloge, demonstracija svijesti o problemima s više preglednika, poznavanje praksi normalizacije i testiranja te objašnjavanje kako se nosite s nedosljednostima često su odlučujući faktori.

5) Što je CSS Box Model — objasnite njegove komponente i kako njegovo razumijevanje pomaže u dizajnu izgleda.

CSS Box Model je temeljni koncept koji opisuje kako se svaki HTML element prikazuje kao pravokutni "kutija". Razumijevanje modela kutije ključno je za upravljanje rasporedom, razmakom, veličinom i poravnanjem na web stranicama.

Komponente modela kutije (iznutra prema van):

  • Sadržaj: Stvarni sadržaj elementa (tekst, slike itd.).
  • punjenjeRazmak između sadržaja i obruba. Dodavanje ruba povećava prostor unutar okvira bez promjene vanjskog položaja elementa.
  • GranicaRub obavija padding i sadržaj. Doprinosi ukupnoj veličini okvira.
  • MaržaProstor izvan granice — odvaja element od susjednih elemenata.
| margin |
  ___________  
 | border   |  
 | padding  |  
 |  content |  
  ‾‾‾‾‾‾‾‾

Zašto je to važno za izgled:

  • Kada odredite širinu/visinu za element, padding, border i margina utječu na konačnu veličinu prikaza - stoga dizajn mora uzeti u obzir ove vrijednosti kako bi se izbjeglo neočekivano prelijevanje ili neusklađenost.
  • Razumijevanje box modela pomaže u kontroli razmaka između elemenata (npr. sažimanje margina, korištenje margina u odnosu na padding).
  • Omogućuje predvidljivu konstrukciju rasporeda (npr. centriranje elemenata, poravnavanje jedan pored drugog, stvaranje praznina).
  • Pruža jasnoću pri izradi responzivnih ili fluidnih izgleda - posebno u kombinaciji s CSS grid/flexbox.

Budući da mnogi vodiči za intervjue za web developere očekuju ovo znanje (posebno kada se raspravlja o rasporedu, CSS-u, responzivnom dizajnu), sposobnost jasnog artikuliranja box modela pokazuje razumijevanje osnova CSS-a.

6) Koje su ključne razlike između == i === u JavaSkripta — i kada biste trebali koristiti jednu umjesto druge?

In Javaskripta, == i === su operatori usporedbe, ali se ponašaju drugačije s obzirom na provjeru tipova i prisilu. Razumijevanje njihovih razlika ključno je za pisanje predvidljivog koda bez grešaka.

  • == (trbušnjacitracjednakost)Uspoređuje dvije vrijednosti radi jednakosti nakon što izvrši prisilnu promjenu tipa ako je potrebno. To znači prije usporedbe, JavaSkripta može pretvoriti jedan ili oba operanda u zajednički tip. To može dovesti do neočekivanih rezultata "true"/"false" ako se tipovi razlikuju.
  • === (stroga jednakost)Uspoređuje obje vrijednosti i vrsta, bez prisile. Vraća vrijednost true samo ako su oba operanda istog tipa i imaju jednaku vrijednost.

Zašto je to važno:

Korištenje == ponekad može dati iznenađujuće rezultate, npr.:

0 == '0'        // true   — because '0' is coerced to number 0
0 === '0'       // false  — types differ (number vs string)

null == undefined   // true
null === undefined  // false

Zbog takvih osobitosti, mnogi programeri - i standardi kodiranja - preferiraju === (stroga jednakost) kako bi se izbjegli bugovi uzrokovani nenamjernom prisilom. U scenarijima intervjua, pokazivanje razumijevanja ove razlike ukazuje na to da ste svjesni JS zamki.

7) Opišite kako biste optimizirali web aplikaciju za SEO (optimizaciju za tražilice) i pristupačnost - koje čimbenike morate uzeti u obzir od samog početka?

Optimizacija za SEO i pristupačnost zahtijeva dizajniranje i kodiranje imajući na umu i ljudske korisnike i tražilice. To nadilazi vizualni dizajn ili performanse; uključuje semantičku strukturu, čisto označavanje, korisničko iskustvo i arhitekturu web-mjesta.

Važna razmatranja i prakse:

  • Semantički HTMLKoristite odgovarajuće HTML5 semantičke oznake (<header>, <nav>, <main>, <article>, <footer>itd.) umjesto generičkog <div> omotači — poboljšavaju čitljivost, SEO indeksiranje i kompatibilnost s pomoćnom tehnologijom.
  • Pravilna struktura i hijerarhija naslova: Koristiti <h1>-<h6> promišljeno; osigurajte logičan, ugniježđeni redoslijed naslova - ključno i za SEO i za pristupačnost (čitači zaslona, ​​​​struktura).
  • Pristupačni atributi: Uključiti alt tekst za slike, ARIA atributi ako su potrebni, label povezana s inputs, navigacija dostupna tipkovnicom, redoslijed fokusa, jasne kontrole obrasca.
  • Responzivan i mobilnim uređajima prilagođen dizajnDizajn usmjeren na mobilne uređaje, responzivni izgled, brzo učitavanje — upotrebljivost na mobilnim uređajima utječe na SEO rangiranje i pristupačnost korisnicima malih ekrana.
  • Optimizacija performansiBrzo vrijeme učitavanja, optimizirani resursi, učinkovite skripte - brzina stranice utječe na SEO rangiranje i korisničko iskustvo.
  • bjelica URL struktura i meta oznakeZnačenje URLs, meta oznake naslova/opisa, pravilna upotreba oznaka zaglavlja, strukturirani podaci (shema), mapa web-mjesta, kanonske oznake — pomaže tražilicama da ispravno indeksiraju.
  • Progresivno poboljšanje i podrška za rezervne opcijeOsigurajte dostupnost osnovnog sadržaja i funkcionalnosti čak i ako JS zakaže ili za pomoćne tehnologije - što je ključno za pristupačnost i botove tražilica.
  • Čitljivost i upotrebljivost sadržajaJasan sadržaj, dobar kontrast, čitljivi fontovi, semantičko označavanje - pomaže ljudskim korisnicima, čitačima zaslona i SEO botovima.

Uključivanjem ovih čimbenika u životni ciklus razvoja od samog početka (a ne kao naknadnu misao), isporučujete web aplikaciju koja je funkcionalna, lako vidljiva i upotrebljiva za svu publiku - snažan signal zrelih razvojnih praksi. To je u skladu s modernim očekivanjima za web developere, a to nadilazi puki izgled ili interaktivnost.

Ne propustite:

8) Kako strukturirate i organizirate JavaSkriptni kod u srednje velikom do velikom web projektu kako bi bio održiv, modularan i skalabilan?

Kako web aplikacije rastu u veličini i složenosti, organiziranje JavaPromišljeno pisanje skriptnog koda postaje ključno za održavanje, čitljivost, skalabilnost i jednostavnost suradnje. Dobro strukturirana kodna baza smanjuje greške, omogućuje lakše refaktoriranje i podržava rast značajki.

Preporučene prakse i struktura:

  • Modularna arhitektura kodaRazbijte kod u module - svaki koji obrađuje određenu funkcionalnost (npr. dohvaćanje podataka, manipulacija korisničkim sučeljem, upravljanje stanjem, uslužni programi). Koristite sustave modula poput ES6 modula (import/export) ili pakete modula (Webpack, Rollup) za upravljanje ovisnostima.
  • Razdvajanje briga (SoC): Odvojite manipulaciju korisničkim sučeljem, poslovnu logiku, rukovanje podacima i konfiguraciju. Na primjer, nemojte miješati logiku manipulacije DOM-om duboko unutar koda za rukovanje podacima.
  • Koristite uzorke i principe dizajnaPrimijenite obrasce poput MVC-a (Model-View-Controller), MVVM-a, observer-a, pub/sub-a prema potrebi za upravljanje složenošću; za SPA-ove razmotrite okvire/biblioteke (React, Vue, Angular) ili principe dizajna koji potiču komponentizaciju.
  • Održavanje strukture mapa/datotekaOrganizirajte kod u logičku hijerarhiju direktorija (npr. components/, services/, utils/, assets/, state/) i jasno imenujte datoteke kako biste odražavali njihovu odgovornost.
  • Upravljanje državom i podjela države u odnosu na neutralnostKoristite obrasce upravljanja stanjem ili biblioteke (ako je potrebno) za odvajanje stanja aplikacije od korisničkog sučelja - korisno kada aplikacija raste, za predvidljiva ažuriranja i lakše otklanjanje pogrešaka.
  • Standardi dokumentacije i kodiranjaOdržavajte dosljedan stil kodiranja, konvencije imenovanja, komentare i dokumentaciju za module i API-je — pomaže timskoj suradnji i budućem održavanju.
  • Automatizirana izgradnja i grupiranjeKoristite alate za izgradnju (Webpack, Babel itd.), transpilirajte za kompatibilnost s preglednicima, minimizirajte i grupirajte kod, upravljajte ovisnostima - osigurava da se kod izvodi u različitim okruženjima.
  • Testiranje i kontrola verzijaPisati jedinične testove za module, koristiti kontrolu verzija (npr. Git) za track promjenama, osigurajte sigurno refaktoriranje - ključno za dugoročno zdravlje projekta.

Primjenom ovih praksi od ranih faza životnog ciklusa projekta, programeri osiguravaju da, kako se projekt skalira, kodna baza ostane upravljiva, organizirana i prilagodljiva. Razgovori za više web pozicije često istražuju ovu vrstu arhitektonskog razmišljanja.

9) Koji su neki uobičajeni sigurnosni problemi u web razvoju - i kako ih ublažavate prilikom izrade web aplikacije?

Sigurnost je ključni aspekt web razvoja; ranjivosti mogu dovesti do kršenja podataka, neovlaštenog pristupa ili narušavanja integriteta. Kao web programer, mora se proaktivno pozabaviti sigurnošću na više slojeva - frontendu, backendu i komunikaciji.

Uobičajeni sigurnosni problemi i strategije ublažavanja:

  • Koristite HTTPS / sigurnu komunikacijuOsigurajte da su podaci između klijenta i poslužitelja šifrirani; izbjegavajte transmitslanje osjetljivih informacija putem običnog HTTP-a.
  • Validacija i sanitizacija unosaValidirajte i dezinficirajte sve korisničke unose kako biste spriječili napade poput SQL injekcije, cross-site scriptinga (XSS) i naredbenog injekcije. Koristite parametrizirane upite i odgovarajuće izbjegavajte izlaz.
  • Sprječavanje međusjetnog skriptiranja (XSS)Izbjegavajte ili kodirajte korisnički generirani sadržaj prije prikazivanja u HTML-u; koristite zaglavlja Pravila sigurnosti sadržaja (CSP) za ograničavanje dopuštenih izvora sadržaja.
  • Sprječavanje CSRF-a (krivotvorenja zahtjeva na više web-mjesta)Implementirajte CSRF tokene za zahtjeve za promjenu stanja, koristite samo HTTP i sigurne kolačiće, implementirajte pravilno rukovanje sesijama.
  • Sigurna autentifikacija i rukovanje lozinkamaHashirajte (i solite) lozinke prije pohranjivanja; provodite pravila o jakim lozinkama; izbjegavajte pohranjivanje osjetljivih podataka u običnom tekstu.
  • Koristite sigurne, ažurne biblioteke i okvireOdržavajte ovisnosti ažurnima; izbjegavajte poznate ranjivosti; redovito primjenjivajte sigurnosne zakrpe.
  • Pravilna autorizacija i kontrola pristupaOsigurajte odgovarajuću kontrolu pristupa temeljenu na ulogama, izbjegavajte izlaganje osjetljivih krajnjih točaka/podataka neovlaštenim korisnicima.
  • Zaštita podataka i usklađenost s privatnošćuSanitizirajte podatke, šifrirajte osjetljive podatke u mirovanju/u prijenosu, pridržavajte se propisa o privatnosti, izbjegavajte otkrivanje nepotrebnih podataka.
  • Rješavanje i evidentiranje pogrešaka bez curenja podatakaNe otkrivajte osjetljive informacije u porukama o pogreškama. Sigurno zabilježite pogreške bez otkrivanja korisničkih podataka.

Pokazivanje svijesti o ovim problemima - i objašnjavanje jasnih strategija ublažavanja - ukazuje na zrelost i odgovornost web programera. Popisi pitanja za intervju za web programere obično očekuju takvo razumijevanje.

10) Kada pokrećete novi web projekt od nule, kako planirate svoj tijek rada - od početnog postavljanja do implementacije - uzimajući u obzir održavanje, skalabilnost, performanse i suradnju?

Pokretanje web projekta od nule zahtijeva strukturiran tijek rada koji uravnotežuje planiranje, postavljanje, održavanje, suradnju i dugoročnu skalabilnost. Promišljen pristup od samog početka smanjuje tehnički dug i pojednostavljuje budući razvoj.

Tipičan plan tijeka rada:

  1. Analiza zahtjeva i planiranje arhitekture — razumjeti što aplikacija mora raditi: ključne značajke, protok podataka, korisničke uloge, potrebe za performansama i sigurnošću, dugoročnu skalabilnost.
  2. Odaberite tehnološki paket i alate — odlučiti o front-endu (vanilla JS, framework/biblioteka), backendu (ako je primjenjivo), bazi podataka, alatima za izgradnju, kontroli verzija (npr. Git), upraviteljima paketa, CI/CD cjevovodima, testnim okvirima.
  3. Postavljanje razvojnog okruženja i strukture projekta — inicijaliziranje kontrole verzija, stvaranje strukture direktorija (src/, components/, assets/, styles/itd.), konfigurirajte alate za izgradnju, lintere, formatiranje, varijable okruženja.
  4. Dizajn korisničkog sučelja/ux iskustva i modela podataka — wireframeovi/nacrti za korisničko sučelje, dizajn baze podataka/sheme ako je primjenjivo, plan za responzivni/mobilni izgled, pristupačnost, navigaciju, UX tokove.
  5. Razvijajte osnovnu funkcionalnost u koracima — slijedite prakse modularnog kodiranja, pišite male komponente ili module, koristite grane značajki za svaki zadatak, dokumentirajte kod.
  6. Implementirajte testiranje, pregled koda i prakse kontrole verzija — jedinično testiranje, integracijski testovi gdje je potrebno, međusobni pregledi koda, poruke o potvrđivanju (commit), strategija grananja, zahtjevi za spajanje/povlačenje.
  7. Optimizirajte za performanse, sigurnost, SEO, pristupačnost — optimizacija slika, grupiranje resursa, minifikacija, sigurna komunikacija (HTTPS), atributi pristupačnosti, semantički HTML, SEO prilagođeno označavanje.
  8. Implementirajte i konfigurirajte produkcijsko okruženje — konfiguriranje poslužitelja, baze podataka, varijabli okruženja, SSL-a, CDN-a, predmemorije, praćenja, zapisivanja pogrešaka.
  9. Kontinuirana integracija / kontinuirano raspoređivanje (CI/CD) — automatizirati cjevovode izgradnje, testiranja i implementacije radi dosljednosti i brzih iteracija.
  10. Održavanje, ažuriranja i dokumentacija — dokumentacija koda, ažuriranje ovisnosti, sigurnosne zakrpe, praćenje performansi i pogrešaka, prilagođavanje dizajna novim zahtjevima, komunikacija putem dokumentacije ili povijesti verzija za suradnike.

Ovaj cjeloviti tijek rada odražava stvarna očekivanja od timova za web razvoj. Anketari često pitaju kandidate kako holistički pristupaju izgradnji projekta, kako bi procijenili ne samo vještine kodiranja već i planiranje, arhitekturu, održavanje i spremnost na suradnju.

11) Koji su različiti načini upravljanja stanjem u modernim web aplikacijama i po čemu se razlikuju?

Upravljanje stanjem odnosi se na način na koji aplikacija pohranjuje, ažurira i dijeli podatke (stanje) između komponenti ili stranica. Učinkovito upravljanje stanjem postaje sve složenije kako aplikacije rastu.

Različiti pristupi upravljanju državom:

način Description Primjer upotrebe
Stanje lokalne komponente Stanje pohranjeno unutar jedne komponente pomoću Reacta useState() ili Vue-ov data. Male promjene korisničkog sučelja poput prekidača, modalnih prozora ili unosa u obrasce.
Bušenje rekvizita Prosljeđivanje stanja/podataka putem propsa kroz hijerarhiju komponenti. Jednostavno prosljeđivanje podataka roditelj-dijete, ali postaje nezgrapno u velikim aplikacijama.
Kontekstni API Pruža globalni način dijeljenja stanja između više komponenti bez bušenja propelera. Tematiranje, autentifikacija korisnika, postavke jezika.
Redux / MobX / Stanje Vanjske biblioteke koje nude predvidljivo globalno upravljanje stanjem putem pohrane, akcija i reducera. Veliki SPA-ovi kojima je potrebno dosljedno ažuriranje stanja i otklanjanje pogrešaka.
Upravljanje stanjem poslužitelja SyncStanje korisničkog sučelja s podacima poslužitelja pomoću API-ja (React Query, SWR). Aplikacije koje zahtijevaju puno podataka i trebaju kontrolu nad predmemorijom, sinkronizacijom i ponovnim učitavanjem.
URL/Stanje usmjerivača Koristi URL parametri ili nizovi upita za upravljanje navigacijskim stanjem. Paginacija, filtriranje ili upiti za pretraživanje.

Ključno za poneti: Koristite jednostavno lokalno stanje gdje god je to moguće i usvojite globalna ili rješenja stanja poslužitelja kao skale složenosti. Pretjerano rano upravljanje stanjem često dodaje nepotrebne troškove.

12) Objasnite razliku između renderiranja na strani klijenta (CSR) i renderiranja na strani poslužitelja (SSR). Koje su njihove prednosti i nedostaci?

Strategija renderiranja utječe na performanse, SEO i korisničko iskustvo.

Renderiranje na strani klijenta (CSR):

CSR prikazuje sadržaj u pregledniku pomoću JavaSkripta nakon početnog učitavanja stranice. Okviri poput Reacta, Vuea i Angulara prvenstveno koriste CSR.

Prednosti:

  • Brza naknadna navigacija (nakon početnog učitavanja).
  • Smanjeno opterećenje poslužitelja (dohvaćaju se samo JSON podaci).
  • Izvrsno za dinamične primjene i SPA centre.

Nedostaci:

  • Sporije prvo iscrtavanje sadržaja (prazan HTML prije pokretanja JS-a).
  • Loš SEO ako se ne riješi predrenderiranjem.

Renderiranje na strani poslužitelja (SSR):

SSR renderira HTML na poslužitelju prije slanja u preglednik. Primjeri: Next.js (React), Nuxt.js (Vue).

Prednosti:

  • Brže početno učitavanje (poslan je potpuno renderirani HTML).
  • Bolji SEO jer pretraživači vide cijele stranice.
  • Poboljšana percipirana izvedba.

Nedostaci:

  • Složenije postavljanje servera.
  • Veće opterećenje servera.
  • Sporiji prijelazi stranica bez hidratacije.
Faktor DOP SSR
Početna brzina učitavanja sporiji Brže
SEO Slabo (potrebno je prethodno renderiranje) jak
Opterećenje poslužitelja Nizak visok
Složenost razvoja Spustite Viši
Najbolje za SPA-ovi, nadzorne ploče Blogovi, e-trgovina, marketinške stranice

Moderni okviri (Next.js, Remix, SvelteKit) spajaju oboje putem Hibridno renderiranje, odabirom SSR-a ili CSR-a po stranici.

13) Što je REST API i po čemu se razlikuje od GraphQL-a?

REST (prijenos reprezentativnog stanja) je arhitektonski stil u kojem API-ji otkrivaju krajnje točke koje predstavljaju resurse. Svaka krajnja točka odgovara operaciji na resursu (GET, POST, PUT, DELETE).

GraphqlS druge strane, je jezik upita za API-je koji klijentima omogućuje da zatraže točno one podatke koji su im potrebni s jedne krajnje točke.

svojstvo REST API Graphql
Struktura Više krajnjih točaka (npr. /users, /users/:id) Jedna krajnja točka (/graphql)
Dohvaćanje podataka Fiksni odgovor po krajnjoj točki Klijent definira oblik podataka
Prekomjerno dohvaćanje / Nedovoljno dohvaćanje Zajednički eliminiran
caching Lakše (HTTP keširanje) Kompleksnije
Krivulja ucenja jednostavnije Viši
Upotrijebite slučaj Standardni CRUD API-ji Složeni, međusobno povezani upiti podataka

Primjer:

Za dobivanje korisnika i njegovih objava:

  • ODMOR: /users/1 i /users/1/posts (dva poziva)
  • GraphQL: jedan upit 
    {
  user(id: 1) {
    name
    posts { title }
  }
}

Sažetak: Koristite REST za jednostavne CRUD-ove ili mikroservise; GraphQL odgovara bogatim klijentskim aplikacijama kojima su potrebni fleksibilni upiti.

14) Kako se rješavaju asinhrone operacije u JavaSkripta?

JavaSkripta izvršava kod sinkrono prema zadanim postavkama, ali web aplikacije često zahtijevaju asinkrone operacije (dohvaćanje podataka, timeri, događaji). Učinkovito rukovanje njima osigurava nesmetan rad bez blokiranja.

Uobičajeni asinhroni obrasci:

  1. Povratni pozivi:
    Najstarija metoda. Funkcija se prosljeđuje na izvršenje nakon što se završi neka druga.

    getData(url, (response) => console.log(response));

    ⚠️ Vodi do callback hell ako je duboko ugniježđeno.

  2. obećanja:
    Osigurajte čišću, ulančanu sintaksu za asinkrone rezultate.

    fetch(url)
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));
  3. Asinkrono/Čekanje:
    Uvedeno u ES2017, čini da asinkroni kod izgleda sinkrono.

    async function fetchData() {
  try {
    const res = await fetch(url);
    const data = await res.json();
    console.log(data);
  } catch (e) {
    console.error(e);
  }
}
  4. Promise.all / race / any:
    Učinkovito upravljajte više istovremenih operacija.

Razumijevanje asinkronog ponašanja, petlje događaja i mikrozadataka ključno je za web developere orijentirane na performanse.

15) Što su web komponente i zašto su važne?

Web komponente su prilagođeni elementi za višekratnu upotrebu izgrađeni korištenjem standardnih web tehnologija (HTML, CSS, JS) - bez oslanjanja na frameworkove.

Oni sačinjavaju tri glavne tehnologije:

  • Prilagođeni elementi: Definiraj nove HTML oznake (custom-element).
  • Sjeni DOM: Enkapsulira stilove i oznake.
  • HTML predlošci: Unaprijed definirane strukture koje se mogu ponovno koristiti.

Prednosti:

  • Ponovna upotreba UI komponenti neovisna o okviru.
  • Kapsulacija stila — sprječava curenje CSS-a.
  • Potiče modularni, održivi kod.

Primjer:

class MyCard extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<div class="card">${this.getAttribute('title')}</div>`;
  }
}
customElements.define('my-card', MyCard);

Web komponente izvorno podržavaju preglednici i sve se više koriste u poslovnim aplikacijama za interoperabilnost između različitih okvira.

16) Objasnite životni ciklus web stranice od zahtjeva do prikaza.

Razumijevanje životni ciklus web stranice pomaže u optimizaciji performansi i otklanjanju pogrešaka pri učitavanju.

Faze životnog ciklusa:

  1. DNS pretraga: Preglednik pretvara naziv domene u IP adresu.
  2. TCP veza i SSL rukovanje: Uspostavlja sigurnu vezu.
  3. Poslan HTTP zahtjev: Preglednik zahtijeva HTML od poslužitelja.
  4. Odgovor poslužitelja: Vraća HTML (i reference na CSS, JS, slike).
  5. HTML parsiranje: Preglednik konstruira DOM stablo.
  6. CSS parsiranje: Stvara CSSOM (CSS objektni model).
  7. JavaIzvršenje skripte: DOM i CSSOM kombinirani → Renderiraj stablo stvorio.
  8. Izgled: Preglednik izračunava položaje/veličine elemenata.
  9. Slikanje i komponiranje: Preglednik crta piksele na ekranu.

Mogućnosti optimizacije:

  • Minimizirajte blokirajuće skripte.
  • Ugrađeni kritični CSS.
  • Koristite keširanje i CDN-ove.
  • Odgodite nekritičnu imovinu.

Poznavanje ovog slijeda pomaže u dijagnosticiranju "zašto mi je stranica spora?" - omiljenog pitanja u intervjuu.

17) Koja je razlika između var, let i const u JavaSkripta?

Riječ Djelokrug Preraspodjela Dizanje Vremenska mrtva zona
var Funkcijski opseg Da Podignuto, inicijalizirano kao undefined Ne
let Blok-opseg Da Podignuto, nije inicijalizirano Da
const Blok-opseg Ne Podignuto, nije inicijalizirano Da

Ključne točke:

  • preferiraju let za varijable koje se mijenjaju, const za konstante.
  • Izbjeći var — njegov opseg funkcija i podizanje uzrokuju greške.
  • Primjer: 
    console.log(a); // undefined (hoisted var)
var a = 5;

console.log(b); // ReferenceError
let b = 10;

Razumijevanje ovih razlika pokazuje tečnost u modernom JS-u.

18) Što su servisni radnici i kako poboljšavaju progresivne web aplikacije (PWA)?

Servisni workeri su skripte koje se izvode u pozadini, odvojeno od glavne stranice, omogućujući offline funkcionalnost, predmemoriranje i sinkronizaciju u pozadini - što PWA-ove čini pouzdanima i brzima.

mogućnosti:

  • Izvanmrežno keširanje: Učitaj resurse iz predmemorije kada je izvan mreže.
  • Push obavijesti: Primajte pozadinske poruke.
  • Sinkronizacija u pozadini: Ponovite zahtjeve kada se mreža vrati.
  • Zahtjevi za presretanje mreže: Inteligentno mijenjajte, pohranjujte u predmemoriju ili dohvaćajte resurse.

Primjer upotrebe:

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(resp => resp || fetch(event.request))
  );
});

Prednosti:

  • Trenutno učitavanje stranice.
  • Upotrebljivost izvan mreže.
  • Smanjeno opterećenje servera.
  • Poboljšano korisničko iskustvo i ponovni angažman.

PWA-ovi koji koriste Service Workere mogu konkurirati iskustvima nativnih mobilnih aplikacija - što je često tema rasprave u modernim web intervjuima.

19) Kako kontrola verzija (Git) poboljšava suradnju u web razvoju?

Kontrola verzija kao što je ići tracpromjene koda u ks, omogućujući više programera da sigurno surađuju.

Osnovne prednosti:

  • Povijest i vraćanje na prethodno stanje: Revvratite se na prethodne verzije ako je potrebno.
  • Grananje i spajanje: Paralelni razvoj značajki bez konflikata.
  • suradnja: Više suradnika može raditi na istom projektu.
  • Code recenzije: Zahtjevi za povlačenjem i potvrde pomažu u održavanju kvalitete.
  • Automatizacija implementacije: Integrirano s CI/CD cjevovodima za izdanja.

Uobičajeni Gitov tijek rada:

  1. Kloniraj repozitorij.
  2. Stvorite novu granu: git checkout -b feature/login.
  3. Potvrdi promjene.
  4. Zahtjev za push i open pull.
  5. Code pregled → spoji u main.

Poznavanje Gita i strategija grananja (Git Flow, trunk-based) je ključno za timski rad u bilo kojoj ulozi web developera.

20) Koje su prednosti i nedostaci korištenja frontend frameworka poput Reacta, Angulara ili Vuea?

Okvir Prednosti Nedostaci
Reagovati Arhitektura temeljena na komponentama, virtualni DOM, veliki ekosustav. Zahtijeva dodatne biblioteke za usmjeravanje/stanje; strma krivulja učenja za početnike.
Kutni Potpuno opremljen (usmjeravanje, DI, obrasci), snažan TypeScript Podrška. Preopširno, tvrdoglavo, preteško za male aplikacije.
Vue Lagano, jednostavna krivulja učenja, dvosmjerno vezanje. Manji ekosustav; problemi skalabilnosti za velike aplikacije.

Opće prednosti:

  • Code ponovna upotreba putem komponenti.
  • Poboljšane performanse s virtualnim DOM-om ili optimiziranim otkrivanjem promjena.
  • Lakše upravljanje stanjem i modularizacija.
  • Aktivna zajednica i podrška.

Nedostaci:

  • Veće početne veličine paketa.
  • Složenost izgradnje (alati, konfiguracija).
  • Česta ažuriranja koja zahtijevaju održavanje.

Anketari očekuju da programeri ne samo koriste, već i razumiju kada not koristiti okvir.

21) Kako možete poboljšati performanse web stranice tehnikama front-end optimizacije?

Optimizacija front-enda poboljšava učinkovitost učitavanja, prikazivanja i izvršavanja sadržaja u pregledniku. Programeri moraju identificirati uska grla koja utječu na brzinu, interaktivnost ili vizualnu stabilnost.

Ključne strategije optimizacije uključuju:

  1. Code Umanjivanje: Uklonite nepotrebne znakove i razmake iz HTML-a, CSS-a, JS-a.
  2. Vezivanje u snopove i tresenje drveća: Kombinirajte datoteke kako biste smanjili HTTP zahtjeve; uklonite neiskorišteni kod (eliminacija mrtvog koda).
  3. Lijeno učitavanje: Učitajte slike, videozapise i skripte samo kada je potrebno.
  4. Optimizacija slike: Koristite moderne formate (WebP, AVIF), responzivne veličine (srcset) i kompresija.
  5. Predučitavanje i preddohvaćanje: Dajte prioritet kritičnim resursima (<link rel="preload">).
  6. Optimizacija kritičnog puta renderiranja: Ugradite kritični CSS, odgodite nekritični JS.
  7. Strategije predmemoriranja: Primijenite predmemoriranje preglednika i CDN-a; koristite Service Workere za offline sadržaj.
  8. Smanjite preoblikovanja/ponovne boje: Izbjegavajte grupne manipulacije DOM-om.

Alati za izvedbu:

  • Google Lighthouse, WebPageTest, GTmetrix za revizije.
  • Chrome DevTools za profiliranje tijekom izvođenja.

Rezultat: Brži LCP (najveće iscrtavanje sadržaja), bolji Core Web Vitals i viši SEO rang.

22) Što je CORS i kako se s njim nosite u web razvoju?

CORS (Dijeljenje resursa između izvora) je sigurnosni mehanizam preglednika koji kontrolira kako web stranice zahtijevaju resurse s različitih domena.

Prema zadanim postavkama, preglednici primjenjuju Politika istog porijekla, što blokira skripte od dohvaćanja resursa iz drugog izvora.

Primjer:

  • Lokacija A (example.com) pokušava dohvatiti podatke s web-mjesta B (api.other.com) — blokirano osim ako to ne dopusti poslužitelj Stranice B.

Rješenje:

Konfigurirajte CORS zaglavlja na poslužitelju:

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type

Ključne točke:

  • Koristiti "*" samo za javne API-je.
  • Koristiti zahtjevi za pregled leta (OPCIJE) za složene zahtjeve.
  • Za vjerodajnice: 
    Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: https://trusted.com

U Node.js-u (Express):

const cors = require('cors');
app.use(cors({ origin: 'https://example.com', credentials: true }));

Ispravno rukovanje CORS-om osigurava sigurne, interoperabilne API-je - što je često praktično pitanje.

23) Koja je razlika između sinkronog i asinkronog programiranja i zašto se asinkrono programiranje preferira u web aplikacijama?

Synckronični kod izvršava se sekvencijalno - jedna operacija odjednom. Ako jedan zadatak traje predugo, sve ostalo čeka (blokira).

Asinkroni kod izvršava zadatke koji ne blokiraju, dopuštajući drugim operacijama da nastave dok čekaju (npr. mrežni pozivi).

Primjer:

Tip Description Primjer
Synchronozan Zadaci izvršavani sekvencijalno. alert(fetchData()) čeka da se dohvaćanje završi.
asinhron Zadaci se izvršavaju istovremeno. fetch().then(...); console.log('Next line runs');

Zašto je asinkronost važna:

  • Sprječava zamrzavanje korisničkog sučelja.
  • Poboljšava performanse u aplikacijama s puno ulazno/izlaznih operacija.
  • Omogućuje skalabilnu obradu više zahtjeva.

Moderna JS upotreba Obećanja, asinkroni/čekaji petlje događaja za učinkovito upravljanje asinkronim tokom. Asinkrona arhitektura je ključna za API-je i SPA-ove.

24) Što su jednostranične aplikacije (SPA) i koje su njihove prednosti i nedostaci?

SPA-ovi učitavaju jednu HTML stranicu i dinamički ažuriraju sadržaj pomoću JavaSkriptiraj dok korisnici komuniciraju - bez ponovnog učitavanja cijele stranice.

Prednosti:

  • Besprijekorno korisničko iskustvo (brza navigacija).
  • Učinkovito korištenje resursa (djelomična ažuriranja).
  • Jednostavno stvaranje dinamičkih sučelja (React, Vue, Angular).
  • Višekratno upotrebljive komponente i usmjeravanje na prednjem kraju.

Nedostaci:

  • Početno opterećenje je veće (u paketu JS).
  • SEO izazovi osim ako se ne koristi SSR/predrenderiranje.
  • Povijest preglednika i rukovanje dubokim vezama zahtijevaju biblioteke usmjeravanja.
  • Curenje memorije moguće je ako se stanjem ne upravlja ispravno.
Faktor SPA MPA (aplikacija s više stranica)
navigacija Na strani klijenta (brzo) Ponovno učitavanje poslužitelja (sporo)
SEO Potrebno je SSR/predrenderiranje Prilagođeno domaćim korisnicima
Izvođenje Brzo nakon učitavanja Sporije tranzicije
Složenost Visoka (stanje, usmjeravanje) jednostavnije

SPA-ovi dominiraju modernim web razvojem, ali moraju biti pažljivo optimizirani za performanse i SEO.

25) Kako osiguravate osjetljive podatke tijekom prijenosa i pohrane u web aplikacijama?

Web aplikacije obrađuju povjerljive podatke poput vjerodajnica, tokena i osobnih informacija. Sigurnost mora pokrivati u tranzitu i u mirovanju podatke.

Za vrijeme Transmission:

  • Koristite HTTPS s TLS enkripcijom.
  • Primijenite HSTS (HTTP Strict Transport Security).
  • Izbjegavajte slanje osjetljivih podataka URLs ili GET parametre.
  • Koristite sigurne kolačiće (HttpOnly, Secure, SameSite).
  • Sigurno koristite JWT ili OAuth2 tokene.

Tijekom skladištenja:

  • Korištenje hash lozinki bcrypt or Argon2.
  • Šifrirajte osjetljiva polja (npr. AES-256).
  • Nikad ne zapisujte vjerodajnice u običnom tekstu.
  • Primijenite princip najmanjih privilegija pri pristupu bazi podataka.

Primjer (upravljanje lozinkama u Node.js):

const bcrypt = require('bcrypt');
const hash = await bcrypt.hash(password, 12);

Rezultat: Povećana povjerljivost, smanjeni rizik od kršenja i usklađenost s najboljim praksama GDPR-a i OWASP-a.

26) Što je kontinuirana integracija i kontinuirano raspoređivanje (CI/CD) i zašto su važni?

CI/CD automatizira izgradnju, testiranje i implementaciju koda — poboljšavajući brzinu razvoja i pouzdanost.

  • Kontinuirana integracija (CI):
    Programeri često spajaju kod u zajednički repozitorij, pokrećući automatizirane izgradnje i testove.
  • Kontinuirano raspoređivanje (CD):
    Automatski implementira testirane verzije u pripravnu ili produkcijsku verziju.

Prednosti:

  • Rano otkrivanje grešaka putem automatiziranih testova.
  • Dosljedna, pouzdana izdanja.
  • Smanjena ljudska pogreška.
  • Brža iteracija i petlje povratnih informacija.

Primjeri CI/CD alata:

Akcije na GitHubu, GitLab CI, Jenkins, CircleCI, Azure DevOps.

Primjer tijeka rada:

  1. Programer šalje kod na granu.
  2. CI cjevovod pokreće testove → gradi → generira artefakte.
  3. CD cjevovod se raspoređuje u produkciju nakon odobrenja.

Moderni web timovi oslanjaju se na CI/CD za učinkovito usklađivanje DevOpsa.

27) Što su WebSockets i kako se razlikuju od HTTP-a?

WebSockets omogućiti potpuno dupleksnu, trajnu vezu između klijenta i poslužitelja — omogućujući dvosmjernu komunikaciju u stvarnom vremenu.

HTTP temelji se na zahtjevima/odgovorima i nema stanje - svaka interakcija je nova.

svojstvo HTTP WebSocket
Vrsta veze Jednosmjerno, kratkotrajno Dvosmjerno, uporno
komunikacija Klijent → Poslužitelj Oba smjera
Dometnut Prepuno zaglavlja Lagano nakon rukovanja
Koristite slučaj REST API-ji, statički sadržaj Chat, ažuriranja uživo, igre za više igrača

Primjer (na strani klijenta):

const socket = new WebSocket('wss://server.com');
socket.onmessage = (msg) => console.log(msg.data);

Primjeri slučajeva upotrebe:

  • Nadzorne ploče u stvarnom vremenu.
  • Suradničko uređivanje.
  • Tickeri cijena dionica.

WebSockets smanjuju latenciju i poboljšavaju interaktivnost - omiljeno napredno pitanje.

28) Kako dizajnirati skalabilnu arhitekturu web aplikacije?

Skalabilnost osigurava da web aplikacija može podnijeti povećani promet, podatke i složenost bez degradacije.

Scalable ArchiPrincipi teksture:

  1. Odvajanje koncerna: Podijelite slojeve frontenda, backenda i baze podataka.
  2. Balansiranje opterećenja: Distribuirajte zahtjeve između poslužitelja pomoću uravnoteživača opterećenja.
  3. Slojevi predmemorije: CDN za statičke resurse; Redis/Memcached za dinamičko keširanje.
  4. Optimizacija baze podataka: Koristite indeksiranje, particioniranje i replikaciju.
  5. Microservices Architekstura: Razbijte monolite na neovisne usluge.
  6. Horizontalno skaliranje: Dodajte više instanci umjesto povećanja specifikacija poslužitelja.
  7. Asinkrona obrada: Koristite redove čekanja (RabbitMQ, Kafka) za pozadinske zadatke.
  8. Praćenje i bilježenje: Alati poput Prometheusa, Grafane, ELK Stacka.

Primjer ArchiTektura Tok:

Client → Load Balancer → Web Servers → API Layer → Database
                      ↳ Cache ↳ Message Queue ↳ CDN

To pokazuje razmišljanje na razini sustava - što se očekuje za razgovore za posao višeg razvojnog inženjera.

29) Koje su neke metode za testiranje web aplikacija radi osiguranja kvalitete?

Testiranje osigurava pouzdanost, održivost i funkcionalnost.

Vrste testiranja:

Tip Description Primjeri alata
Ispitivanje jedinice Testira pojedinačne komponente/funkcije. Šala, Moka
Ispitivanje integracije Testovi kombiniranih modula. Cypress, Dramski pisac
End-to-end (E2E) Simulira korisničke tokove. Selenium, Lutkar
Ispitivanje performansi Provjerava opterećenje i naprezanje. JMeter, Svjetionik
Ispitivanje sigurnosti Pronalazi ranjivosti. OWASP ZAP
Testiranje pristupačnosti Osigurava usklađenost s WCAG-om. Sjekira, Svjetionik

Primjer jediničnog testa (Jest):

test('adds numbers', () => {
  expect(add(2, 3)).toBe(5);
});

Najbolje prakse:

  • Održavajte pokrivenost testiranjem >80%.
  • Automatizirajte regresijske testove.
  • Integrirajte u CI/CD cjevovode.

Programer koji je svjestan testiranja isporučuje pouzdanije i održivije aplikacije.

30) Kako pratite brzo razvijajuće web tehnologije?

Web razvoj se razvija brže od većine područja - alati, okviri i standardi se stalno mijenjaju.

Učinkovite strategije uključuju:

  • Pratite pouzdane izvore: MDN web dokumenti, CSS-trikovi, časopis Smashing.
  • Gledajte kanale zajednice: Trendovi na GitHubu, Reddit r/webdev, Stack Overflow.
  • Vježbajte i izgradite sporedne projekte: Primjena nove tehnologije učvršćuje naučeno.
  • Doprinesite otvorenom kodu: Suradnja u stvarnom svijetu ubrzava razumijevanje.
  • Prisustvujte webinarima/konferencijama: npr. JSConf, Google I / O.
  • Pratite zapise promjena: Budite u toku s ažuriranjima frameworka (React, Vue, Node).

Primjer:

Kada je React uveo Hooks, programeri koji su ostali u toku brzo su se prilagodili, održavajući konkurentnost u karijeri.

Prilagodljivost i kontinuirano učenje pokazuju dugoročnu održivost - osobinu koju menadžeri za zapošljavanje cijene.

31) Što su mikroservisi i kako se razlikuju od monolitnih arhitektura?

Microservices su softverski arhitektonski stil koji strukturira aplikaciju kao skup malih, neovisnih servisa, od kojih svaki radi u svom vlastitom procesu i komunicira putem laganih protokola (npr. HTTP, gRPC).

monolitan Architekstura:

Sve funkcionalnosti - korisničko sučelje, poslovna logika, baza podataka - čvrsto su povezane i implementirane kao jedna cjelina.

Microservices Architekstura:

Svaka usluga obrađuje određenu funkciju (korisnik, narudžba, plaćanje) i može se neovisno razvijati, implementirati i skalirati.

Faktor Monolit Microservices
razvoj Pojedinačna jedinica Neovisne usluge
skalabilnost Skaliranje cijele aplikacije Skaliranje pojedinačnih usluga
Tehnološki stog Jedinstveni Moguće je poliglotstvo
Pronalazak pogreške Nizak visok
održavanje Kompleks s rastom Lakše u izolaciji

Primjer: E-trgovina: auth-service, inventory-service, cart-service, payment-service.

Prednosti: Fleksibilnost, izolacija grešaka i neovisno raspoređivanje.

Nedostaci: Složeno umrežavanje, veći DevOps opterećenje, distribuirano otklanjanje pogrešaka.

32) Kojih je 10 najvećih ranjivosti OWASP-a i kako ih ublažavate?

OWASP (Open Web Application Security Project) navodi Top 10 najkritičniji sigurnosni rizici web aplikacija.

Ranjivost Strategija ublažavanja
1. Injektiranje (SQL, naredba) Koristite parametrizirane upite, ORM okvire.
2. Neispravna autentifikacija Implementirajte politiku jakih lozinki i višefaktorsku autentifikaciju.
3. Izloženost osjetljivih podataka Koristite HTTPS, šifrirajte podatke u mirovanju i tijekom prijenosa.
4. Vanjski XML entiteti (XXE) Onemogući obradu vanjskih entiteta.
5. Pokvarena kontrola pristupa Provedite pristup s najmanje privilegija, temeljen na ulogama.
6. Sigurnosna pogrešna konfiguracija Redovite revizije, uklonite nekorištene usluge, koristite sigurnosne zaglavlja.
7. Međusejstno skriptiranje (XSS) Izbjegavanje korisničkog unosa, korištenje CSP-a, dezinfekcija podataka.
8. Nesigurna deserijalizacija Validirati i dezinficirati serijalizirane objekte.
9. Korištenje komponenti s poznatim ranjivostima Redovito ažurirajte ovisnosti, koristite npm audit.
10. Nedovoljno evidentiranje i praćenje Implementirajte centralizirano evidentiranje i upozorenja.

Razumijevanje OWASP-a je temeljno za siguran web razvoj i često je izravno pitanje na intervjuu.

33) Kako HTTPS funkcionira i kakvu ulogu igraju SSL/TLS certifikati?

HTTPS (HyperText Transfer Protocol Secure) osigurava sigurnu komunikaciju između preglednika i poslužitelja pomoću SSL/TLS enkripcija.

Pregled procesa:

  1. Rukovanje: Klijent i poslužitelj se dogovaraju o metodama šifriranja.
  2. Potvrda certifikata: Poslužitelj šalje SSL certifikat potpisan od strane pouzdanog CA.
  3. Razmjena ključeva: Ključevi sesije se sigurno razmjenjuju pomoću asimetrične enkripcije.
  4. Datum Transmission: Podaci se simetrično šifriraju pomoću sesijskih ključeva.

Prednosti:

  • Sprječava prisluškivanjeping i napade tipa "čovjek u sredini".
  • Potvrđuje autentičnost poslužitelja.
  • Poboljšava SEO rang i povjerenje korisnika.

Primjer:

Ikona lokota u preglednicima potvrđuje valjani TLS certifikat.

Bez HTTPS-a, vjerodajnice, API tokeni ili osobni podaci mogli bi biti presretnuti.

34) Što je Docker i kako se koristi u web razvoju?

Lučki radnik je platforma za kontejnerizaciju koja pakira aplikaciju i njezine ovisnosti u lagane kontejnere, osiguravajući konzistentnost u različitim okruženjima.

Zašto koristiti Docker:

  • Problem "Radi na mom računalu" riješen.
  • Reproducibilnost okoline.
  • Brže implementacija i skalabilnost.

Osnovni tijek rada:

  1. Napravite Dockerfile definiranje okoline i ovisnosti.
  2. Izgradite sliku: docker build -t myapp.
  3. Pokreni kontejner: docker run -p 3000:3000 myapp.

Primjer: Dockerfile:

FROM node:18
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
CMD ["npm", "start"]

Prednosti:

  • Izolirana okruženja.
  • Lakše skaliranje (Kubernetes).
  • Pojednostavljeni CI/CD cjevovodi.

Poznavanje Dockera je izuzetno vrijedno u full-stack i DevOps-orijentiranim ulogama.

35) Kako API-ji sigurno komuniciraju između klijenta i poslužitelja?

API komunikacija mora osigurati autentifikaciju, integritet i povjerljivost.

Uobičajeni mehanizmi sigurnosti API-ja:

  1. HTTPS/TLS enkripcija: Štiti podatke tijekom prijenosa.
  2. API ključevi: Identificira pozivne aplikacije; ograničeno, ali korisno za jednostavne slučajeve.
  3. OAuth 2.0: Delegirana autorizacija (npr. „Prijava s Google").
  4. JWT (JSON web tokeni): Kompaktni tokeni koji se koriste za provjeru korisničkih sesija.
  5. Ograničenje brzine: Sprječava zlouporabu ograničavanjem zahtjeva po korisniku/IP adresi.
  6. Validacija unosa: Sprječava napade injekcijom.
  7. HMAC potpisi: Osigurava autentičnost poruke.

Primjer (JWT tijek):

  1. Prijava klijenta → Problemi sa serverom JWT potpisan tajnim kodom.
  2. Klijent šalje JWT Authorization: Bearer <token> Zaglavlje.
  3. Poslužitelj provjerava potpis tokena na svakom zahtjevu.

Sigurni API-ji su temeljni za skalabilne i zaštićene web ekosustave.

36) Objasnite razliku između horizontalnog i vertikalnog skaliranja.

Skaliranje povećava kapacitet sustava za podnošenje većeg opterećenja.

Vrsta skaliranja Definicija Primjer Prednosti Nedostaci
Okomito skaliranje Dodajte više snage (CPU, RAM) jednom poslužitelju. Nadogradnja tipa EC2 instance. Jednostavan za implementaciju. Ograničeno hardverom; potreban je zastoj.
Horizontalno skaliranje Dodajte više poslužitelja za rješavanje opterećenja. Dodavanje više EC2 instanci iza uravnoteživača opterećenja. Visoka tolerancija grešaka, gotovo beskonačno skaliranje. Složena postavka; zahtijeva distribuirani dizajn.

Najbolja vježba:

Dizajn za horizontalna skalabilnost — usluge bez stanja, centralizirana pohrana i uravnoteženje opterećenja omogućuju elastičnost.

U intervjuima, objašnjavanje kada koristiti koji element pokazuje razumijevanje kompromisa u dizajnu sustava.

37) Što je CDN (mreža za isporuku sadržaja) i kako poboljšava performanse?

A CDN je distribuirana mreža poslužitelja koji keširaju statički sadržaj bliže korisnicima na temelju geografije.

Kako radi:

  • Korisnik zahtijeva resurs (npr. sliku, CSS).
  • CDN usmjerava do najbližeg rubnog poslužitelja umjesto do izvora.
  • Isporučuje se predmemorirani sadržaj, što smanjuje latenciju.

Prednosti:

  • Brže vrijeme učitavanja.
  • Smanjeno opterećenje servera.
  • Poboljšana dostupnost i tolerancija grešaka.
  • Ublažavanje DDoS napada.

Popularne CDN mreže: Cloudflare, Akamai, AWS CloudFront, Fastly.

Primjer upotrebe:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>

U intervjuima, demonstracija svijesti o korištenju CDN-a i strategiji predmemoriranja ukazuje na vještine full-stack optimizacije.

38) Što su dizajnerski obrasci i koji se najčešće koriste u web razvoju?

Dizajn uzorci su višekratno upotrebljiva rješenja za uobičajene probleme dizajna softvera.

Uobičajeni obrasci web razvoja:

Uzorak Description Primjer
MVC (Model-View-Controller) Odvaja podatke, korisničko sučelje i logiku. Koristi se u frameworkima poput Angulara i Djanga.
Posmatrač Obavještava pretplatnike kada se podaci promijene. Slušači događaja u JS-u.
jedna stvar Jedna instanca u cijeloj aplikaciji. Redux trgovina.
Tvornica Stvara objekte bez navođenja konkretnih klasa. Kreiranje komponenti u Reactu.
Dekorater Dinamički dodaje nove funkcionalnosti. Middleware u Express.js-u.

Zašto važno:

Poboljšavaju čitljivost koda, ponovnu upotrebu i održavanje - ključno za skalabilne sustave.

Anketar vas može zamoliti da opišete kada koristiti MVC ili obrasce promatrača u stvarnim projektima.

39) Kako se nosite s optimizacijom performansi baze podataka?

Učinkovite baze podataka su ključne za skalabilne aplikacije.

Tehnike optimizacije:

  1. Indeksiranje: Ubrzava dohvaćanje podataka.
  2. Optimizacija upita: Izbjeći SELECT *; dohvati samo potrebne stupce.
  3. Normalizacija: Smanjuje redundanciju.
  4. Predmemoriranje: Pohranite česte upite u Redis.
  5. priključak Pooling: Ponovno koristite DB veze kako biste smanjili opterećenje.
  6. Sharding/Particioniranje: Podijelite velike skupove podataka.
  7. Koristite odgovarajuće tipove podataka: Minimizirajte korištenje memorije.
  8. Balansiranje opterećenja: Distribuiraj upite po replikama za čitanje.

Primjer (Indeksiranje u SQL-u):

CREATE INDEX idx_user_email ON users(email);

Razvojni programeri koji razumiju optimizaciju performansi upita posebno su cijenjeni za uloge koje se odnose na pozadinski sustav.

40) Objasnite kako biste implementirali full-stack web aplikaciju u oblak.

Implementacija full-stack aplikacije uključuje oboje sučelje i pozadina orkestracija.

Koraci implementacije:

  1. Kontejneriziraj aplikaciju: Koristite Docker za ponovljivost.
  2. Odaberite pružatelja usluga u oblaku: AWS, Azure, GCP ili Vercel.
  3. Postavljanje CI/CD cjevovoda: Automatiziraj izgradnju, testiranje, implementaciju.
  4. Implementirajte frontend:
    • Statički hosting: AWS S3 + CloudFront, Netlify ili Vercel.
    • Naredba: npm run build → rasporediti dist/ or build/ mapa.
  5. Implementirajte pozadinski sustav:
    • Host API na EC2, Elastic Beanstalk, ili Azure Usluga aplikacija.
    • Konfigurirajte varijable okruženja i bazu podataka URLs.
  6. Postavljanje baze podataka: Koristite RDS, MongoDB Atlas ili Firebase.
  7. Umrežavanje: Konfigurirajte DNS, uravnoteživač opterećenja i HTTPS (TLS).
  8. Praćenje: Omogućite zapisivanje (CloudWatch, Datadog), upozorenja i automatsko skaliranje.

Primjer Cloud Stacka:

  • Frontend → React (Vercel)
  • Backend → Node.js (AWS ECS)
  • Baza podataka → PostgreSQL (RDS)
  • CI/CD → Akcije GitHuba

To pokazuje sposobnost programera da premosti razvoj, implementaciju i operacije - što je ključno u intervjuima za više pozicije.

🔍 Najčešća pitanja za intervju za web developere sa stvarnim scenarijima i strateškim odgovorima

1) Koje su ključne razlike između responzivnog i adaptivnog dizajna?

Očekuje se od kandidata

Anketar želi vidjeti razumijete li osnovne principe dizajna front-enda i kako svaki pristup utječe na upotrebljivost i performanse.

Primjer odgovora „Responzivni dizajn koristi fleksibilne rasporede koji se automatski prilagođavaju na temelju veličine zaslona, ​​dok adaptivni dizajn koristi unaprijed postavljene rasporede za određene točke prekida. Responzivni dizajn je općenito fluidniji, dok adaptivni dizajn pruža veću kontrolu nad iskustvima na određenim uređajima. Obično preferiram responzivni dizajn zbog njegove skalabilnosti na širem rasponu uređaja.“

2) Možete li objasniti kako optimizirate web stranicu za performanse?

Očekuje se od kandidata

Žele uvid u vaše razumijevanje optimizacije brzine, alata i praksi u industriji.

Primjer odgovora „Fokusiram se na minimiziranje HTTP zahtjeva, komprimiranje slika, implementaciju lijenog učitavanja i korištenje dijeljenja koda kad god je to moguće. Također koristim strategije predmemoriranja i optimiziram CSS i JavaPaketi skripti. U prethodnoj sam ulozi poboljšao brzinu učitavanja stranice implementacijom kombinacije ovih tehnika zajedno s alatima za praćenje performansi poput Lighthousea.

3) Opišite zahtjevan projekt web razvoja koji ste završili i kako ste se nosili s preprekama.

Očekuje se od kandidata

Anketari traže otpornost, analitičko razmišljanje i uspješne rezultate.

Primjer odgovora „Na prethodnoj poziciji radio sam na redizajnu naslijeđene aplikacije sa složenim ovisnostima. Najveći izazov bio je osigurati unatrag kompatibilnost. To sam riješio dokumentiranjem svih ovisnosti, izradom faznog plana migracije i provođenjem temeljitog regresijskog testiranja kako bih osigurao stabilnost sustava.“

4) Kako osiguravate kompatibilnost među preglednicima u svojim projektima?

Očekuje se od kandidata

Žele znati vaš proces i alate za testiranje ponašanja korisničkog sučelja u različitim okruženjima.

Primjer odgovora „Koristim alate poput BrowserStacka i provodim ručno testiranje u glavnim preglednicima. Oslanjam se na progresivno poboljšanje i izbjegavam kod specifičan za preglednik osim ako nije potrebno. Na prethodnom poslu također sam izradio kontrolnu listu kompatibilnosti kako bih osigurao dosljedno renderiranje u svim podržanim preglednicima.“

5) Kako pristupate otklanjanju pogrešaka složenih problema na front-endu?

Očekuje se od kandidata

Žele dokaze o strukturiranom razmišljanju i poznavanju alata za razvoj preglednika.

Primjer odgovora „Počinjem dosljednim reproduciranjem problema. Zatim koristim alate za razvoj preglednika za pregled elemenata, analizu mrežnih poziva i trace skripte. Sužavam potencijalne uzroke izoliranjem komponenti dok ne pronađem korijen problema. U svojoj posljednjoj ulozi često sam surađivao s odjelom za kontrolu kvalitete kako bih osigurao da popravak rješava sve rubne slučajeve.

6) Recite mi o situaciji kada ste morali blisko surađivati ​​s dizajnerima ili backend developerima. Kako ste osigurali nesmetanu komunikaciju?

Očekuje se od kandidata

Procjenjuju timski rad, komunikaciju i sposobnost premošćivanja tehničkih nedostataka.

Primjer odgovora „Redovito sam održavao sastanke s dizajnerima i backend developerima kako bih uskladio očekivanja i razjasnio tehnička ograničenja. Također sam koristio zajedničku dokumentaciju i prototipove kako bih izbjegao nesporazume. Ovaj pristup osigurao je transparentan tijek rada i smanjio preradu.“

7) Kako pratite nove tehnologije i najbolje prakse web razvoja?

Očekuje se od kandidata

Traže strast, inicijativu i kontinuirano usavršavanje vještina.

Primjer odgovora „Ostajem u tijeku čitajući MDN dokumentaciju, prateći blogove iz industrije i posjećujući virtualne konferencije. Također istražujem nove okvire kroz male sporedne projekte kako bih ostao upoznat s novim obrascima.“

8) Kako biste postupili u situaciji u kojoj klijent zahtijeva značajke koje nisu izvedive unutar zadanog vremenskog okvira?

Očekuje se od kandidata

Žele procijeniti vašu sposobnost profesionalnog upravljanja očekivanjima.

Primjer odgovora „Jasno bih objasnio tehnička ograničenja i predložio alternativna rješenja ili mogućnosti fazne isporuke. Otkrio sam da klijenti cijene transparentnost, posebno kada je uparena s održivim alternativama koje i dalje ispunjavaju njihove ciljeve.“

9) Koje sigurnosne prakse primjenjujete prilikom izrade web aplikacija?

Očekuje se od kandidata

Žele biti svjesni osnovnih načela web sigurnosti.

Primjer odgovora „Uvijek provjeravam unos i na klijentskoj i na poslužiteljskoj strani, koristim parametrizirane upite, omogućavam HTTPS i implementiram odgovarajuće tokove autentifikacije i autorizacije. Također izbjegavam izlaganje osjetljivih podataka na klijentu i koristim sigurnosne zaglavlja za ublažavanje uobičajenih napada poput XSS-a i CSRF-a.“

10) Opišite kako biste riješili značajnu grešku prijavljenu neposredno prije produkcijskog izdanja.

Očekuje se od kandidata

Žele uvid u vaše vještine upravljanja krizama i sposobnost brzog određivanja prioriteta.

Primjer odgovora „Odmah bih procijenio utjecaj i utvrdio je li riječ o blokadi izdanja. Ako je kritično, pauzirao bih izdanje i surađivao s timom na dijagnosticiranju i rješavanju problema. Ako je potrebno, dokumentirao bih problem, obavijestio dionike o ažuriranjima i osigurao da se rješenje temeljito testira prije nego što se nastavi.“

Sažmite ovu objavu uz: