전체 글

React Part 2. 함수 컴포넌트의 장점과 컴포넌트 상태(State)의 이해React는 컴포넌트(Component)를 중심으로 화면을 구성하는 라이브러리이다. 최근 React에서는 클래스 컴포넌트보다 함수 컴포넌트(Function Component)를 기본 개발 방식으로 권장하고 있으며, 대부분의 최신 프로젝트 역시 함수 컴포넌트와 Hooks를 중심으로 개발되고 있다. 함수 컴포넌트는 코드가 간결할 뿐만 아니라 테스트와 유지보수가 쉽고, Babel 컴파일 및 번들 최적화 측면에서도 여러 장점을 제공한다. 또한 React 애플리케이션에서 중요한 개념인 State(상태) 역시 함수 컴포넌트를 중심으로 관리하는 것이 일반적이다.이번 글에서는 함수 컴포넌트의 주요 장점과 컴포넌트 상태(State)에 대해 ..

React Part 1. Create React App와 컴포넌트의 이해React는 사용자 인터페이스(UI)를 효율적으로 개발하기 위해 가장 많이 사용되는 JavaScript 라이브러리 중 하나이다. React 프로젝트를 시작할 때 가장 많이 사용되는 도구 중 하나가 Create React App(CRA)이다. CRA는 React 개발에 필요한 복잡한 환경 설정을 자동으로 구성해 주며, 개발자는 별도의 Webpack이나 Babel 설정 없이 바로 애플리케이션 개발을 시작할 수 있다. 또한 React의 핵심 개념인 컴포넌트(Component)를 기반으로 화면을 구성하기 때문에 코드의 재사용성과 유지보수성이 매우 뛰어나다.이번 글에서는 Create React App의 장점과 React 컴포넌트의 종류, 그리..

TypeScript와 Angular Part 3. 개발 서버 구조와 서비스 기반 HTTP 통신Angular 애플리케이션은 화면을 구성하는 프론트엔드 영역과 실제 데이터를 처리하는 백엔드 영역으로 나누어 개발하는 경우가 많다. 개발 모드에서는 일반적으로 Angular 애플리케이션을 실행하는 서버와 데이터를 제공하는 API 서버가 각각 별도로 동작한다.이러한 구조에서는 컴포넌트가 서버와 직접 통신하기보다, 컴포넌트에 주입된 서비스를 통해 HTTP 요청을 처리한다. 서비스는 서버 통신 로직을 담당하고 컴포넌트는 화면 표시와 사용자 이벤트 처리에 집중한다.개발 모드에서 두 개의 서버가 필요한 이유Angular 프로젝트를 개발할 때는 일반적으로 두 개의 서버가 실행된다.첫 번째는 Angular 웹 애플리케이션을 ..

TypeScript와 Angular Part 2. 반응형 기반 개발과 Angular RouterAngular는 컴포넌트 기반 구조를 중심으로 동작하는 프레임워크이지만, 실제 애플리케이션에서는 사용자 입력 처리, 화면 전환, 데이터 전달 등 다양한 기능이 함께 동작해야 한다. 이를 위해 Angular는 반응형(Reactive) 기반 개발 방식과 Router(라우터) 기능을 제공한다.반응형 프로그래밍은 데이터의 변경 사항을 자동으로 화면에 반영하는 개발 방식이며, Router는 여러 화면을 효율적으로 이동하고 관리하기 위한 기능이다. 두 기능은 Angular 애플리케이션의 핵심 요소로, 대부분의 프로젝트에서 반드시 사용된다.반응형 기반(Reactive Forms)Angular에서 반응형 기반이란 TypeSc..