1. 프론트엔드는 사용자에게 보이는 모든 것
우리가 웹사이트에 접속하면 가장 먼저 보는 건:
- 버튼
- 글씨
- 입력창
- 메뉴바
- 이미지
이런 것들이 모두 프론트엔드에서 만들어지는 거예요.
즉 눈에 보이는 모든 것은 프론트 개발자가 만들어요.
2. HTML, CSS, JS의 역할을 구분하면?
| 언어 | 역할 | 비유 |
|---|---|---|
| HTML | 구조 (뼈대) | 건물의 벽과 창문 |
| CSS | 디자인 (색/크기) | 페인트, 인테리어 |
| JavaScript | 동작 (기능) | 자동문, 전기설비, 버튼 동작 |
-> 이 세 가지가 합쳐져야 화면이 완성돼요!
3. 예를 들어서 살펴 보기
<button onclick="alert('안녕!')">누르지 마세요</button>
- HTML: 버튼을 만들고
- JavaScript: 눌렀을 때 팝업(alert)을 띄움
-> 이런 버튼이 프론트 쪽에서 만들어지는 인터랙션이에요
4. 프론트와 백엔드는 어떻게 연결될까요?
로그인 폼을 예로 들어볼게요
- 프론트: 사용자가 입력한 정보를 모아서
- API 요청:
POST /login으로 서버에 보냄 - 백엔드: 로그인 처리 후 응답
- 프론트: 결과를 보고 화면에 "로그인 성공" 또는 "실패" 출력
-> 이 흐름은 항상 프론트가 요청 -> 백엔드가 처리 -> 프론트가 결과 표시예요
비유로 이해하면?
웹사이트는 식당이라고 할 때
- 프론트: 웨이터, 메뉴판, 인테리어
- 백엔드: 주방, 요리, 계산기
- API: 주문서 전달하는 통로
- 데이터베이스: 창고
마무리 정리
- 프론트는 사용자에게 보이는 화면을 만드는 기술
- HTML은 뼈대, CSS는 꾸밈, JS는 동작을 담당해요
- 프론트와 백엔드는 API를 통해 연결되며 항상 함께 작동해요
다음 글 예고
데이터베이스(DB)란 무엇인가요?
정보는 어디에 저장되며, 어떻게 불러올 수 있을까요?
중졸 비전공자 개발자 배움의 과정 열정 과 집중 하나 빼면 사치인 사람