프론트엔드 Frontend

쉽게 말하면

웹사이트를 열었을 때 보이는 글자와 이미지, 클릭하면 반응하는 버튼 — 이 모든 게 프론트엔드가 하는 일이에요. 브라우저나 휴대폰 위에서 돌아가며 '보여주기'와 '상호작용'을 맡습니다.

프론트엔드의 일은 세 가지로 나눌 수 있어요. 구조(화면에 무엇이 있는지), 스타일(어떻게 생겼는지), 동작(클릭하면 무슨 일이 일어나는지)이죠. 보통 스스로 데이터를 저장하지는 않고, 데이터가 필요하면 '백엔드'에 가서 가져옵니다.

이 세 가지를 매번 처음부터 만들지 않으려고, 많은 팀이 React, Vue, Next.js 같은 프론트엔드 프레임워크를 씁니다.

아키텍처

동작 흐름

"구매"를 누르면 무슨 일이 일어날까

한 번의 클릭은 프론트엔드에게 하나의 동작이 아니라 줄줄이 이어지는 과정이에요.

1. 클릭을 받아냄 — 버튼이 눌린 걸 알아채고, 무엇을 골랐는지 읽어요.
2. 로딩 상태를 보여줌 — 버튼을 비활성화하고 스피너를 띄워서 중복 클릭을 막아요.
3. 요청을 보냄 — 주문을 묶어서 백엔드에 처리해 달라고 요청해요.
4. 화면을 갱신함 — 성공하면 확인을 보여주고, 실패(품절, 카드 거절)하면 명확한 메시지를 띄워 다시 시도할 수 있게 해요.

구매가 성립하는지는 결코 프론트엔드가 정하지 않아요 — 요청을 전달하고, 백엔드가 내린 결과를 보여줄 뿐이에요.

핵심 정리

• 프론트엔드 = 사용자가 직접 마주하는 층.
• 보여주기와 상호작용을 맡고, 데이터는 백엔드에서 가져옴.
• 경험도 중요하지만, 올바름은 백엔드와 함께 지킨다.