on my way

메모이제이션과 useMemo최적화란?최적화는 웹 서비스의 성능을 개선하는 기술을 의미합니다. 최적화는 사용자가 웹 서비스를 사용할 때 불필요하게 기다리지 않도록 하여 사용자 경험을 개선하는 데 중요한 역할을 합니다. 최적화는 웹 애플리케이션의 성능을 개선하기 위해 중요하지만, 모든 것을 최적화하는 것은 반드시 좋은 것만은 아닙니다. 최적화를 다 하는 것에 대해 고려할 몇 가지 중요한 점들을 알아봅시다.최적화의 이점성능 향상:불필요한 연산과 리렌더링을 줄여 애플리케이션의 반응성을 높입니다.사용자 경험을 향상시켜 애플리케이션이 더 빠르고 부드럽게 동작하게 만듭니다.리소스 절약:서버와 클라이언트의 리소스를 절약할 수 있습니다.배터리 수명, 데이터 사용량 등의 측면에서 모바일 사용자를 위한 최적화도 가능합니다...

roject 2: [할 일 관리] 앱 만들기이번 프로젝트에서는 간단한 [할 일 관리] 앱을 만들어 보겠습니다.이 앱은 오늘의 날짜를 표시하고, 할 일을 작성하고, 할 일 리스트를 관리할 수 있는 기능을 포함하고 있습니다.프로젝트는 크게 준비, UI 구현, 기능 구현의 단계로 나누어 진행합니다.목차프로젝트 준비하기UI 구현하기기능 구현하기CRUD 구현1. 프로젝트 준비하기요구사항 분석하기먼저 앱의 요구사항을 분석합니다.다음은 [할 일 관리] 앱의 최종 구현 모습입니다. 기능 목록:오늘의 날짜를 요일, 월, 일, 연도순으로 표시할 일(Todo) 작성 입력 폼 및 추가 버튼할 일 리스트 및 검색 기능할 일 아이템 체크박스, 등록 날짜, 삭제 버튼컴포넌트 구조앱의 UI 요소를 컴포넌트 단위로 나눕니다.컴포넌트를..

Project 1: [카운터 앱 만들기]목차프로젝트 준비하기요구사항 분석하기리액트 앱 만들기UI 구현하기Viewer 컴포넌트 만들기Controller 컴포넌트 만들기컴포넌트 스타일링하기기능 구현하기State를 이용해 카운터 기능 구현하기State는 어떤 컴포넌트에 만들까?리액트답게 설계하기1. 프로젝트 준비하기요구사항 분석하기지금까지 배운 내용을 토대로 [카운터] 앱 프로젝트를 진행했다. [카운터] 앱은 숫자를 더하고 빼는 기능만 있는 아주 단순한 앱이다.첫 리액트 프로젝트인 만큼 간단한 기능만 포함하고 있어서 누구나 어렵지 않게 구현할 수 있다.프로젝트를 구현하기에 앞서 꼭 해야 할 일이 있다.이 앱을 어떤 설계와 기능으로 구현할지 살펴보는 것이다. 이를 소프트웨어 공학에서는 요구사항 분석이라고 한다...

리액트 상태 관리의 진화 - 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을 반환하..