풀소유

리액트는 컴포넌트를 생성하고 렌더링 하다가 어떤 시점이 되면 소멸한다. 이러한 과정을 컴포넌트의 생명 주기라고 표현한다. 클래스 컴포넌트 예제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..

서버에서 HTML을 생성해 웹 브라우저 쪽에 전송하는 전통 방식의 웹 개발에서는 사용자에게 데이터를 받을 때 요소를 사용한다. 이때 폼 요소는 method 속성에 HTTP 메서드를 설정하고, action 속성에는 폼 데이터를 전송한 뒤 전환할 화면의 URL을 설정하는 방식으로 사용한다. 만일 method 설정값이 POST 라면 폼 데이터를 암호화하는 다음 3가지 방식 중 하나를 encType 속성에 설정한다.application/x-www-form-urlencoded(기본값)multipart/form-datatext/plan하지만 리액트와 같은 SPA 방식은 백엔드가 API 방식으로 동작하므로 굳이 폼 요소와 속성등을 설정할 필요가 없다. 다만 관습적으로 사용자 입력을 받는 부분을 요소로 구현한다.버튼 ..

함수형 언어에서는 함수와 변수를 차별하지 않으므로 함수는 다른 함수의 입력 매개변수나 반환값으로도 사용될 수 있습니다.고차 함수는 다른 함수를 반환하는 함수를 의미한다.리액트 개발에서 고차 함수는 콜백 함수에 어떤 정보를 추가로 전달하려고 할 때 주로 사용한다.const onClick = useCallbakc((name: string) => () => alert(`${name} clicked`), []) 리액트에서 고차 함수를 구현하는 이유는 함수의 타입 불일치를 해결하기 위해서이다. onClick 이벤트 속성은 () => void 타입의 콜백 함수를 설정해야 하므로 다음 처럼 콜백 함수 내부에서 필요한 name 변수를 전달할 수 없다.() => alert(`${name} clicked`)그러나 콜백 함..

템플릿 메소드 패턴은 알고리즘의 일부 단계를 서브클래스에서 구현할 수 있으며, 알고리즘의 구조는 그대로 유지하면서 알고리즘의 특정 단계를 서브클래스에서 재정의한다.템플릿 메소드 패턴의 구성 요소AbstractClass (추상 클래스)알고리즘의 템플릿을 정의하는 클래스로, 템플릿 메소드를 포함하고 있다.템플릿 메소드는 알고리즘의 구조를 정의하고, 일부 단계는 추상 메소드나 구현된 메소드를 활용하여 구현한다.훅(Hook)을 사용하여 서브클래스에서 알고리즘의 특정 지점에 추가적인 동작을 삽입할 수 있다.ConcreteClass (구체 클래스)AbstractClass를 상속받아 템플릿 메소드에서 정의된 추상 메소드들을 구현하는 클래스이다.알고리즘의 일부 단계를 재정의하여 구체적인 동작을 제공한다.필요에 따라 후..

이중 NOT 연산자는 부울 값으로 변환하는 데 사용된다. 처음 ! 연산자는 값을 반전시키고, 두 번째 ! 연산자는 이를 다시 반전시켜 원래의 논리 상태로 돌려놓는다. 이 과정에서 해당 값이 무엇이든 명시적으로 부울 값으로 변환된다.const value = "Hello, World!";const booleanValue = !!value;const onClick = () => {}const booleanOnClick = !!onClick;console.log(booleanValue); // trueconsole.log(booleanOnClick); // true JavaScript에서는 값이 "truthy"하거나 "falsy"할 수 있다. "truthy"한 값은 조건문에서 참으로 평가되는 값이고, "fals..

PrettierPrettier는 코드 포매터로서, 코드의 스타일을 일관되게 유지하는 데 중점을 둔다. 코드의 가독성을 높이고 팀 간의 스타일 불일치를 줄여준다.자동 코드 포매팅: 저장 시 또는 명령 실행 시 코드를 자동으로 포맷팅 한다.스타일 설정: 코드 스타일 옵션을 설정할 수 있다.다양한 언어 지원: JavaScript, TypeScript, CSS, HTML 등을 포함한 여러 언어를 지원한다.설치npm install prettier --save-dev설정하기최상단 디렉토리에 .prettierrc.json 을 생성 한다.{ "printWidth": 120, // 코드 한 줄의 최대 길이를 120자로 설정 "tabWidth": 2, // 들여쓰기에서 사용할 공백 수를 2칸으로 설정 "useTabs..