React

Meta의 React는 페이스북(현재 Meta Platforms Inc.로 이름 변경됨)이 2013년에 오픈 소스로 공개한 JavaScript 라이브러리로, 사용자 인터페이스(UI)를 구축하는 데 주로 사용됩니다. React는 컴포넌트 기반 구조를 통해 UI를 효율적이고 유연하게 개발할 수 있도록 돕는 특징이 있습니다.React의 주요 특징과 개념은 다음과 같습니다:컴포넌트 기반 아키텍처:UI를 재사용 가능한 독립적인 컴포넌트들로 분리하여 관리합니다.각 컴포넌트는 독립적인 상태와 UI를 가지며, 다양한 페이지와 기능에서 재사용할 수 있습니다.가상 DOM(Virtual DOM):React는 DOM 조작의 비효율성을 해결하기 위해 가상 DOM을 사용합니다. UI 업데이트 시, 메모리 내에 실제 DOM 대신 ..

AWS S3 인스턴스 생성 1. AWS에 로그인 후, Search 창에 S3를 입력후 해당 페이지로 이동합니다. 2. 사이드 메뉴바에서 Buckets를 선택합니다. 그리고 Create bucket 버튼을 선택합니다. 3. 버킷 이름을 작성합니다. Amazon S3의 버킷 이름 규칙은 일반 목적 버킷과 디렉터리 버킷에 대해 각각 적용됩니다.일반 목적 버킷 이름 규칙길이: 3~63자.문자 사용: 소문자, 숫자, 점(.), 하이픈(-)만 사용 가능.시작과 끝: 문자나 숫자로 시작하고 끝나야 함.연속 점 금지: 두 개의 점이 연속으로 올 수 없음.IP 형식 금지: IP 주소 형식(예: 192.168.5.4)으로 지정 불가.특정 접두사 및 접미사 금지:접두사: xn--, sthree-, sthree-configu..

1. 아파치 카프카 서버를 AWS EC2로 운영하기 위한 AWS EC2 네트워크 설정을 하기 위해,다음과 같이 instances의 Security 탭의 Security groups를 선택 합니다 2. 다음과 같이 Edit inbound rules 버튼을 선택합니다. 3. 다음과 같이 Add rule 버튼을 선택합니다. 4. 카프카 서버가 사용할 TCP Port(number:9092)를 IPv4와 IPv6 둘 다 설정합니다.  5. 네트워크 설정 확인을 위해 ICMP 설정을 추가합니다 6. 추가한 설정들을 저장하기 위해 다음과 같이 하단의 Save rules 버튼을 선택합니다. 7. 설정된 내용을 다음과 같이 확인합니다.(추가적인 설정 또는 변경을 위해 Edit inbound rules 버튼을 선택합니다)..

1. POST 요청(생성)POST 요청은 HTTP 메서드 중 하나로, 서버에 새로운 데이터를 생성할 때 사용됩니다. 주로 폼 제출이나 새로운 자원을 서버에 등록하는 상황에서 사용되며, REST API에서 POST 요청은 Create 작업에 해당합니다.POST 요청의 주요 특징새로운 데이터 생성: 서버에 데이터를 새롭게 추가하며, 서버가 데이터를 생성하고 고유 ID를 부여하는 방식입니다.요청 본문(body) 포함: POST 요청은 전송할 데이터(예: JSON, 폼 데이터)를 요청 본문에 포함하여 서버에 전달합니다.URL에 변화 없음: GET 요청과 달리 POST 요청은 URL에 데이터를 추가하지 않고, 본문에 데이터를 포함하여 전송합니다.예제: Axios를 사용한 POST 요청React에서 Axios 또는..

Custom Hooks는 React에서 재사용 가능한 상태 로직을 정의하는 방법입니다. 기본 제공되는 훅(useState, useEffect, 등)을 조합하여 고유의 로직을 가진 훅을 만들 수 있으며, 이렇게 만든 훅은 다양한 컴포넌트에서 공통된 기능을 재사용할 수 있게 합니다.1. Custom Hook의 개념React에서 Hooks는 컴포넌트의 상태와 생명주기 기능을 관리하는 데 사용됩니다. Custom Hook은 이 기본 훅들을 결합하여 복잡한 로직을 별도로 분리해 둔 함수입니다. Custom Hook은 보통 use로 시작하는 이름을 가지며, 상태 관리 로직을 하나의 독립된 함수로 작성해 필요한 컴포넌트에서 쉽게 가져다 사용할 수 있도록 만들어집니다.예를 들어, 데이터 가져오기 로직을 여러 컴포넌트에..

useEffect와 fetch()는 React에서 비동기 작업과 데이터 가져오기를 처리하는 데 핵심적인 역할을 합니다. 이 두 가지를 결합하면, 서버에서 데이터를 가져와 컴포넌트에 로드하는 것을 쉽게 구현할 수 있습니다.1. useEffect란?useEffect는 React 훅 중 하나로, 컴포넌트가 렌더링될 때 특정 동작(사이드 이펙트)을 수행할 수 있게 해줍니다. useEffect는 비동기 데이터 가져오기, 구독 설정, DOM 조작, 타이머 설정 등 컴포넌트 외부에서 데이터를 가져오거나 수정하는 작업을 할 때 주로 사용됩니다.useEffect 기본 사용법import React, { useEffect } from 'react';function ExampleComponent() { useEffect((..