[Rookies 개발 2기] 프론트엔드 구조

1. 프론트엔드 기본 구성 요소

프론트엔드는 주로 다음 세 가지로 구성된다.

 

1. HTML (HyperText Markup Language)

• 구조와 콘텐츠를 담당하는 언어다.
• 웹페이지의 뼈대 역할을 하며, 텍스트, 이미지, 멀티미디어와 같은 콘텐츠를 포함한다.
• 주요 태그는 구조(div), 입력(input, select), 전송(form), 정보 표시(p, img), 이벤트(button), 외부 자원 참조(script) 등을 포함한다.
• HTML5는 웹의 표준으로 자리 잡으며, 반응형 웹, 멀티미디어, 2D/3D 렌더링(canvas) 등을 지원한다.

2. CSS (Cascading Style Sheets)

• 디자인과 레이아웃을 정의하며, 반응형 웹 구현과 애니메이션을 포함한다.
• CSS는 HTML의 요소를 선택해 스타일을 지정할 수 있는 CSS Selector를 사용한다.
• 선택자는 ID(#), 클래스(.), 태그명(요소명)을 조합하여 특정 요소를 스타일링하는 규칙을 제공한다.

3. JavaScript

• 동적 상호작용과 이벤트 처리를 담당한다.
• 화면을 비동기적으로 업데이트하거나 데이터를 서버와 교환하는 역할을 한다.
• 주요 활용으로는 사용자 인터페이스 제어, 이벤트 처리, AJAX를 통한 서버와의 비동기 데이터 교환등이 있다.

 

---

 

2. 화면 렌더링 방식

렌더링은 브라우저를 통해 화면을 그리는 과정이다. 이를 구현하는 방식은 크게 두가지로 나뉜다.

 

2.1 SRR (Server Side Rendering)

서버에서 페이지를 렌더링해 완성된 HTML 파일을 브라우저로 전송하는 방식이다.

초기 로딩 속도가 빠르며 검색엔진 최적화에 유리하다. 즉 전통적인 웹 개발 방식에서 주로 사용된다.

Spring Boot나 Node.js, .NET등과 함께 사용된다.

 

2.2 CSR (Clinet Side Rendering)

HTML 파일은 빈 상태로 브라우저에 전달되고, JavaScript가 동작해 콘텐츠를 렌더링 하는 방식이다.

초기 로딩 속도가 느릴수 있으나, UX(사용자 경험)이 더 부드러우며, SPA 구현 시 주로 사용된다.

React.js, Vue.js와 같은 프론트엔드 프레임워크에 사용된다.

 

---

 

3. HTML의 주요 태그와 기능

HTML은 웹페이지의뼈대를 구성하며, 다양한 태그로 이루어져 있다.

 

3.1 구조 태그

`div`	콘텐츠를 그룹화하거나 레이아웃을 나눌 때 사용
`table`	표 형식의 데이터를 표현

 

3.2 입력과 전송

입력	`input``select``textarea``radio`등 사용자로부터 데이터를 입력받는 역활
전송	`form` 데이터를 서버로 전송하기 위한 태그이다. `GET` `POST` 메소드를 통해 데이터를 전송한다.

GET은 소량의 데이터를 URL에 포함하고, POST는 대량 데이터를 본문(Body)에 포함한다.

 

3.3 정보 표시 태그

텍스트	`p` `span`
멀티미디어	`img``video` `audio`

 

3.4 이동과 이벤트

이동	`a`태그를 사용해 다른 페이지로 이동
이벤트	`button`태그를 통해 사용자 상호작용을 처리

 

 

---

 

4. CSS 선택자

CSS Selector는 HTML 요소를 특정하고 스타일을 적용하는 규칙이다.

4.1 주요 선택자

ID 선택자:

HTML: <div id="header">

CSS: #header { ... }

 

클래스 선택자:

HTML: <div class="menu">

CSS: .menu { ... }

 

요소 선택자:

CSS: h1, p { ... }

 

조합 선택자:

부모, 자식, 형제 관계를 정의하여 특정 요소를 선택.

 

속성 선택자:

특정 속성을 가진 요소를 선택.

[type="text"] { ... }.

 

---

 

5. HTML과 JavaScript의 연동방식

HTML과 JS의 연동 방식은 다음 세가지로 나뉜다.

1. External: JavaScript 코드를 별도의 파일로 분리하고 `<script src="파일명.js">`로 호출한다.
2. Internal: HTML 파일의 <script> 태그 안에 JavaScript 코드를 포함한다.
3. Inline: HTML 요소 속성에 JavaScript 코드를 직접 작성한다.

<button onclick="alert('안녕하세요!')">클릭하세요</button>

 

---

 

6. 통신 방법

웹에서 데이터 전송은 주로 HTTP/HTTPS 프로토콜을 사용하며, HTML과 JS는 각각 다른 방식을 활용한다.

 

6.1 HTML을 통한 데이터 전송

`form`태그 :

• 데이터 전송 메소드(GET, POST 등)를 사용.
• GET: URL에 데이터를 포함해 전송(소량 데이터).
• POST: 본문(Body)에 데이터를 포함해 전송(대량 데이터).
• 단점: 페이지가 새로고침되어 사용자 경험이 제한적이다.

`a` 태그 :

• 하이퍼링크를 통해 GET 방식으로 데이터 전송.

6.2 JS를 통한 데이터 전송 (AJAX)

AJAX (Asynchronous JavaScript and XML):

서버와 비동기 통신을 수행하며, 페이지를 새로고침하지 않고 데이터를 송수신한다.

주로 xml 전송을 목표로 두어 JSON 형식의 데이터를 전송하며, RESTful API와 함께 사용된다.

 

6.3 HTTP 응답 코드

• 200번대: 정상 처리(200 OK).
• 400번대: 클라이언트 오류(404 Not Found, 405 Method Not Allowed).
• 500번대: 서버 오류(500 Internal Server Error).

 

---

 

7. 정리하며

프론트엔드 개발은 웹페이지의 시각적 구성, 사용자 경험, 서버와의 통신을 모두 포함하는 중요한 작업이다. 이를 이해하기 위해 HTML, CSS, JavaScript의 기본 개념과 기능을 명확히 파악하고, SSR과 CSR 렌더링 방식을 프로젝트 요구사항에 따라 적절히 선택하는 것이 중요하다고 생각되었다.

이 글을 읽으며 프론트엔드의 기본을 이해하고 발전시키는 데 도움이 되기를 바란다.