목록Computer Science/React (12)
on my way
리액트 상태 관리의 진화 - useReducer와 상태 관리리액트(React)는 현대 웹 개발에서 가장 널리 사용되는 라이브러리 중 하나이고, 컴포넌트 기반의 구조로, UI를 효율적으로 관리하고 업데이트할 수 있게 해준다.리액트의 핵심 기능 중 하나인 상태 관리(State Management)는 앱의 복잡성을 줄이고, 사용자 인터페이스(UI)의 일관성을 유지하는 데 중요한 역할을 한다. 리액트 상태 관리란?리액트에서 상태(State)는 컴포넌트의 렌더링 결과에 영향을 미치는 데이터이다.이 데이터는 사용자 입력, 네트워크 요청의 결과 등 다양한 소스에서 올 수 있다.리액트는 상태가 변경될 때마다 UI를 다시 렌더링하여 사용자에게 최신 정보를 보여준다.useState와 useReducer리액트에서 상태를 관..
1. 리액트 컴포넌트와 라이프 사이클리액트 컴포넌트의 라이프 사이클 3단계리액트 컴포넌트의 라이프 사이클은 크게 세 단계로 나뉩니다: 마운트(Mount), 업데이트(Update), 언마운트(Unmount).1. 마운트 (Mount, 탄생)마운트는 컴포넌트가 처음으로 페이지에 렌더링될 때 발생합니다. 이 단계에서 컴포넌트는 초기 설정을 수행하고, 필요한 초기 데이터를 가져오는 등의 작업을 할 수 있습니다.constructor: 컴포넌트가 생성될 때 호출됩니다. 초기 상태를 설정하거나 인스턴스 변수들을 초기화할 수 있습니다.componentDidMount: 컴포넌트가 첫 번째 렌더링을 마친 후 호출됩니다. 이 시점에서 DOM 요소들이 모두 준비되어 있기 때문에, 초기화 작업이나 외부 데이터 가져오기 등을 수..
1. 컴포넌트 리액트는 컴포넌트 기반의 UI 라이브러리이다.이는 페이지의 모든 요소를 컴포넌트 단위로 쪼개어 개발하고, 완성된 컴포넌트를 레고 조립하듯 하나로 합쳐 페이지를 구성하는 방식이다. 첫 컴포넌트 만들기리액트 컴포넌트는 주로 자바스크립트의 클래스나 함수를 이용해 만든다.현재는 함수로 컴포넌트를 만드는 방식이 선호된다. 함수 컴포넌트 만들기:App.js에서 첫 번째 리액트 컴포넌트를 만들었다.import "./App.css";function Header() { return ( header );}function App() { return ;}export default App;함수를 이용해 Header라는 이름의 컴포넌트를 만들었다.Header 컴포넌트는 HTML을 반환하..
리액트 시작하기: 탄생 배경과 기본 설정이번 포스팅에서는 리액트의 탄생 배경과 리액트 앱을 시작하는 방법에 대해 다루겠습니다.리액트는 복잡한 웹 서비스를 쉽고 빠르게 개발할 수 있는 컴포넌트 기반의 프레임워크입니다.리액트의 기본 개념과 설치 방법, 그리고 간단한 프로젝트 생성 과정을 살펴보겠습니다. 리액트의 탄생리액트는 페이스북 개발팀에 의해 2013년 오픈소스로 공개되었습니다.페이스북은 다양한 사용자와의 상호작용이 빈번한 대규모 웹 애플리케이션을 쉽게 구축할 수 있는 기술이 필요했고, 이에 따라 리액트를 개발하게 되었습니다.리액트는 컴포넌트 기반 구조를 통해 복잡한 웹 애플리케이션을 모듈화하고, 효율적으로 관리할 수 있는 장점을 가지고 있습니다. 리액트의 주요 특징컴포넌트 기반의 유연한 구조 리액트는 ..
Node.js 설치 및 기본 설정블로그 포스팅에서 Node.js를 사용하여 리액트 프로젝트를 설정하는 방법에 대해 다루겠습니다. 이 글에서는 Node.js 설치부터 패키지 관리, 모듈 시스템까지의 기본적인 내용을 설명하겠습니다.Node.js 설치하기Node.js는 Chrome의 V8 JavaScript 엔진 위에 구축된 JavaScript 런타임입니다. Node.js를 설치하려면 Node.js 다운로드 페이지로 이동하여 운영 체제에 맞는 설치 프로그램을 다운로드하고 설치합니다. 현재 최신 버전은 20.15.0입니다.설치 후, 명령 프롬프트나 터미널에서 다음 명령어를 입력하여 Node.js와 npm이 제대로 설치되었는지 확인합니다 https://nodejs.org/en/download/prebuilt-in..
예전 Legacy 시스템기존의 레거시 시스템에서는 MVC(Model-View-Controller) 아키텍처가 주로 사용되었습니다. 이 아키텍처는 다음과 같은 특징을 가지고 있습니다.MVC 아키텍처: 애플리케이션을 모델, 뷰, 컨트롤러로 분리하여 각각의 역할을 명확히 하고 유지보수를 용이하게 합니다.모노리식 아키텍처: 하나의 코드베이스에서 모든 기능을 처리합니다. 이는 초기 개발 및 배포는 간편하지만, 시간이 지남에 따라 유지보수가 어려워지고 확장성이 떨어지는 문제가 있습니다.모바일 애플리케이션 개발의 문제점기존 MVC 구조에서 모바일 애플리케이션(Android, iOS)을 개발할 때 다음과 같은 문제가 발생했습니다.플랫폼 별 코드 관리: 안드로이드(AOS)와 iOS 각각의 플랫폼에 맞게 별도의 코드베이스..