구버전
-
[React] ErrorBuondary의 사용방법구버전/React 2024. 5. 21. 23:23
개요1. Error Boundary란? ✅ Error Boundary란? 📦 Error BoundaryReact는 어플리케이션 렌더링 과정에서 에러가 발생하면 화면에서 해당 UI를 제거하게 되어 전체 앱이 중단되는 현상이 발생하게 된다. 이러한 현상을 막기위해 새롭게 React 16에서 도입된 기능이 Errorbuondary이다. Errorboundary는 하위요소의 렌더링 중에 throw된 error를 catch하도록 동작하며 오류가 발생한 요소 대신 대체 UI를 표시하게끔 해준다. 하지만 포착하지 못하는 오류도 있어 기본적으로 널리 사용되지는 않는다.포착하지 않는 오류: 이벤트 핸들러, 비동기 코드, 서버 측 렌더링, Errorboundary 자체에서 발생하는 오류(자식요소 X)Life cycle..
-
[AWS] FrontEnd 배포 실습 (S3 + CloudFront)구버전/AWS 2024. 5. 8. 18:15
개요1. AWS IAM 설정2. S3 생성 및 설정3. CloudFront 설정4. Github Action으로 CI / CD 구축 ✅ AWS IAM 설정📦 IAM(Identity and Access Management)이란?AWS리소스에 대한 엑세스를 안전하게 제어할 수 있는 웹 서비스로 AWS 계정을 최초로 생성할 때 만들어지는 루트 사용자는 모든 엑세스 권한을 가지기에 보안에 주의해서 사용해야하므로 IAM을 통해 리소스를 사용할 수 있는 인증 및 권한 부여된 대상을 제어한다.리소스에 대해 여러 사람에게 다양한 권한을 부여할 수 있다.사용자에게 직접 정책을 설정할 수도 있지만 그룹에 대해서도 부여할 수 있다. 📦 IAM 사용자 추가하기AWS > IAM > 사용자 생성 > 1 ~3단계 수행 > 생성..
-
[CS Study] INP란 무엇인가?구버전/CS Study 2024. 5. 1. 15:05
개요INP의 정의크롬 개발자 도구를 통한 INP 개선 방법 응답성(페이지가 인터렉션에 얼마나 빠르게 응답하는지)은 사용자에게 매우 중요하다. ✅ INP의 정의📦 INP (Interaction to Next Paint)다음 페이지와의 상호작용이라는 의미의 INP는 반응성을 평가하는 실험 지표로써 페이지에서 발생하는 모든 상호작용을 측정하여 페이지의 전반적인 응답성을 측정하며 이를 통해 시간을 최소화하는 것이 목표이다.INP는 페이지 수명동안의 모든 상호작용 요소를 관찰하고 가장 긴 응답 시간(지연 시간)이 가진 것을 보고한다.INP가 낮으면 페이지의 대다수의 상호작용이 대부분 빠르게 반응한다 -> 좋은 응답성을 가진다. 🎉 지연 시간이란?더보기단일 상호작용의 지연 시간은 상호작용의 일부인 어떠한 이벤..
-
[Typescript] Generic과 forwardRef구버전/TypeScript 2024. 4. 16. 11:29
개요 1. 제네릭함수와 forwardRef의 문제점 2. 해결 방안 ✅ 제네릭함수와 forwardRef의 문제점 📦 기본적인 예제 (Table) const Table = (props: { data: T[]; renderRow: (row: T) => React.ReactNode; }) => { return ( {props.data.map((item, index) => ( ))} ); }; 위 예제는 간단히 제네릭함수를 통해서 구현된 Table이다. 현재 Table 컴포넌트를 사용하는 것을 통해서 어떻게 추론이 되는지 알아보겠습니다. { (parameter) row: string return {row}; }} />; 여기서 알 수 있듯이 data로 전달된 Array형태에서 타입이 추론이 되고, 그 추론된 타..