풀소유

메타는 리액트를 처음 발표할 때 플럭스라고 부르는 앱설계 규격을 함께 발표했다. 플럭스는 앱 수준 상태, 즉 여러 컴포넌트가 공유하는 상태를 리액트 방식으로 구현하는 방법이다. 이후로 플럭스 설계 규격을 준수하는 오픈소스 라이브러리가 등장했는데, 리덕스는 그중에서 가장 많이 사용되는 패키지이다.리덕스 관련 필수 패키지npm i redux @reduxjs/toolkit react-reduxredux와 @reduxjs/tookit(RTK 패키지) 은 프레임워크와 무관하므로 앵귤러나 뷰에서도 사용할 수 있다. 앱 수준 상태useState 훅은 컴포넌트가 유지해야 할 상태를 관리하는 용도로 사용된다. 그런데 여러 컴포넌트가 상태들을 함께 공유하는 형태로 만들 때가 많은데, 이처럼 앱을 구성하는 모든 컴포넌트가 ..

컨텍스트란?컴포넌트의 속성은 부모 컴포넌트가 자식 컴포넌트로 어떤 정보를 전달하려고 할 때 사용되는 메커니즘이다. 그런데 부모 컴포넌트가 직계 자식이 아닌, 손자나 증손자 컴포넌트에 정보를 전달하려고 하면 번거로운 속성 전달을 해야 한다.리액트는 이런 속성 전달의 번거로움을 해소하고자 컨텍스트라는 메커니즘을 구현해놓았다. 리액트나 리액트 네이티브에서 컨텍스트는 createContext와 useContext 훅으로 이뤄진다.컨텍스트 기능을 사용하는 리액트와 리액트 네이티브 코드는 항상 이름에 'Provider'가 있는 컴포넌트와 'use컨텍스트_이름()'형태의 커스텀 훅을 사용한다. 컨텍스트 기능을 구현한 react-native-paper와 같은 패키지 또한 항상 Provider란 이름이 있는 컴포넌트와 ..

자바스크립트의 FileReader 클래스는 웹 애플리케이션에서 파일을 읽을 수 있는 기능을 제공한다. 이 클래스는 파일 시스템에 접근하지 않고도, 사용자가 선택한 파일을 비동기적으로 읽어 들여 다양한 형태로 처리할 수 있게 한다. FileReader는 특히 파일 업로드와 관련된 기능을 구현할 때 유용하다.메서드readAsText(file): 파일을 텍스트로 읽는다.readAsDataURL(file): 파일을 데이터 URL(Base64)로 읽는다.readAsArrayBuffer(file): 파일을 ArrayBuffer로 읽는다.readAsBinaryString(file): 파일을 바이너리 문자열로 읽는다. (비권장)속성result: 파일 읽기가 완료되면 읽은 데이터가 저장된다.onloadstart: 파일 ..

useRef와 useImperativeHandle은 ref라는 속성에 적용하는 값을 만들어 주는 훅이다. 리액트와 리액트 네이티브가 제공하는 컴포넌트는 모두 ref라는 이름의 속성을 가지고 있다.ref 속성이란?Ref는 참조를 의미한다.ref 속성값은 사용자 코드에서 설정하는 것이 아니라, 특정 시점에 React 프레임워크 내부에서 설정해 준다. ref 속성은 초기에는 null이지만, 컴포넌트가 마운트 되는 시점에서 실제 DOM 객체의 값이 된다.HTML 요소들은 자바스크립트에서 DOM 타입 객체이다. 모든 요소는 HTMLElement 타입이며, click(), blur(), focus() 메서드를 제공한다. 이 메서드들은 가상 DOM 상태에서는 호출할 수 없고, 실제 DOM 상태에서만 호출할 수 있다...

AWS X-RayAWS X-Ray는 애플리케이션을 추적하고 분석하는 데 도움을 주는 서비스이다. 이를 통해 애플리케이션의 성능 문제를 식별하고, 애플리케이션의 동작 방식을 더 잘 이해할 수 있다. X-Ray는 애플리케이션의 요청을 추적하고, 각 요청이 어떻게 처리되는지에 대한 자세한 정보를 제공한다.주요 기능트레이스 수집 및 분석: 요청이 애플리케이션을 통해 어떻게 이동하는지 시각화한다.트랜잭션 오류 및 성능 병목 현상 식별: 어디에서 오류가 발생하고 지연이 발생하는지 파악할 수 있다.종단 간 뷰 제공: 프런트엔드 서비스에서 백엔드 서비스까지 전체 애플리케이션 스택을 추적할 수 있다.구성요소Segment: 애플리케이션의 개별 작업을 나타낸다.Subsegment: 세그먼트 내의 더 작은 작업을 나타내어 더..

AWS에서는 애플리케이션 성능 모니터링(APM, Application Performance Monitoring)을 위해 여러 도구와 서비스를 제공한다. 또한 외부 APM 도구(New Relic, Datadog, Dynatrace)와의 통합도 지원한다. 이러한 도구들은 AWS 인프라와 애플리케이션의 메트릭을 수집하고, 이를 기반으로 다양한 성능 분석 기능을 제공한다. 그중 주요 AWS 서비스는 Amazon CloudWatch와 AWS X-Ray이다.Amazon CloudWatchAWS CloudWatch는 AWS 리소스 및 애플리케이션의 성능 및 상태를 모니터링하는 서비스이다.메트릭 및 로그 데이터의 수집, 이벤트 기반 알림 설정, 자동화된 작업 실행 등의 기능을 통해 클라우드 인프라의 관리와 운영 효율성..

리액트는 컴포넌트를 생성하고 렌더링 하다가 어떤 시점이 되면 소멸한다. 이러한 과정을 컴포넌트의 생명 주기라고 표현한다. 클래스 컴포넌트 예제import {Component} from "react";import {Title} from "../components";export default class ClassLifecycle extends Component { state = { today: new Date(), intervalId: null as unknown as NodeJS.Timer // null 값을 unknown 타입으로 변환한 값을 다시 NodeJS.Timer 타입으로 변환한다. // 최종적으로 intervalId 변수는 null로 초기화..

비슷한 책을 여럿 보았지만 부의 이르는 순서에 대해서 다룬 책은 처음이었다. 이러한 이유로 책의 핵심 내용을 간추려 본다. 시간은 금이다.시간은 돈으로 교환할 수 있는 가치가 있다.자기만의 가치를 만들자.시간을 세공하여 시장과 교환할 수 있는 특별한 가치를 창출하자.이 가치는 자신이 만든 '절대 반지'와 같다.월 1000만 원의 수익 목표1000만 원을 벌기 위해 목표를 설정하고 행동하자.시간을 온전히 자신의 것으로 만들기남을 위해 일하는 것이 아니라, 자신의 시간을 효과적으로 사용하자.브랜딩화 및 가치 극대화자신의 시간을 브랜딩 하여 그 가치를 극대화하자.훌륭한 브랜딩은 무형자산을 끌어모은다.시장에서 이름을 인정받을 때 브랜딩이 완성된다.최고 효용 지점에 이르기시간의 최댓값에 다다르면 고 또는 스탑을 ..

OWASP(Open Web Application Security Project)는 매년 발표하는 OWASP Top 10 보안 취약점 목록을 통해 주요 웹 애플리케이션 보안 취약점을 정리하고 있다. 이들 취약점은 공격자가 웹 애플리케이션을 공격할 때 자주 이용하는 패턴들을 반영하고 있다.1. 인젝션 (Injection)공격 원리: 악의적인 코드를 웹 애플리케이션의 입력 파라미터에 주입하여 실행되게 하여 시스템을 손상시키거나 정보를 유출시키는 공격예를 들어 SQL Injection(SQL 쿼리에 악의적인 SQL 코드를 삽입하는 것)이 있다.방어 방법:Prepared Statement 및 Parameterized Query 사용입력 데이터의 검증 및 이스케이핑(Escaping)2. 인증 및 세션 관리 취약점 ..

대부분의 언어에서는 원시 타입(숫자, 불리언 등)과 읽기 전용 문자열은 값을 새로운 메모리 공간에 복사하여 독립적인 변수를 생성하는 깊은 복사를 수행한다. 반면에 객체와 배열 같은 참조 타입은 주소(참조)를 복사하여 같은 객체나 배열을 공유하게 되는 얕은 복사를 기본적으로 수행한다. 타입스크립트에서는 읽기 전용 문자열도 컴파일 타임에서 크기를 알 수 있어 깊은 복사가 발생할 수 있다. 이 복사 방식은 변수와 객체의 독립성을 유지하고 메모리 관리를 보장하기 위한 중요한 개념이다. 리액트 훅에서 깊은 복사 여부가 중요한 이유는 대다수 훅 함수에 필요한 의존성 목록 때문이다. const onChangeName = useCallback((e: ChangeEvent)=>{ const newForm = for..