dev-hpk 님의 블로그

Next.js에서 라우팅은 주로 파일 기반 라우팅 시스템을 통해 이루어지며, 이는 다른 프레임워크들과 비교해 매우 직관적이고 효율적입니다. 목차   1. 파일 기반 라우팅 2. 동적 라우팅 3. 동적 경로 라우팅 4. Link 컴포넌트를 통한 라우팅5. useRouter 훅을 사용한 프로그래밍 방식 라우팅위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. 파일 기반 라우팅Next.js의 가장 큰 특징 중 하나는 파일 기반 라우팅입니다. 페이지를 라우팅 하려면 단순히 pages 폴더 안에 파일을 생성하는 것만으로 새로운 경로가 자동으로 생성됩니다.위와 같은 방식으로, pages 폴더에 파일을 추가하면 Next.js가 자동으로 해당 파일을 라우트로 매핑해 줍니다.라우터는 중첩 파일을 지원합니다. 중첩 ..

Next.js는 React 기반의 오픈소스 웹 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 클라이언트 사이드 렌더링(CSR) 등 다양한 렌더링 방식을 지원하며, 현대적인 웹 애플리케이션을 쉽고 빠르게 개발할 수 있도록 설계되었습니다. 목차 1. Next.js 특징 2. Next.js 설치 및 프로젝트 생성 3. Next.js 실행 4. Next.js 폴더 구조추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. Next.js 특징1. 서버 사이드 렌더링 (SSR)Next.js는 서버에서 HTML을 렌더링 하여 클라이언트로 보내는 SSR을 지원합니다. 이를 통해 SEO(검색 엔진 최적화)에 유리하며, 초기 로딩 속도가 향상됩니다.2. 정적 사이트 생성 (SSG)정적 사..

React로 컴포넌트를 만들다 보면 디자인이 바뀌어 컴포넌트를 재사용할 수 없거나, 처음 계획가 달리 컴포넌트의 구조가 복잡해지는 경우가 있습니다. 이로 인해 코드의 가독성이 떨어지거나 새로운 컴포넌트를 만들게 됩니다. 컴파운드 컴포넌트 패턴(Compound Components Pattern)를 사용하면 이와 같은 문제를 해결할 수 있습니다. 목차 1. Compound Component Pattern? 2. 주요 개념 3. 예제 및 문제점 4. Compound Component Pattern 적용 예시 5. Compound Component Pattern 사용 예시위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. Compound Component Pattern?Compound Component P..

any 타입은 TypeScript에서 가장 강력하면서도 동시에 논란이 많은 타입 중 하나입니다. 편리할 수 있지만, 잘못 사용하면 코드의 안정성과 가독성을 크게 떨어뜨릴 수 있습니다. any 타입의 역할과 왜 최대한 사용을 지양해야 하는지에 대해 알아보겠습니다. 목차 1. any 타입이란? 2. any 타입의 장점 3. any 타입 사용해도 될까? 4. any 타입 대체하는 방법추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. any 타입이란?any는 TypeScript의 최상위 super(모든 것을 허용하는) 타입입니다. 변수를 any 타입으로 지정하면 그 변수는 모든 타입을 허용하고, 타입 검사를 건너뛰기 때문에 자바스크립트와 동일하게 작동하게 됩니다. 이는 TypeScript가 엄격한 ..

구성 요소를 재사용 가능하게 만드는 방법은 render prop 패턴을 사용하는 것입니다. render prop은 JSX 요소를 반환하는 함수입니다. 컴포넌트 자체는 render prop 외에는 아무것도 렌더링 하지 않습니다. 대신 컴포넌트는 자체 렌더링 로직을 구현하는 대신 render prop을 호출하기만 합니다. 1. Render Prop VS Children PropChildren Prop 사용Render Prop 사용 Redner Prop을 직접 사용해보니 더 의문이 생긴다. children과 구조나 결가에서 큰 차이가 없는 것 같은데, 왜 Render Prop을 사용해야 할까? 2. Render Prop과 Children Prop의 값(데이터) 처리Render Prop의 인자로 값(데이터)을 ..

타입스크립트(TypeScript)는 정적 타입 시스템을 통해 코드의 안전성을 높이고, 버그를 줄이는 데 유용한 언어입니다. 그중에서도 타입 추론과 타입 단언은 TypeScript의 강력한 기능입니다. 목차 1. 타입 추론 (Type Inference) 2. 타입 단언 (Type Assertion) 3. 타입 추론과 단언의 차이 4. 타입 추론과 단언 혼합 사용추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. 타입 추론  (Type Inference)타입 추론은 변수나 함수의 타입을 명시적으로 지정하지 않아도, TypeScript가 자동으로 타입을 결정하는 기능입니다. TypeScript는 코드 작성 시에 데이터의 초기 값을 기반으로 타입을 추론해 변수의 타입을 설정합니다. 이 기능 덕분에..

타입스크립트를 사용하다 보면 여러 타입 변환이나 특정 속성만을 추출하고 싶은 상황이 자주 생깁니다. 이때 유용하게 활용할 수 있는 것이 타입스크립트가 제공하는 유틸리티 타입입니다.  목차 1. Record 타입 2. Pick 타입 3. Partial 타입 4. Omit 타입 5. Readonly 타입 6. Required 타입추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. Record 타입Record 타입은 키(key)와 값(value)의 타입을 정의하여 객체 타입을 생성할 때 사용됩니다. 특정 키에 해당하는 값 타입을 일괄적으로 설정하고 싶을 때 유용합니다.Record// Keys: 객체의 키 타입을 지정 (key의 union 타입도 가능)// Type: 객체 값의 타입을 지정type U..

TypeScript는 JavaScript에 타입을 추가한 언어로, 코드의 오류를 줄이고 유지보수를 쉽게 해 줍니다. 이번 포스팅에서는 TypeScript의 주요 기능을 중심으로 기초 문법을 함께 다뤄보겠습니다. 목차 1. 타입 지정 2. 함수의 타입 3. 인터페이스 (Interface) 4. 제네릭 (Generics)추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. 타입 지정TypeScript의 기본 기능 중 하나는 타입을 지정하는 것입니다. 변수, 함수의 매개변수, 반환 값 등에 타입을 지정할 수 있어 코드의 가독성을 높이고 오류를 줄입니다.const name: string = "Kim";const age: number = 20;const isAdult: boolean = true; 타입..

TypeScript는 JavaScript를 기반으로 타입 안정성을 강화한 언어로, 규모가 큰 애플리케이션에서 발생할 수 있는 오류를 줄이고 코드 유지보수를 쉽게 만들어줍니다.  목차 1. TypeScript란? 2. TypeScript 설치 3. TypeScript 파일 작성 및 컴파일 4. TypeScript 설정 파일: tsconfig.json추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. TypeScript란?TypeScript는 Microsoft에서 개발한 오픈 소스 프로그래밍 언어로, 정적 타입을 지원합니다. TypeScript의 주요 장점은 코드의 가독성과 유지 보수성을 높여 주며, 컴파일 과정에서 오류를 미리 확인할 수 있다는 점입니다. JavaScript 코드와 호환되며, 컴..

throttle과 IntersectionObserver API를 활용하여 Infinity Scroll을 라이브러리 없이 구현했습니다. 직접 구현하면서 여러 모듈을 조합하여 성능을 최적화하고, 부드럽게 데이터를 로드하기 위해 상당한 고민이 필요했습니다. 특히 throttle로 스크롤 이벤트를 제어하고, IntersectionObserver로 뷰포트 내 요소가 감지될 때만 데이터를 추가 요청하도록 구성한 부분이 핵심이었습니다. 1. IntersectionObserver 적용 Infinity Scroll 구현...function ScrollComponent() { ...생략 const endRef = useRef(null); // Infinite Scroll 구현을 위한 Ref 객체 /** * 서버에..