dev-hpk 님의 블로그

목차 1. Vite 2. React 3. TypeScript 4. Vite + React + TypeScript 장점추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. ViteVite는 최근 많은 개발자들 사이에서 주목받고 있는 빌드 도구입니다. 기존의 Webpack을 대체하는 대안으로, 빠른 빌드 속도와 개선된 개발 환경을 제공합니다. Vite를 선택한 이유는 다음과 같습니다.빠른 개발 서버 : Vite는 코드 변경 시 전체 프로젝트를 다시 빌드하는 대신, HMR( 핫 모듈 리플레이스먼트)를 통해 변경된 부분만 빠르게 업데이트하기 때문에 개발 서버가 매우 빠릅니다. 이로 인해 개발 중에 빠른 피드백을 받을 수 있어 생산성이 크게 향상됩니다.ES 모듈 기반 : Vite는 ES 모듈을 기반으로 ..

타입스크립트를 사용하다 보면 여러 타입 변환이나 특정 속성만을 추출하고 싶은 상황이 자주 생깁니다. 이때 유용하게 활용할 수 있는 것이 타입스크립트가 제공하는 유틸리티 타입입니다.  목차 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 객체 /** * 서버에..

IntersectionObserver API는 스크롤이나 뷰포트 변화를 감지해 특정 요소가 뷰포트에 진입하거나 떠날 때 콜백 함수를 실행하게 해주는 API입니다. 이를 통해 이미지 지연 로딩, 무한 스크롤, 애니메이션 활성화 등을 효율적으로 처리할 수 있습니다. 목차 1. IntersectionObserver 기본 사용법 2. IntersectionObserver 옵션 3. 주의할 점 4. IntersectionObserver 적용 예시추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. IntersectionObserver 기본 사용법IntersectionObserver는 크게 두 단계로 구성됩니다. 첫 번째로 IntersectionObserver 객체를 생성하고, 두 번째로 해당 객체로 ..

JavaScript에서 Throttle과 Debounce는 이벤트가 반복 실행되지 않도록 조절하는 기술로, 성능 최적화에 자주 사용됩니다. 이 두 개념을 이해하고 상황에 맞게 활용하면 브라우저 성능과 사용자 경험을 크게 개선할 수 있습니다. 목차 1. Throttle (쓰로틀) 2. Debounce (디바운스)추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. ThrottleThrottle은 이벤트를 일정 주기로 실행하도록 제한합니다. 특정 시간 간격마다 한 번씩만 함수가 실행되므로, 이벤트가 자주 발생해도 일정 주기마다 함수가 실행됩니다. 예를 들어, scroll 이벤트나 resize 이벤트에 사용하면 브라우저가 과부하되지 않도록 돕습니다._.throttle(콜백함수, 시간) 사용 예시: 스..

1. 폴더 구조역할별로 base, components, helpers, pages로 폴더를 구분했습니다. style.scss 파일을 제외한 나머지 scss 파일들은 css로 컴파일 하지 않기 위해서 _name.scss 형식으로 생성했습니다. @use : 각 폴더의 namespace를 사용하여 폴더에 있는 _index.scss를 불러옵니다. 최종적으로 모든 scss를 style.css로 컴파일 하기 위해 style.scss를 작성했습니다.// style.scss@use "base";@use "helpers";@use "components";@use "pages"; @forward : 폴더별 _index.scss 파일에 @forward로 scss 파일을 모아서, 다른 곳에서 쓸 수 있도록 했습니다.// ba..

React에서 컴포넌트가 리렌더링 될 때, 성능 최적화를 위해 때때로 계산이 많이 필요한 값이나 함수의 결과를 캐싱할 필요가 있습니다. 이때 useMemo 훅을 사용하면 불필요한 연산을 방지하여 성능을 개선할 수 있습니다.  목차 1. useMemo란? 2. useMemo 사용법 3. useMemo 의존성 배열 4. useMemo 사용 주의사항 추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. useMemo란? useMemo는 특정 계산의 결과를 메모이제이션하여, React가 불필요하게 해당 계산을 다시 실행하지 않도록 도와주는 훅입니다. useMemo는 컴포넌트가 리렌더링 될 때마다 실행되는 비싼 연산을 피하고자 할 때 사용됩니다. React는 해당 값이 바뀌지 않으면 이전에 계산된 값..

React는 컴포넌트 기반의 UI 라이브러리로, 각 컴포넌트가 화면에 렌더링 되고 업데이트되는 흐름을 이해하는 것이 중요합니다. 이 흐름을 React에서는 생명 주기(Lifecycle) 라고 부르며, 각 단계에서 컴포넌트가 수행하는 특정 작업들이 있습니다.  목차 1. React 생명 주기란? 2. Mounting (컴포넌트 생성) 3. Updating (컴포넌트 업데이트) 4. Unmounting (컴포넌트 제거) 추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다.1. React 생명 주기란?React 생명 주기는 컴포넌트가 생성(Mounting), 업데이트(Updating), 제거(Unmounting) 되는 일련의 과정을 의미합니다. 컴포넌트는 이 세 가지 단계에서 각각의 메서드들을 호출하며, ..