목록Computer Science (59)
on my way
React에서 Axios를 이용한 REST API 호출 및 비동기 프로그래밍 이해하기
API 테스트API란?API는 애플리케이션 프로그래밍 인터페이스(Application Programming Interface)의 약자로, 프로그램이나 애플리케이션 간에 데이터를 주고받는 방법을 말해요.쉽게 말하면, API는 두 프로그램이 서로 대화할 수 있게 해주는 통로라고 할 수 있어요. 예를 들어, 당신이 좋아하는 앱에서 날씨 정보를 보여준다고 생각해보세요.그 앱이 직접 날씨 데이터를 수집하지 않고, 다른 날씨 서비스에서 데이터를 가져온다고 할 때, 이때 API를 통해 데이터를 가져옵니다. 라이브러리는 코드의 모음으로, 프로그램에서 특정 기능을 쉽게 사용할 수 있게 도와줘요.예를 들어, 어떤 수학 문제를 풀어야 하는 프로그램을 만든다면, 복잡한 수학 계산을 미리 정의해둔 라이브러리를 가져와서 사용할 ..
한 입 크기로 잘라먹는 리액트 9장: 컴포넌트 트리에 데이터 공급
9장: 컴포넌트 트리에 데이터 공급하기이 장에서 주목할 키워드ContextProps DrillingContext.Provider리팩터링useContext구조 재설계와 Context 분리이 장의 학습 목표Context가 무엇인지 알아봅니다.Context로 [할 일 관리] 앱을 리팩토링합니다. Context란 무엇인가요?Context는 리액트 컴포넌트 트리 전체에 데이터를 공급하는 기능입니다.이를 통해 Props Drilling 문제를 해결할 수 있습니다. Props Drilling 문제란?Props Drilling은 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때, 중간에 위치한 모든 컴포넌트에 일일이 Props를 전달해야 하는 문제를 말합니다.ㄴ이렇게 되면 코드가 복잡해지고 유지보수가 어려워집니다...
한 입 크기로 잘라먹는 리액트 8장: 최적화
메모이제이션과 useMemo최적화란?최적화는 웹 서비스의 성능을 개선하는 기술을 의미합니다. 최적화는 사용자가 웹 서비스를 사용할 때 불필요하게 기다리지 않도록 하여 사용자 경험을 개선하는 데 중요한 역할을 합니다. 최적화는 웹 애플리케이션의 성능을 개선하기 위해 중요하지만, 모든 것을 최적화하는 것은 반드시 좋은 것만은 아닙니다. 최적화를 다 하는 것에 대해 고려할 몇 가지 중요한 점들을 알아봅시다.최적화의 이점성능 향상:불필요한 연산과 리렌더링을 줄여 애플리케이션의 반응성을 높입니다.사용자 경험을 향상시켜 애플리케이션이 더 빠르고 부드럽게 동작하게 만듭니다.리소스 절약:서버와 클라이언트의 리소스를 절약할 수 있습니다.배터리 수명, 데이터 사용량 등의 측면에서 모바일 사용자를 위한 최적화도 가능합니다...
한 입 크기로 잘라먹는 리액트 Project2: [할 일 관리] 앱 만들기 + 업데이트
roject 2: [할 일 관리] 앱 만들기이번 프로젝트에서는 간단한 [할 일 관리] 앱을 만들어 보겠습니다.이 앱은 오늘의 날짜를 표시하고, 할 일을 작성하고, 할 일 리스트를 관리할 수 있는 기능을 포함하고 있습니다.프로젝트는 크게 준비, UI 구현, 기능 구현의 단계로 나누어 진행합니다.목차프로젝트 준비하기UI 구현하기기능 구현하기CRUD 구현1. 프로젝트 준비하기요구사항 분석하기먼저 앱의 요구사항을 분석합니다.다음은 [할 일 관리] 앱의 최종 구현 모습입니다. 기능 목록:오늘의 날짜를 요일, 월, 일, 연도순으로 표시할 일(Todo) 작성 입력 폼 및 추가 버튼할 일 리스트 및 검색 기능할 일 아이템 체크박스, 등록 날짜, 삭제 버튼컴포넌트 구조앱의 UI 요소를 컴포넌트 단위로 나눕니다.컴포넌트를..
한 입 크기로 잘라먹는 리액트 Project1: [카운터] 앱 만들기
Project 1: [카운터 앱 만들기]목차프로젝트 준비하기요구사항 분석하기리액트 앱 만들기UI 구현하기Viewer 컴포넌트 만들기Controller 컴포넌트 만들기컴포넌트 스타일링하기기능 구현하기State를 이용해 카운터 기능 구현하기State는 어떤 컴포넌트에 만들까?리액트답게 설계하기1. 프로젝트 준비하기요구사항 분석하기지금까지 배운 내용을 토대로 [카운터] 앱 프로젝트를 진행했다. [카운터] 앱은 숫자를 더하고 빼는 기능만 있는 아주 단순한 앱이다.첫 리액트 프로젝트인 만큼 간단한 기능만 포함하고 있어서 누구나 어렵지 않게 구현할 수 있다.프로젝트를 구현하기에 앞서 꼭 해야 할 일이 있다.이 앱을 어떤 설계와 기능으로 구현할지 살펴보는 것이다. 이를 소프트웨어 공학에서는 요구사항 분석이라고 한다...
리액트 상태 관리의 진화 - useReducer와 상태 관리리액트(React)는 현대 웹 개발에서 가장 널리 사용되는 라이브러리 중 하나이고, 컴포넌트 기반의 구조로, UI를 효율적으로 관리하고 업데이트할 수 있게 해준다.리액트의 핵심 기능 중 하나인 상태 관리(State Management)는 앱의 복잡성을 줄이고, 사용자 인터페이스(UI)의 일관성을 유지하는 데 중요한 역할을 한다. 리액트 상태 관리란?리액트에서 상태(State)는 컴포넌트의 렌더링 결과에 영향을 미치는 데이터이다.이 데이터는 사용자 입력, 네트워크 요청의 결과 등 다양한 소스에서 올 수 있다.리액트는 상태가 변경될 때마다 UI를 다시 렌더링하여 사용자에게 최신 정보를 보여준다.useState와 useReducer리액트에서 상태를 관..