ComponentType컴포넌트 자체의 타입을 정의컴포넌트의 전체 구조를 나타냄함수형 또는 클래스형 컴포넌트 전체를 의미type ComponentType = | React.ComponentClass | React.FunctionComponent// 사용 예시const MyComponent: ComponentType = (props) => { return {props.name};}ComponentProps특정 컴포넌트의 Props 타입을 추출컴포넌트에 전달되는 속성들의 타입을 얻을 때 사용컴포넌트의 props 구조만을 나타냄type ComponentProps = T extends React.ComponentType ? P : never;// 사용 예시type ButtonProps = Componen..
https://velog.io/@kcj_dev96/내가-만든-npm-패키지가-import가-안되는-이슈-feat.-tsconfig.json-pacakge.json문제의 원인은 types 필드가 exports 필드에 포함되어 있지 않아서였다.TypeScript는 exports 필드가 있다면 exports 필드를 참조하여 모듈의 파일을 찾기 때문에, 선언 파일(.d.ts)이 exports 필드에 포함되어 있지 않으면 TypeScript는 선언 파일을 찾지 못하고 오류를 발생시킬 수 있다고 한다.https://thebook.io/080334/0254/수정하고나서 npm을 다시 버전 업을 해야하나?git stash(작업물이 있는 경우)npm version pathgit stash popgit publish→ 버..
Error 클래스 구조// 자바스크립트 자체 내장 에러 클래스 Error의 '슈도 코드'class Error { constructor(message) { this.message = message; // 에러 메시지 this.name = "Error"; // 에러로 표시될 이름 this.stack = [call stack]; // stack은 표준은 아니지만, 대다수 환경이 지원함 }}message: 에러 객체안에 들어있는 에러 메시지를 갖는 프로퍼티name: 에러가 발생할 때 ReferenceError와 같이 에러의 이름을 표시해 주는 프로퍼티stack: 에러 전에 있는 call stack들을 갖는 프로퍼티class ValidationError extends Error { const..
React의 Outlet은 주로 React Router에서 사용되는 컴포넌트로, 중첩된 라우트에서 자식 라우트를 렌더링하기 위해 사용됩니다. Outlet을 사용하면 부모 컴포넌트 내에서 자식 컴포넌트를 표시할 위치를 정의할 수 있어, 중첩 라우팅 구조를 간편하게 관리할 수 있습니다.기본 사용 예시Outlet은 부모 라우트 컴포넌트에 배치되고, 자식 라우트가 활성화될 때 해당 위치에 렌더링됩니다.// App.jsimport { BrowserRouter, Routes, Route } from "react-router-dom";import Layout from "./Layout";import Home from "./Home";import About from "./About";function App() { r..
`useImperativeHandle`은 React Hook으로, 부모 컴포넌트에서 자식 컴포넌트의 특정 메서드나 속성을 직접 접근할 수 있게 해주는 기능입니다.간단한 예제로 설명해드리겠습니다:// 자식 컴포넌트import React, { forwardRef, useImperativeHandle, useState } from 'react';const ChildInput = forwardRef((props, ref) => { const [value, setValue] = useState(''); // 부모에게 노출할 메서드들을 정의 useImperativeHandle(ref, () => ({ // 입력값을 초기화하는 메서드 clearInput: () => { setValue('')..
1.1 테스트 코드 작성의 목적과 장점1.1.1 테스트코다 작성의 목적정확성 및 신뢰성 확보:테스팅의 주요 목적은 코드가 올바르게 작동하는지 확인하는 것다양한 조건 및 입력에서 React 컴포넌트와 코드가 예상대로 작동하는지 확인수월한 리팩토링:프로젝트가 성장하면 리팩토링이 필요함코드 품질, 성능 개선 또는 새로운 패턴 적용 등리팩토링 전 테스트코드를 작성하면 최소한의 기준이 만들어짐변경사항 또는 최적화가 예상치 못한 버그를 초래하지 않도록개인적으로는 리팩토링 전에 테스트코드 작성하는 것을 추천프로젝트 초반부터 테스트코드를 작성하면서 진행하면 좋지만 일반적으로 시간이 부족함추후 개선할 때 테스트코드 작성으로 안전망을 둘러두고, 리팩토링 진행하는 것을 추천1.1.2 테스트코드 작성의 장점문서화 및 이해:명..
.gitkeep은 Git이 비어 있는 디렉토리를 추적하도록 하기 위해 사용하는 관례적인 파일입니다. Git은 기본적으로 비어 있는 디렉토리를 버전 관리하지 않기 때문에, 디렉토리가 비어 있더라도 Git에 포함시키고 싶을 때 .gitkeep 파일을 생성합니다.왜 .gitkeep이 필요한가?Git의 특성Git은 파일만 추적하며, 디렉토리 자체는 추적하지 않습니다.따라서 디렉토리가 비어 있으면 Git은 해당 디렉토리를 버전 관리에 포함하지 않습니다.빈 디렉토리 유지 필요성프로젝트 구조를 유지하거나, 특정 디렉토리가 나중에 파일을 가질 것임을 명시적으로 나타내야 할 때, 빈 디렉토리가 필요할 수 있습니다.이 경우, 디렉토리에 .gitkeep 파일을 추가해 Git이 해당 디렉토리를 추적하게 만듭니다..gitkee..
Render Delegation은 React와 같은 UI 프레임워크에서 렌더링 성능을 최적화하기 위한 디자인 패턴입니다.기본 개념부모 컴포넌트가 자식 컴포넌트에게 렌더링 책임을 위임하는 패턴복잡한 렌더링 로직을 분리하여 관리하기 쉽게 만듦불필요한 리렌더링을 방지하여 성능 향상주요 장점성능 최적화: 필요한 부분만 렌더링되어 전체 성능 향상코드 분리: 렌더링 로직을 별도 컴포넌트로 분리하여 유지보수성 향상재사용성: 위임받은 렌더링 로직을 여러 곳에서 재사용 가능// 좋지 않은 예시const ParentComponent = () => { const [data, setData] = useState([]); return ( {data.map(item => ( ..
Zustand와 Context API를 사용한 상태 관리는 각각의 구현 방식과 내부 구조에서 차이가 나며, 이로 인해 성능적인 차이가 발생할 수 있습니다. 아래에서 두 방법의 주요 성능 차이점을 살펴보겠습니다. 1. Context API의 특징과 성능동작 방식Context API는 React의 Context.Provider를 통해 자식을 포함한 하위 트리 전체에 데이터를 전달합니다.데이터가 변경되면, 해당 데이터를 사용하는 모든 컴포넌트가 재렌더링됩니다.장점React에 내장되어 있어 별도의 라이브러리가 필요하지 않습니다.작은 규모의 애플리케이션에서 간단하게 상태를 공유할 수 있습니다.단점전역 상태 사용 시 성능 이슈Context에 종속된 컴포넌트는 Context 값이 변경될 때 모두 재렌더링됩니다.심지..
XSS(Cross-Site Scripting, 크로스 사이트 스크립팅)설명XSS는 공격자가 악성 스크립틀르 웹 페이지에 삽입해, 브라우저에서 실행되도록 만드는 공격브라우저 저장소인 LocalStorage, SessionStorage는 자바스크립트를 통해 쉽게 접근할 수 있어 XSS 공격에 취약함악성 스크립트가 저장소에서 민감한 데이터를 읽어 공격자가 접근할 수 있도록 만ㄷ름예시공격자가 악성 자바스크립트를 웹 페이지에 삽입하고, 이 스크립트가 실행되면서 Local Storage에 저장된 인증 토큰을 훔쳐갈 수 있음방어 방법Content Security Policy(CSP) : CSP 헤더를 설정해 악성 스크립트의 실행을 방지할 수 있음입력값 검증 : 사용자 입력에 대해 엄격한 검증과 인코딩을 수행하여, 스..
