ji-frontdev

1. HOC란 무엇인가?**Higher-Order Component(HOC)**는 “컴포넌트를 인자로 받아서 새로운 컴포넌트를 반환하는 함수” 즉, 하나의 컴포넌트를 감싸 공통된 로직이나 기능을 주입하는 패턴이다. function withFeature(WrappedComponent: React.ComponentType) { return function EnhancedComponent(props: P) { // 공통 로직 return ; };}​ 2. HOC 패턴의 역사와 등장 배경🕰️ 언제 등장했나?**React Hooks가 등장하기 전 (React 16.8 이전)**에 유일한 로직 재사용 방식이었다.React 공식 문서에서도 권장되던 방식.🤔 왜 등장했나?공통 기능 (로딩, 인증, 로..

📌 에러 원인:allowImportingTsExtensions 옵션은 TypeScript가 .ts 또는 .tsx 확장자를 명시적으로 import하는 것을 허용하는 기능입니다. import { something } from './utils.ts'; 이런 식의 import를 허용하려면 TypeScript가 실제로 JavaScript 파일을 emit하지 않는 설정이어야 합니다. 그렇지 않으면 문제가 발생할 수 있기 때문이에요.그래서 이 옵션을 사용하려면 아래 중 하나를 설정해야 합니다:"noEmit": true👉 TypeScript가 아무 파일도 출력하지 않음"emitDeclarationOnly": true👉 타입 정의 파일(.d.ts)만 출력함✅ 해결 방법:방법 1. noEmit 설정 추가하기 (가장 ..

TypeScript에서 객체의 타입을 정의할 때는 interface와 type 두 가지를 사용할 수 있습니다. 이 둘은 비슷한 역할을 하지만, 세부적인 차이와 적합한 사용 사례를 이해하면 더 효과적으로 코드를 작성할 수 있습니다. 아래에서는 interface와 type의 차이를 전문적으로 분석하고, 사용 시 고려해야 할 점을 정리해보겠습니다.1. 기본적인 정의와 공통점interface와 type은 모두 TypeScript에서 객체, 함수, 배열, 클래스 등의 타입을 정의하는 데 사용됩니다. 다음은 두 방식의 공통점입니다.공통점객체 형태를 정의할 수 있다.선택적 속성, 읽기 전용 속성 등을 지원한다.함수 타입을 정의할 수 있다. // 공통적으로 지원하는 기능interface ExampleInterface ..

Next.js는 다양한 렌더링 방식을 지원하여 SEO, 성능, 사용자 경험을 최적화할 수 있습니다. 이 글에서는 최신 Next.js 13 버전을 기준으로 SSR(서버 사이드 렌더링), SSG(정적 사이트 생성), CSR(클라이언트 사이드 렌더링)의 개념과 사용 시 유의사항을 알아보겠습니다.목차SSR(서버 사이드 렌더링)SSG(정적 사이트 생성)CSR(클라이언트 사이드 렌더링)Next.js에서의 렌더링 방식 선택 기준1. SSR(서버 사이드 렌더링)SSR(Server Side Rendering)은 페이지 요청이 있을 때 서버에서 HTML을 생성하여 클라이언트로 전달하는 방식입니다. 사용자가 페이지에 접속할 때마다 서버에서 HTML을 렌더링하므로 사용자에게 최신 데이터를 제공하는 데 유리합니다.장점SEO에 ..