물고 물어지는 개념 정리하기(웹 프론트엔드): 나만의 사전1
궁금한 것, 헷갈리는 건, 들어는 봤는데 뭔지 정확히 모르겠는걸 정리하는 사전.
웹 애플리케이션을 더 효율적으로 개발하고 관리하기 위해 필요한 기본 구조, 규칙, 함수, 라이브러리 등을 제공하는 도구나 라이브러리 모음
구조화된 개발: 웹 프레임워크는 프로젝트의 구조를 미리 정의하여 개발자에게 일관된 방식으로 코드를 구성할 수 있다. 이로써 프로젝트의 유지보수와 확장이 쉬워진다.
재사용 가능한 코드: 웹 프레임워크는 재사용 가능한 컴포넌트나 모듈을 제공하여 개발자가 코드를 반복해서 작성하지 않아도 되도록 한다. 이를 통해 개발 속도를 향상시키고 일관된 품질을 유지할 수 있다.
라우팅 및 핸들링: 웹 프레임워크는 URL 경로와 해당 경로에 대한 처리 로직을 매핑해주는 라우팅 기능을 제공한다. 이를 통해 클라이언트의 요청을 적절한 핸들러로 전달할 수 있다.
데이터베이스 연동: 많은 웹 애플리케이션은 데이터베이스와의 상호작용이 필요하다. 웹 프레임워크는 데이터베이스 연동을 용이하게 만들어주는 기능을 제공한다.
보안: 웹 프레임워크는 보안을 강화하는 다양한 방식과 도구를 제공하여 애플리케이션의 취약점을 최소화하고 사용자 데이터를 보호한다.
템플릿 엔진: 웹 프레임워크는 동적인 콘텐츠를 생성하기 위한 템플릿 엔진을 제공하여 HTML 페이지를 동적으로 생성할 수 있다.
미들웨어: 많은 웹 프레임워크는 미들웨어를 통해 요청과 응답 사이에서 동작하는 함수를 추가할 수 있는 기능을 제공한다. 이를 통해 로깅, 인증, 데이터 변환 등 다양한 작업을 처리할 수 있다.
Express (Node.js), Django (Python), Ruby on Rails (Ruby), Flask (Python), Spring Boot (Java)
현대적인 웹 개발의 요구사항과 문제점을 해결하기 위해 탄생했다.
이전에는 클라이언트 사이드 렌더링(Client-Side Rendering, CSR)만을 사용하는 웹 애플리케이션이 주를 이루었다. 하지만 CSR은 초기 로딩 속도 문제와 검색 엔진 최적화에 어려움을 겪을 수 있다. 이러한 문제들을 해결하기 위해 Next.js가 등장하게 되었다.
서버 사이드 렌더링(SSR)의 필요성: 기존의 클라이언트 사이드 렌더링은 초기 로딩 속도와 검색 엔진 최적화 측면에서 한계가 있었다. 이에 반해 Next.js는 서버 사이드 렌더링을 지원함으로써 웹 페이지의 초기 로딩 속도를 향상시키고 검색 엔진 최적화를 강화시켰다.
정적 사이트 생성(SSG)의 도입: Next.js는 정적 사이트 생성을 통해 사전에 페이지를 생성하고 서비스할 수 있는 기능을 제공한다. 이로써 웹 애플리케이션의 성능과 안정성을 한층 향상시킬 수 있었다.
빠른 개발 및 프로덕션 환경 구축: Next.js는 간단한 프로젝트 설정과 빠른 개발을 지원함과 동시에 프로덕션 환경에서도 뛰어난 성능을 유지할 수 있는 강력한 기능을 제공한다.
코드 스플리팅과 라우팅의 간편성: Next.js는 내장된 코드 스플리팅 기능을 통해 필요한 자원만 로드하여 성능을 최적화할 수 있다. 또한 내장된 라우팅 시스템을 통해 애플리케이션의 라우팅을 간편하게 관리할 수 있다.
개발 생산성 향상: Next.js는 기본적인 설정을 제공하며 통합된 개발 서버를 제공하여 신속한 개발을 지원한다. 이를 통해 개발자는 복잡한 설정에 매달리지 않고도 본연의 개발에 집중할 수 있었다.
이와 같은 배경으로, Next.js는 현대적인 웹 애플리케이션 개발을 위한 필수적인 도구로 자리잡게 되었다.
// pages/index.js
import React from 'react';
const Home = ({ serverRenderedData }) => {
return (
<div>
<h1>서버 사이드 렌더링 예시</h1>
<p>{serverRenderedData}</p>
</div>
);
};
export async function getServerSideProps() {
// 서버 사이드에서 데이터 가져오기
const serverRenderedData = '이 데이터는 서버에서 렌더링됩니다.';
return {
props: {
serverRenderedData,
},
};
}
export default Home;
getServerSideProps 함수는 서버 사이드에서 데이터를 가져오는 역할을 한다. 이 함수는 페이지 컴포넌트가 렌더링되기 전에 실행되며, 반환된 데이터는 props로 컴포넌트에 전달된다. 이를 통해 초기 로딩 시에 필요한 데이터를 서버에서 가져와 렌더링할 수 있다.
SSR (Server-Side Rendering, 서버 사이드 렌더링)
서버 사이드 렌더링은 웹 페이지의 초기 렌더링을 서버에서 처리하는 방식이다. 사용자가 웹 페이지에 접근하면 서버에서 해당 페이지의 HTML을 생성하고 초기 데이터를 채워서 클라이언트로 전달한다. 이렇게 서버에서 렌더링된 HTML이 먼저 보여지고, 이후에 클라이언트 측에서 필요한 추가적인 동작이나 상호작용이 이루어진다. 서버 사이드 렌더링은 초기 로딩 속도 개선과 검색 엔진 최적화 (SEO)를 향상시키는데 도움을 준다.
CSR (Client-Side Rendering, 클라이언트 사이드 렌더링)
클라이언트 사이드 렌더링은 웹 페이지의 렌더링을 클라이언트 측에서 JavaScript를 통해 동적으로 처리하는 방식이다. 사용자가 웹 페이지에 접근하면 초기에 빈 페이지나 로딩 스피너가 표시되며, 클라이언트 측에서 JavaScript 코드를 사용하여 필요한 데이터를 가져와서 페이지를 렌더링한다. 클라이언트 사이드 렌더링은 사용자 경험을 향상시킬 수 있으며, 더욱 동적이고 상호작용적인 웹 애플리케이션을 구현할 수 있다. 그러나 초기 로딩 속도가 느리고 SEO에 불리한 면이 있을 수 있다.
요약
런타임 환경은 프로그램이 실행되는 환경을 의미한다. 특히, 코드가 실행되고 동작하는 데 필요한 라이브러리, 기능, API 등을 제공하며 프로그램이 실행되는 컴퓨터 환경이다.
JavaScript의 경우, 런타임 환경은 해당 프로그래밍 언어를 실행할 수 있는 환경을 의미한다. 브라우저 환경에서는 JavaScript 코드가 웹 페이지에서 실행되며, 브라우저가 JavaScript 엔진을 통해 코드를 해석하고 실행한다. 이것이 일반적으로 우리가 생각하는 "브라우저에서의 JavaScript 실행"이다.
그러나 브라우저 환경 이외에도 JavaScript는 서버 측에서도 실행될 수 있다. Node.js는 이를 가능하게 하는 플랫폼 중 하나이다. Node.js는 JavaScript 코드를 서버에서 실행할 수 있도록 환경을 제공하며, 파일 시스템 조작, 네트워킹, 데이터베이스 액세스 등 다양한 기능을 지원한다. 이렇게 서버 측에서 JavaScript를 실행하는 것을 "Node.js 런타임 환경"이라고 할 수 있다.
Node.js 환경에서 웹 애플리케이션 및 API를 구축하기 위한 빠르고 유연한 웹 애플리케이션 프레임워크.
"Node.js 환경에서 웹 애플리케이션 프레임워크"라는 것은 JavaScript를 사용하여 서버 측에서 웹 애플리케이션을 개발한다는 의미다.
미니멀한 디자인: Express는 미니멀하면서도 가볍고 간단한 디자인을 갖추고 있습니다. 필요한 기능만 추가하여 웹 애플리케이션을 개발할 수 있도록 돕습니다.
라우팅: Express는 URL 경로와 핸들러 함수를 매핑하여 라우팅을 설정할 수 있습니다. 이를 통해 요청이 특정 경로로 전달될 때 실행되는 로직을 정의할 수 있습니다.
미들웨어: Express는 미들웨어를 사용하여 요청과 응답 사이에서 동작하는 함수를 추가할 수 있는 기능을 제공합니다. 이를 통해 로깅, 데이터 변환, 인증 등 다양한 작업을 처리할 수 있습니다.
템플릿 엔진 지원: Express는 템플릿 엔진을 통해 동적인 HTML 페이지를 생성할 수 있도록 지원합니다. 대표적으로 Pug (Jade), EJS 등의 템플릿 엔진을 사용할 수 있습니다.
정적 파일 서비스: Express는 정적 파일 (이미지, 스타일시트, 자바스크립트 파일 등)을 쉽게 제공할 수 있는 기능을 제공합니다.
RESTful API 지원: Express를 사용하여 RESTful API를 빠르게 구축할 수 있습니다. HTTP 메서드 (GET, POST, PUT, DELETE 등)를 활용하여 API 엔드포인트를 정의하고 관리할 수 있습니다.
세션 관리: Express는 세션 관리를 지원하여 사용자 상태를 유지하고 인증과 관련된 작업을 처리할 수 있도록 도와줍니다.
React는 사용자 인터페이스(UI)를 구축하기 위한 JavaScript 라이브러리로, Facebook에서 개발한 오픈 소스 프로젝트다.
즉, React는 JavaScript를 기반으로 작성되었으며, UI 개발을 돕기 위한 도구와 패턴을 제공한다. React는 컴포넌트 기반 아키텍처를 기반으로 하며, UI를 여러 작은 조각으로 나누어 개발하고 관리할 수 있도록 도와준다. 이러한 컴포넌트 기반 접근 방식은 재사용 가능한 코드를 작성하고 유지보수를 용이하게 만들어준다.
React는 기존의 UI 개발 방식에서의 어려움과 복잡성을 해결하고자 등장했다. 기존의 DOM 조작은 직접적이고 복잡한 코드를 필요로 했으며, 작은 변경 사항도 전체 UI를 다시 렌더링해야 하는 문제가 있었다. 이에 React는 가상 DOM과 컴포넌트 기반 아키텍처를 도입하여 개발자들이 더 효율적으로 UI를 구축하고 관리할 수 있게끔 하였다. React의 성능과 재사용성은 웹 애플리케이션 개발 방식을 혁신적으로 변화시켰으며, 현재까지도 많은 개발자와 기업에서 널리 사용되고 있다.
가상 DOM(Virtual DOM): React는 가상 DOM을 사용하여 실제 DOM과 동기화하여 렌더링 성능을 최적화한다. 변경된 부분만 실제 DOM에 반영되므로 불필요한 렌더링을 방지하고 빠른 UI 업데이트를 가능하게 한다.
컴포넌트 기반 아키텍처: React는 모든 UI를 작은 컴포넌트로 나누어 개발하고 관리한다. 각 컴포넌트는 독립적으로 동작하며, 재사용 가능하고 조합 가능한 구성 요소로 이루어져 있다.
단방향 데이터 흐름: React는 데이터의 흐름을 단방향으로 유지하여 예측 가능하고 디버깅이 용이한 상태 관리를 지원한다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하며, 상태 변경은 일관성 있는 방식으로 이루어진다.
재사용 가능한 UI 컴포넌트: React 컴포넌트는 재사용 가능하며, 다양한 프로젝트에서 쉽게 활용할 수 있다. 이로써 개발자들은 일관된 디자인과 기능을 유지하면서 개발할 수 있다.
커뮤니티와 생태계: React는 큰 개발자 커뮤니티와 함께 성장하며 다양한 생태계와 라이브러리를 보유하고 있다. 이로써 개발자들은 다양한 리소스와 도구를 활용하여 개발을 진행할 수 있다.
DOM(Document Object Model)은 웹 페이지의 구조화된 문서를 표현하고 조작하기 위한 인터페이스를 제공하는 프로그래밍 언어 중립적인 방식이다.
웹 페이지의 모든 요소(HTML, XML 등)를 객체로써 표현하며, 이 객체들을 조작하여 웹 페이지의 내용, 구조, 스타일, 동작 등을 다룰 수 있다
DOM은 프로그래밍 언어와 웹 페이지 사이의 다리 역할을 한다. 각각의 HTML 요소(태그)들은 노드(Node)라고 불리는 객체로 표현되며, 이 노드들은 트리 구조로서 계층적으로 연결되어 있다. 이러한 트리 구조를 통해 문서의 구조와 계층을 파악하고 조작할 수 있다.
DOM을 사용하여 웹 페이지를 동적으로 조작하고 변경할 수 있다. JavaScript와 같은 스크립트 언어를 사용하여 DOM에 접근하고 수정함으로써 웹 페이지의 내용이나 스타일, 동작 등을 변경할 수 있다. 예를 들어, 특정 요소의 내용을 바꾸거나 추가하거나 삭제하거나, 스타일을 변경하거나, 이벤트를 처리할 수 있다.
계층 구조: DOM은 트리 구조로 웹 페이지의 요소들을 계층적으로 표현한다. 각 요소는 부모-자식 관계를 가지며, 이를 통해 문서의 구조를 나타낸다.
객체 지향적: DOM은 객체(Object)로 요소를 표현하며, 각 요소에 대한 속성과 메서드를 제공한다. 따라서 JavaScript와 같은 객체 지향 프로그래밍 언어를 사용하여 요소를 조작할 수 있다.
언어 중립적: DOM은 프로그래밍 언어와 독립적으로 설계되었기 때문에 다양한 프로그래밍 언어에서 사용할 수 있다.
동적 조작: DOM을 사용하여 웹 페이지의 요소를 동적으로 조작할 수 있으며, 이를 통해 사용자와 상호작용이 가능한 동적인 웹 페이지를 개발할 수 있다.
DOM을 사용하는 주된 이유는 웹 페이지의 동적인 변화와 상호작용을 가능하게 하기 위해서이다.
웹 페이지는 사용자와의 상호작용을 통해 동적으로 변화해야 하며, 사용자의 입력에 따라 내용이 업데이트되고 스타일이 변경되어야 한다. 이를 가능하게 하려면 웹 페이지의 구조와 내용을 프로그래밍적으로 조작할 수 있는 방법이 필요한데, 이를 위해 DOM이 사용된다.
동적인 웹 페이지: DOM을 사용하면 JavaScript를 통해 웹 페이지의 요소를 동적으로 생성, 수정, 삭제할 수 있다. 예를 들어, 사용자가 버튼을 클릭하면 새로운 내용이 추가되거나 기존 내용이 변경될 수 있다.
사용자 상호작용: 웹 페이지는 사용자와의 상호작용을 통해 정보를 제공하고 기능을 수행해야 한다. DOM을 통해 사용자의 입력에 따라 웹 페이지의 내용이 업데이트되고 반응할 수 있다.
다양한 디바이스에 대응: DOM을 사용하여 웹 페이지를 동적으로 제어하면 다양한 디바이스와 화면 크기에 대응하는 반응형 웹 디자인을 구현할 수 있다.
애니메이션과 효과: DOM을 조작하여 애니메이션과 효과를 쉽게 추가할 수 있다. 움직이는 이미지, 슬라이드쇼, 팝업 창 등 다양한 시각적 효과를 구현할 수 있다.
동적 데이터 표시: 웹 페이지는 실시간으로 변화하는 데이터를 보여줘야 하는 경우가 많다. DOM을 사용하면 서버에서 가져온 데이터를 동적으로 웹 페이지에 표시할 수 있다.
사용자 경험 향상: 동적으로 변화하는 웹 페이지는 사용자에게 더 풍부한 경험을 제공할 수 있다. DOM을 사용하여 사용자에게 보다 매력적이고 반응적인 웹 페이지를 제공할 수 있다.
React와 같은 라이브러리나 프레임워크에서 사용되는 개념이다. 실제 브라우저의 DOM과는 별개로 메모리 상에 존재하는 가상적인(=가짜) DOM이다. React에서는 가상 DOM을 사용하여 UI 업데이트를 관리하고 성능을 최적화한다.
예를 들어,
사용자가 버튼을 클릭하여 UI의 일부를 업데이트해야 한다고 가정해 본다.
React는 가상 DOM을 활용하여 이 변경 사항을 먼저 가상 DOM에 적용한다. 이렇게 가상 DOM은 현재 UI 상태를 나타내는데, 실제 DOM과는 동기화되지 않은 상태다.
그 다음, React는 가상 DOM을 실제 DOM과 비교한다. 이 비교를 통해 실제 DOM에서 변경이 필요한 부분을 찾아낸다.
마지막으로, React는 변경이 필요한 부분만을 실제 DOM에 적용하여 UI를 업데이트한다. 이렇게 하면 전체 페이지를 다시 렌더링하지 않고도 변경된 부분만을 업데이트할 수 있게 된다.
유익한 자료 감사합니다.