Frontend 개발 기술

HTML

• HTML(Hyper Text Markup Language)은 웹 페이지를 작성하는데 사용되는 마크업 언어
• 웹페이지의 구조와 콘텐츠를 표시
• 이를 통해 브라우저는 HTML 코드를 해석하여 웹 페이지 렌더링
• HTML은 웹 프론트엔드에서 기본적으로 사용되는 기술이며, CSS와 JavaScript와 함께 사용하여 보다 다양하고 동적인 웹페이지 구현 가

CSS

• CSS(Cascading Style Sheets)는 웹 페이지의 레이아웃, 스타일 및 디자인을 정의하는 스타일 시트 언어
• 웹 페이지의 디자인과 레이아웃을 꾸미는 데 중요한 역할
• 최근에는 CSS3에서 다양한 기능과 효과를 추가하여, 보다 다양하고 풍부한 웹 디자인 구현 가능

📌 스타일 정의

CSS는 HTML 요소의 스타일 정의

스타일은 텍스트, 색상, 레이아웃을 포함함.

 

📌 적용 우선순위

CSS는 스타일을 적용하는 우선순위를 가짐.

스타일은 선언된 위치, 선택자의 특정성 등을 고려하여 적용

 

📌 상속

CSS는 상위 요소의 스타일을 하위 요소로 상속.

따라서, 하위 요소에 직접 스타일을 적용하지 않아도 상위 요소의 스타일을 상속받을 수 있음.

JavaScript

• JavaScript는 웹 브라우저에서 동적으로 작동하는 프로그래밍 언어
• HTML, CSS와 함께 웹 개발에서 가장 기본적인 기술로 사용됨.

📌 객체 기반

JavaScript는 객체 기반 프로그래밍 언어.

모든 것을 객체 취급하며, 객체를 생성하거나 상속을 통해 새로운 객체를 만들 수 있음.

 

📌 동적인 타입 지정

JavaScript는 동적으로 타입 지정 가능

변수를 선언할 때 타입을 지정하지 않고, 변수를 사용할 때 그 타입이 결정됨.

 

📌 이벤트 기반

이벤트가 발생하면 그에 대한 처리 수행

 

📌 클라이언트 사이드 스크립트 언어

JavaScript는 클라이언트 사이드 스크립트 언어로, 웹 브라우저에서 실행됨.

JavaScript는 프론트엔드에서 필수적인 기술로, Node.js를 사용하여 서버 사이드 개발에도 사용되고 있음.

React

• React는 Facebook에서 개발한 UI 라이브러리
• React는 선언적이며, 컴포넌트 기반의 접근 방식을 사용하여 UI를 더욱 쉽고 유지보수하기 쉽게 만듦

📌 가상 DOM(Virtual DOM) 기반

React는 가상 DOM을 사용하여, 변경사항을 최소한으로 줄이고, 빠른 렌더링 속도 제공

 

📌 컴포넌트 기반

React는 컴포넌트 기반으로 작동하여, 재사용 가능한 UI 요소를 만들 수 있음

 

📌 상태(State) 관리

React는 상태(State)를 통해, 컴포넌트 간 데이터를 전달하고 관리할 수 있음

 

📌 JSX 문법

React는 JSX 문법을 사용하여, JavaScript와 HTML을 결합하여 UI를 정의할 수 있음

React는 대규모 웹 애플리케이션에서 사용되며, 이를 통해 UI를 보다 쉽게 관리하고, 빠르게 렌더링 할 수 있음

React는 다양한 라이브러리와 함께 사용할 수 있으며, React Native를 사용하여 모바일 애플리케이션도 개발 가능

SPA(Single Page Application)

• 모든 콘텐츠를 단일 페이지 내에서 동적으로 로딩하여 화면 갱신을 수행하는 웹 어플리케이션

📌 초기 로딩 속도 빠름

모든 페이지를 로딩하지 않고, 최초 한 번만 페이지 전체를 로딩하기 때문에 초기 로딩 속도가 빠름

 

📌 부분적인 화면 갱신 가능

서버로부터 필요한 데이터만 요청하고, 이를 받아와서 부분적인 화면 갱신을 수행하기 때문에 전체 페이지를 다시 로딩하지 않아도 되어서 빠른 속도로 화면을 갱신할 수 있음

 

📌 사용자 경험이 좋음

전체 페이지를 다시 로딩하지 않고도 화면을 갱신하므로 사용자의 작업 흐름이 안 끊어짐

SPA는 React, Angular, Vue.js 등의 프레임워크와 함께 사용되며, 이를 통해 빠르고 부드러운 웹 애플리케이션을 만들 수 있음.

하지만 SEO(Search Engine Optimization)에 취약하다는 단점이 있기 때문에, SEO를 고려해야 하는 경우에는 서버 사이드 렌더링 방법을 고려해야 함. 

DOM(Document Object Model)

• HTML, XML, XHTML 문서의 구조화된 표현을 제공하는 인터페이스
• 웹 페이지를 JavaScript 등에서 동적으로 조작할 수 있도록 함
• DOM은 문서 내의 요소를 객체로 나타내며, 이를 통해 JavaScript 등에서 요소에 접근하고, 수정/추가/삭제 등의 동적인 조작 수행 가능

SSR(Server Side Rendering)

• 서버로부터 완전하게 만들어진 HTML 파일을 받아와 페이지 전체를 렌더링 하는 방식
• MPA(Multi Page Application)은 SSR 방식 사용

1. 클라이언트가 초기 화면을 로드하기 위해 서버에 요청 보냄.
2. 서버는 화면에 표시하는데 필요한 데이터를 얻어와 모두 삽입하고,
   CSS까지 모두 적용해서 렌더링 준비를 마친 HTML과 JS코드를 브라우저에 응답으로 전달
3. 브라우저에서는 전달 받은 페이지 로드
4. 그 후, 브라우저가 JS 코드를 다운로드 하고 HTML에 실행

이 때, 요소 하나를 변경하려면?

이전과 마찬가지로 서버 HTML로 화면에 표시하는 데 필요한 모든 데이터를 서버로부터 다시 다운받아 와야 함.

이런 이유로 요청을 보내고 응답을 받으면 새로고침 되어 화면이 깜-빡인 후에 표시됨.

CSR(Client Side Rendering)

• 사용자의 요청에 따라 필요한 부분만 응답 받아 렌더링 하는 방식

1. 클라이언트에서 초기화면을 로드하기 위해 서버에 요청 보냄
2. 서버는 화면에 표시하는 데 필요한 완전한 리소스를 응답
   💡이 때, CSR과 SSR의 차이점은 CSR은 모든 JS 파일을 다운받기 때문에 초기 로딩 시간이 SSR보다 오래 걸림
3. 이 때문에 CSR은 SSR과 다르게 화면이 깜빡이지 않고 바로 수정된 데이터 표시됨.

CSR은 변경된 부분과 관련된 데이터만 가져오기 때문에 SSR보다 빠르고, 서버 부하가 적음.

Virtual DOM

• React와 같은 UI 라이브러리나 프레임워크에서 사용되는 개념
• 웹 애플리케이션에서 DOM 조작을 최적화하기 위해 개발

---

DOM(Document Object Model)은 HTML, XML 또는 XHTML 문서의 구조화된 표현을 제공하며, 이를 통해 JavaScript 등에서 문서 내의 요소를 동적으로 조작할 수 있습니다.

 

그러나 DOM 조작은 성능 이슈를 유발할 수 있습니다. 예를 들어, DOM 요소를 추가, 수정, 삭제할 때마다 렌더링 엔진은 이에 대한 변경사항을 적용하고, 레이아웃을 업데이트하는 작업을 반복적으로 수행해야 합니다. 이러한 작업은 매우 느리고 비효율적일 수 있습니다.

---

Virtual DOM은 이러한 성능 문제를 개선하기 위해 만들어졌습니다.

Virtual DOM은 실제 DOM과 동일한 구조를 가지는 가상의 DOM을 생성하여, 변경사항을 적용하기 전에 가상의 DOM에서 먼저 변경사항을 반영하고, 실제 DOM에 반영할 때 필요한 최소한의 변경사항만 적용합니다.

이를 통해 DOM 조작 작업이 최소화되어 성능을 향상시킬 수 있습니다.

React에서는 Virtual DOM을 사용하여, 데이터가 변경되면 가상의 DOM을 다시 렌더링하고, 변경된 내용만 실제 DOM에 반영합니다. 이를 통해 React는 매우 빠른 렌더링 속도와 높은 성능을 제공할 수 있습니다.