우선 HTML, CSS, JavaScript를 순서대로 공부하시는 것을 추천합니다.

코드잇에 있는 웹개발 기본기 토픽을 들어보시고,

HTML부터 차근차근 공부하시면 좋을 것 같아요.

---

◆ 프론트엔드(Frontend)

웹사이트의 앞단을 담당, HTML, CSS 및 JavaScript를 사용하여 사용자 인터페이스(UI)를 만들고 동적으로 상호 작용할 수 있도록 합니다.

즉, 눈에 보이는 웹 사이트의 겉부분을 만들고 관리합니다.

사용자가 특정 온라인 쇼핑 웹사이트에 접속하여 상품을 검색하고 구매하는 상황을 가정해보겠습니다.

이때 프론트엔드는 다음과 같은 역할을 수행할 수 있습니다:

HTML: 웹페이지의 기본 구조를 정의합니다. 예를 들어, 검색 창, 상품 목록, 장바구니 등의 요소를 정의합니다.

CSS: HTML 요소의 스타일을 지정하여 사용자가 보기 좋은 디자인을 제공합니다. 예를 들어, 글꼴, 색상, 레이아웃 등을 결정합니다.

JavaScript: 사용자와의 상호 작용을 가능하게 합니다. 예를 들어, 상품을 클릭하면 상세 정보를 보여주거나 장바구니에 추가할 수 있도록 합니다.

즉, 프론트엔드는 사용자가 웹 사이트를 사용할 때 직접적으로 상호작용하는 부분을 담당합니다.

---

◆ 백엔드(Backend)

웹사이트의 뒷단을 담당, 사용자 요청 처리하고 데이터베이스와 상호작용하여 정보를 가져오거나 저장합니다.

서버, 데이터베이스, API 등을 관리합니다.

같은 온라인 쇼핑 웹사이트의 백엔드는 다음과 같은 역할을 할 수 있습니다.

서버: 웹사이트의 핵심적인 로직을 처리합니다. 예를 들어, 사용자가 상품을 검색하거나 주문을 완료할 때 이에 대한 처리를 담당합니다.

데이터베이스: 상품 정보, 사용자 정보, 주문 정보 등을 저장하고 관리합니다. 사용자가 상품을 구매할 때는 해당 상품의 재고를 업데이트하고 주문 내역을 저장합니다.

API: 프론트엔드와 백엔드 간의 통신을 위한 인터페이스를 제공합니다. 예를 들어, 프론트엔드에서 상품 목록을 요청하면 백엔드는 이에 대한 데이터를 제공합니다.

백엔드는 프론트엔드가 보여주는 정보를 처리하고 관리하여 사용자가 원활하게 서비스를 이용할 수 있도록 합니다.